/* ==========================================================================
   jmt_theme.css — 제천운수 ERP 공통 테마
   출처: seongnam_mobilhi seoulsoft/static/css/my_css.css + curator_theme.css
   (운영평가 카드·Tabulator·메모 등 jmt에 없는 화면 전용 섹션 제외)
   seongnam 표 클래스(.my_table_data / .my_table_input)에 대응하는 jmt 클래스
   (.hu_table / .hu_table_input / .hu_table_show)에도 같은 규칙을 적용한다.
   jmt 전용 보정은 jmt_theme_overrides.css 에 둔다.
   ========================================================================== */
/* ==========================================================================
   1. Fonts
   — Apple SD Gothic Neo 웹폰트(CDN 1.2MB×다수 굵기)는 제거: 맥은 시스템 내장이라 불필요,
     윈도우는 NanumSquare_ac + 시스템 폴백으로 충분. 첫 로딩 3.6MB/11초 유발 주범이었음(2026-09-02).
   ========================================================================== */
@font-face {
    font-family: 'Pretendard-ExtraLight';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

/* NanumSquare_ac (완성형 전체 글자 지원 / weights: 300·400·700·800) — 공항버스(airport)와 동일 폰트 */
@font-face {
    font-family: 'NanumSquare_ac';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcL.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcL.woff') format('woff');
}
@font-face {
    font-family: 'NanumSquare_ac';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcR.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcR.woff') format('woff');
}
@font-face {
    font-family: 'NanumSquare_ac';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcB.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcB.woff') format('woff');
}
@font-face {
    font-family: 'NanumSquare_ac';
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcEB.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@master/NanumSquareAcEB.woff') format('woff');
}

/* ==========================================================================
   2. Global
   ========================================================================== */
body {
    font-family: 'NanumSquare_ac', 'Apple SD Gothic Neo', Roboto, 'Roboto', sans-serif;
    white-space: nowrap;
    user-select:none;
    margin: 0;
}

/* 전역 user-select:none 예외 — 테이블 데이터는 드래그 복사 허용 */
table,
.tabulator-cell {
    user-select: text;
}

/* 목록 상자 끌어서 스크롤(my_js.js 끝부분) — 끄는 동안은 글자 선택 강조가 뜨지 않게 하고 손 모양 커서.
   Ctrl/Shift 를 누른 채 끌면 스크립트가 개입하지 않아 예전처럼 글자 선택(복사)이 된다. */
.emp-list-scroll, .drag-scroll { cursor: default; }
.emp-list-scroll.is-drag-scrolling, .drag-scroll.is-drag-scrolling { cursor: grabbing; }
.is-drag-scrolling, .is-drag-scrolling table, .is-drag-scrolling-body { user-select: none !important; }
/* 스크롤이 멈추면 행 경계에 맞춘다 — 머리글 밑에 잘린 행의 윗부분 2~3px 이 가는 선처럼 남는 것을 없앤다.
   머리글이 상자 안에 sticky 로 있으면 my_js.js 가 scroll-padding-top 을 머리글 높이로 맞춘다. */
.emp-list-scroll, .drag-scroll { scroll-snap-type: y proximity; }
/* 스크롤 상자 안의 표는 셀 테두리를 각 셀이 갖게(separate). 테마의 collapse 강제 상태에서는 크롬이 sticky 머리글의 테두리를
   셀과 같이 고정하지 못해 스크롤하면 머리글 옆·아래에 테두리 조각이 짧은 선처럼 남았다(2026-09-29 캡처). */
.emp-list-scroll .my_table_data,
.drag-scroll .my_table_data,
.emp-list-scroll .hu_table,
.drag-scroll .hu_table { border-collapse: separate !important; border-spacing: 0 !important; }
.emp-list-scroll .my_table_data thead th,
.drag-scroll .my_table_data thead th,
.emp-list-scroll .hu_table thead th,
.drag-scroll .hu_table thead th { background-clip: padding-box; }
/* 목록 상자 스크롤 막대(문의 38): 테마 얇은 막대 대신 12px 코랄 손잡이, 트랙·버튼 없음.
   크롬은 scrollbar-width/color 가 auto 일 때만 ::-webkit-scrollbar 를 따르므로 테마의 thin 을 되돌린다.
   주의: 크롬 121+ 도 scrollbar-color 를 지원하므로 파이어폭스용 scrollbar-color 는 @supports(scrollbar-color) 로 주면 안 된다
   (크롬이 그쪽을 택해 ::-webkit 꾸밈을 전부 무시 → 기본 폭 막대에 삼각형 버튼이 그려졌다, 2026-09-29). */
.emp-list-scroll, .drag-scroll { scrollbar-width: auto; scrollbar-color: auto; }
.emp-list-scroll::-webkit-scrollbar, .drag-scroll::-webkit-scrollbar { width: 16px; height: 16px; }   /* 막대 손잡이가 너무 가늘어 안 보인다는 지적(9/30) — 12→16 */
.emp-list-scroll::-webkit-scrollbar-track, .drag-scroll::-webkit-scrollbar-track { background: transparent; }
.emp-list-scroll::-webkit-scrollbar-thumb, .drag-scroll::-webkit-scrollbar-thumb {
    background: var(--co-error, #fe8b70); border-radius: 8px; border: 2px solid transparent; background-clip: content-box;
    min-height: 40px; }   /* 사원 1,800명처럼 긴 목록이면 손잡이가 점만 해진다 — 최소 길이 */
.emp-list-scroll::-webkit-scrollbar-thumb:hover, .drag-scroll::-webkit-scrollbar-thumb:hover { background: #e8704f; background-clip: content-box; }
.emp-list-scroll::-webkit-scrollbar-button, .drag-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* 막대 색만 테마 기본색(회색)으로 — 가로·세로 모두(.bar-plain). 코랄 막대는 요청받은 화면(사원목록 등)에만 쓰고,
   끌어서 스크롤·행 맞춤만 필요한 화면(장애인조회)은 이 클래스를 같이 붙인다. */
.emp-list-scroll.bar-plain::-webkit-scrollbar-thumb { background: #b9b5aa; background-clip: content-box; }
.emp-list-scroll.bar-plain::-webkit-scrollbar-thumb:hover { background: #8f8b80; background-clip: content-box; }
/* 장애인조회 명부 — 눌러 고른 줄(표 위 [삭제]의 대상). 다른 목록의 선택 색(tr_active)과 같은 색 */
#disabled_roster_table tbody tr.roster-selected > td { background-color: rgb(123, 192, 255) !important; }
@supports (-moz-appearance: none) {   /* 파이어폭스만 참 — 표준 속성으로 같은 색 */
    .emp-list-scroll, .drag-scroll { scrollbar-width: auto; scrollbar-color: var(--co-error, #fe8b70) transparent; }
    .emp-list-scroll.bar-plain { scrollbar-color: #b9b5aa transparent; }
}
/* 고정(sticky) 머리글의 둥근 모서리(14px) 바깥 쐐기로 스크롤되는 본문 셀이 가는 선처럼 비쳤다(양쪽). 크롬은 thead/tr 배경을
   셀 안에서만 칠하므로 thead 에 배경을 줘도 쐐기는 안 덮인다 → 머리글 첫 줄의 첫·끝 칸 모서리에 화면 바탕색 조각(원형 그라디언트로
   둥근 모서리 바깥만 칠함)을 얹는다. 모서리는 둥근 그대로. 맨 위(0)에서는 바탕색과 같아 보이지 않는다. */
.emp-list-scroll .my_table_data thead tr:first-child > :first-child,
.emp-list-scroll .my_table_data thead tr:first-child > :last-child,
.drag-scroll .my_table_data thead tr:first-child > :first-child,
.drag-scroll .my_table_data thead tr:first-child > :last-child,
.emp-list-scroll .hu_table thead tr:first-child > :first-child,
.emp-list-scroll .hu_table thead tr:first-child > :last-child,
.drag-scroll .hu_table thead tr:first-child > :first-child,
.drag-scroll .hu_table thead tr:first-child > :last-child { position: relative; overflow: visible; }   /* overflow:hidden 이면 둥근 모서리가 가림 조각까지 잘라낸다 */
.emp-list-scroll .my_table_data thead tr:first-child > :first-child::before,
.drag-scroll .my_table_data thead tr:first-child > :first-child::before,
.emp-list-scroll .hu_table thead tr:first-child > :first-child::before,
.drag-scroll .hu_table thead tr:first-child > :first-child::before {
    content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; pointer-events: none;
    background: radial-gradient(circle at 100% 100%, transparent 13px, var(--co-surface, #fffbff) 14px);
}
.emp-list-scroll .my_table_data thead tr:first-child > :last-child::after,
.drag-scroll .my_table_data thead tr:first-child > :last-child::after,
.emp-list-scroll .hu_table thead tr:first-child > :last-child::after,
.drag-scroll .hu_table thead tr:first-child > :last-child::after {
    content: ''; position: absolute; right: 0; top: 0; width: 14px; height: 14px; pointer-events: none;
    background: radial-gradient(circle at 0% 100%, transparent 13px, var(--co-surface, #fffbff) 14px);
}
/* 표 자체의 1px 옆 테두리는 sticky 머리글의 둥근 모서리 옆으로 위까지 이어져 양쪽에 세로선으로 보였다(2026-09-29 캡처 3회).
   표 테두리는 없애고 본문(tbody) 행의 첫·끝 칸에만 옆선을 준다 — 머리글 옆은 비고, 본문 옆선은 그대로. */
.emp-list-scroll .my_table_data,
.drag-scroll .my_table_data,
.emp-list-scroll .hu_table,
.drag-scroll .hu_table { border-left: none !important; border-right: none !important; }
.emp-list-scroll .my_table_data tbody tr > :first-child,
.drag-scroll .my_table_data tbody tr > :first-child,
.emp-list-scroll .hu_table tbody tr > :first-child,
.drag-scroll .hu_table tbody tr > :first-child { border-left: 1px solid #e1e8f0; }
.emp-list-scroll .my_table_data tbody tr > :last-child,
.drag-scroll .my_table_data tbody tr > :last-child,
.emp-list-scroll .hu_table tbody tr > :last-child,
.drag-scroll .hu_table tbody tr > :last-child { border-right: 1px solid #e1e8f0; }
.emp-list-scroll tbody tr, .drag-scroll tbody tr { scroll-snap-align: start; }

/* ==========================================================================
   4. Layout - Content
   ========================================================================== */
#content_load {
    padding: 20px 10px 10px;
}
#modal_loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}
#modal_loading > #spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.my-indicator{
    display:none;
}
.htmx-request .my-indicator{
    display:inline;
}
.htmx-request.my-indicator{
    display:inline;
}
.sub_title {
    border-left: 5px solid black;
    font-weight: 800;
    height: 36px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}
.li_title {
    margin-top: 20px;
    border-left: 5px solid slategray;
    display: flex;
    align-items: center;
    padding-left: 10px;
}
.search_box {
    border-radius: 10px;
    margin: 12px auto auto;
    padding-bottom: 8px;
}
.content_li {
    /*border-radius: 10px;*/
    /*border: 2px solid ghostwhite;*/
    /*padding: 5px;*/
    /*margin-top: 6px;*/
    /*overflow-x: hidden;*/
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 0;
}
.scroll_div {
    position: fixed; /* 화면 전체 기준 */
    top: 247px; /* 예: 헤더 높이만큼 떨어뜨리기 */
    left: 250px;
    right: 10px;
    bottom: 10px;
    overflow-y: auto; /* 내부 스크롤 */

    border: 1px solid #eeeeee;

    overscroll-behavior: contain;   /* ← 또는 none */
}

/* ==========================================================================
   5. SOT (Sticky Overflow Table)
   ========================================================================== */
.sot {
    overflow: auto;
    box-sizing: border-box;
    border: 1px solid #eeeeee;

    position: fixed; /* 화면 전체 기준 */
    top: 247px; /* 예: 헤더 높이만큼 떨어뜨리기 */
    left: 250px;
    right: 10px;
    bottom: 10px;
}

.sot > table {
    table-layout: fixed;
    position: relative;
    border-collapse: separate !important;
    border-spacing: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    border-width: 0;
    overflow: visible;
    background-color: #fff;
}

.sot-table-width-auto > table {
    width: auto !important;
}

.sot-table-width-100px > table {
    width: 100px !important;
}

.sot td, .sot th {
    border: 1px solid #ccc;
}

.sot-top {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #fff;
}

.sot-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.sot-bottom {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: #fff;
}

.sot-right {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: #fff;
}


.sot-top.sot-left,
.sot-bottom.sot-left,
.sot-top.sot-right,
.sot-bottom.sot-right {
    z-index: 3;
}

/* ==========================================================================
   6. Table - my_table_data
   ========================================================================== */
.my_table_data,
.hu_table {
    font-size: 13px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    /*margin-top: 1rem;*/
    vertical-align: middle;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid #e1e8f0;
    border-radius: 6px;
    overflow: hidden;
    user-select: text;
}

.my_table_data th,
.my_table_data td,
.hu_table th,
.hu_table td {
    border-bottom: 1px solid #e8edf5;
    border-right: 1px solid #e8edf5;
    height: 35px;
    padding: 0 15px;
    text-overflow: ellipsis;
    max-width: 160px;
    overflow: hidden;
}

.my_table_data th:last-child,
.my_table_data td:last-child,
.hu_table th:last-child,
.hu_table td:last-child {
    border-right: none;
}

.my_table_data tr:last-child td,
.hu_table tr:last-child td {
    border-bottom: none;
}

.my_table_data tbody,
.hu_table tbody {
    vertical-align: inherit;
}

.my_table_data th,
.hu_table th {
    background: linear-gradient(to bottom, #f7f9fc 0%, #f1f1f6 100%);
    color: #6b7280;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.my_table_data tbody tr,
.hu_table tbody tr {
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.my_table_data tbody tr:nth-child(even),
.hu_table tbody tr:nth-child(even) {
    background-color: #fafbfd;
}

.my_table_data.tr_hover tbody tr:hover,
.hu_table.hu_table_hover tbody tr:hover {
    background-color: #f0f4f9;
    cursor: pointer;
}

.my_table_data td,
.hu_table td {
    color: #374151;
}

/* ==========================================================================
   7. Table - my_table_data_no_child
   ========================================================================== */
.my_table_data_no_child {
    font-size: 13px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
    margin-top: 1rem;
    vertical-align: middle;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid #e1e8f0;
    border-radius: 6px;
    overflow: hidden;
    user-select: text;
}

.my_table_data_no_child th,
.my_table_data_no_child td {
    border-bottom: 1px solid #e8edf5;
    border-right: 1px solid #e8edf5;
    height: 35px;
    padding: 0 15px;
    text-overflow: ellipsis;
    max-width: 160px;
    overflow: hidden;
}

.my_table_data_no_child th:last-child,
.my_table_data_no_child td:last-child {
    border-right: none;
}

.my_table_data_no_child tr:last-child td {
    border-bottom: none;
}

.my_table_data_no_child tbody {
    vertical-align: inherit;
}

.my_table_data_no_child th {
    background: linear-gradient(to bottom, #f7f9fc 0%, #f1f1f6 100%);
    color: #6b7280;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.my_table_data_no_child tbody tr {
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.my_table_data_no_child tbody tr:nth-child(even) {
    background-color: #fafbfd;
}

.my_table_data_no_child.tr_hover tbody tr:hover {
    background-color: #f0f4f9;
    cursor: pointer;
}

.my_table_data_no_child td {
    color: #374151;
}

/* ==========================================================================
   8. Table - my_table_input / table_main
   ========================================================================== */
.my_table_input,
.hu_table_input,
.hu_table_show {
    font-size: 13px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 1rem;
    vertical-align: middle;
    border-spacing: 0;
    border-collapse: separate;
    border: 1px solid #e1e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.my_table_input th,
.my_table_input td,
.hu_table_input th,
.hu_table_show th,
.hu_table_input td,
.hu_table_show td {
    border-bottom: 1px solid #e8edf5;
    border-right: 1px solid #e8edf5;
    height: 35px;
    padding: 0 3px;
}

.my_table_input th:last-child,
.my_table_input td:last-child,
.hu_table_input th:last-child,
.hu_table_show th:last-child,
.hu_table_input td:last-child,
.hu_table_show td:last-child {
    border-right: none;
}

.my_table_input tr:last-child td,
.hu_table_input tr:last-child td,
.hu_table_show tr:last-child td {
    border-bottom: none;
}

.my_table_input th,
.hu_table_input th,
.hu_table_show th {
    background: linear-gradient(to bottom, #f7f9fc 0%, #f1f1f6 100%);
    color: #6b7280;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.my_table_input tbody tr,
.hu_table_input tbody tr,
.hu_table_show tbody tr {
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.my_table_input tbody tr:nth-child(even),
.hu_table_input tbody tr:nth-child(even),
.hu_table_show tbody tr:nth-child(even) {
    background-color: #fafbfd;
}

.my_table_input tbody tr:hover,
.hu_table_input tbody tr:hover,
.hu_table_show tbody tr:hover {
    background-color: #f0f4f9;
}

.my_table_input td,
.hu_table_input td,
.hu_table_show td {
    color: #374151;
}

/* table_main 스타일을 마지막에 배치하여 우선순위 확보 */
.my_table_data th.table_main,
.hu_table th.table_main {
    text-align: start;
    background: linear-gradient(170deg, #172852 0%, #294ca1 100%);
    color: #FFFFFF;
    padding-left: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.my_table_data_no_child th.table_main {
    text-align: start;
    background: linear-gradient(170deg, #172852 0%, #294ca1 100%);
    color: #FFFFFF;
    padding-left: 10px;
    font-size: 14px;
    box-sizing: border-box;
}

.my_table_input th.table_main,
.hu_table_input th.table_main,
.hu_table_show th.table_main {
    text-align: start;
    background: linear-gradient(170deg, #172852 0%, #25428d 100%);
    color: #FFFFFF;
    padding-left: 10px;
    font-size: 14px;
    box-sizing: border-box;
    height: 31px;
    min-height: 31px;
}

/* ==========================================================================
   9. Table - Utilities
   ========================================================================== */
.col_min {
    min-width: 130px !important;
}
.cell_hover {
    cursor: pointer;
}
.cell_hover:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}
.cell_hover_none {
    cursor: default !important;
}
.page_active {
    color: #6c757d;
    background-color: #eeeeee;
}

.col_min_hundred {
    min-width: 100px !important;
}

#tab_load {
    margin-top: 12px;
}

/* ==========================================================================
   10. Form / Input
   ========================================================================== */
.readonly_text {
    border: 1px solid gainsboro !important;
    height: 30px !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-weight: 400 !important;
    background-color: #f2f4f7;
}

.select2-selection--single {
    height: 100% !important;
    border: 1px solid #ced4da !important;
}

.select2-selection__arrow {
    display: none !important;
}

.data_active {
    background-color: darkgray;
}

/* ==========================================================================
   11. Sidebar (Aside)
   ========================================================================== */
#aside::-webkit-scrollbar {display: none;}
#aside {
    width: 240px;
    height: 100%;
    position: fixed;
    padding: 80px 10px 10px 10px;
    top: 0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 4;
    background-color: white;
    box-sizing: border-box;
    border-right: 1px solid #DFE0E1;
}
.aside_btn {
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
    padding-top: 13px;
    padding-bottom: 13px;
    color: gray;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
}
.aside_btn:hover {
    color: black;
    font-weight: bold;
}
.custom_arrow {
    transition: all 0.2s;
    font-size: 18px;
}
.aside_collapse,
.aside_submenu_collapse {
    overflow: hidden;
    max-height: 0;
    transition: all 0.2s;
}
.aside_div {
    background-color: #172852;
    border-radius: 5px;
    padding: 5px;
    max-height: fit-content;
    display: flex;
    flex-flow: column;
}
.aside_a {
    font-size: 14px;
    text-decoration: none;
    padding: 9px 9px 9px 30px;
    box-sizing: border-box;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white; /* 기존 aside_a 스타일이 있다면 포함 */
}
.aside_a:hover {
    border-radius: 5px;
    background-color: #132244;
    font-weight: bold;
    color: white;
}

.aside_b {
    font-size: 14px;
    text-decoration: none;
    padding: 9px 20px 9px 50px;
    box-sizing: border-box;
    margin: 2px;
}
.aside_b:hover {
    border-radius: 5px;
    background-color: #132244;
    font-weight: bold;
    color: white;
}

.aside_submenu_btn {
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
    padding-top: 13px;
    padding-bottom: 13px;
    color: gray;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 30px;
}
.aside_submenu_btn:hover {
    color: black;
    font-weight: bold;
}
/* ==========================================================================
   12. Top Nav Bar
   ========================================================================== */
#base_logo_div {
    height: inherit;
}

#logo_img {
    height: inherit;
    cursor: pointer;
    object-fit: cover;
    transition: transform 0.8s ease;
}

#logo_img:hover {
    transform: scale(1.1);
}

#nav {
    position: fixed;
    top: 0;
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    box-shadow: 0 -5px 10px 0;
    z-index: 30;
}
#nav_right {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-right: 20px;
}
.nav_title {
    color: white;
    margin-left: 10px;
    font-size: 18px;
}
.nav_middle_title {
    color: white;
    margin-left: 10px;
    font-size: 16px;
}
#logout_btn {
    width: 70px;
    height: inherit;
    display: flex;
    color: gray;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
#logout_btn:hover {
    color: white;
    background-color: black;
}
#main {
    padding-left: 240px;
    padding-top: 70px;
}
#content_div {
    position: relative;
}

/* ==========================================================================
   13. Utilities
   ========================================================================== */
#popup_load {
    max-width: 1000px;
    max-height: 600px;
}

.custom_icon {
    font-size: 14px;
}
.color_black {
    color: black;
}
.color_white {
    color: white;
}
.color_gray {
    color: lightgray;
}
.cursor_pointer {
    cursor: pointer;
}
.active_false_bg {
    background-color: #f8d7da !important;
}
.min_width_fit {
    min-width: fit-content;
}

.date_border {
    border: 1px solid #767676;
}

/* ==========================================================================
   14. Tabs / Buttons
   ========================================================================== */
.nav-tabs .nav-link {
    background-color: #E9ECEF;
    color: #808080;
}

.nav-tabs .nav-link.active {
    background-color: #172852;
    color: white;
}

.btn_print {
    background-color: #0078D4;
    color: white;
    min-width: 130px;
    border: 0;
    border-radius: 5px;
    padding: 7px;
    font-size: 13px;
}
.btn_print:hover {
    background-color: #004f8c;
}

.btn_post {
    background-color: #00B050;
    color: white;
    min-width: 130px;
    border: 0;
    border-radius: 5px;
    padding: 7px;
    font-size: 13px;
}
.btn_post:hover {
    background-color: #006d33;
}

.add_settings_btn {
    background-color: #F2F4F7;
    border: 0;
    border-radius: 5px;
}

.add_settings_btn:hover {
    background-color: grey;
}

.btn_black {
    background-color: #000000;
    color: white;
    min-width: 130px;
    border: 0;
    border-radius: 5px;
    padding: 7px;
    font-size: 13px;
}
.btn_black:hover {
    background-color: #2f2f2f;
}

.btn_get{
    background-color: darkgray;
    color: white;
    min-width: 130px;
    border: 0;
    border-radius: 5px;
    padding: 7px;
    font-size: 13px;
}
.btn_get:hover {
    background-color: grey;
}

.btn_blue{
    background-color: #002060;
    color: white;
    min-width: 130px;
    border: 0;
    border-radius: 5px;
    padding: 7px;
    font-size: 13px;
}
.btn_blue:hover {
    background-color: #001238;
}

.btn_red{
    background-color: #b90000;
    color: white;
    min-width: 130px;
    border: 0;
    border-radius: 5px;
    padding: 7px;
    font-size: 13px;
}
.btn_red:hover {
    background-color: #800000;
}

.table_fixed {
    table-layout: fixed;
}

.no_change_value {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
}

.form-control {
    appearance: auto;
}

/* ==========================================================================
   15. Background Colors (근태)
   ========================================================================== */
.bg-am {
    background-color: #fff3cc;
}

.bg-pm {
    background-color: #ffdac4;
}

.bg-rest {
    background-color: #ffd6f1;
}

.bg-annual {
    background-color: #C6EFCE;
}

.bg-early {
    background-color: #a5ffb6;
}

.accident_input {
    height: 15px;
    font-size: 13px;
}
.th_sum {
    color: black;
    background-color: white;
    text-align: right;
    padding-right: 10px;

    font-weight: bold;
}

/* ==========================================================================
   조회 표 컬럼 너비 조절 (my_js.js init_col_resizers)
   ========================================================================== */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
}

.col-resize-handle:hover {
    background: rgba(37, 99, 235, 0.28);
}

/* 폭을 조절한 표는 셀 max-width 캡 해제 — 넓힌 만큼 내용이 보이게 (fixed 레이아웃이 폭을 관리) */
table[data-col-resized] th,
table[data-col-resized] td {
    max-width: none;
}


/* 여러 값 선택 드롭다운(select2 .js-multi-check) — ERP 식으로 담백하게:
   선택 칸은 다른 한 줄 칸과 같은 33px·무테, 고른 값은 × 없는 작은 태그(빼는 건 드롭다운에서 체크 해제), 드롭다운 항목 앞은 체크박스 */
.mc-opt { display: inline-flex; align-items: center; gap: 8px; }
.mc-box { width: 14px; height: 14px; flex: 0 0 14px; border: 1.5px solid #b3b0a7; border-radius: 3px; background: #fff; position: relative; }
/* 선택됨 = 클래스(--selected) 또는 값 기준 동기화(mc-checked).
   주의: select2 4.1 의 aria-selected="true" 는 '선택됨'이 아니라 '지금 하이라이트된(마우스 올린) 항목'이다 — 이걸로 체크를 그리면
   체크가 마우스를 따라다니고 실제 고른 항목은 빈 칸으로 보인다(2026-09-29 사용자 지적). */
.select2-results__option--selected .mc-box, .select2-results__option.mc-checked .mc-box {
    background: var(--co-primary, #2d2d2d); border-color: var(--co-primary, #2d2d2d); }
.select2-results__option--selected .mc-box::after, .select2-results__option.mc-checked .mc-box::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mc-dropdown .select2-results__option--selected { background: transparent !important; color: inherit !important; }
.mc-dropdown .select2-results__option--highlighted { background: var(--co-surface-high, #f1eee2) !important; color: inherit !important; }
.mc-dropdown .select2-results > .select2-results__options { max-height: 340px; }   /* 직종 8개가 스크롤 없이 다 보이게 */

.select2-container--default .select2-selection--multiple {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px;
    min-height: 33px !important; height: auto !important; border: none !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important; padding: 3px 3px !important; box-sizing: border-box; cursor: pointer; }
.select2-container--default.select2-container--disabled .select2-selection--multiple { background: transparent !important; cursor: default; }
/* 오른쪽 ▾ — 다른 셀렉트(form-select)와 같은 화살표로 "펼치는 칸"임을 표시 */
.select2-container--default .select2-selection--multiple::after {
    content: ''; flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; align-self: center; opacity: .85;
    background: no-repeat center / 16px 12px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.select2-container--default.select2-container--disabled .select2-selection--multiple::after { opacity: .35; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: contents !important; }   /* 태그(li)들이 선택 칸의 flex 줄에 바로 놓이게 — 검색칸과 같은 줄 */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important; padding: 0 8px !important; height: 22px; line-height: 20px !important; font-size: 12px; color: var(--co-on-surface, #39382f);
    background: var(--co-surface-high, #f1eee2) !important; border: 1px solid #ddd9cc !important; border-radius: 4px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { display: none !important; }
.select2-container--default .select2-selection--multiple .select2-search--inline { flex: 1 1 60px; display: flex; align-items: center; height: 22px; margin: 0 !important; padding: 0 !important; }
.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    width: 100% !important; height: 22px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important;
    font-size: 13px !important; line-height: 22px !important; box-shadow: none !important; resize: none; }
.select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #9a978f; }

/* 조건별 사원내역 — 표 제목줄(th.table_main) 안 오른쪽에 적용 조건 칩과 인원수. 표 위치는 그대로.
   .cond-head 는 sticky(left) 라 표가 가로로 넘쳐도 보이며, 폭은 my_js.js(fit_cond_head)가 스크롤 상자 폭에 맞춘다 */
.cond-head { position: sticky; left: 14px; display: flex; align-items: center; gap: 10px; min-height: 22px; box-sizing: border-box; }
.cond-head__title { flex: 0 0 auto; }
.cond-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.cond-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 4px 0 8px; border-radius: 4px;
    background: rgba(255, 255, 255, .16); color: #fff; white-space: nowrap; }
.cond-chip__label { color: rgba(255, 255, 255, .7); margin-right: 4px; }
.cond-chip__label::after { content: ':'; }
.cond-chip__x { margin-left: 5px; padding: 0 3px; color: rgba(255, 255, 255, .7); cursor: pointer; font-size: 15px; line-height: 1; text-decoration: none; }
.cond-chip__x:hover { color: var(--co-error, #fe8b70); }
.cond-bar__clear { color: rgba(255, 255, 255, .8); text-decoration: underline; cursor: pointer; margin-left: 4px; }
.cond-bar__clear:hover { color: var(--co-error, #fe8b70); }
.cond-head__count { flex: 0 0 auto; margin-left: auto; font-size: 13px; font-weight: 600; }
.cond-bar + .cond-head__count { margin-left: 8px; }

/* 문의게시판 페이지 번호: « ‹ 1 2 3 4 5 › » — 칸 폭을 같게 해 쪽을 옮겨도 자리가 흔들리지 않는다 */
.inq-pagination .page-link { min-width: 36px; text-align: center; padding: 4px 6px; }
.inq-pagination .page-item.disabled .page-link { color: #b8b5ab !important; background: #fff !important; pointer-events: none; }
/* ==========================================================================
   CuratorOS Theme Overlay
   Applies the CuratorOS visual style on top of existing my_css.css.
   Loaded after my_css.css, so rules here override the older sidebar / nav.
   ========================================================================== */

:root {
    --co-bg: #fffbff;
    --co-surface: #fffbff;
    --co-surface-low: #fdf9f1;
    --co-surface: #fffbff;
    --co-surface-high: #f1eee2;
    --co-surface-highest: #ece8db;
    --co-surface-container: #f7f3ea;
    --co-on-surface: #39382f;
    --co-on-variant: #66655a;
    --co-secondary: #6d6354;
    --co-secondary-container: #eee1cd;
    --co-outline: #d7dde6;   /* 입력칸/폼 테두리 — 베이지(#bcb9ad)에서 쿨그레이로 통일 */
    --co-primary: #5f5e5e;
    --co-primary-dim: #535252;
    --co-on-primary: #faf7f6;
    --co-tertiary: #fdc003;
    --co-tertiary-on: #553e00;
    --co-error: #fe8b70;
    --co-error-on: #742410;
    --co-blue: #2563eb;
    --co-blue-soft: #eff4ff;
    --co-slate-50: #f8fafc;
    --co-slate-100: #f1f5f9;
    --co-slate-200: #e2e8f0;
    --co-slate-300: #cbd5e1;
    --co-slate-400: #94a3b8;
    --co-slate-500: #64748b;
    --co-slate-600: #475569;
    --co-slate-700: #334155;
    --co-slate-800: #1e293b;
    --co-slate-900: #0f172a;
    --co-slate-950: #020617;
}

body {
    font-family: 'NanumSquare_ac', 'Apple SD Gothic Neo', Roboto, sans-serif !important;
    background-color: var(--co-bg);
    color: var(--co-on-surface);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
    vertical-align: middle;
}

/* ==========================================================================
   Layout shell — sidebar width / main padding sync
   ========================================================================== */
#aside {
    /* Layout — floating card panel */
    position: fixed !important;
    top: 76px !important;
    left: 12px !important;
    bottom: 40px !important;
    width: 256px !important;
    height: auto !important;
    z-index: 4;

    /* Visual — NO borders, NO shadows, NO outline at all.
       Edges of the sidebar are defined ONLY by the background-color contrast
       between the sidebar and the white-ish body background.
       This makes it physically impossible for the right side to render
       differently from the other 3. */
    /* 워밍 크림 솔리드 (#F1EEE2) — 운영현황 카드 #F7F3EA 보다 한 단계 진함 */
    background: #F1EEE2 !important;
    background-color: #F1EEE2 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    outline: 0 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    background-clip: padding-box !important;

    /* Inner content clipping — no inner element can paint over the rounded edge */
    padding: 16px 14px 16px 14px !important;
    overflow: hidden !important;
}

/* Inner scroll container — only this scrolls; #aside itself never shows a track */
#aside #layout-menu,
#aside .menu-inner,
#aside ul.menu-inner {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
}

/* Force ALL descendant elements of #aside to have transparent background
   so the parent #aside cream color shows through everywhere. */
#aside .aside_accordion,
#aside .aside_collapse,
#aside .aside_submenu_collapse,
#aside .menu-inner-shadow,
#aside aside,
#aside ul,
#aside li,
#aside div:not(.aside_div):not(.aside_a):not(.aside_b):not(.aside_btn) {
    background: transparent !important;
    background-color: transparent !important;
}

/* NUCLEAR scrollbar kill — every descendant of #aside, every browser */
#aside,
#aside * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
#aside::-webkit-scrollbar,
#aside *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}
#aside::-webkit-scrollbar-thumb,
#aside *::-webkit-scrollbar-thumb,
#aside::-webkit-scrollbar-track,
#aside *::-webkit-scrollbar-track,
#aside::-webkit-scrollbar-corner,
#aside *::-webkit-scrollbar-corner {
    background: transparent !important;
    display: none !important;
}
#main {
    padding-left: 280px !important;
    padding-top: 76px !important;
    background: var(--co-bg) !important;
    min-height: 100vh;
    box-sizing: border-box !important;  /* min-height 에 padding 포함 — 매 페이지 76px 상시 스크롤 방지 */
    /* hidden 은 CSS 스펙상 overflow-y 를 auto 로 승격시켜 #main 자체가 세로 스크롤러(외부 이중스크롤)가 됨.
       clip 은 가로만 자르고 스크롤 컨테이너를 만들지 않음 */
    overflow-x: clip !important;
}
/* content_div 의 overflow-x:hidden 제거 — CSS 스펙상 overflow-y 가 auto 로 승격되어
   content_div 자체가 스크롤 컨테이너(이중 '전체 스크롤')가 되는 부작용.
   가로 잘림 방지는 부모 #main(overflow-x:hidden)이 이미 담당 */
#main #content_div { overflow: visible; }

/* Override the legacy body { white-space: nowrap } from my_css.css inside dashboard */
.co-bento-page,
.co-bento-page * { white-space: normal; }
/* Keep ellipsis truncation for items that explicitly need a single line */
.co-profile-name,
.co-profile-sub,
.co-list-meta,
.co-list-title,
.co-info-val,
.co-orb-tag,
.co-orb-mini-tag,
.co-stat-tag,
.co-tag,
.co-pill-tag,
.co-pill-tag-light,
.co-kpi-tile .co-kpi-tag,
.co-op-kpi-tag,
.co-bento-subtitle { white-space: nowrap; }
.co-bento-subtitle { overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   Sidebar (Aside) — CuratorOS look
   ========================================================================== */
#layout-menu {
    width: 100% !important;
    gap: 4px;
}

/* Top-level accordion buttons */
.aside_btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--co-slate-800) !important;
    text-align: left;
    padding: 11px 14px !important;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
}
.aside_btn:hover {
    color: var(--co-blue);
    background: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}
.aside_btn img {
    width: 20px !important;
    height: 20px !important;
    margin-right: 0 !important;
    filter: invert(36%) sepia(8%) saturate(720%) hue-rotate(178deg) brightness(91%) contrast(86%);
    transition: filter 0.18s ease;
}
.aside_btn:hover img {
    filter: invert(31%) sepia(99%) saturate(2106%) hue-rotate(214deg) brightness(96%) contrast(96%);
}
.aside_btn .nav_title {
    color: inherit !important;
    margin-left: 0 !important;
    font-size: 13px;
    font-weight: 700;
}

/* Active accordion (open) — 인라인 style 대신 이 클래스로만 표현(병합 안전).
   배경 #fdc003 / 글자 #553e00 은 기존에 JS가 인라인으로 박던 색과 동일. */
.aside_btn.active_aside_btn,
.aside_btn[aria-expanded="true"] {
    background: #fdc003;
    color: #553e00;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-weight: 700;
    border-radius: 6px;
}
.aside_btn.active_aside_btn img,
.aside_btn[aria-expanded="true"] img {
    filter: invert(31%) sepia(99%) saturate(2106%) hue-rotate(214deg) brightness(96%) contrast(96%);
}

/* Collapse panels */
.aside_collapse,
.aside_submenu_collapse {
    overflow: hidden;
    max-height: 0;
    transition: all 0.22s ease;
}
.aside_div {
    background: transparent !important;
    border-radius: 12px;
    padding: 4px 4px 4px 8px !important;
    display: flex;
    flex-flow: column;
    gap: 2px;
    margin: 2px 0 6px 0;
}

/* First-level menu links inside accordion */
.aside_a {
    font-size: 12.5px;
    text-decoration: none;
    padding: 8px 12px 8px 30px !important;
    margin: 1px 0 !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--co-slate-700) !important;
    font-weight: 700;
    transition: background 0.16s ease, color 0.16s ease;
    position: relative;
}
.aside_a::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--co-slate-300);
    transition: background 0.16s ease, transform 0.16s ease;
}
.aside_a:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--co-blue) !important;
    font-weight: 600;
}
.aside_a:hover::before {
    background: var(--co-blue);
    transform: translateY(-50%) scale(1.3);
}
.aside_a.aside_active {
    background: #fdc003 !important;
    color: #553e00 !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.aside_a.aside_active::before {
    background: var(--co-blue);
}

/* Sub-menu (level 2) buttons */
.aside_submenu_btn {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--co-slate-700);
    text-align: left;
    padding: 8px 12px 8px 14px !important;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 700;
    transition: color 0.16s ease, background 0.16s ease;
}
.aside_submenu_btn:hover {
    color: var(--co-blue);
    background: rgba(255, 255, 255, 0.6);
}
.aside_submenu_btn .nav_middle_title {
    color: inherit !important;
    margin-left: 4px !important;
    font-size: 12.5px;
    font-weight: 700;
}
.aside_submenu_btn .custom_arrow {
    color: var(--co-slate-400) !important;
    font-size: 18px;
    transition: transform 0.2s ease, color 0.16s ease;
}
.aside_submenu_btn:hover .custom_arrow {
    color: var(--co-blue) !important;
}
/* Active sub-menu button — 인라인 style 대신 클래스로 (병합 안전).
   배경 #fdc003 / 글자·화살표 #553e00, 화살표 90° 회전은 기존 인라인과 동일. */
.aside_submenu_btn.active_submenu_btn {
    background: #fdc003;
    color: #553e00;
    border-radius: 10px;
}
.aside_submenu_btn.active_submenu_btn .nav_middle_title {
    color: #553e00 !important;
    font-weight: 700;
}
.aside_submenu_btn.active_submenu_btn .custom_arrow {
    color: #553e00 !important;
    transform: rotate(90deg);
}

/* Sub-menu links (level 2) */
.aside_b {
    font-size: 12.5px;
    text-decoration: none;
    padding: 7px 12px 7px 38px !important;
    margin: 1px 0 !important;
    border-radius: 10px;
    color: var(--co-slate-700) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.16s ease, color 0.16s ease;
}
.aside_b:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--co-blue) !important;
    font-weight: 600;
}
.aside_b.aside_active {
    background: #fdc003 !important;
    color: #553e00 !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* 즐겨찾기 별 아이콘 숨김 — 설정은 메뉴 우클릭 컨텍스트 메뉴로.
   span 자체는 data-is-favorite 상태 저장용으로 DOM에 남겨둠 (applyFavorites/toggleFavorite 재사용) */
#aside .favorite-toggle { display: none; }

/* 메뉴 우클릭 즐겨찾기 컨텍스트 메뉴 */
.favorite-context-menu {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid #DFE0E1;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.15);
    padding: 4px;
}
.favorite-context-menu button {
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--co-slate-800);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.favorite-context-menu button:hover {
    background: #f1f4f9;
    color: var(--co-blue);
}
.favorite-context-menu .fas.fa-star { color: #fdc003; }
/* 사이드바 '즐겨찾기' 제목 옆 ⓘ + hover 안내 팝오버 */
.aside_btn .favorite-help { display: inline-flex; align-items: center; margin-left: 6px; cursor: help; opacity: .7; }
.aside_btn .favorite-help:hover { opacity: 1; }
.aside_btn .favorite-help .material-symbols-outlined { font-size: 16px; line-height: 1; }
.favorite-help-tip { padding: 8px 12px; font-size: 13px; line-height: 1.7; color: var(--co-slate-800); white-space: nowrap; }
.favorite-help-tip .fa-star { color: #fdc003; }

/* Hide old white-on-dark color helper INSIDE the aside */
#aside .color_white { color: inherit !important; }

/* Sidebar scroll — hide scrollbar entirely (no visual line on right edge) */
#aside { scrollbar-width: none; -ms-overflow-style: none; }
#aside::-webkit-scrollbar { width: 0 !important; display: none !important; }
#aside::-webkit-scrollbar-thumb { background: transparent; }
#aside::-webkit-scrollbar-track { background: transparent; }

/* Hide leftover perfect-scrollbar / simplebar rails — these were rendering
   as a darker vertical line on the right edge of the sidebar. */
#aside .ps__rail-x,
#aside .ps__rail-y,
#aside .ps__thumb-x,
#aside .ps__thumb-y,
#aside .simplebar-track,
#aside .simplebar-track.simplebar-vertical,
#aside .simplebar-track.simplebar-horizontal,
#aside .simplebar-scrollbar,
#aside .simplebar-scrollbar::before {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Reset borders / shadows / backgrounds on inner sidebar containers
   and hide their scrollbars, so nothing else can draw a line. */
#aside #layout-menu,
#aside .menu-inner,
#aside .menu-inner-shadow {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
#aside #layout-menu::-webkit-scrollbar,
#aside .menu-inner::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
}
#aside #layout-menu,
#aside .menu-inner {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Brand row at top — inserted by template */
.co-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 10px 8px;
    margin-bottom: 12px;
}
.co-brand-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--co-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.co-brand-icon .material-symbols-outlined { font-size: 22px; }
.co-brand h1 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: var(--co-slate-800);
    line-height: 1.1;
}
.co-brand p {
    font-size: 9px;
    color: var(--co-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    margin: 2px 0 0 0;
}

/* ==========================================================================
   Top Nav Bar — CuratorOS look
   ========================================================================== */
#nav,
body #nav,
nav#nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px !important;
    background-color: #5f5e5e !important;
    background-image:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, 0.14), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, 0.12), transparent 60%) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 20px rgba(57, 56, 47, 0.12) !important;
    padding: 0 24px 0 16px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#base_logo_div {
    margin: 0 !important;
    padding: 0 8px !important;
    height: 64px;
    display: flex;
    align-items: center;
    width: 240px;
}
#logo_img {
    width: auto !important;
    height: 38px !important;
    object-fit: contain !important;
}
#nav_right {
    display: flex !important;
    gap: 10px !important;
    align-items: center;
    margin-right: 0 !important;
}

/* Top-nav action chips */
.username-badge {
    background: var(--co-slate-100) !important;
    color: var(--co-slate-700) !important;
    border: 1px solid var(--co-slate-200) !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}
.inquiry-btn {
    background: var(--co-primary) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(95, 94, 94, 0.18) !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.inquiry-btn:hover {
    background: var(--co-primary-dim) !important;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.28) !important;
    color: #fff !important;
}
.logout-btn {
    background: #ffffff !important;
    color: var(--co-slate-600) !important;
    border: 1px solid var(--co-slate-200) !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.logout-btn:hover {
    background: var(--co-slate-100) !important;
    color: var(--co-slate-800) !important;
    transform: translateY(-1px);
}

/* Memo button (sticky note) — round chip */
.memo-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--co-slate-600) !important;
    border: 1px solid var(--co-slate-200) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.memo-btn:hover {
    background: var(--co-slate-100) !important;
    color: var(--co-blue) !important;
}
.memo-btn .material-icons { font-size: 20px !important; }

/* ==========================================================================
   Dashboard (index) — bento panels
   ========================================================================== */
.co-page {
    padding: 24px 28px 40px 28px;
    max-width: 1600px;
    margin: 0 auto;
}
.co-page-header {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}
.co-page-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--co-on-surface);
    margin: 0 0 6px 0;
}
.co-page-subtitle {
    color: var(--co-on-variant);
    font-size: 13.5px;
    margin: 0;
    max-width: 560px;
}

/* Glass / lift panels reused by index cards */
.co-panel {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 20px;
    box-shadow:
        0 16px 32px rgba(57, 56, 47, 0.06),
        0 6px 12px rgba(57, 56, 47, 0.04);
    padding: 22px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.co-panel:hover {
    transform: translateY(-1px);
    box-shadow:
        0 20px 40px rgba(57, 56, 47, 0.08),
        0 10px 16px rgba(57, 56, 47, 0.05);
}

.co-panel-dark {
    background: var(--co-primary);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 18px 40px rgba(95, 94, 94, 0.18);
}
.co-panel-dark .text-muted { color: rgba(255, 255, 255, 0.65) !important; }

/* Override Bootstrap card inside dashboard — make it glassy */
#tab_list_load .card,
#carouselExample .card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 18px !important;
    box-shadow:
        0 14px 28px rgba(57, 56, 47, 0.06),
        0 6px 10px rgba(57, 56, 47, 0.04) !important;
}
#tab_list_load .card .card-body { padding: 22px 22px; }
#tab_list_load .card-title {
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    color: var(--co-on-surface);
}

/* KPI tile avatar circle */
#tab_list_load .avatar-xs .avatar-title {
    background: var(--co-secondary-container, #eee1cd) !important;
    color: var(--co-secondary, #6d6354) !important;
    width: 36px !important; height: 36px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
#tab_list_load h4 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.badge.badge-soft-success { background: rgba(34, 197, 94, 0.12) !important; color: #16a34a !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 700; }
.badge.badge-soft-danger  { background: rgba(254, 139, 112, 0.18) !important; color: #b91c1c !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 700; }
.badge.badge-soft-warning { background: rgba(253, 192, 3, 0.2) !important; color: #92400e !important; border-radius: 999px; padding: 4px 10px !important; font-weight: 700; }

/* Tab buttons inside dashboard */
#carouselExample .nav-tabs {
    border: none !important;
    gap: 6px !important;
    padding-left: 6px !important;
}
#carouselExample .nav-tabs .nav-link {
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    background: transparent !important;
    color: var(--co-on-variant) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
#carouselExample .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    color: var(--co-on-surface) !important;
}
#carouselExample .nav-tabs .nav-link.active {
    background: var(--co-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.2);
}

/* Page-level background tint on dashboard */
main#main #content_div { background: transparent; }

/* Smooth select2 widget on dashboard date row
   (#main 2중 id 로 specificity 확보 — 폼 입력 무테/배경칠 규칙보다 우선해 흰 알약형 유지) */
#main #tab_list_load .select2-container--default .select2-selection--single,
#main #carouselExample .select2-container--default .select2-selection--single,
#tab_list_load .select2-container--default .select2-selection--single,
#carouselExample .select2-container--default .select2-selection--single {
    border-radius: 999px !important;
    border: 1px solid var(--co-slate-200) !important;
    background: #fff !important;
}

/* Dashboard primary action button (date 변경) — soft pill */
#carouselExample form#form_date button[type="submit"] {
    background: var(--co-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 14px rgba(95, 94, 94, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#carouselExample form#form_date button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(95, 94, 94, 0.26);
}

/* ==========================================================================
   CuratorOS Bento Dashboard (used by index.html main hero + tab1)
   ========================================================================== */
.co-bento-page {
    padding: 24px 28px 40px 28px;
    max-width: 1600px;
    margin: 0 auto;
    background: transparent;
}
/* Header row */
.co-bento-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.co-bento-heading h2.co-bento-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--co-on-surface);
    margin: 0 0 6px 0;
    line-height: 1.1;
}
.co-bento-heading .co-bento-subtitle {
    color: var(--co-on-variant);
    font-size: 13.5px;
    margin: 0;
    max-width: none;
}
.co-date-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    box-shadow: 0 8px 20px rgba(57, 56, 47, 0.06);
}
.co-date-form-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--co-on-variant);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
/* #main 스코프로 specificity 확보 — 폼 입력 baseline(#main input...)의 배경칠보다 우선해
   대시보드 날짜 입력은 투명 배경(필 박스 위) 유지 */
#main .co-date-form input[type="date"],
#main .co-date-form input[type="text"],
.co-date-form input[type="date"],
.co-date-form input[type="text"] {
    border: none !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 700;
    color: var(--co-on-surface);
    outline: none;
    padding: 6px 8px;
    width: 130px;
}
.co-btn {
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.co-btn-primary {
    background: var(--co-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.25);
}
.co-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(95, 94, 94, 0.32);
}

/* Bento grid */
.co-bento-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    align-items: stretch;
}
.co-bento-row > .co-col-4 { grid-column: span 4; }
.co-bento-row > .co-col-5 { grid-column: span 5; }
.co-bento-row > .co-col-6 { grid-column: span 6; }
.co-bento-row > .co-col-7 { grid-column: span 7; }
.co-bento-row > .co-col-8 { grid-column: span 8; }
.co-bento-row > .co-col-12 { grid-column: span 12; }
@media (max-width: 1100px) {
    .co-bento-row > .co-col-4,
    .co-bento-row > .co-col-5,
    .co-bento-row > .co-col-6,
    .co-bento-row > .co-col-7,
    .co-bento-row > .co-col-8 { grid-column: span 12; }
}

.co-bento-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}
/* Second card (집행/입사 list) grows to fill remaining height
   so the stack bottom aligns with sibling panels (orb / dark info) */
.co-bento-stack > .co-glass:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.co-bento-stack > .co-glass:last-child .co-list {
    flex: 1 1 auto;
    justify-content: space-between;
}

/* Generic glass panel */
.co-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow:
        0 12px 24px rgba(57, 56, 47, 0.05),
        0 4px 8px rgba(57, 56, 47, 0.03);
    padding: 18px 20px;
    overflow: hidden;
}
.co-glass::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(109, 99, 84, 0.05);
    filter: blur(40px);
    pointer-events: none;
}

/* Light warm-cream panel + 다홍/옐로우 코너 글로우 (원본 스타일) */
.co-dark {
    background:
        radial-gradient(380px 200px at 100% 0%, rgba(253, 192, 3, 0.18), transparent 60%),
        radial-gradient(280px 160px at 0% 100%, rgba(254, 139, 112, 0.14), transparent 60%),
        linear-gradient(135deg, #fdf9f1 0%, #f1eee2 100%);
    color: var(--co-on-surface);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow:
        0 12px 24px rgba(57, 56, 47, 0.05),
        0 4px 8px rgba(57, 56, 47, 0.03);
    position: relative;
    overflow: hidden;
}
.co-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(220px 120px at 50% 50%, rgba(255, 255, 255, 0.4), transparent 70%);
    pointer-events: none;
}

/* Panel headers */
.co-panel-header {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.co-panel-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--co-on-surface);
    margin: 0;
}
.co-panel-title-light {
    font-size: 18px;
    font-weight: 800;
    color: var(--co-on-surface);
    margin: 0;
}
.co-panel-sub-light {
    font-size: 14px;
    color: var(--co-on-variant);
    margin: 4px 0 0 0;
}
.co-panel-more {
    color: var(--co-secondary);
    cursor: pointer;
}
.co-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--co-on-variant);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 8px 0;
}
.co-pill-tag {
    display: inline-block;
    background: var(--co-surface-high);
    color: var(--co-secondary);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 5px 10px;
    border-radius: 999px;
}

/* Orb panel — the showcase visual */
.co-orb-panel {
    display: flex;
    flex-direction: column;
    min-height: 360px;
}
.co-orb-stage {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    /* 패널이 넓은 모니터에서도 오브 3개가 13" MacBook 시점처럼 자연스럽게 겹치도록 폭 고정 */
    max-width: 340px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.co-orb {
    border-radius: 9999px;
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.1),
        0 10px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
}
.co-orb-primary {
    width: 190px;
    height: 190px;
    background: var(--co-primary);
    color: #fff;
    z-index: 10;
}
.co-orb-primary .co-orb-value {
    font-size: 50px;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}
.co-orb-primary .co-orb-tag {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.85;
    margin-top: 9px;
    font-weight: 700;
}
.co-orb-photo {
    width: 88%;
    height: 88%;
    object-fit: cover;
    border-radius: 50%;
}
.co-orb-yellow {
    width: 140px;
    height: 140px;
    background: #fdc003;
    color: #553e00;
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.08),
        0 0 24px rgba(253, 192, 3, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.05);
    top: -10px;
    right: -28px;
    z-index: 20;
}
.co-orb-yellow .material-symbols-outlined { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 600; }
.co-orb-coral {
    width: 96px;
    height: 96px;
    background: #fe8b70;
    color: #fff;
    box-shadow:
        inset 0 4px 8px rgba(0, 0, 0, 0.08),
        0 0 24px rgba(254, 139, 112, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.05);
    bottom: 6px;
    left: 8px;
    z-index: 30;
}
.co-orb-coral .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 600; }

/* Numbers inside the small orbs (real ERP metrics, not decorative) */
.co-orb-mini-value {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
.co-orb-coral .co-orb-mini-value { font-size: 28px; }
.co-orb-mini-tag {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-top: 5px;
    opacity: 0.9;
}
.co-orb-coral .co-orb-mini-tag { font-size: 12px; margin-top: 3px; }

.co-orb-stats {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}
.co-orb-stat {
    flex: 1;
    background: var(--co-surface-high);
    border-radius: 12px;
    padding: 8px 10px;
    text-align: center;
}
.co-orb-stat .co-stat-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--co-secondary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 5px 0;
}
.co-orb-stat .co-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--co-on-surface);
    margin: 0;
    letter-spacing: -0.02em;
}

/* KPI big number tile */
.co-stat-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.co-stat-mega {
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: var(--co-on-surface);
    line-height: 1;
}
.co-stat-suffix {
    font-size: 16px;
    font-weight: 700;
    color: var(--co-secondary);
}
.co-icon-bubble {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-secondary);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}
.co-icon-bubble .material-symbols-outlined { font-size: 20px; }

.co-progress {
    margin-top: 10px;
    width: 100%;
    height: 6px;
    background: var(--co-surface-high);
    border-radius: 999px;
    overflow: hidden;
}
.co-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #fdc003, #fe8b70);
    border-radius: 999px;
}
.co-progress-fill.co-progress-success {
    background: linear-gradient(90deg, #34d399, #22c55e);
}
.co-progress-fill.co-progress-danger {
    background: linear-gradient(90deg, #fe8b70, #ef4444);
}
.co-progress-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--co-on-variant);
}
.co-progress-text { font-size: 11px; }

/* List rows in glass panel (Weight Loss Plan style) */
.co-list { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.co-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 10px;
    padding: 5px 8px;
    transition: background 0.18s ease, transform 0.18s ease;
    cursor: pointer;
}
.co-list-item:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateX(2px);
}
.co-list-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.co-list-icon .material-symbols-outlined { font-size: 15px; }
.co-list-icon-yellow { background: #fdc003; color: #553e00; }
.co-list-icon-coral { background: #fe8b70; color: #fff; }
.co-list-icon-secondary { background: var(--co-secondary-container); color: var(--co-secondary); }
.co-list-body { flex-grow: 1; min-width: 0; }
.co-list-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-on-surface);
    margin: 0;
    line-height: 1.3;
}
.co-list-meta {
    font-size: 13px;
    color: var(--co-on-variant);
    margin: 3px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-list-chev {
    color: var(--co-secondary);
    opacity: 0.55;
    flex-shrink: 0;
}

/* Dark info panel — 운수사 운영 KPI 변형 */
.co-info-card { display: flex; flex-direction: column; min-height: 320px; gap: 14px; }

.co-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.co-profile-meta { min-width: 0; }
.co-profile-name {
    font-size: 17px;
    font-weight: 800;
    color: var(--co-on-surface);
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-profile-sub {
    font-size: 13px;
    font-weight: 600;
    color: var(--co-on-variant);
    margin: 3px 0 0 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.co-pill-tag-light {
    background: rgba(109, 99, 84, 0.12) !important;
    color: var(--co-secondary) !important;
    border: 1px solid rgba(109, 99, 84, 0.16);
    font-size: 12px !important;
    padding: 6px 12px !important;
    font-weight: 800;
}

/* 운영 KPI 2×2 grid (보유 차량 / 운행 노선 / 당월 사고 / 당월 민원) */
.co-op-kpi-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex-grow: 1;
}
.co-op-kpi {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(109, 99, 84, 0.10);
    border-radius: 12px;
    padding: 10px 11px;
    transition: background 0.18s ease, transform 0.18s ease;
}
.co-op-kpi:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}
.co-op-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.co-op-kpi-icon .material-symbols-outlined { font-size: 20px; }
/* 원본 KPI 아이콘 컬러 (옐로우/코랄/라이트/소프트) 복원 */
.co-op-kpi-icon-light  { background: rgba(109, 99, 84, 0.16); color: var(--co-secondary); }
.co-op-kpi-icon-yellow { background: rgba(253, 192, 3, 0.22);   color: #b27e00; }
.co-op-kpi-icon-coral  { background: rgba(254, 139, 112, 0.22); color: #c54a31; }
.co-op-kpi-icon-soft   { background: rgba(109, 99, 84, 0.10); color: var(--co-secondary); }

.co-op-kpi-body { min-width: 0; }
.co-op-kpi-tag {
    font-size: 13px;
    font-weight: 800;
    color: var(--co-secondary);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin: 0 0 4px 0;
}
.co-op-kpi-num {
    font-size: 24px;
    font-weight: 900;
    color: var(--co-on-surface);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}
.co-op-kpi-num span {
    font-size: 15px;
    font-weight: 700;
    color: var(--co-on-variant);
    margin-left: 4px;
}

/* legacy info-row styles (kept for fallback) */
.co-avatar-circle {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(109, 99, 84, 0.12);
    border: 2px solid rgba(109, 99, 84, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--co-secondary);
    overflow: hidden;
}
.co-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.co-avatar-circle .material-symbols-outlined { font-size: 20px; }
.co-info-rows { position: relative; z-index: 1; flex-grow: 1; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.co-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.co-info-row:last-child { border-bottom: none; }
.co-info-key {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.co-info-val {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}
.co-info-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}
.co-info-stat { display: flex; align-items: center; gap: 6px; }
.co-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.co-dot-yellow { background: #fdc003; }
.co-dot-coral { background: #fe8b70; }
.co-dot-light { background: rgba(255, 255, 255, 0.6); }

/* Pill tabs */
.co-tab-row {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    width: fit-content;
    margin-bottom: 20px;
}
.co-tab {
    border: none;
    background: transparent;
    color: var(--co-on-variant);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.co-tab:hover { color: var(--co-on-surface); }
.co-tab.co-tab-active,
.co-tab.active {
    background: var(--co-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(95, 94, 94, 0.22);
}

/* KPI strip in tab1 */
.co-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 22px;
}
@media (max-width: 1100px) { .co-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
.co-kpi-tile {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 10px 24px rgba(57, 56, 47, 0.10), 0 2px 6px rgba(57, 56, 47, 0.06);
    position: relative;
    overflow: hidden;
}
.co-kpi-tile.co-kpi-yellow {
    background: linear-gradient(135deg, #fdc003 0%, #ecb200 100%);
    border: none;
    color: #553e00;
    /* 옅은 중성 그림자는 진한 컬러 타일에서 묻혀 안 보이므로 타일 색으로 틴트해 또렷하게 */
    box-shadow: 0 12px 26px rgba(236, 178, 0, 0.32), 0 2px 6px rgba(85, 62, 0, 0.12);
}
.co-kpi-tile.co-kpi-yellow .co-kpi-tag,
.co-kpi-tile.co-kpi-yellow .co-kpi-meta { color: rgba(85, 62, 0, 0.7); }
.co-kpi-tile.co-kpi-coral {
    background: linear-gradient(135deg, #fe8b70 0%, #f06b51 100%);
    border: none;
    color: #fff;
    box-shadow: 0 12px 26px rgba(240, 107, 81, 0.32), 0 2px 6px rgba(240, 107, 81, 0.16);
}
.co-kpi-tile.co-kpi-coral .co-kpi-tag,
.co-kpi-tile.co-kpi-coral .co-kpi-meta { color: rgba(255, 255, 255, 0.85); }
.co-kpi-tile.co-kpi-dark {
    background: var(--co-primary);
    border: none;
    color: #fff;
    box-shadow: 0 12px 26px rgba(57, 56, 47, 0.30), 0 2px 6px rgba(57, 56, 47, 0.18);
}
.co-kpi-tile.co-kpi-dark .co-kpi-tag,
.co-kpi-tile.co-kpi-dark .co-kpi-meta { color: rgba(255, 255, 255, 0.7); }

.co-kpi-tile .co-kpi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.co-kpi-tile .co-kpi-head .co-kpi-bubble {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    display: flex; align-items: center; justify-content: center;
    color: currentColor;
}
.co-kpi-tile .co-kpi-tag {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--co-on-variant);
}
.co-kpi-tile h3.co-kpi-num {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.1;
}
.co-kpi-tile .co-kpi-meta {
    font-size: 14px;
    color: var(--co-on-variant);
    margin-top: 12px;
    font-weight: 700;   /* "전월대비 …" 텍스트가 약해 보여 볼드 처리 */
}

/* Tab1 chart bento */
.co-chart-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    margin-bottom: 22px;
}
.co-chart-grid > .co-c4 { grid-column: span 4; }
.co-chart-grid > .co-c5 { grid-column: span 5; }
.co-chart-grid > .co-c6 { grid-column: span 6; }
.co-chart-grid > .co-c7 { grid-column: span 7; }
.co-chart-grid > .co-c8 { grid-column: span 8; }
.co-chart-grid > .co-c12 { grid-column: span 12; }
@media (max-width: 1100px) {
    .co-chart-grid > [class*="co-c"] { grid-column: span 12; }
}

.co-chart-panel {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    box-shadow: 0 14px 26px rgba(57, 56, 47, 0.05);
    padding: 22px 22px;
}
.co-chart-panel h4.co-chart-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--co-on-surface);
    margin: 0 0 14px 0;
}

/* radial chart text rows from cost_statistic */
.co-chart-panel table.table { background: transparent; }
.co-chart-panel table.table td { border: none !important; padding: 6px 8px; }

/* Hide the legacy bootstrap-card backgrounds when inside bento page */
.co-bento-page .card { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.co-bento-page .card .card-body { padding: 0 !important; }


/* ── Site search (직접 입력형 자동완성) in top nav ───────────────────────
   검색창에 바로 타이핑 → 아래로 목록이 뜨는 커스텀 autocomplete.
   닫힌 알약형 박스 + 둥근 카드 드롭다운으로 앱 전반 UI와 통일 */
.site-search {
    position: relative;
    width: 250px;
}
.site-search__icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}
/* nav(서울소프트 그레이 #5f5e5e) 위에 얹히는 검색창 — 소속 필터 pill 과 동일한 그레이 톤 */
.site-search__input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    padding: 0 34px 0 38px;
    font-size: 13px;
    font-weight: 600;
    color: #fbf6ef;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    outline: none;
}
.site-search__input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
.site-search__input:hover {
    border-color: rgba(255, 255, 255, 0.35);
}
.site-search__input:focus {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.site-search__clear {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.site-search__clear:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}
/* 펼침 목록 — 둥근 카드 + 소프트 섀도우 */
.site-search__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--co-slate-200);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
    max-height: 360px;
    overflow-y: auto;
    z-index: 1060;
}
.site-search__opt {
    padding: 9px 14px;
    margin: 2px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--co-slate-700, #334155);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.12s ease, color 0.12s ease;
}
.site-search__opt:hover,
.site-search__opt.is-active {
    background: var(--co-secondary-container);
    color: var(--co-secondary);
    font-weight: 600;
}
.site-search__empty {
    padding: 12px 14px;
    color: var(--co-on-variant, #64748b);
    font-size: 13px;
}

/* Nudge logo a bit to the right inside the top nav */
#base_logo_div { padding-left: 24px !important; }

/* Center the logo above the sidebar (sidebar is 256px wide) */
#base_logo_div {
    width: 256px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}

/* Nudge logo slightly to the left within the centered band */
#base_logo_div { padding-right: 24px !important; }

/* (legacy #aside background overrides removed — the single #aside rule
   near the top of this file controls the sidebar background flat-cream) */

/* Top nav — switch base to warm dark brown so it harmonizes with the cream menu/dashboard */
#nav {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, 0.16), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, 0.14), transparent 60%),
        var(--co-secondary) !important;
    box-shadow: 0 4px 14px rgba(85, 62, 0, 0.14) !important;
}
.inquiry-btn {
    background: var(--co-secondary) !important;
}
.inquiry-btn:hover {
    background: #5b5247 !important;
}

/* Top sidebar (#nav) — warm dark brown harmonizing with cream menu/dashboard */
#nav {
    background:
        radial-gradient(420px 220px at 100% 0%, rgba(253, 192, 3, 0.16), transparent 60%),
        radial-gradient(320px 180px at 0% 100%, rgba(254, 139, 112, 0.14), transparent 60%),
        var(--co-secondary) !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 8px 20px rgba(85, 62, 0, 0.18) !important;
}
/* 문의게시판 버튼 — 화이트 솔리드 */
.inquiry-btn {
    background: #ffffff !important;
    color: var(--co-slate-700) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
    font-weight: 700 !important;
}
.inquiry-btn:hover {
    background: #f8fafc !important;
    color: var(--co-slate-700) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-1px);
}

/* Tint the white logo so it isn't pure stark white — warm cream that matches the palette */
#logo_img {
    filter: sepia(0.55) saturate(1.45) brightness(0.93) contrast(1.05);
}

/* Inset the top sidebar from the screen edges so its rounded corners breathe */
#nav {
    left: 12px !important;
    right: 12px !important;
}

/* Float the top sidebar with all 4 corners rounded */
#nav {
    top: 12px !important;
    border-radius: 22px !important;
}
#main { padding-top: 88px !important; }
#aside { padding-top: 92px !important; }

/* Make left/right insets explicit and equal so the top sidebar floats symmetrically,
   and push the menu bar (aside) further down so it doesn't touch the nav */
#nav {
    width: auto !important;
    left: 16px !important;
    right: 16px !important;
    box-sizing: border-box !important;
}
#aside { padding-top: 108px !important; }
#main { padding-top: 96px !important; }

/* Drop the menu bar below the floating top nav so a real gap is visible,
   and pull the menu items back up by trimming the inner top padding */
#aside {
    top: 90px !important;
    bottom: 0 !important;
    height: auto !important;
    padding-top: 10px !important;
}
#main { padding-top: 92px !important; }

/* Bump menu text 1-2pt larger and shift labels slightly to the right (text only) */
.aside_btn { font-size: 16.5px !important; gap: 14px !important; }
.aside_btn .nav_title { font-size: 16.5px !important; margin-left: 4px !important; }
.aside_submenu_btn { font-size: 15.5px !important; gap: 8px !important; }
.aside_submenu_btn .nav_middle_title { font-size: 15.5px !important; margin-left: 4px !important; }
.aside_a { font-size: 15px !important; padding-left: 38px !important; }
.aside_a::before { left: 18px !important; }
.aside_b { font-size: 15px !important; padding-left: 46px !important; }

/* Give the last menu item ("기초정보관리") room so its text isn't clipped at the bottom */
#aside { padding-bottom: 40px !important; }
#aside .menu-inner { padding-bottom: 24px !important; }

/* Shift the logo a bit more to the left and enlarge it within the top sidebar */
#base_logo_div { padding-right: 56px !important; }
#logo_img { height: 48px !important; }

/* Swap the blue hover/active color in the menu for a warm rust that matches the cream palette */
.aside_btn:hover,
.aside_a:hover,
.aside_b:hover,
.aside_submenu_btn:hover,
.aside_submenu_btn:hover .custom_arrow,
.memo-btn:hover { color: #a8431f !important; }

.aside_btn.active_aside_btn,
.aside_btn[aria-expanded="true"],
.aside_a.aside_active,
.aside_b.aside_active { color: var(--co-error-on) !important; }

.aside_a:hover::before { background: #a8431f !important; }
.aside_a.aside_active::before { background: var(--co-error-on) !important; }

/* Switch hover/active highlight from red rust to warm golden-brown to match the yellow accent */
.aside_btn:hover,
.aside_a:hover,
.aside_b:hover,
.aside_submenu_btn:hover,
.aside_submenu_btn:hover .custom_arrow,
.memo-btn:hover { color: #553e00 !important; }

.aside_btn.active_aside_btn,
.aside_btn[aria-expanded="true"],
.aside_a.aside_active,
.aside_b.aside_active { color: #553e00 !important; }

.aside_a:hover::before { background: #553e00 !important; }
.aside_a.aside_active::before { background: #553e00 !important; }

/* ==========================================================================
   Global UI — apply CuratorOS palette to ERP-wide buttons, tables, modals,
   forms (everything outside the dashboard hero panel)
   ========================================================================== */

/* ── Buttons (Bootstrap-based) ─────────────────────────────────────── */
#main .btn,
.modal .btn {
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    letter-spacing: 0.01em;
}
#main .btn-sm, .modal .btn-sm { border-radius: 8px !important; }

/* Primary → 옐로우 액센트 (대시보드 톤과 통일, 저장/주요 CTA용) */
#main .btn-primary,
.modal .btn-primary {
    background: var(--co-tertiary) !important;
    border-color: var(--co-tertiary) !important;
    color: var(--co-tertiary-on) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(253, 192, 3, 0.28) !important;
}
#main .btn-primary:hover,
#main .btn-primary:focus,
#main .btn-primary:active,
.modal .btn-primary:hover {
    background: #ffd340 !important;
    border-color: #ffd340 !important;
    box-shadow: 0 6px 18px rgba(253, 192, 3, 0.42) !important;
    color: var(--co-tertiary-on) !important;
    transform: translateY(-1px);
}

/* Secondary → secondary taupe */
#main .btn-secondary,
.modal .btn-secondary {
    background: var(--co-secondary) !important;
    border-color: var(--co-secondary) !important;
    color: #fff !important;
}
#main .btn-secondary:hover,
.modal .btn-secondary:hover {
    background: #5c5343 !important;
    border-color: #5c5343 !important;
    color: #fff !important;
}

/* Success → softer green (kept distinct from green-coded ERP semantics) */
#main .btn-success,
.modal .btn-success {
    background: #2c9c66 !important;
    border-color: #2c9c66 !important;
    color: #fff !important;
}
#main .btn-success:hover,
.modal .btn-success:hover {
    background: #258256 !important;
    border-color: #258256 !important;
}

/* Danger → coral */
#main .btn-danger,
.modal .btn-danger {
    background: #d65c45 !important;
    border-color: #d65c45 !important;
    color: #fff !important;
}
#main .btn-danger:hover,
.modal .btn-danger:hover {
    background: #b94833 !important;
    border-color: #b94833 !important;
}

/* Warning → tertiary yellow */
#main .btn-warning,
.modal .btn-warning {
    background: var(--co-tertiary) !important;
    border-color: var(--co-tertiary) !important;
    color: var(--co-tertiary-on) !important;
}
#main .btn-warning:hover,
.modal .btn-warning:hover {
    background: #ecb200 !important;
    border-color: #ecb200 !important;
}

/* Info → secondary container (warm cream) */
#main .btn-info,
.modal .btn-info {
    background: var(--co-secondary-container) !important;
    border-color: var(--co-secondary-container) !important;
    color: var(--co-secondary) !important;
}
#main .btn-info:hover,
.modal .btn-info:hover {
    background: #e3d5b9 !important;
    border-color: #e3d5b9 !important;
    color: var(--co-secondary) !important;
}

/* Light / Dark / Outline */
#main .btn-light,
.modal .btn-light {
    background: var(--co-surface-container) !important;
    border: 1px solid var(--co-outline) !important;
    color: var(--co-on-surface) !important;
}
#main .btn-light:hover,
.modal .btn-light:hover { background: var(--co-surface-high) !important; }
#main .btn-dark,
.modal .btn-dark {
    background: var(--co-on-surface) !important;
    border-color: var(--co-on-surface) !important;
    color: #fff !important;
}

/* ── Outline 버튼 = 소프트 틴트로 통일 ───────────────────────────────────
   테두리만 있고 배경이 비어 있던 outline 계열 버튼(조회·추가·업로드·출력·
   삭제 등)에 톤앤매너 소프트 틴트(연한 배경 + 진한 글자)를 채워 넣는다.
   같은 클래스 = 같은 색이므로 같은 텍스트의 버튼은 모든 페이지에서 동일색.
   솔리드 주요 버튼(저장=노랑, 삭제=코랄)보다 한 단계 가벼워 위계가 산다. */

/* 조회(get_btn=outline-primary) → 파랑 액센트 (사이드바 활성 메뉴와 동일) */
#main .btn-outline-primary,
.modal .btn-outline-primary {
    color: var(--co-blue) !important;
    border-color: #dbe6ff !important;
    background: #dbe6ff !important;
}
#main .btn-outline-primary:hover,
#main .btn-outline-primary:focus,
#main .btn-outline-primary:active,
.modal .btn-outline-primary:hover,
.modal .btn-outline-primary:focus,
.modal .btn-outline-primary:active {
    background: #c7d9ff !important;
    border-color: #c7d9ff !important;
    color: #1d4fd0 !important;
}

/* 추가·업로드 등(dark_btn=outline-dark) → 따뜻한 크림 뉴트럴 */
#main .btn-outline-dark,
.modal .btn-outline-dark {
    color: var(--co-on-surface) !important;
    border-color: var(--co-secondary-container) !important;
    background: var(--co-secondary-container) !important;
}
#main .btn-outline-dark:hover,
#main .btn-outline-dark:focus,
#main .btn-outline-dark:active,
.modal .btn-outline-dark:hover,
.modal .btn-outline-dark:focus,
.modal .btn-outline-dark:active {
    background: #e3d5b9 !important;
    border-color: #e3d5b9 !important;
    color: var(--co-on-surface) !important;
}

/* 출력·인쇄(get_print_btn=outline-warning) → 옐로우 소프트 */
#main .btn-outline-warning,
.modal .btn-outline-warning {
    color: #92400e !important;
    border-color: rgba(253, 192, 3, 0.16) !important;
    background: rgba(253, 192, 3, 0.16) !important;
}
#main .btn-outline-warning:hover,
#main .btn-outline-warning:focus,
#main .btn-outline-warning:active,
.modal .btn-outline-warning:hover,
.modal .btn-outline-warning:focus,
.modal .btn-outline-warning:active {
    background: rgba(253, 192, 3, 0.30) !important;
    border-color: rgba(253, 192, 3, 0.30) !important;
    color: #7a3508 !important;
}

/* 삭제계열(get_delete_btn=outline-danger) → 코랄 소프트 */
#main .btn-outline-danger,
.modal .btn-outline-danger {
    color: #b91c1c !important;
    border-color: rgba(254, 139, 112, 0.16) !important;
    background: rgba(254, 139, 112, 0.16) !important;
}
#main .btn-outline-danger:hover,
#main .btn-outline-danger:focus,
#main .btn-outline-danger:active,
.modal .btn-outline-danger:hover,
.modal .btn-outline-danger:focus,
.modal .btn-outline-danger:active {
    background: rgba(254, 139, 112, 0.30) !important;
    border-color: rgba(254, 139, 112, 0.30) !important;
    color: #991b1b !important;
}

/* 엑셀·다운로드(outline-success) → 그린 소프트 */
#main .btn-outline-success,
.modal .btn-outline-success {
    color: #1f7a4d !important;
    border-color: rgba(44, 156, 102, 0.14) !important;
    background: rgba(44, 156, 102, 0.14) !important;
}
#main .btn-outline-success:hover,
#main .btn-outline-success:focus,
#main .btn-outline-success:active,
.modal .btn-outline-success:hover,
.modal .btn-outline-success:focus,
.modal .btn-outline-success:active {
    background: rgba(44, 156, 102, 0.26) !important;
    border-color: rgba(44, 156, 102, 0.26) !important;
    color: #18603c !important;
}

/* outline-info → 따뜻한 크림(뉴트럴 보조) */
#main .btn-outline-info,
.modal .btn-outline-info {
    color: var(--co-secondary) !important;
    border-color: var(--co-surface-high) !important;
    background: var(--co-surface-high) !important;
}
#main .btn-outline-info:hover,
#main .btn-outline-info:focus,
#main .btn-outline-info:active,
.modal .btn-outline-info:hover,
.modal .btn-outline-info:focus,
.modal .btn-outline-info:active {
    background: var(--co-surface-highest) !important;
    border-color: var(--co-surface-highest) !important;
    color: var(--co-secondary) !important;
}

/* 탭/보조 토글(tab_btn=outline-secondary) → 옅은 토프 틴트 */
#main .btn-outline-secondary,
.modal .btn-outline-secondary {
    color: var(--co-secondary) !important;
    border-color: rgba(109, 99, 84, 0.22) !important;
    background: rgba(109, 99, 84, 0.08) !important;
}
#main .btn-outline-secondary:hover,
#main .btn-outline-secondary:focus,
.modal .btn-outline-secondary:hover,
.modal .btn-outline-secondary:focus {
    background: rgba(109, 99, 84, 0.16) !important;
    border-color: rgba(109, 99, 84, 0.38) !important;
    color: var(--co-secondary) !important;
}
/* 탭이 활성(.active/checked)일 때는 솔리드 토프로 채워 선택 상태를 명확히 */
#main .btn-outline-secondary.active,
#main .btn-check:checked + .btn-outline-secondary,
.modal .btn-outline-secondary.active {
    background: var(--co-secondary) !important;
    border-color: var(--co-secondary) !important;
    color: #fff !important;
}

/* ── 라벨(텍스트)별 솔리드 색 = 테두리 없음 ────────────────────────────────
   액션 버튼(.col_min)을 텍스트에 따라 같은 색으로 통일한다.
   my_js.js 의 colorizeActionButtons() 가 버튼 글자를 읽어 아래 .co-act-*
   클래스를 붙인다 → 저장끼리/추가끼리/삭제끼리 모든 페이지에서 같은 색.
   테두리는 모두 제거하고 저장 버튼처럼 솔리드 바탕색만 채운다. */
#main .col_min.co-act-read,    .modal .col_min.co-act-read,
#main .col_min.co-act-save,    .modal .col_min.co-act-save,
#main .col_min.co-act-delete,  .modal .col_min.co-act-delete,
#main .col_min.co-act-excel,   .modal .col_min.co-act-excel,
#main .col_min.co-act-print,   .modal .col_min.co-act-print,
#main .col_min.co-act-add,     .modal .col_min.co-act-add,
#main .col_min.co-act-close,   .modal .col_min.co-act-close,
#main .col_min.co-act-send,    .modal .col_min.co-act-send,
#main .col_min.co-act-back,    .modal .col_min.co-act-back {
    border: 0 !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

/* 조회·검색·집계 (READ) → 파랑 */
#main .col_min.co-act-read, .modal .col_min.co-act-read {
    background: var(--co-blue) !important; color: #fff !important;
}
#main .col_min.co-act-read:hover, .modal .col_min.co-act-read:hover {
    background: #1d4fd0 !important; color: #fff !important;
}

/* 저장·수정·등록·생성 (SAVE) → 노랑 (저장 버튼 톤) */
#main .col_min.co-act-save, .modal .col_min.co-act-save {
    background: var(--co-tertiary) !important; color: var(--co-tertiary-on) !important;
}
#main .col_min.co-act-save:hover, .modal .col_min.co-act-save:hover {
    background: #ecb200 !important; color: var(--co-tertiary-on) !important;
}

/* 삭제·초기화 (DELETE) → 코랄 */
#main .col_min.co-act-delete, .modal .col_min.co-act-delete {
    background: #d65c45 !important; color: #fff !important;
}
#main .col_min.co-act-delete:hover, .modal .col_min.co-act-delete:hover {
    background: #b94833 !important; color: #fff !important;
}

/* 엑셀·다운로드·양식다운 (EXCEL) → 그린 */
#main .col_min.co-act-excel, .modal .col_min.co-act-excel {
    background: #2c9c66 !important; color: #fff !important;
}
#main .col_min.co-act-excel:hover, .modal .col_min.co-act-excel:hover {
    background: #258256 !important; color: #fff !important;
}

/* 출력·인쇄 (PRINT) → 슬레이트 */
#main .col_min.co-act-print, .modal .col_min.co-act-print {
    background: #475569 !important; color: #fff !important;
}
#main .col_min.co-act-print:hover, .modal .col_min.co-act-print:hover {
    background: #334155 !important; color: #fff !important;
}

/* 추가·업로드·관리 (ADD) → 토프 */
#main .col_min.co-act-add, .modal .col_min.co-act-add {
    background: var(--co-secondary) !important; color: #fff !important;
}
#main .col_min.co-act-add:hover, .modal .col_min.co-act-add:hover {
    background: #5c5343 !important; color: #fff !important;
}

/* 마감·마감해제·마감취소 (CLOSE) → 앰버 브라운 */
#main .col_min.co-act-close, .modal .col_min.co-act-close {
    background: #a16207 !important; color: #fff !important;
}
#main .col_min.co-act-close:hover, .modal .col_min.co-act-close:hover {
    background: #854d0e !important; color: #fff !important;
}

/* App전송·전송 (SEND) → 틸 */
#main .col_min.co-act-send, .modal .col_min.co-act-send {
    background: #0d9488 !important; color: #fff !important;
}
#main .col_min.co-act-send:hover, .modal .col_min.co-act-send:hover {
    background: #0b7e74 !important; color: #fff !important;
}

/* 뒤로가기 등 (BACK) → 라이트 그레이 */
#main .col_min.co-act-back, .modal .col_min.co-act-back {
    background: var(--co-slate-400) !important; color: #fff !important;
}
#main .col_min.co-act-back:hover, .modal .col_min.co-act-back:hover {
    background: var(--co-slate-500) !important; color: #fff !important;
}

/* ── Standard <table> — 헤더 다크그레이 통일 ─────────────────────────────────────────────── */
#main .table thead th,
#main .table > thead > tr > th,
.modal .table thead th {
    background: #2d2d2d !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-bottom: 0 !important;
    text-transform: none;
}
#main .table tbody tr:hover {
    background: rgba(238, 225, 205, 0.35) !important;
}

/* ── 테이블 본문 칸 정렬 — 내용에 따라 JS(alignTableTextCells)가 클래스를 붙인다.
   긴 텍스트=왼쪽 / 짧은 텍스트·날짜=가운데 / 숫자(금액·수량)=오른쪽. ───────────── */
.my_table_data td.co-cell-left,
.my_table_data_no_child td.co-cell-left,
.my_table_input td.co-cell-left,
#main table.table tbody td.co-cell-left,
.modal table.table tbody td.co-cell-left,
.hu_table td.co-cell-left,
.hu_table_input td.co-cell-left,
.hu_table_show td.co-cell-left {
    text-align: left !important;
    padding-left: 10px !important;   /* 테두리에 붙지 않게 한 칸 띄움 */
}
.my_table_data td.co-cell-center,
.my_table_data_no_child td.co-cell-center,
.my_table_input td.co-cell-center,
#main table.table tbody td.co-cell-center,
.modal table.table tbody td.co-cell-center,
.hu_table td.co-cell-center,
.hu_table_input td.co-cell-center,
.hu_table_show td.co-cell-center {
    text-align: center !important;
}
.my_table_data td.co-cell-right,
.my_table_data_no_child td.co-cell-right,
.my_table_input td.co-cell-right,
#main table.table tbody td.co-cell-right,
.modal table.table tbody td.co-cell-right,
.hu_table td.co-cell-right,
.hu_table_input td.co-cell-right,
.hu_table_show td.co-cell-right {
    text-align: right !important;
    padding-right: 10px !important;   /* 테두리에 붙지 않게 한 칸 띄움 */
}

/* ── 테이블 본문 글자 한 단계 더 굵게 (기본 400 → 600, 너무 연해 보이던 것).
   헤더(th)는 이미 굵어서 본문 칸/셀만 대상. ─────────────────────────────────── */
.my_table_data td,
.my_table_data_no_child td,
.my_table_input td,
#main table.table tbody td,
.modal table.table tbody td,
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell,
.hu_table td,
.hu_table_input td,
.hu_table_show td {
    font-weight: 600 !important;
}

/* ── 조회 필터 등 선택박스/입력칸 텍스트 왼쪽 정렬
   (가운데 정렬 테이블 셀 안에서 상속받아 가운데로 보이던 것 차단). ──────────── */
#main select, #main .form-select,
.modal select, .modal .form-select,
#main .select2-selection__rendered,
.modal .select2-selection__rendered {
    text-align: left !important;
}

/* ── 미니 정보카드(list-group-item) 납작 모드 — 위아래 여백/높이 축소.
   배차관리 등에서 카드를 위로 올리고 그만큼 표를 끌어올릴 때 사용. ──────────── */
.dd-card-tight { margin-top: 0 !important; margin-bottom: 0 !important; }
.dd-card-tight .list-group-item { padding-top: 1px !important; padding-bottom: 1px !important; }
.dd-card-tight h6 { margin-bottom: 0 !important; line-height: 1.15; }
.dd-card-tight span { line-height: 1.1; }

/* ── 인사정보 화면(.hr-info) — 컬럼/필드 구조는 그대로, 디자인만 정돈 ───────────
   빽빽이 쌓인 입력표를 카드처럼 분리(여백+그림자), 라벨칸 톤 정리, 탭 줄바꿈 허용. */
.hr-info .my_table_input,
.hr-info .hu_table_input,
.hr-info .hu_table_show {
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.hr-info #emp_main_form_div .my_table_input,
.hr-info #emp_main_form_div .hu_table_input,
.hr-info #emp_main_form_div .hu_table_show { margin-bottom: 10px; }
/* 상단 [저장] 줄과 표 사이를 탭 표(버튼 아래 10px)와 같게 — 위쪽만 4px 라 붙어 보였다(9/30) */
.hr-info #emp_main_form_div { margin-top: 5px; }
/* 라벨칸(th) — 그라데이션/대문자/넓은 자간 제거하고 차분한 단색으로 */
.hr-info .my_table_input th:not(.table_main),
.hr-info .hu_table_input th:not(.table_main),
.hr-info .hu_table_show th:not(.table_main) {
    background: #f4f5f7;
    color: #4b5563;
    font-weight: 600;
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}
/* 셀 좌우 여백 살짝 — 글자가 테두리에 붙지 않게 */
.hr-info .my_table_input th,
.hr-info .my_table_input td,
.hr-info .hu_table_input th,
.hr-info .hu_table_show th,
.hr-info .hu_table_input td,
.hr-info .hu_table_show td { padding: 3px 8px; }
/* 13개 탭 — 한 줄 강제(flex-nowrap) 대신 줄바꿈 허용해서 가지런히 */
.hr-info #tab_btns {
    flex-wrap: wrap !important;
    overflow: visible !important;
    row-gap: 4px;
}
/* 사원 클릭 때 프로필 영역 높이가 사원마다(퇴사자 버튼 2개/이미지 로드 등) 달라져
   아래 탭·표가 들썩이는 것 방지 — 높이를 '고정'하고 넘치면 내부 스크롤로 흡수.
   (min-height 만으로는 내용이 더 커질 때 여전히 흔들림 → 고정 height + overflow 로 차단) */
.hr-info #target_load {
    height: 236px !important;
    min-height: 236px !important;
    overflow: auto !important;
}
/* 프로필표 칸은 줄바꿈 금지(높이 일정) */
.hr-info #emp_main_form_div .my_table_input th,
.hr-info #emp_main_form_div .my_table_input td,
.hr-info #emp_main_form_div .hu_table_input th,
.hr-info #emp_main_form_div .hu_table_show th,
.hr-info #emp_main_form_div .hu_table_input td,
.hr-info #emp_main_form_div .hu_table_show td { white-space: nowrap; }
/* 버튼줄도 한 줄 고정(퇴사자 2버튼이 줄바꿈해 높이 늘지 않게) */
.hr-info #target_load .button_box,
.hr-info #target_load [class*="button_box"] {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* ── 인사정보 "한눈에" 압축 (개선요청 인사정보 1번) ─────────────────────────────
   1080p 화면(약 940px)에서 기본정보 탭까지 스크롤 없이 들어오도록:
   행 35→28px, 표 간격 16→8px, 프로필 블록 236→180px, 탭·버튼줄 여백 축소.
   글자 크기·굵기는 그대로(축소 배율로 보던 것 대체). */
.hr-info .my_table_input,
.hr-info .hu_table_input,
.hr-info .hu_table_show { margin-top: 6px; margin-bottom: 6px; }
.hr-info .my_table_input th,
.hr-info .my_table_input td,
.hr-info .hu_table_input th,
.hr-info .hu_table_show th,
.hr-info .hu_table_input td,
.hr-info .hu_table_show td { height: 27px; padding: 1px 8px; }
#main .hr-info .my_table_input td .form-control,
#main .hr-info .my_table_input td .form-select,
#main .hr-info .my_table_input td input[type="text"],
#main .hr-info .my_table_input td input[type="number"],
#main .hr-info .my_table_input td input[type="date"],
#main .hr-info .my_table_input td input[type="email"],
#main .hr-info .my_table_input td input[type="tel"],
#main .hr-info .my_table_input td select,
#main .hr-info .my_table_input td .readonly_text,
#main .hr-info .hu_table_input td .form-control,
#main .hr-info .hu_table_show td .form-control,
#main .hr-info .hu_table_input td .form-select,
#main .hr-info .hu_table_show td .form-select,
#main .hr-info .hu_table_input td input[type="text"],
#main .hr-info .hu_table_show td input[type="text"],
#main .hr-info .hu_table_input td input[type="number"],
#main .hr-info .hu_table_show td input[type="number"],
#main .hr-info .hu_table_input td input[type="date"],
#main .hr-info .hu_table_show td input[type="date"],
#main .hr-info .hu_table_input td input[type="email"],
#main .hr-info .hu_table_show td input[type="email"],
#main .hr-info .hu_table_input td input[type="tel"],
#main .hr-info .hu_table_show td input[type="tel"],
#main .hr-info .hu_table_input td select,
#main .hr-info .hu_table_show td select,
#main .hr-info .hu_table_input td .readonly_text,
#main .hr-info .hu_table_show td .readonly_text { height: 24px !important; min-height: 24px !important; }
/* 메모1·2 는 두 줄 정도 보이게 한 행만 높임 (textarea rows=10 의 기본 높이 무시) */
.hr-info .hr-tab1-compact tr.memo-row th,
.hr-info .hr-tab1-compact tr.memo-row td { height: 47px; }
#main .hr-info .hr-tab1-compact tr.memo-row td textarea { height: 44px !important; min-height: 0 !important; }
/* 행 높이 고정 — 빈 폼(사원 선택 전)과 값 있는 폼의 행 높이를 같게.
   입력칸 24px + 상하 padding 2px + 격자선 1px = 27px 이 값 있는 행의 실측 높이라
   빈 칸도 27px(메모행 47px)로 맞춘다. select2(차량 등)는 기본 28px 라 그 행만
   31px 로 튀므로 입력칸과 같은 24px 로 맞춘다. */
#main .hr-info .my_table_input td .select2-container,
#main .hr-info .hu_table_input td .select2-container,
#main .hr-info .hu_table_show td .select2-container { height: 24px !important; vertical-align: middle !important; }
#main .hr-info .my_table_input td .select2-container--default .select2-selection--single,
#main .hr-info .hu_table_input td .select2-container--default .select2-selection--single,
#main .hr-info .hu_table_show td .select2-container--default .select2-selection--single { height: 24px !important; }
#main .hr-info .my_table_input td .select2-container--default .select2-selection--single .select2-selection__rendered,
#main .hr-info .hu_table_input td .select2-container--default .select2-selection--single .select2-selection__rendered,
#main .hr-info .hu_table_show td .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 24px !important; }
#main .hr-info .my_table_input td .select2-container--default .select2-selection--single .select2-selection__arrow,
#main .hr-info .hu_table_input td .select2-container--default .select2-selection--single .select2-selection__arrow,
#main .hr-info .hu_table_show td .select2-container--default .select2-selection--single .select2-selection__arrow { height: 24px !important; }
.hr-info .hr-tab1-compact td.cell-empty { background: #fafbfd; }
/* 계좌번호1·2 — 긴 계좌번호(16~19자)가 잘리지 않게 최소폭 확보 */
#main .hr-info .hr-tab1-compact #id_account_number_1,
#main .hr-info .hr-tab1-compact #id_account_number_2 { min-width: 150px !important; }
/* 탭 안의 목록표(경력정보 목록·학력정보 목록·교육/포상/징계/휴직/사고 등 my_table_data 계열)도
   기본정보 입력표와 같은 칸 크기(27px, 여백 1px 8px)로 — 목록표만 35px 라 유독 커 보이던 것.
   제목줄(th.table_main)도 같은 높이. 좌측 사원목록/입퇴사이력은 대상 아님(#tab_load 한정). */
.hr-info #tab_load .my_table_data th,
.hr-info #tab_load .my_table_data td,
.hr-info #tab_load .my_table_data_no_child th,
.hr-info #tab_load .my_table_data_no_child td,
.hr-info #tab_load .hu_table th,
.hr-info #tab_load .hu_table td {
    height: 27px !important;
    padding: 1px 8px !important;
    font-size: 13px;
}
.hr-info #tab_load .my_table_data th:not(.table_main),
.hr-info #tab_load .my_table_data_no_child th:not(.table_main),
.hr-info #tab_load .hu_table th:not(.table_main) {
    font-size: 12.5px;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}
.hr-info #tab_load .my_table_data th.table_main,
.hr-info #tab_load .my_table_data_no_child th.table_main,
.hr-info #tab_load .hu_table th.table_main { font-size: 13px; }
.hr-info #tab_load .my_table_data,
.hr-info #tab_load .my_table_data_no_child,
.hr-info #tab_load .hu_table { margin-top: 6px; margin-bottom: 6px; }
/* 프로필 블록 — 높이를 고정(180px)해 두었더니 넷째 줄(영문성명·고용형태·만나이, 문의 46)이 늘면서
   세로 스크롤이 생겨 버튼줄이 가려졌다. 내용 높이대로 두고 아래 탭·표가 밀려 내려가게 한다.
   최소 높이는 사원 선택 전(사진 칸이 비어 낮음)과 선택 후의 높이 차로 탭이 들썩이지 않게 하는 값. */
.hr-info #target_load { height: auto !important; min-height: 200px !important; }
.hr-info #emp_main_form_div .my_table_input,
.hr-info #emp_main_form_div .hu_table_input,
.hr-info #emp_main_form_div .hu_table_show { margin-top: 4px; margin-bottom: 4px; }
/* 탭줄·저장버튼줄 여백 */
.hr-info #tab_btns { margin-top: 4px !important; margin-bottom: 4px !important; }
/* 탭 좌우 여백 16→10px — 탭 14개(인사명령 추가)와 [저장]이 한 줄에 들어가게.
   공통 탭 규칙(#main .nav-tabs:not(.co-tab-row) .nav-link, 8px 16px)이 더 센 선택자라 #main 을 붙여야 먹는다.
   위아래 여백은 그대로 둔다. */
#main .hr-info #tab_btns .nav-link { padding-left: 10px !important; padding-right: 10px !important; }
/* 기본정보 탭의 [저장]을 탭 줄 오른쪽으로 끌어올리던 규칙(-38px)은 뺐다 — 다른 13개 탭은 [저장]이 탭 줄 아래에 있어
   탭마다 버튼 자리가 달라 보였다(9/30). 이제 14개 탭 모두 탭 줄 아래 같은 자리. */
.hr-info #tab_load .button_box,
.hr-info #tab_load [class*="button_box"] { margin-bottom: 4px !important; }
.hr-info > .d-flex.gap-3.mt-3 { margin-top: 10px !important; }

/* ── 인사정보 조회바 — 조건 8개(회사·사원·직종·영업소·노선·직위·부서·재직여부)를
   한 줄에 담기 위해 칸 폭을 조인다. 두 줄이 되면 기본정보 탭이 그만큼 아래로 밀려
   "한눈에" 개선(인사정보 1번)이 상쇄됨. 요청서 인사정보 3번. ───────────────── */
.hr-info .search-bar .col-auto:has(#id_search_hr_member) .select2-container {
    width: 150px !important; min-width: 0 !important;
}
.hr-info .search-bar .col-auto:has(#id_search_office) .select2-container {
    width: 135px !important; min-width: 0 !important;
}
.hr-info .search-bar .col-auto:has(#id_search_route) .select2-container {
    width: 115px !important; min-width: 0 !important;
}
.hr-info .search-bar #id_search_company { max-width: 125px; }
.hr-info .search-bar #id_search_work_type,
.hr-info .search-bar #id_search_position,
.hr-info .search-bar #id_search_department,
.hr-info .search-bar #id_search_retire { max-width: 115px; }
/* 라벨칸 좌우 여백도 한 단계 줄여 8칸이 들어가게.
   위아래 여백도 줄여 일반 셀렉트(회사·직종·직위·부서·재직여부) 칸 높이를
   select2 칸(사원·영업소·노선) 및 [조회] 버튼과 같은 31px 로 맞춘다. */
.hr-info .search-bar .input-group-text.label-form-style { padding: 4px 9px !important; }
/* 사원목록 위 빠른필터(직군/재직상태) — 목록 폭(300px)에 맞춘다. 요청서 인사정보 8번 */
.hr-info .hr-list-filter { width: 300px; }
.hr-info .hr-list-filter select {
    flex: 1 1 0;
    min-width: 0;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 6px !important;
    font-size: 12.5px;
    border-radius: 6px !important;   /* 아랫줄 검색칸 모서리(6px)와 맞춤(테마 셀렉트 기본 8px) */
}
/* 사원목록 검색칸(휴대폰 번호 일부·주민등록번호) — 문의 26번. 빠른필터 아랫줄에 목록 폭으로.
   입력칸과 [검색] 버튼은 붙이지 않고 4px 띄운 개별 요소(입력칸이 남는 폭을 다 씀).
   #main 을 붙여 테마 공통 규칙(min-height 31px)보다 우선하게 한다 — 안 붙이면 위 셀렉트(28px)와 어긋난다 */
#main .hr-info .hr-list-search > .form-control,
#main .hr-info .hr-list-search > .btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 8px !important;
    font-size: 12.5px;
    line-height: 1 !important;
    border-radius: 6px !important;
}
#main .hr-info .hr-list-search > .form-control {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #d7dde6 !important;
    background-color: #fff !important;
}
#main .hr-info .hr-list-search > .form-control:focus {
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 2px rgba(109, 99, 84, 0.15) !important;
}
#main .hr-info .hr-list-search > .btn { flex: 0 0 auto; white-space: nowrap; }
.hr-info .search-bar select,
.hr-info .search-bar .form-select,
.hr-info .search-bar .form-control {
    height: 31px !important;
    min-height: 31px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}


/* ── Tabulator ─────────────────────────────────────────────────────── */
#main .tabulator {
    border: 1px solid rgba(188, 185, 173, 0.4) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
#main .tabulator .tabulator-header,
#main .tabulator .tabulator-header .tabulator-col {
    background: #2d2d2d !important;
    border-bottom: 0 !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}
#main .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: none;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(188, 185, 173, 0.18) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:nth-child(even) {
    background: var(--co-surface-low) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row:hover {
    background: rgba(238, 225, 205, 0.45) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-selected {
    background: var(--co-secondary-container) !important;
}
#main .tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    border-right: 1px solid rgba(188, 185, 173, 0.18) !important;
    color: var(--co-on-surface) !important;
    padding-left: 8px !important;    /* 좌/우 정렬 숫자가 테두리에 붙지 않게 */
    padding-right: 8px !important;
}

/* ── th.table_main on plain HTML tables (.my_table_data / .my_table_data_no_child / .my_table_input)
   원래 navy gradient #172852→#294ca1 였던 것 → 따뜻한 차콜 톤으로 통일. */
.my_table_data th.table_main,
.my_table_data_no_child th.table_main,
.my_table_input th.table_main,
#main .my_table_data th.table_main,
#main .my_table_data_no_child th.table_main,
#main .my_table_input th.table_main,
.modal .my_table_data th.table_main,
.modal .my_table_data_no_child th.table_main,
.modal .my_table_input th.table_main,
table th.table_main,
#main table th.table_main,
.modal table th.table_main,
.hu_table th.table_main,
.hu_table_input th.table_main,
.hu_table_show th.table_main,
#main .hu_table th.table_main,
#main .hu_table_input th.table_main,
#main .hu_table_show th.table_main,
.modal .hu_table th.table_main,
.modal .hu_table_input th.table_main,
.modal .hu_table_show th.table_main {
    background: #2d2d2d !important;
    background-image: none !important;
    color: #fff !important;
    border-bottom: 2px solid #2d2d2d !important;
    font-weight: 700 !important;
}

/* table_main 모든 테이블 헤더 → 모던 뉴트럴 다크그레이(#2d2d2d) 통일 */
.tabulator .tabulator-header.table_main,
.tabulator.table_main .tabulator-header,
.tabulator.table_main .tabulator-header .tabulator-col,
#main .tabulator .tabulator-header.table_main,
#main .tabulator.table_main .tabulator-header,
#main .tabulator.table_main .tabulator-header .tabulator-col,
.modal .tabulator .tabulator-header.table_main,
.modal .tabulator.table_main .tabulator-header,
.modal .tabulator.table_main .tabulator-header .tabulator-col {
    background: #2d2d2d !important;
    border-bottom: 0 !important;
}
.tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
#main .tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
.modal .tabulator.table_main .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #fff !important;
    font-weight: 700 !important;
}

/* 일반 Tabulator 헤더 + 모달 안 표준 table 헤더 → 다크그레이 통일 */
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.modal .tabulator .tabulator-header,
.modal .tabulator .tabulator-header .tabulator-col,
.modal .table thead th,
.modal .table > thead > tr > th {
    background: #2d2d2d !important;
    color: #fff !important;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
.modal .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
    color: #fff !important;
}

/* Editing cell border (was navy #172852) */
.tabulator .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell.tabulator-editing {
    border: 1px solid var(--co-tertiary) !important;
}

/* Active tab — was navy #172852 */
.nav-tabs .nav-link.active,
#main .nav-tabs .nav-link.active,
.modal .nav-tabs .nav-link.active {
    background-color: var(--co-surface-container) !important;
    color: var(--co-on-surface) !important;
    border-bottom-color: var(--co-tertiary) !important;
    font-weight: 700 !important;
}

/* Navy buttons → warm primary (운수사 #002060 / #001238 #172852 등) */
.btn_blue,
#main .btn_blue,
.modal .btn_blue {
    background-color: var(--co-primary) !important;
    color: #fff !important;
}
.btn_blue:hover,
#main .btn_blue:hover,
.modal .btn_blue:hover {
    background-color: var(--co-primary-dim) !important;
    color: #fff !important;
}

/* ── Bootstrap card ─────────────────────────────────────────────────── */
#main .card:not(.co-bento-page .card) {
    border: 1px solid rgba(188, 185, 173, 0.3) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.04) !important;
}
#main .card-header:not(.co-bento-page .card-header) {
    background: var(--co-surface-container) !important;
    border-bottom: 1px solid var(--co-secondary-container) !important;
    border-radius: 14px 14px 0 0 !important;
    font-weight: 700 !important;
    color: var(--co-on-surface) !important;
}

/* ── Modals ─────────────────────────────────────────────────────────── */
.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 48px rgba(57, 56, 47, 0.18) !important;
    overflow: hidden;
}
/* 모달 본문의 일반 문장(표·버튼 밖의 안내·요약·목록)을 화면 표와 같은 13px·굵기 600 으로.
   지정이 없어 16px·보통 굵기(나눔스퀘어 Regular)로 나와, 같은 글꼴인데도 화면과 다른 글꼴처럼 보였다(2026-09-30).
   표·버튼·입력칸·제목은 자체 크기·굵기 규칙이 있어 그대로다. */
.modal .modal-body { font-size: 13px; font-weight: 600; }
.modal-header {
    background: var(--co-surface-container) !important;
    border-bottom: 1px solid var(--co-secondary-container) !important;
}
.modal-title {
    color: var(--co-on-surface) !important;
    font-weight: 700 !important;
}
.modal-footer {
    background: var(--co-surface-low) !important;
    border-top: 1px solid var(--co-secondary-container) !important;
}

/* ── Form controls ─────────────────────────────────────────────────── */
#main .form-control,
#main .form-select,
#main input[type="text"],
#main input[type="number"],
#main input[type="date"],
#main input[type="email"],
#main input[type="password"],
#main input[type="tel"],
#main input[type="search"],
#main select,
#main textarea,
.modal .form-control,
.modal .form-select,
.modal input[type="text"],
.modal input[type="number"],
.modal input[type="date"],
.modal input[type="email"],
.modal input[type="password"],
.modal select,
.modal textarea {
    /* 흰 배경 + 연한 테두리 (테이블 셀 입력칸 등 — 크림 배경칠 제거) */
    border: 1px solid var(--co-outline) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
}
#main .form-control:focus,
#main .form-select:focus,
#main input:focus,
#main select:focus,
#main textarea:focus,
.modal .form-control:focus,
.modal .form-select:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
    /* 포커스 — 흰 배경 유지 + 테두리 강조 + 은은한 링 */
    background-color: #fff !important;
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 3px rgba(109, 99, 84, 0.12) !important;
    outline: none !important;
}

/* 파일 선택 칸 — 부트스트랩 기본은 둥근 상자 왼쪽에 회색 네모가 박힌 모양이라 어색했다(2026-09-30).
   [파일 선택]만 회색 알약 버튼으로 바꾼다. 클래스 없는 맨 파일 칸에도 같은 버튼을 입힌다.
   세로 가운데 맞춤 — 칸 안의 버튼은 인라인이라 flex 가 먹지 않고, 화면마다 칸 높이를 강제하는 규칙
   (입력표 셀 33px, 인사정보 24px)이 있어 버튼이 위로 붙었다. 그래서 파일 칸만은 높이 강제를 풀고
   (선택자에 [type="file"] 를 겹쳐 그 규칙들보다 우선) "줄 높이 21px = 버튼 높이 + 위아래 같은 여백"으로 만든다.
   칸 자체는 td 의 vertical-align:middle 이 셀 가운데에 놓으므로 버튼 위아래 여백이 항상 같다. */
input[type="file"],
#main input[type="file"][type="file"][type="file"],
.modal input[type="file"][type="file"][type="file"][type="file"] {
    height: auto !important;
    min-height: 0 !important;
    line-height: 21px !important;
    padding-top: 4px !important;      /* 테두리 있는 칸: 21 + 8 + 테두리 2 = 31px (다른 입력칸과 같은 높이) */
    padding-bottom: 4px !important;
    align-content: center;
    color: var(--co-on-variant);
    cursor: pointer;
}
input[type="file"].form-control { padding-left: 4px; padding-right: 4px; }
/* 인사정보 입력표는 행 높이가 27px 로 고정 — 여백을 1px 로 줄여 행이 늘어나지 않게 */
#main .hr-info .my_table_input td input[type="file"][type="file"][type="file"],
#main .hr-info .hu_table_input td input[type="file"][type="file"][type="file"],
#main .hr-info .hu_table_show td input[type="file"][type="file"][type="file"] {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}
input[type="file"]::file-selector-button,
#main input[type="file"]::file-selector-button,
.modal input[type="file"]::file-selector-button {
    margin: 0 10px 0 0 !important;
    padding: 0 12px !important;
    border: 0 !important;   /* 테두리 없음 — 1px 테두리는 화면 배율 125·150% 에서 따로 반올림돼 버튼이 줄보다 작아지고 아래 여백이 커졌다 */
    border-radius: 999px !important;
    background: #d3d9e1 !important;
    color: var(--co-on-surface) !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 21px;   /* = 칸의 줄 높이. 버튼이 줄을 꽉 채우므로 배율이 달라도 위아래 여백이 같이 움직인다 */
    vertical-align: top;
    cursor: pointer;
}
input[type="file"]:hover:not(:disabled)::file-selector-button,
#main input[type="file"]:hover:not(:disabled)::file-selector-button,
.modal input[type="file"]:hover:not(:disabled)::file-selector-button {
    background: #c3cad4 !important;
}

/* select2 widget — 흰 배경 + 연한 테두리 (일반 입력칸과 동일) */
#main .select2-container--default .select2-selection--single,
.modal .select2-container--default .select2-selection--single {
    border: 1px solid var(--co-outline) !important;
    border-radius: 8px !important;
    background: #fff !important;
}
#main .select2-container--default.select2-container--focus .select2-selection--single,
.modal .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--co-secondary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(109, 99, 84, 0.12) !important;
}
.select2-dropdown {
    border: 1px solid var(--co-outline) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 28px rgba(57, 56, 47, 0.10) !important;
    /* 폭은 select2 기본(= 셀렉트 폭, 인라인). 예전의 width:auto + dropdownAutoWidth 는
       가장 긴 항목만큼 넓어져 오른쪽 끝 셀렉트에서 화면을 넘겨 페이지 가로스크롤을 만들었다.
       춘천시민버스처럼 폭은 고정하고 긴 이름은 목록 안 가로스크롤로 본다(아래). */
}
/* select2 박스(닫힌 상태)도 너무 좁던 문제 — 최소 너비 보장 (nav_right는 자체 width:240px가 우선되어 유지됨) */
.select2-container--default {
    min-width: 150px !important;
}
/* 드롭다운 항목 한 줄 유지 + 넘치는 이름은 목록 안에서 가로스크롤 (춘천시민버스 방식) */
.select2-results__option {
    white-space: nowrap !important;
}
.select2-results__options {
    overflow-x: auto !important;
}
.select2-results__option--highlighted {
    background: var(--co-secondary-container) !important;
    color: var(--co-secondary) !important;
}

/* ── 입력테이블 셀 안 입력칸 테두리 제거 (공항버스 프로젝트와 동일한 납작 톤) ──
   .my_table_input td 안의 form-control / select / textarea / select2 / readonly_text 는
   셀(td) 자체가 이미 격자 테두리를 가지므로, 입력칸이 별도 테두리·라운드를 또 그려
   "칸 안의 칸" 처럼 보였음. 입력칸을 셀에 꽉 채워 테두리 없이 평평하게 만든다. */
#main .my_table_input td .form-control,
#main .my_table_input td .form-select,
#main .my_table_input td input[type="text"],
#main .my_table_input td input[type="number"],
#main .my_table_input td input[type="date"],
#main .my_table_input td input[type="email"],
#main .my_table_input td input[type="password"],
#main .my_table_input td input[type="tel"],
#main .my_table_input td input[type="search"],
#main .my_table_input td select,
#main .my_table_input td textarea,
#main .my_table_input td .readonly_text,
.modal .my_table_input td .form-control,
.modal .my_table_input td .form-select,
.modal .my_table_input td input[type="text"],
.modal .my_table_input td input[type="number"],
.modal .my_table_input td input[type="date"],
.modal .my_table_input td input[type="email"],
.modal .my_table_input td input[type="password"],
.modal .my_table_input td input[type="tel"],
.modal .my_table_input td input[type="search"],
.modal .my_table_input td select,
.modal .my_table_input td textarea,
.modal .my_table_input td .readonly_text,
#main .hu_table_input td .form-control,
#main .hu_table_show td .form-control,
#main .hu_table_input td .form-select,
#main .hu_table_show td .form-select,
#main .hu_table_input td input[type="text"],
#main .hu_table_show td input[type="text"],
#main .hu_table_input td input[type="number"],
#main .hu_table_show td input[type="number"],
#main .hu_table_input td input[type="date"],
#main .hu_table_show td input[type="date"],
#main .hu_table_input td input[type="email"],
#main .hu_table_show td input[type="email"],
#main .hu_table_input td input[type="password"],
#main .hu_table_show td input[type="password"],
#main .hu_table_input td input[type="tel"],
#main .hu_table_show td input[type="tel"],
#main .hu_table_input td input[type="search"],
#main .hu_table_show td input[type="search"],
#main .hu_table_input td select,
#main .hu_table_show td select,
#main .hu_table_input td textarea,
#main .hu_table_show td textarea,
#main .hu_table_input td .readonly_text,
#main .hu_table_show td .readonly_text,
.modal .hu_table_input td .form-control,
.modal .hu_table_show td .form-control,
.modal .hu_table_input td .form-select,
.modal .hu_table_show td .form-select,
.modal .hu_table_input td input[type="text"],
.modal .hu_table_show td input[type="text"],
.modal .hu_table_input td input[type="number"],
.modal .hu_table_show td input[type="number"],
.modal .hu_table_input td input[type="date"],
.modal .hu_table_show td input[type="date"],
.modal .hu_table_input td input[type="email"],
.modal .hu_table_show td input[type="email"],
.modal .hu_table_input td input[type="password"],
.modal .hu_table_show td input[type="password"],
.modal .hu_table_input td input[type="tel"],
.modal .hu_table_show td input[type="tel"],
.modal .hu_table_input td input[type="search"],
.modal .hu_table_show td input[type="search"],
.modal .hu_table_input td select,
.modal .hu_table_show td select,
.modal .hu_table_input td textarea,
.modal .hu_table_show td textarea,
.modal .hu_table_input td .readonly_text,
.modal .hu_table_show td .readonly_text {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    /* td 의 padding(0 3px) 만큼 좌우로 넓혀 셀을 꽉 채운다 (포커스 배경 너비 일치) */
    width: calc(100% + 6px) !important;
    height: 33px !important;
    margin: 0 -3px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* readonly_text 는 div 라 input 과 달리 수직 중앙이 안 돼 글자가 위로 붙음 — flex 로 중앙 정렬.
   my_table_input 외의 표/폼에서도 동일하게 전역 적용 */
.readonly_text {
    display: flex !important;
    align-items: center !important;
}

/* 메모 등 여러 줄 textarea 는 고정 높이(33px)로 찌그러지지 않게 셀 높이를 따른다 */
#main .my_table_input td textarea,
.modal .my_table_input td textarea,
#main .hu_table_input td textarea,
#main .hu_table_show td textarea,
.modal .hu_table_input td textarea,
.modal .hu_table_show td textarea {
    height: 100% !important;
    padding: 4px 6px !important;
    resize: none !important;
}
/* 포커스 시에도 테두리·링 없이 평평하게 유지 (은은한 배경으로만 표시) */
#main .my_table_input td .form-control:focus,
#main .my_table_input td .form-select:focus,
#main .my_table_input td input:focus,
#main .my_table_input td select:focus,
#main .my_table_input td textarea:focus,
.modal .my_table_input td .form-control:focus,
.modal .my_table_input td .form-select:focus,
.modal .my_table_input td input:focus,
.modal .my_table_input td select:focus,
.modal .my_table_input td textarea:focus,
#main .hu_table_input td .form-control:focus,
#main .hu_table_show td .form-control:focus,
#main .hu_table_input td .form-select:focus,
#main .hu_table_show td .form-select:focus,
#main .hu_table_input td input:focus,
#main .hu_table_show td input:focus,
#main .hu_table_input td select:focus,
#main .hu_table_show td select:focus,
#main .hu_table_input td textarea:focus,
#main .hu_table_show td textarea:focus,
.modal .hu_table_input td .form-control:focus,
.modal .hu_table_show td .form-control:focus,
.modal .hu_table_input td .form-select:focus,
.modal .hu_table_show td .form-select:focus,
.modal .hu_table_input td input:focus,
.modal .hu_table_show td input:focus,
.modal .hu_table_input td select:focus,
.modal .hu_table_show td select:focus,
.modal .hu_table_input td textarea:focus,
.modal .hu_table_show td textarea:focus {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: rgba(41, 76, 161, 0.06) !important;
    outline: none !important;
}
/* select2 위젯도 동일하게 셀에 꽉 채워 평평하게 */
#main .my_table_input td .select2-container,
.modal .my_table_input td .select2-container,
#main .hu_table_input td .select2-container,
#main .hu_table_show td .select2-container,
.modal .hu_table_input td .select2-container,
.modal .hu_table_show td .select2-container {
    width: calc(100% + 6px) !important;
    margin: 0 -3px !important;
}
#main .my_table_input td .select2-container--default .select2-selection--single,
.modal .my_table_input td .select2-container--default .select2-selection--single,
#main .hu_table_input td .select2-container--default .select2-selection--single,
#main .hu_table_show td .select2-container--default .select2-selection--single,
.modal .hu_table_input td .select2-container--default .select2-selection--single,
.modal .hu_table_show td .select2-container--default .select2-selection--single {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#main .my_table_input td .select2-container--default .select2-selection--single .select2-selection__rendered,
.modal .my_table_input td .select2-container--default .select2-selection--single .select2-selection__rendered,
#main .hu_table_input td .select2-container--default .select2-selection--single .select2-selection__rendered,
#main .hu_table_show td .select2-container--default .select2-selection--single .select2-selection__rendered,
.modal .hu_table_input td .select2-container--default .select2-selection--single .select2-selection__rendered,
.modal .hu_table_show td .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
#main .my_table_input td .select2-container--default.select2-container--focus .select2-selection--single,
.modal .my_table_input td .select2-container--default.select2-container--focus .select2-selection--single,
#main .hu_table_input td .select2-container--default.select2-container--focus .select2-selection--single,
#main .hu_table_show td .select2-container--default.select2-container--focus .select2-selection--single,
.modal .hu_table_input td .select2-container--default.select2-container--focus .select2-selection--single,
.modal .hu_table_show td .select2-container--default.select2-container--focus .select2-selection--single {
    border: none !important;
    box-shadow: none !important;
    background: rgba(41, 76, 161, 0.06) !important;
}

/* ── 데이터 테이블(my_table_data / _no_child) 안의 편집용 입력칸도 동일한 납작 톤 ──
   교육 일괄등록 모달처럼 데이터 표 셀에 들어간 텍스트/셀렉트/textarea 입력칸도
   셀 격자만 남기고 자체 테두리·라운드를 제거한다. (체크박스/라디오는 기본 모양 유지) */
#main .my_table_data td .form-control,
#main .my_table_data td .form-select,
#main .my_table_data td input[type="text"],
#main .my_table_data td input[type="number"],
#main .my_table_data td input[type="date"],
#main .my_table_data td input[type="email"],
#main .my_table_data td input[type="password"],
#main .my_table_data td input[type="tel"],
#main .my_table_data td input[type="search"],
#main .my_table_data td select,
#main .my_table_data td textarea,
#main .my_table_data_no_child td .form-control,
#main .my_table_data_no_child td .form-select,
#main .my_table_data_no_child td input[type="text"],
#main .my_table_data_no_child td input[type="number"],
#main .my_table_data_no_child td input[type="date"],
#main .my_table_data_no_child td input[type="email"],
#main .my_table_data_no_child td input[type="password"],
#main .my_table_data_no_child td input[type="tel"],
#main .my_table_data_no_child td input[type="search"],
#main .my_table_data_no_child td select,
#main .my_table_data_no_child td textarea,
.modal .my_table_data td .form-control,
.modal .my_table_data td .form-select,
.modal .my_table_data td input[type="text"],
.modal .my_table_data td input[type="number"],
.modal .my_table_data td input[type="date"],
.modal .my_table_data td input[type="email"],
.modal .my_table_data td input[type="password"],
.modal .my_table_data td input[type="tel"],
.modal .my_table_data td input[type="search"],
.modal .my_table_data td select,
.modal .my_table_data td textarea,
.modal .my_table_data_no_child td .form-control,
.modal .my_table_data_no_child td .form-select,
.modal .my_table_data_no_child td input[type="text"],
.modal .my_table_data_no_child td input[type="number"],
.modal .my_table_data_no_child td input[type="date"],
.modal .my_table_data_no_child td input[type="email"],
.modal .my_table_data_no_child td input[type="password"],
.modal .my_table_data_no_child td input[type="tel"],
.modal .my_table_data_no_child td input[type="search"],
.modal .my_table_data_no_child td select,
.modal .my_table_data_no_child td textarea,
#main .hu_table td .form-control,
#main .hu_table td .form-select,
#main .hu_table td input[type="text"],
#main .hu_table td input[type="number"],
#main .hu_table td input[type="date"],
#main .hu_table td input[type="email"],
#main .hu_table td input[type="password"],
#main .hu_table td input[type="tel"],
#main .hu_table td input[type="search"],
#main .hu_table td select,
#main .hu_table td textarea,
.modal .hu_table td .form-control,
.modal .hu_table td .form-select,
.modal .hu_table td input[type="text"],
.modal .hu_table td input[type="number"],
.modal .hu_table td input[type="date"],
.modal .hu_table td input[type="email"],
.modal .hu_table td input[type="password"],
.modal .hu_table td input[type="tel"],
.modal .hu_table td input[type="search"],
.modal .hu_table td select,
.modal .hu_table td textarea {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    width: 100% !important;
    height: 33px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}
/* 데이터 테이블 textarea 는 셀 높이를 따르게 */
#main .my_table_data td textarea,
#main .my_table_data_no_child td textarea,
.modal .my_table_data td textarea,
.modal .my_table_data_no_child td textarea,
#main .hu_table td textarea,
.modal .hu_table td textarea {
    height: 100% !important;
    resize: none !important;
}
/* 포커스 시에도 테두리·링 없이 은은한 배경으로만 */
#main .my_table_data td .form-control:focus,
#main .my_table_data td .form-select:focus,
#main .my_table_data td input:focus,
#main .my_table_data td select:focus,
#main .my_table_data td textarea:focus,
#main .my_table_data_no_child td .form-control:focus,
#main .my_table_data_no_child td .form-select:focus,
#main .my_table_data_no_child td input:focus,
#main .my_table_data_no_child td select:focus,
#main .my_table_data_no_child td textarea:focus,
.modal .my_table_data td .form-control:focus,
.modal .my_table_data td .form-select:focus,
.modal .my_table_data td input:focus,
.modal .my_table_data td select:focus,
.modal .my_table_data td textarea:focus,
.modal .my_table_data_no_child td .form-control:focus,
.modal .my_table_data_no_child td .form-select:focus,
.modal .my_table_data_no_child td input:focus,
.modal .my_table_data_no_child td select:focus,
.modal .my_table_data_no_child td textarea:focus,
#main .hu_table td .form-control:focus,
#main .hu_table td .form-select:focus,
#main .hu_table td input:focus,
#main .hu_table td select:focus,
#main .hu_table td textarea:focus,
.modal .hu_table td .form-control:focus,
.modal .hu_table td .form-select:focus,
.modal .hu_table td input:focus,
.modal .hu_table td select:focus,
.modal .hu_table td textarea:focus {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: rgba(41, 76, 161, 0.06) !important;
    outline: none !important;
}

/* ── Pagination ────────────────────────────────────────────────────── */
#main .pagination .page-link,
.modal .pagination .page-link {
    color: var(--co-on-surface) !important;
    border: 1px solid var(--co-outline) !important;
    background: #fff !important;
}
#main .pagination .page-link:hover,
.modal .pagination .page-link:hover {
    background: var(--co-secondary-container) !important;
    color: var(--co-secondary) !important;
    border-color: var(--co-outline) !important;
}
#main .pagination .page-item.active .page-link,
.modal .pagination .page-item.active .page-link {
    background: var(--co-primary) !important;
    border-color: var(--co-primary) !important;
    color: #fff !important;
}

/* ── Bootstrap tabs (대시보드 pill 탭 .co-tab-row 는 제외) ──────────────
   밑줄·하단선 없이 '도형(배경)색'으로만 구분:
   비활성 = 연베이지 칩 / hover = 살짝 진한 베이지 / 활성 = 진회색(테마 주색) 칩 */
#main .nav-tabs:not(.co-tab-row),
.modal .nav-tabs:not(.co-tab-row) { border-bottom: 0 !important; }
#main .nav-tabs:not(.co-tab-row) .nav-link,
.modal .nav-tabs:not(.co-tab-row) .nav-link {
    color: var(--co-on-variant) !important;
    background: var(--co-surface-high) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
}
#main .nav-tabs:not(.co-tab-row) .nav-link:hover,
.modal .nav-tabs:not(.co-tab-row) .nav-link:hover {
    background: var(--co-surface-highest) !important;
    color: var(--co-on-surface) !important;
}
#main .nav-tabs:not(.co-tab-row) .nav-link.active,
.modal .nav-tabs:not(.co-tab-row) .nav-link.active {
    color: var(--co-on-primary) !important;
    background: var(--co-primary) !important;
    border: none !important;
    font-weight: 700 !important;
}
/* 대시보드 .co-tab-row 는 자체 pill 스타일 유지 (Bootstrap nav-tabs 영향 차단) */
#main .co-tab-row.nav-tabs,
.co-tab-row.nav-tabs {
    border-bottom: 0 !important;
    border-radius: 999px !important;
    align-items: center !important;
}
/* Bootstrap .nav-tabs .nav-link 의 margin/테두리 강제값 제거 →
   버튼이 뒤 pill 카드에 정확히 맞도록(상하 밀림·크기 어긋남 방지) */
#main .co-tab-row.nav-tabs .co-tab,
.co-tab-row.nav-tabs .co-tab {
    margin: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    line-height: 1 !important;
}

/* 인사정보 탭바(#tab_btns) 색 통일 — 위 nav-tabs 와 동일 톤(도형색만, 밑줄 없음).
   비활성 = 연베이지 칩(전부 동일, hover/focus 색 안 바뀜), 활성 = 진회색 칩 */
#tab_btns .nav-link,
#tab_btns .nav-link:hover,
#tab_btns .nav-link:focus,
#tab_btns .nav-link:active {
    background-color: var(--co-surface-high) !important;
    color: var(--co-on-variant) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
#tab_btns .nav-link.active {
    background-color: var(--co-primary) !important;
    color: var(--co-on-primary) !important;
    border: none !important;
    font-weight: 700 !important;
}

/* ── Badges (bg-* utilities) ───────────────────────────────────────── */
#main .badge.bg-primary { background: var(--co-primary) !important; color: #fff !important; }
#main .badge.bg-secondary { background: var(--co-secondary) !important; color: #fff !important; }
#main .badge.bg-success { background: #2c9c66 !important; color: #fff !important; }
#main .badge.bg-warning { background: var(--co-tertiary) !important; color: var(--co-tertiary-on) !important; }
#main .badge.bg-danger { background: #d65c45 !important; color: #fff !important; }
#main .badge.bg-info { background: var(--co-secondary-container) !important; color: var(--co-secondary) !important; }

/* ── Don't apply globals to the dashboard hero (it has its own theme) ─ */
.co-bento-page .btn-primary,
.co-bento-page .nav-tabs .nav-link {
    /* dashboard already styled via co-* classes; bootstrap classes inside
       are largely cosmetic — let dashboard styles win via existing rules */
}

/* ==========================================================================
   Sidebar collapse / expand toggle (chuncheon-inspired)
   ========================================================================== */
#aside, #main { transition: width 0.25s ease, padding-left 0.25s ease, opacity 0.2s ease; }

/* Collapse button — sits inside the cream menu bar at its top-right */
#sidebar-collapse-btn {
    position: absolute;
    top: 14px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--co-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(57, 56, 47, 0.16);
    transition: all 0.18s ease;
    z-index: 5;
}
#sidebar-collapse-btn:hover {
    background: var(--co-secondary);
    color: #fdc003;
    transform: scale(1.08);
}
#sidebar-collapse-btn .material-icons { font-size: 18px; }

/* Expand button — appears at the top-left when the menu is collapsed */
#sidebar-expand-btn {
    position: fixed;
    top: 96px;
    left: 18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--co-secondary);
    color: #fdc003;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.28);
    transition: all 0.18s ease;
    z-index: 1002;
}
#sidebar-expand-btn:hover {
    background: var(--co-primary);
    color: #fdc003;
    transform: scale(1.08);
}
#sidebar-expand-btn .material-icons { font-size: 22px; }

/* Collapsed state — hide the menu and reclaim the space */
body.sidebar-collapsed #aside {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    opacity: 0;
}
body.sidebar-collapsed #main { padding-left: 0 !important; }
body.sidebar-collapsed #sidebar-collapse-btn { display: none; }
body.sidebar-collapsed #sidebar-expand-btn { display: flex; }

/* Tables (.scroll_div / .sot) — match the new 256px menu bar and adjust on collapse */
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) {
    left: 270px !important;
}
body.sidebar-collapsed .scroll_div:not([style*="left:"]),
body.sidebar-collapsed .sot:not([style*="left:"]) {
    left: 20px !important;
}

/* Slim down the menu bar so tables have more horizontal room */
#aside { width: 220px !important; }
#main { padding-left: 220px !important; }
#base_logo_div { width: 220px !important; padding-right: 40px !important; }
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) { left: 234px !important; }

/* Match the chuncheon project's menu bar width (240px) */
#aside { width: 240px !important; }
#main { padding-left: 240px !important; }
#base_logo_div { width: 240px !important; padding-right: 48px !important; }
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) { left: 254px !important; }

/* Stop the page header / filter row from extending under the menu bar */
#main { overflow-x: clip !important; }  /* hidden 은 overflow-y auto 승격(외부 이중스크롤) — clip 으로 */
#main #content_div,
#main #content_load,
#main .content_li {
    max-width: 100%;
    box-sizing: border-box;
    /* white-space: normal 제거 — body의 nowrap이 기본으로 상속되어야 한글 라벨이 글자별로 세로로 깨지지 않음 */
}
/* 검색 필터 / 버튼 바: 강제 가로 정렬 + nowrap (한글 라벨이 세로로 깨지는 문제 차단) */
#main .search_box,
#main .button_box,
.modal .search_box,
.modal .button_box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
/* 컬럼들 (col-auto 등) 자기 콘텐츠 폭만큼만 차지 */
#main .search_box > .col,
#main .search_box > .col-auto,
#main .search_box > [class*="col-"],
.modal .search_box > .col,
.modal .search_box > .col-auto,
.modal .search_box > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}
/* input-group 도 가로 한 줄, 안 깨지게 */
#main .search_box .input-group,
.modal .search_box .input-group {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    align-items: stretch !important;
}
#main .search_box .input-group > *,
.modal .search_box .input-group > * {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* 라벨 텍스트는 절대 줄 안 바뀌게 */
#main .search_box .input-group-text,
#main .search_box label,
#main .search_box .label-form-style,
#main .button_box label,
.modal .search_box .input-group-text,
.modal .search_box label,
.modal .search_box .label-form-style {
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex-shrink: 0 !important;
    font-weight: 700 !important;   /* 조회필터 라벨 볼드 — NanumSquare 엔 중간굵기가 없어 얇아지는 것 보정 */
}

/* ── 폰트 볼드 보정 (NanumSquare_ac 는 300/400/700/800 만 있어 500/600·기본굵기가 얇게 보임).
   조회필터·표 헤더 등 '제목/라벨 계열'은 700 으로 통일. ─────────────────────────── */
#main .my_table_data th,
#main .my_table_data_no_child th,
#main .my_table_input th,
.modal .my_table_data th,
.modal .my_table_data_no_child th,
.modal .my_table_input th,
#main .hu_table th,
#main .hu_table_input th,
#main .hu_table_show th,
.modal .hu_table th,
.modal .hu_table_input th,
.modal .hu_table_show th {
    font-weight: 700 !important;
}
/* 조건설정 모달(조건별사원내역조회·조건별차량조회 table.condition_form_table) 라벨칸 — 가운데 정렬이
   글자 길이가 제각각(조회범위/재직기준일/사번…)이라 들쭉날쭉해 보여 왼쪽 정렬로.
   (차량 쪽은 #condition_table 이 본문 결과 div 라 id 대신 표에 붙인 클래스로 잡는다) */
.modal .condition_form_table th {
    text-align: left !important;
    padding-left: 10px !important;
    white-space: nowrap;
}
/* 조건설정 모달 범위칸(시작 ~ 끝) — 예전엔 td 자체에 .input-group(인사) / .d-flex(차량) 를 붙여 (td 는
   table-cell 이라 flex 가 안 먹혀) 시작칸·물결·끝칸이 세로로 쌓여 행이 3줄 높이로 부풀고, input-group 통합
   규칙이 테두리·흰 배경을 되살려 단일 칸(무테)과 어긋난 "칸 안의 칸" 이 됐던 것.
   전용 래퍼(.range_pair)로 가로 한 줄 + 무테로 통일. input / select / select2 모두 반반 나눠 가진다. */
.modal .condition_form_table td .range_pair {
    display: flex;
    align-items: center;
    width: calc(100% + 6px);   /* td padding(0 3px) 만큼 넓혀 단일 칸과 같은 폭 */
    margin: 0 -3px;
}
.modal .condition_form_table td .range_pair > input,
.modal .condition_form_table td .range_pair > select,
.modal .condition_form_table td .range_pair > .select2-container {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.modal .condition_form_table td .range_pair > .range_tilde {
    flex: 0 0 auto;
    padding: 0 8px;
    color: var(--co-on-surface-variant, #6b7280);
    line-height: 33px;
}
/* 조건별사원내역조회·조건별차량내역조회 오른쪽 [항목] 체크 목록(#check_table) — 항목 이름 칸(2열)이
   가운데 정렬이라 글자 길이(사번/차량등록번호/내압용기검사일…)에 따라 들쭉날쭉 → 왼쪽 정렬. 체크박스 열은 그대로 */
#main #check_table th:nth-child(2),
#main #check_table td:nth-child(2) {
    text-align: left !important;
    padding-left: 10px !important;
}
/* 조회필터 입력/선택 글자도 또렷하게 */
#main .search_box .form-select,
#main .search_box .form-control,
#main .search_box select,
#main .search_box input,
.modal .search_box .form-select,
.modal .search_box .form-control,
.modal .search_box select,
.modal .search_box input {
    font-weight: 700 !important;
}
/* 탭(기본정보·기타정보 등) 라벨 볼드 — 비활성 탭도 */
#main .nav-tabs .nav-link,
.modal .nav-tabs .nav-link {
    font-weight: 700 !important;
}
#content_load { padding-left: 20px !important; padding-right: 16px !important; }

/* Add a clear gap between the menu bar and the page content / table */
#content_load { padding-left: 36px !important; padding-right: 20px !important; }
.scroll_div:not([style*="left:"]),
.sot:not([style*="left:"]) { left: 280px !important; }

/* ==========================================================================
   Page content polish — table containers + spacing
   ========================================================================== */
/* Scroll containers shouldn't draw an empty box below short tables */
.scroll_div {
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 440px) !important;
    border: none !important;
    background: transparent !important;
    overflow: auto !important;
}
.sot {
    border: none !important;
}

/* Page-specific: more breathing room between 수입금등록 form and 수입금정보 table */
.scroll_div[style*="top: 400px"] { top: 432px !important; }

/* Card-style data + input tables — 강제 table 레이아웃 + nowrap (display 깨져도 복원) */
.my_table_data,
.my_table_data_no_child,
.my_table_input,
.hu_table,
.hu_table_input,
.hu_table_show {
    display: table !important;
    border-collapse: collapse !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(57, 56, 47, 0.07) !important;
    background: #ffffff !important;
}
.my_table_data > thead,
.my_table_data > tbody,
.my_table_data > tfoot,
.my_table_data_no_child > thead,
.my_table_data_no_child > tbody,
.my_table_data_no_child > tfoot,
.my_table_input > thead,
.my_table_input > tbody,
.my_table_input > tfoot,
.hu_table > thead,
.hu_table > tbody,
.hu_table > tfoot,
.hu_table_input > thead,
.hu_table_show > thead,
.hu_table_input > tbody,
.hu_table_show > tbody,
.hu_table_input > tfoot,
.hu_table_show > tfoot {
    display: table-row-group !important;
}
.my_table_data tr,
.my_table_data_no_child tr,
.my_table_input tr,
.hu_table tr,
.hu_table_input tr,
.hu_table_show tr {
    display: table-row !important;
}
.my_table_data > tbody > tr > th,
.my_table_data > tbody > tr > td,
.my_table_data > thead > tr > th,
.my_table_data > thead > tr > td,
.my_table_data_no_child > tbody > tr > th,
.my_table_data_no_child > tbody > tr > td,
.my_table_data_no_child > thead > tr > th,
.my_table_data_no_child > thead > tr > td,
.my_table_input > tbody > tr > th,
.my_table_input > tbody > tr > td,
.my_table_input > thead > tr > th,
.my_table_input > thead > tr > td,
.hu_table > tbody > tr > th,
.hu_table > tbody > tr > td,
.hu_table > thead > tr > th,
.hu_table > thead > tr > td,
.hu_table_input > tbody > tr > th,
.hu_table_show > tbody > tr > th,
.hu_table_input > tbody > tr > td,
.hu_table_show > tbody > tr > td,
.hu_table_input > thead > tr > th,
.hu_table_show > thead > tr > th,
.hu_table_input > thead > tr > td,
.hu_table_show > thead > tr > td {
    display: table-cell !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
}
/* 인라인 display:none(항목조회 조건부 컬럼 숨김 등)은 위 table-cell !important보다 우선 — 숨김 동작 복원 */
.my_table_data [style*="display: none"],
.my_table_data_no_child [style*="display: none"],
.my_table_input [style*="display: none"],
.hu_table [style*="display: none"],
.hu_table_input [style*="display: none"],
.hu_table_show [style*="display: none"] {
    display: none !important;
}

/* d-none 으로 숨긴 표/행/칸(행 추가용 '빈 줄 원본' 등)도 위 display:table !important 보다 우선.
   .d-none(0,1,0) 은 위 강제 규칙과 특정도가 같아 뒤에 로드되는 이 파일에 밀려 숨김이 풀렸고,
   자재 부품 입출고등록의 #empty_form 견본 행이 전표총계 위에 그대로 노출됐다. */
.my_table_data.d-none,
.my_table_data_no_child.d-none,
.my_table_input.d-none,
.my_table_data .d-none,
.my_table_data_no_child .d-none,
.my_table_input .d-none,
.hu_table.d-none,
.hu_table_input.d-none,
.hu_table_show.d-none,
.hu_table .d-none,
.hu_table_input .d-none,
.hu_table_show .d-none {
    display: none !important;
}
.my_table_data th.table_main,
.my_table_data_no_child th.table_main,
.my_table_input th.table_main,
.hu_table th.table_main,
.hu_table_input th.table_main,
.hu_table_show th.table_main {
    background: linear-gradient(170deg, var(--co-primary) 0%, var(--co-secondary) 100%) !important;
    border-radius: 14px 14px 0 0;
    padding: 10px 14px !important;
    font-size: 14px !important;
    letter-spacing: 0.02em;
}

/* Buttons row above the input table — give it a bit of bottom space */
#content_load .button_box { margin-bottom: 8px !important; }
#first_load { margin-bottom: 4px; }

/* ==========================================================================
   Universal page layout — make scroll_div / sot flow with the content
   (eliminates per-page inline top:NNNpx overlaps with filters/headers)
   ========================================================================== */
.scroll_div, .sot {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 240px);
    margin-top: 16px !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box;
}

/* Comfortable spacing around page header chunks */
.sub_title { margin-bottom: 12px !important; }
.nav-tabs { margin-bottom: 12px !important; }
.search_box { margin-bottom: 8px !important; }
/* 하단 패딩 32→12px: 표 스크롤 영역을 20px 키우는 몫 (fit_table_scrollers reserve 와 짝) */
#content_load { padding-bottom: 12px !important; }

/* ==========================================================================
   조회 필터라인 ↔ 테이블 간격 통일 (전 페이지 공통).
   페이지/탭마다 테이블 wrapper(scroll_div=margin-top 16px / overflow-auto=0)와
   table margin(mt-0·mt-3·기본)이 제각각이라 필터↔테이블 간격이 달라 보이던 것을
   "필터(.search-bar / form.search_box) 다음 첫 블록의 윗간격 = 12px" 로 일원화.
   - 특정 wrapper 클래스에 한정하지 않고 '다음 형제 요소' 전반에 적용 (페이지 불문 동일 간격)
   - 페이지 탭(nav-tabs)·스크립트/스타일 노드는 제외
   ========================================================================== */
#main .search-bar + *:not(.nav):not(.nav-tabs):not(script):not(style),
#main form.search_box + *:not(.nav):not(.nav-tabs):not(script):not(style),
#main div.search_box + *:not(.nav):not(.nav-tabs):not(script):not(style),
.modal .search-bar + *:not(.nav):not(.nav-tabs):not(script):not(style),
.modal form.search_box + *:not(.nav):not(.nav-tabs):not(script):not(style),
.modal div.search_box + *:not(.nav):not(.nav-tabs):not(script):not(style) {
    margin-top: 12px !important;
}
/* 그 다음 '블록(wrapper)' 안에 든 첫 테이블은 윗마진 제거 (wrapper 가 이미 12px 가졌으니
   내부 테이블 mt-0/mt-3/기본이 또 더해지면 간격이 커짐). 필터 바로 다음이 테이블 자신이면
   위 규칙으로 그 테이블이 12px 를 가지므로 여기서 건드리지 않음(더 높은 specificity 라 유지됨). */
#main .search-bar + * > table:first-child,
#main form.search_box + * > table:first-child,
#main div.search_box + * > table:first-child,
.modal .search-bar + * > table:first-child,
.modal form.search_box + * > table:first-child,
.modal div.search_box + * > table:first-child {
    margin-top: 0 !important;
}

/* 필터(.search-bar / form.search_box)와 테이블 사이에 wrapper 가 끼어 간격이 2중(12+16px)으로
   벌어지던 것을, scroll_div 윗마진 제거로 수입금조회와 동일한 단일 12px 로 통일 (전 페이지 공통).
   (1) 필터 다음 wrapper(form/div) 안에 scroll_div 가 직접 든 경우 (예: 마감검증 checked_delete_form)
   (2) 필터와 scroll_div 사이에 빈 POST 폼이 끼어 scroll_div 가 형제로 오는 경우 (예: 마감 탭)
   ※ 필터 바로 다음이 scroll_div 자신인 경우(수입금조회)는 매칭 안 됨 → 기존 12px 그대로 유지 */
#main form.search_box + * > .scroll_div,
#main .search-bar + * > .scroll_div,
#main div.search_box + * > .scroll_div,
.modal form.search_box + * > .scroll_div,
.modal .search-bar + * > .scroll_div,
.modal div.search_box + * > .scroll_div,
#main form.search_box + form + .scroll_div,
#main .search-bar + form + .scroll_div,
#main div.search_box + form + .scroll_div,
.modal form.search_box + form + .scroll_div,
.modal .search-bar + form + .scroll_div,
.modal div.search_box + form + .scroll_div {
    margin-top: 0 !important;
}
/* 2단(좌 목록 / 우 폼) 화면에서 좌측 목록이 래퍼(#target_table 등) 안에 한 단계 더 들어가면
   위 규칙(직계 자식만)에서 빠져 16px 이 남아 두 표의 윗선이 어긋남(공지사항 Tap1) — 손자도 동일 적용 */
/* :not([style*="width"]) 는 아래 '#main .scroll_div:not(width):not(left)' 리셋(특이도 1,3,0)을 이기기 위한 보강 */
#main form.search_box + * > * > .scroll_div:not([style*="width"]),
#main .search-bar + * > * > .scroll_div:not([style*="width"]),
#main div.search_box + * > * > .scroll_div:not([style*="width"]) {
    margin-top: 0 !important;
}

/* Ensure inner table fills its card cleanly */
.scroll_div > div, .scroll_div > form, .sot > div, .sot > form { width: 100%; }
.scroll_div table, .sot table { width: 100% !important; }

/* HARD reset — beat any prior `.scroll_div:not([style*=...])` left/top/right rules */
body .scroll_div,
body .sot,
body .scroll_div[style],
body .sot[style] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 240px) !important;
    margin: 16px 0 0 0 !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* FINAL hard reset — use #main to beat every earlier .scroll_div:not(...) rule */
#main .scroll_div,
#main .sot,
#main form.scroll_div,
#main form.sot {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 240px) !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Search filter inputs — revert to a more squared look (less round) */
.search_box input,
.search_box select,
.search_box .form-control,
.search_box .form-select,
.search_box textarea,
.search_box .select2-container--default .select2-selection--single {
    border-radius: 4px !important;
}

/* ── 날짜범위(시작~끝) 등 .search_box 안 input-group 칸의 안쪽(맞물리는) 모서리 직선화 ──
   문제: 단독필터 풀라운드 규칙 `#main .search_box input:not(체크):not(라디오):not(히든)`
   (specificity 1,4,1 · radius 6px)이 세그먼트 규칙 `#main .input-group > input:not(체크):not(라디오)`
   (1,3,1 · radius 0)을 이겨, input-group 안 가운데/시작 날짜칸이 양옆 다 둥글게 나오던 것.
   (:not([type=hidden]) 하나 차이로 specificity 가 역전됨. 끝칸은 :last-child 보강이 있어 정상이었음)
   해결: .search_box .input-group 까지 명시해 (1,5,1)/(1,6,1)로 세그먼트 모양을 되돌림.
   가운데=직선 / 끝칸=우측만 라운드 / 첫칸이 input 이면 좌측만 라운드 */
#main .search_box .input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.modal .search_box .input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    border-radius: 0 !important;
}
#main .search_box .input-group > input:last-child:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.modal .search_box .input-group > input:last-child:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    border-radius: 0 6px 6px 0 !important;
}
#main .search_box .input-group > input:first-child:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.modal .search_box .input-group > input:first-child:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    border-radius: 6px 0 0 6px !important;
}

/* 팝업(bare <main> — #main/.modal 스코프 밖) 안 .search_box input-group 도 동일하게 안쪽 직선.
   (이쪽은 풀라운드 !important 규칙이 .search_box .form-control(4px)뿐이라 낮은 specificity 로 충분) */
.search_box .input-group > :not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.search_box .input-group > :not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* ==========================================================================
   미니카드 (.co-minicard) — 조회 결과 요약칩(시급적용일자/근무인원/합계 등).
   기존 list_group_item.html(세로 stack list-group-item) → 가로 컴팩트 칩으로 교체.
   라벨+값 한 줄, 그레이 칩이라 조회 버튼 라인 우측에 올려도 자연스러움.
   ========================================================================== */
.co-minicard {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    min-height: 31px;
    background: #eef0f3;
    border: none;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
    box-sizing: border-box;
}
/* flex gap 이 없는 컨테이너(info_box = list-group list-group-horizontal)에서만 칩 간격 부여.
   조회/액션 라인은 d-flex gap-1 로 감싸 컨테이너 gap 이 간격을 처리하므로, 여기서 또 margin 을 주면
   버튼↔카드(gap-1)와 카드↔카드 간격이 어긋남 → 그쪽엔 추가 여백 주지 않음. */
.list-group-horizontal > .co-minicard + .co-minicard { margin-left: 6px; }
.co-minicard__key {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}
.co-minicard__val {
    font-size: 14px;
    font-weight: 700;
    color: #2f3338;
}
/* info_box(list-group list-group-horizontal) 안에 들어가도 칩 형태 유지 — 기존
   list-group 테두리/라운드 상속 끊고 위 .co-minicard 스타일만 보이게 */
.list-group.list-group-horizontal > .co-minicard { border-radius: 8px !important; }

/* ==========================================================================
   조회 필터칸 공통 베이스 — 라벨 그룹(.input-group) 밖에 단독으로 놓인
   select / select2 / input 필터칸도 동일한 톤으로 통일.
   (예: 라벨 없이 col-auto 안에 바로 {{ extra_form.x }} 로 렌더되는 단독 select2)
   - 무테 · 높이 31px · 연한 크림 배경칠(--co-surface-high) · 6px 풀라운드 (범일 스타일)
   - input-group 안의 칸은 아래 통합 규칙이 더 높은 specificity 로 덮어써
     세그먼트(가운데 직선) 모양 유지. 여기선 단독칸만 풀라운드로 처리됨.
   ========================================================================== */
#main .search_box select,
#main .search_box .form-control,
#main .search_box .form-select,
#main .search_box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.modal .search_box select,
.modal .search_box .form-control,
.modal .search_box .form-select,
.modal .search_box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    /* 연한 #d7dde6 테두리 + 흰 배경 */
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    min-height: 31px !important;
    background-color: #fff !important;
}
#main .search_box select:focus,
#main .search_box .form-control:focus,
#main .search_box .form-select:focus,
#main .search_box input:focus:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.modal .search_box select:focus,
.modal .search_box .form-control:focus,
.modal .search_box .form-select:focus,
.modal .search_box input:focus:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    /* 포커스 — 흰 배경 + 테두리 강조 + 옅은 링 */
    background-color: #fff !important;
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 2px rgba(109, 99, 84, 0.15) !important;
}
#main .search_box .select2-container--default .select2-selection--single,
.modal .search_box .select2-container--default .select2-selection--single {
    border: 1px solid #d7dde6 !important;
    border-radius: 6px !important;
    height: 31px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #fff !important;
}
#main .search_box .select2-container--default.select2-container--focus .select2-selection--single,
.modal .search_box .select2-container--default.select2-container--focus .select2-selection--single {
    background-color: #fff !important;
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 2px rgba(109, 99, 84, 0.15) !important;
}
/* select2 내부 텍스트/화살표 세로 정렬 (그룹·단독 공통) */
#main .search_box .select2-selection--single .select2-selection__rendered,
.modal .search_box .select2-selection--single .select2-selection__rendered {
    line-height: 29px !important;
}
#main .search_box .select2-selection--single .select2-selection__arrow,
.modal .search_box .select2-selection--single .select2-selection__arrow {
    height: 29px !important;
}
/* 필터 select2 폭 고정 — 탭 숨김 상태에서 init 되면 폭이 0 으로 접히거나,
   선택 내용에 따라 늘었다 줄었다 하던 문제 방지. 처음부터 일정 너비(200px) 유지. */
#main .search_box .select2-container,
.modal .search_box .select2-container {
    width: 280px !important;     /* 조회칸 select2 고정 폭 — 부품명 같은 긴 이름을 위해 200→280 */
    min-width: 280px !important;
    flex: 0 0 auto !important;   /* input-group(flex) 안에서 눌려 줄어들지 않게 — 폭은 항상 고정 */
}

/* ==========================================================================
   조회 페이지 공통 — 액션 버튼 줄 + 필터(조회) 줄을 한 줄로 합치는 레이아웃.
   기존: [액션버튼 줄] 위 / [필터 + 조회] 아래 → 두 줄(불필요한 세로 여백)
   변경: 두 블록을 <div class="search-bar"> 로 감싸 한 줄로 정렬.
     - display:flex; align-items:center; justify-content:space-between
     - 왼쪽 = 필터(.search_box: 일자/차량 + 조회) / 오른쪽 = 액션 버튼들(맨 끝)
     - 조회와 액션이 정확히 같은 가로선(세로 가운데). 액션의 위쪽 여백 0.
     - 버튼 이름/개수 무관(구조 기준). 액션이 자체 <form> 을 품어도 형제라 HTML 유효.
   ========================================================================== */
.search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;             /* 세로 가운데 — 조회와 액션 같은 가로선 */
    justify-content: space-between;  /* 왼쪽 필터 / 오른쪽 액션 */
    gap: 8px 12px;
}
.search-bar > form.search_box {      /* 왼쪽 그룹: 필터 + 조회 */
    order: 0;
    align-self: center;
    margin: 0 !important;
}
.search-bar > :not(.search_box) {    /* 오른쪽 그룹: 액션 버튼들 → 맨 오른쪽 끝 */
    order: 1;
    align-self: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
}
/* 액션 줄 내부(버튼/폼)의 위쪽 여백 제거 — 세로 어긋남(살짝 처짐) 방지 */
.search-bar > :not(.search_box) > * {
    margin-top: 0 !important;
}

/* 패턴 B: 액션 button_box 가 이미 필터 폼(.search_box, form 또는 div) 안에
   들어있는 경우 → 템플릿 수정 없이 오른쪽 끝 + 세로 가운데 정렬 (필터는 왼쪽 유지). */
#main .search_box > .button_box,
.modal .search_box > .button_box {
    order: 99;
    margin-left: auto !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: center;
}

/* ── search-bar 안 모든 버튼(조회 + 액션) 박스 메트릭 완전 통일 ──
   조회는 btn-sm, 출력은 레거시 print_btn, 일부는 outline 등 시스템이 섞여 있어
   height/padding/line-height 가 미묘하게 달라 조회만 어긋나 보임.
   → search-bar 안 버튼을 전부 동일 박스(높이 31px·동일 패딩·line-height:1·세로 가운데)로 강제.
   #main 스코프로 레거시(#main .btn_print 등)·btn-sm 보다 우선순위 확보. */
#main .search-bar button,
#main .search-bar .btn,
.modal .search-bar button,
.modal .search-bar .btn {
    height: 31px !important;
    min-height: 31px !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}
/* 액션 줄(button_box)이 버튼을 세로로 늘리지(stretch) 않고 가운데 정렬 + 내부 폼 여백 0 */
#main .search-bar .button_box,
.modal .search-bar .button_box {
    align-items: center !important;
}
#main .search-bar .button_box > form,
.modal .search-bar .button_box > form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ==========================================================================
   조회 필터 통합 스타일 — 모든 페이지의 라벨+입력칸(.input-group).
   무테 + 배경색(라벨=진한 베이지 / 입력칸=연한 크림)으로 구분되는 세그먼트 형태 + 높이 통일. (범일 스타일)
   - 적용 범위: #main / .modal 안의 모든 .input-group
     (필터폼 class 가 .search_box / d-flex 등 제각각이라, 공통 컨테이너인
      .input-group 기준으로 잡아 시외배차 등 모든 페이지에 동일 적용.
      입력폼은 .input-group 을 거의 안 써서 영향 없음)
   - 무테(테두리 없음), 라벨=진한 베이지(--co-secondary-container) / 입력칸=연한 크림(--co-surface-high)
   - 첫 칸만 좌측 라운드 / 마지막 칸만 우측 라운드 / 중간 칸은 직선
     → 날짜범위(시작~끝)·집계기준(다중 select)·멀티초이스도 한 덩어리로 보임
   - 칸 사이 경계는 한 줄만 (1px 겹침으로 이중선 방지)
   - 라벨·일반select·select2·날짜 모두 높이 31px 로 통일 → 페이지마다 동일하게 정렬
   - #main / .modal id 스코프로 위쪽 폼 규칙(#main .form-control 등)보다 우선순위 확보
   ========================================================================== */

/* 1) 그룹 내 모든 칸: 연한 테두리 + 흰 배경 + 높이 통일 + 기본 각진 모서리 */
#main .input-group > .input-group-text,
#main .input-group > .label-form-style,
#main .input-group > .form-control,
#main .input-group > .form-select,
#main .input-group > select,
#main .input-group > input:not([type="checkbox"]):not([type="radio"]),
#main .input-group > .d-flex,
.modal .input-group > .input-group-text,
.modal .input-group > .label-form-style,
.modal .input-group > .form-control,
.modal .input-group > .form-select,
.modal .input-group > select,
.modal .input-group > input:not([type="checkbox"]):not([type="radio"]),
.modal .input-group > .d-flex {
    /* 연한 쿨그레이(#d7dde6) 테두리 + 흰 배경 + 높이 통일 + 기본 각진 모서리 */
    border: 1px solid #d7dde6 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    min-height: 31px !important;
}
/* input-group 안 native select — Bootstrap(.input-group-sm > .form-select)이 화살표 자리로 우측 3rem(48px)을
   비워 두어, 폭을 80~100px 로 고정한 칸(근태입력 노선·결행사유/예비차 오전오후 등)에서 글자 영역이 24px 로
   줄어 '100'·'오전' 이 잘려 보이던 것. 화살표(16px)에 필요한 만큼만 남긴다 → 글자 영역 +20px. */
#main .input-group > .form-select,
#main .input-group > select.form-select,
.modal .input-group > .form-select,
.modal .input-group > select.form-select {
    padding-right: 1.75rem !important;
    background-position: right 0.5rem center !important;
}
#main .input-group .select2-container--default .select2-selection--single,
.modal .input-group .select2-container--default .select2-selection--single {
    border: 1px solid #d7dde6 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    height: 31px !important;
    display: flex !important;
    align-items: center !important;
}
/* select2 내부 텍스트/화살표 세로 정렬 (높이 31px 기준) */
#main .input-group .select2-selection--single .select2-selection__rendered,
.modal .input-group .select2-selection--single .select2-selection__rendered {
    line-height: 29px !important;
}
#main .input-group .select2-selection--single .select2-selection__arrow,
.modal .input-group .select2-selection--single .select2-selection__arrow {
    height: 29px !important;
}
/* 1-focus) 포커스 — 흰 배경 유지 + 테두리 강조 + 옅은 링 */
#main .input-group > input:focus:not([type="checkbox"]):not([type="radio"]),
#main .input-group > select:focus,
#main .input-group > .form-control:focus,
#main .input-group > .form-select:focus,
.modal .input-group > input:focus:not([type="checkbox"]):not([type="radio"]),
.modal .input-group > select:focus,
.modal .input-group > .form-control:focus,
.modal .input-group > .form-select:focus {
    background-color: #fff !important;
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 2px rgba(109, 99, 84, 0.15) !important;
    position: relative !important;
    /* Bootstrap 기본(5)과 같게. 2 로 두면 뒤에 오는 버튼(.input-group > .btn, z-index 2)이
       포커스 테두리·링의 오른쪽을 덮어 잘려 보인다(인사정보 사원목록 검색칸 등) */
    z-index: 5 !important;
}
#main .input-group .select2-container--default.select2-container--focus .select2-selection--single,
.modal .input-group .select2-container--default.select2-container--focus .select2-selection--single {
    background-color: #fff !important;
    border-color: var(--co-secondary) !important;
    box-shadow: 0 0 0 2px rgba(109, 99, 84, 0.15) !important;
    position: relative !important;
    z-index: 5 !important;
}

/* 2) 칸 사이는 테두리를 1px 겹치게 → 같은 색 테두리가 한 줄로 보이도록.
   (왼쪽 테두리를 지우는 대신 겹치는 방식. 일부 input 은 속성 선택자 때문에
    specificity 가 높아 border-left:0 이 안 먹어 경계가 2px 로 진해 보였음) */
#main .input-group > :not(:first-child),
.modal .input-group > :not(:first-child) {
    margin-left: -1px !important;
}

/* 3) 바깥 모서리만 둥글게 (첫 칸 좌측 / 마지막 칸 우측) */
#main .input-group > :first-child,
.modal .input-group > :first-child {
    border-radius: 6px 0 0 6px !important;
}
#main .input-group > :last-child,
.modal .input-group > :last-child {
    border-radius: 0 6px 6px 0 !important;
}
/* 마지막 칸이 input/select 직접 요소일 때 — baseline·rule1 을
   이기도록 우측 라운드를 더 높은 specificity 로 보장 (날짜범위 끝날짜·텍스트 검색칸 등) */
#main .input-group > input:last-child:not([type="checkbox"]):not([type="radio"]),
#main .input-group > select:last-child,
#main .input-group > .form-control:last-child,
#main .input-group > .form-select:last-child,
.modal .input-group > input:last-child:not([type="checkbox"]):not([type="radio"]),
.modal .input-group > select:last-child,
.modal .input-group > .form-control:last-child,
.modal .input-group > .form-select:last-child {
    border-radius: 0 6px 6px 0 !important;
}
/* select2 가 마지막 칸일 때 — 우측 라운드는 내부 selection 에 적용 */
#main .input-group > .select2-container:last-child .select2-selection--single,
.modal .input-group > .select2-container:last-child .select2-selection--single {
    border-radius: 0 6px 6px 0 !important;
}

/* 4) 첫 칸이 라벨일 때만 — 중성 라이트그레이 배경 + 슬레이트 글자로 흰 입력칸과 구분 (가운데 '~' 구분칸 제외) */
#main .input-group > .input-group-text:first-child,
#main .input-group > .label-form-style:first-child,
.modal .input-group > .input-group-text:first-child,
.modal .input-group > .label-form-style:first-child {
    background-color: #f4f5f7 !important;
    color: #475569 !important;
    font-weight: 700 !important;
}
/* 4-보강) 조회필터 라벨(.label-form-style)은 위치/구조와 무관하게 항상 연회색.
   일부 페이지(개인배차현황 등)에서 :first-child 조건에 안 걸려 누락되던 것 일괄 보정.
   '~' 구분칸은 label-form-style 이 아니므로 영향 없음. */
#main .label-form-style,
.modal .label-form-style {
    background-color: #f4f5f7 !important;
    color: #475569 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   레거시 버튼 클래스(.btn_get/.btn_print/.btn_post/.btn_blue/.btn_red/.btn_black)
   를 표준 버튼(btn btn-sm + col_min + co-act-*)과 동일하게 통일.
   - 크기: 표준 btn-sm(padding .25rem .5rem, font .875rem, radius 8px) + col_min(130px)
     → 다른 페이지 조회/저장 버튼과 가로·세로 크기 일치
   - 색: co-act 체계로 매핑 (조회=파랑 / 저장=노랑 / 출력=슬레이트 / 삭제=코랄)
   (시외배차 등 레거시 마크업 페이지 버튼이 한 번에 표준과 동일해짐)
   ========================================================================== */
#main .btn_get,    .modal .btn_get,
#main .btn_print,  .modal .btn_print,
#main .btn_post,   .modal .btn_post,
#main .btn_blue,   .modal .btn_blue,
#main .btn_red,    .modal .btn_red,
#main .btn_black,  .modal .btn_black {
    min-width: 130px !important;            /* col_min 과 동일 */
    height: 31px !important;                /* 고정 높이 — d-flex 부모에서 세로로 늘어나는 것 방지 */
    align-self: center !important;          /* align-items:stretch 무시하고 가운데 정렬 */
    flex: 0 0 auto !important;
    padding: 0 0.6rem !important;           /* 세로는 height, 가로 패딩만 */
    font-size: 0.875rem !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 8px !important;          /* btn-sm */
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* 색 매핑 — co-act 와 동일 솔리드 */
#main .btn_get,  .modal .btn_get,
#main .btn_blue, .modal .btn_blue {
    background-color: var(--co-blue) !important; color: #fff !important;   /* 조회=파랑(READ) */
}
#main .btn_get:hover,  .modal .btn_get:hover,
#main .btn_blue:hover, .modal .btn_blue:hover {
    background-color: #1d4fd0 !important; color: #fff !important;
}
#main .btn_post, .modal .btn_post {
    background-color: var(--co-tertiary) !important; color: var(--co-tertiary-on) !important;  /* 저장=노랑(SAVE) */
}
#main .btn_post:hover, .modal .btn_post:hover {
    background-color: #ecb200 !important; color: var(--co-tertiary-on) !important;
}
#main .btn_print, .modal .btn_print,
#main .btn_black, .modal .btn_black {
    background-color: #475569 !important; color: #fff !important;          /* 출력=슬레이트(PRINT) */
}
#main .btn_print:hover, .modal .btn_print:hover,
#main .btn_black:hover, .modal .btn_black:hover {
    background-color: #334155 !important; color: #fff !important;
}
#main .btn_red, .modal .btn_red {
    background-color: #d65c45 !important; color: #fff !important;          /* 삭제=코랄(DELETE) */
}
#main .btn_red:hover, .modal .btn_red:hover {
    background-color: #b94833 !important; color: #fff !important;
}
/* .btn_small(+/- 스텝 버튼 등) 은 130px 로 늘리지 말고 작게 유지 */
#main .btn_small, .modal .btn_small {
    min-width: 0 !important;
    width: auto !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
}

/* Skip the universal flow reset for 2-pane layouts (scroll_div with inline width or left) */
#main .scroll_div:not([style*="width"]):not([style*="left"]),
#main .sot:not([style*="width"]):not([style*="left"]),
#main form.scroll_div:not([style*="width"]):not([style*="left"]),
#main form.sot:not([style*="width"]):not([style*="left"]) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 240px) !important;
    margin: 16px 0 0 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* 2-pane left list — keep original fixed positioning at left: 250 (matches sidebar 240 + gap) */
#main .scroll_div[style*="width"] {
    position: fixed !important;
    left: 250px !important;
    bottom: 10px !important;
    height: auto !important;
    max-height: calc(100vh - 260px) !important;
    overflow: auto !important;
    border: 1px solid var(--co-slate-200) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.06);
}

/* Car management — clean flex 2-pane (replaces fixed-position legacy) */
.car-twopane {
    height: calc(100vh - 260px);
    min-height: 480px;
}
/* 왼쪽 목록은 표 자체만 보이게 — 표가 짧을 때 뒤에 흰 카드가 남지 않도록 패널 배경·테두리·그림자 없음 (2026-09-23) */
.car-twopane-list {
    width: 320px;
    flex-shrink: 0;
    background: transparent;
}
.car-twopane-list table { margin: 0 !important; }
.car-twopane-detail {
    border: 1px solid var(--co-slate-200);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(57, 56, 47, 0.06);
    padding: 12px 14px;
}

/* ==========================================================================
   Responsive — tablet & mobile breakpoints
   ========================================================================== */

/* ── Tablet (≤ 1100px) ──────────────────────────────────────────── */
@media (max-width: 1100px) {
    body { white-space: normal; }
    #aside { width: 220px !important; }
    #main { padding-left: 240px !important; }
    #nav .username-badge { display: none !important; }
    #base_logo_div { width: 200px !important; }

    .co-bento-row { grid-template-columns: 1fr !important; }
    .co-bento-row > [class*="co-col-"] { grid-column: 1 / -1 !important; }
    .co-kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
    .co-chart-grid > [class*="co-c"] { grid-column: span 12 !important; }
    .co-bento-header { flex-wrap: wrap; gap: 16px; }
    .co-bento-heading h2.co-bento-title { font-size: 26px; }
}

/* ── Mobile (≤ 768px) — sidebar overlays, content full-width ───── */
@media (max-width: 768px) {
    body:not(.sidebar-collapsed) #aside {
        position: fixed !important;
        top: 60px !important;
        left: 8px !important;
        bottom: 8px !important;
        width: min(280px, calc(100vw - 16px)) !important;
        z-index: 1000 !important;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18) !important;
    }
    #main {
        padding-left: 0 !important;
        padding-top: 60px !important;
    }
    body:not(.sidebar-collapsed)::after {
        content: '';
        position: fixed;
        inset: 60px 0 0 0;
        background: rgba(15, 23, 42, 0.35);
        z-index: 999;
        backdrop-filter: blur(2px);
    }

    #nav { height: 60px !important; padding: 0 8px !important; }
    #nav_right { gap: 6px !important; }
    #nav table.d-none,
    #nav .username-badge,
    #nav #search-form { display: none !important; }
    #nav .inquiry-btn,
    #nav .logout-btn {
        padding: 6px 10px !important;
        font-size: 11.5px !important;
    }
    #nav .inquiry-btn .material-icons,
    #nav .logout-btn .material-icons { font-size: 18px !important; }
    #base_logo_div { width: auto !important; padding: 0 6px !important; }
    #logo_img { height: 30px !important; }
    .memo-btn { width: 36px !important; height: 36px !important; }

    .co-bento-page { padding: 16px 12px 24px 12px !important; }
    .co-bento-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .co-bento-heading h2.co-bento-title { font-size: 22px; }
    .co-bento-heading .co-bento-subtitle {
        font-size: 12px;
        white-space: normal !important;
    }
    .co-date-form { align-self: flex-start; }
    .co-date-form input[type="date"],
    .co-date-form input[type="text"] { width: 110px !important; font-size: 12px; }

    .co-orb-panel,
    .co-info-card { min-height: 240px !important; }
    .co-orb-primary { width: 130px !important; height: 130px !important; }
    .co-orb-primary .co-orb-value { font-size: 32px !important; }
    .co-orb-primary .co-orb-tag { font-size: 11px !important; }
    .co-orb-yellow {
        width: 90px !important; height: 90px !important;
        top: 4px !important; right: 4px !important;
    }
    .co-orb-yellow .co-orb-mini-value { font-size: 22px !important; }
    .co-orb-yellow .co-orb-mini-tag { font-size: 10px !important; }
    .co-orb-coral {
        width: 64px !important; height: 64px !important;
        bottom: 4px !important; left: 6px !important;
    }
    .co-orb-coral .co-orb-mini-value { font-size: 17px !important; }
    .co-orb-coral .co-orb-mini-tag { font-size: 9px !important; margin-top: 1px !important; }

    .co-stat-mega { font-size: 28px !important; }
    .co-stat-suffix { font-size: 13px !important; }
    .co-op-kpi-grid { gap: 6px !important; }
    .co-op-kpi { padding: 8px 10px !important; }
    .co-op-kpi-num { font-size: 19px !important; }
    .co-op-kpi-tag { font-size: 11px !important; }

    .co-kpi-strip { grid-template-columns: 1fr !important; gap: 12px !important; }
    .co-kpi-tile h3.co-kpi-num { font-size: 24px !important; }

    .co-tab-row { flex-wrap: wrap; }
    .co-tab { padding: 8px 14px !important; font-size: 12px !important; }

    .co-chart-panel { padding: 16px 14px !important; }
    .co-chart-panel h4.co-chart-title { font-size: 15px !important; }

    #main .card .card-body { padding: 14px !important; }

    #main .table-responsive,
    #main .tabulator {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-dialog { margin: 0 !important; max-width: 100vw !important; height: 100vh !important; }
    .modal-content { height: 100vh !important; border-radius: 0 !important; }
    #inquiry_modal .modal-content { height: 100vh !important; }
    #inquiry_modal .modal-body { height: calc(100vh - 56px) !important; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .co-bento-page { padding: 12px 8px 20px 8px !important; }
    .co-bento-heading h2.co-bento-title { font-size: 20px; }
    .co-bento-heading .co-bento-subtitle { font-size: 11.5px; }

    .co-orb-primary { width: 110px !important; height: 110px !important; }
    .co-orb-primary .co-orb-value { font-size: 26px !important; }
    .co-orb-yellow { width: 76px !important; height: 76px !important; }
    .co-orb-yellow .co-orb-mini-value { font-size: 18px !important; }
    .co-orb-coral { width: 54px !important; height: 54px !important; }
    .co-orb-coral .co-orb-mini-value { font-size: 14px !important; }
    .co-orb-coral .co-orb-mini-tag { display: none !important; }

    .co-op-kpi-grid { grid-template-columns: 1fr !important; }
    .co-profile-sub { font-size: 11px !important; }

    #nav .inquiry-btn span:not(.material-icons),
    #nav .logout-btn span:not(.material-icons) { display: none !important; }
    #nav .inquiry-btn,
    #nav .logout-btn {
        width: 36px !important; height: 36px !important;
        padding: 0 !important; border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center; justify-content: center;
    }
}

/* ── Wide (≥ 1600px) ─────────────────────────────────────────────── */
@media (min-width: 1600px) {
    .co-bento-page { max-width: 1600px; }
}

/* ==========================================================================
   Global font — NanumSquare_ac (공항버스와 동일 폰트)
   ========================================================================== */
body,
button,
input,
select,
textarea,
.btn,
.form-control,
.form-select,
table,
.modal,
.swal2-popup {
    font-family: 'NanumSquare_ac', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont,
                 system-ui, 'Helvetica Neue', Roboto, sans-serif !important;
    font-feature-settings: 'tnum' on, 'lnum' on;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* 제목·문단·링크·표셀 등 본문 텍스트 NanumSquare 강제.
   (위 전역 규칙이 body/폼/표만 덮어, Velzon 데모의 font-family:var(--bs-font-sans-serif)!important
    가 p·h2·텍스트로 새서 시스템폰트(Segoe UI)로 보이던 것 차단.)
   ⚠ 아이콘 폰트는 자체 font-family 라 영향 없음 — 여기서 span/i 는 일부러 제외. */
h1, h2, h3, h4, h5, h6,
p, a, label, li, dt, dd, caption, th, td, blockquote, figcaption {
    font-family: 'NanumSquare_ac', 'Apple SD Gothic Neo', Roboto, sans-serif !important;
}

/* 대시보드(.co-bento-page)는 co-kpi-*/co-orb-*/co-op-kpi-*/co-stat-* 등 텍스트 클래스(대부분 span)가
   너무 많아 일일이 못 잡음 → 컨테이너 자손 전체에 강제하고, 아이콘 폰트만 예외로 복원. */
.co-bento-page, .co-bento-page * {
    font-family: 'NanumSquare_ac', 'Apple SD Gothic Neo', Roboto, sans-serif !important;
}
.co-bento-page .material-symbols-outlined,
.co-bento-page [class*="material-symbols"] { font-family: 'Material Symbols Outlined' !important; }
.co-bento-page .material-icons { font-family: 'Material Icons' !important; }
.co-bento-page .mdi,
.co-bento-page [class*="mdi-"] { font-family: 'Material Design Icons' !important; }

/* ApexCharts SVG 텍스트(축·제목·데이터라벨·범례·파이라벨)도 NanumSquare 강제.
   ApexCharts 가 기본 Helvetica 를 <text> 에 직접 박아서 차트 안 글자(고용구분·연령별 등)만
   다른 폰트로 보이던 것 차단. SVG <text> 라 .co-bento-page * 로는 인라인스타일을 못 이겨 별도 지정. */
.apexcharts-canvas text,
.apexcharts-text,
.apexcharts-title-text, .apexcharts-subtitle-text,
.apexcharts-xaxis-text, .apexcharts-xaxis-label, .apexcharts-xaxis-title-text,
.apexcharts-yaxis-text, .apexcharts-yaxis-label, .apexcharts-yaxis-title-text,
.apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value,
.apexcharts-datalabels text, .apexcharts-pie-label,
.apexcharts-legend-text {
    font-family: 'NanumSquare_ac', 'Apple SD Gothic Neo', Roboto, sans-serif !important;
}

/* ==========================================================================
   Index dashboard — bigger / darker labels for readability
   ========================================================================== */
/* "당월 수입금액" 같은 KPI 카드 상단 태그 */
.co-bento-page .co-tag {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--co-on-surface, #39382f) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.85;
    margin: 0 0 8px 0 !important;
}

/* "당월 비용 집행", "당월 운전직 입사" 같은 리스트 항목 타이틀 */
.co-bento-page .co-list-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--co-on-surface, #39382f) !important;
    line-height: 1.3 !important;
}

/* 그 아래 작은 메타 (금액 · 전월대비 ...) */
.co-bento-page .co-list-meta {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin-top: 3px !important;
}

/* Orb 안의 mini 태그 (배차 운전자, 연차, 휴무) */
.co-bento-page .co-orb-tag {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.95 !important;
}
.co-bento-page .co-orb-mini-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    opacity: 0.95 !important;
}

/* 당월 수입/비용 stat 박스 안 라벨 */
.co-bento-page .co-stat-tag {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--co-on-surface, #39382f) !important;
    opacity: 0.85;
}
.co-bento-page .co-stat-num {
    font-size: 16px !important;
    font-weight: 800 !important;
}
.co-bento-page .co-stat-suffix {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--co-on-surface, #39382f) !important;
    opacity: 0.7;
}

/* "전월대비 수입금 실적" 같은 progress meta */
.co-bento-page .co-progress-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--co-on-surface, #39382f) !important;
}

/* Pill tag like "당월" */
.co-bento-page .co-pill-tag {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
    padding: 5px 12px !important;
}

/* Panel title like "금일 운행 현황" */
.co-bento-page .co-panel-title,
.co-bento-page .co-panel-title-light {
    font-size: 15.5px !important;
    font-weight: 800 !important;
}

/* Info card key/val (사업장, 이름, 부서/직위) */
.co-bento-page .co-info-key {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
.co-bento-page .co-info-val {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
.co-bento-page .co-info-stat {
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   Index dashboard — bump label sizes again (one more notch up)
   ========================================================================== */
.co-bento-page .co-tag             { font-size: 15px !important; }
.co-bento-page .co-list-title      { font-size: 17px !important; }
.co-bento-page .co-list-meta       { font-size: 14px !important; }
.co-bento-page .co-orb-tag         { font-size: 14px !important; }
.co-bento-page .co-orb-mini-tag    { font-size: 13px !important; }
.co-bento-page .co-stat-tag        { font-size: 13.5px !important; }
.co-bento-page .co-stat-num        { font-size: 19px !important; }
.co-bento-page .co-stat-suffix     { font-size: 16px !important; }
.co-bento-page .co-progress-text   { font-size: 14.5px !important; }
.co-bento-page .co-pill-tag        { font-size: 13px !important; padding: 6px 14px !important; }
.co-bento-page .co-panel-title,
.co-bento-page .co-panel-title-light { font-size: 17.5px !important; }
.co-bento-page .co-info-key        { font-size: 13px !important; }
.co-bento-page .co-info-val        { font-size: 15px !important; }
.co-bento-page .co-info-stat       { font-size: 14px !important; }

/* ==========================================================================
   금일 운행 현황 panel — apply "Steps for Today" glass card style
   ========================================================================== */
.co-bento-page .co-orb-panel {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 20px !important;
    box-shadow:
        0 20px 40px rgba(57, 56, 47, 0.06),
        0 10px 10px rgba(57, 56, 47, 0.04) !important;
    padding: 28px !important;
    position: relative;
    overflow: hidden;
}
.co-bento-page .co-orb-panel::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: -24px !important;
    top: -24px !important;
    width: 128px !important;
    height: 128px !important;
    background: rgba(109, 99, 84, 0.10) !important;
    border-radius: 50% !important;
    filter: blur(40px) !important;
    pointer-events: none;
    z-index: 0;
    transition: background 0.3s ease;
}
.co-bento-page .co-orb-panel:hover::after {
    background: rgba(109, 99, 84, 0.20) !important;
}
.co-bento-page .co-orb-panel > * {
    position: relative;
    z-index: 1;
}

/* Inner depth + outer glow on orbs (from "Steps for Today" reference) */
.co-bento-page .co-orb {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.10),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.co-bento-page .co-orb-primary {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.08) !important;
}
.co-bento-page .co-orb-yellow {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.10),
        0 0 30px rgba(253, 192, 3, 0.35),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}
.co-bento-page .co-orb-coral {
    box-shadow:
        inset 0 4px 10px rgba(0, 0, 0, 0.10),
        0 0 30px rgba(254, 139, 112, 0.35),
        0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

/* Force the 운행현황 panel to opaque white so the yellow radial behind it doesn't tint it */
body .co-bento-page .co-orb-panel.co-glass,
body .co-bento-page .co-orb-panel {
    background: #ffffff !important;
}

/* ==========================================================================
   Neutralize the cream warmth on the dashboard background
   ========================================================================== */
body { background-color: #ffffff !important; }
main#main { background: #ffffff !important; }
main#main #content_div { background: #ffffff; }

/* Remove the warm yellow + coral radial glows from the bento page itself */
.co-bento-page {
    background: #ffffff !important;
}

/* Restore original page background — only the orb panel stays white */
body { background-color: var(--co-bg) !important; }
main#main { background: var(--co-bg) !important; }
.co-bento-page {
    background:
        radial-gradient(1200px 600px at 0% -10%, rgba(253, 192, 3, 0.08), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(254, 139, 112, 0.08), transparent 60%),
        var(--co-bg) !important;
}

/* Force solid white on every bento glass panel — outer cards no longer look cream */
body .co-bento-page .co-glass,
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: #ffffff !important;
}

/* ==========================================================================
   운행현황 panel — EXACT match to "Steps for Today" card spec
   .glass-panel + .ambient-lift + .p-8 + .rounded-xl(=3rem) + decorative orb
   ========================================================================== */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border: none !important;
    border-radius: 3rem !important;
    box-shadow:
        0 20px 40px rgba(57, 56, 47, 0.06),
        0 10px 10px rgba(57, 56, 47, 0.04) !important;
    padding: 2rem !important;
    position: relative !important;
    overflow: hidden !important;
}

body .co-bento-page .co-orb-panel::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: -1.5rem !important;
    top: -1.5rem !important;
    width: 8rem !important;
    height: 8rem !important;
    background: rgba(109, 99, 84, 0.10) !important;
    border-radius: 9999px !important;
    filter: blur(64px) !important;
    -webkit-filter: blur(64px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transition: background 0.3s ease;
}

body .co-bento-page .co-orb-panel:hover::after {
    background: rgba(109, 99, 84, 0.20) !important;
}

body .co-bento-page .co-orb-panel > * {
    position: relative;
    z-index: 1;
}

/* Reset — entire background = #fffbff, no per-area overrides, no radials */
body,
main#main,
main#main #content_div,
.co-bento-page {
    background: #fffbff !important;
    background-image: none !important;
}

/* Menu bar — muted greige (gray-mixed beige) version of cream */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.06), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.05), transparent 60%),
        linear-gradient(180deg, #ebe9e1 0%, #ddd9d0 100%) !important;
    border-right: 1px solid #cfcbc1 !important;
}

/* Menu bar — lighter muted greige (toned down further) */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.04), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.03), transparent 60%),
        linear-gradient(180deg, #f4f2ea 0%, #ebe8df 100%) !important;
    border-right: 1px solid #ddd9d0 !important;
}

/* Menu bar — even lighter, no right border / shadow */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.03), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.02), transparent 60%),
        linear-gradient(180deg, #faf8f1 0%, #f3f0e8 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Menu bar — even lighter (close to white with very subtle warm tint) */
#aside {
    background:
        radial-gradient(420px 240px at 100% 0%, rgba(253, 192, 3, 0.02), transparent 60%),
        radial-gradient(320px 200px at 0% 100%, rgba(254, 139, 112, 0.015), transparent 60%),
        linear-gradient(180deg, #fdfcf6 0%, #f8f6ef 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Menu bar — neutral light gray (less yellow undertone) */
#aside {
    background: linear-gradient(180deg, #f6f5f3 0%, #efeeeb 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* Menu bar — cool muted light gray (matches the dark gray nav family) */
#aside {
    background: linear-gradient(180deg, #f4f5f6 0%, #eaecee 100%) !important;
    border-right: none !important;
    box-shadow: none !important;
}

/* 출근률 / 금일 결행 stat boxes — match the new cool gray sidebar tone */
.co-bento-page .co-orb-stat {
    background: #eaecee !important;
}

/* 운행현황 panel — keep glass blur, swap cream tint for the same cool gray */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: rgba(234, 236, 238, 0.75) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

/* Revert 운행현황 (left orb panel) back to glass white */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

/* 운영현황 (right admin panel) inner KPI tiles — replace cream-looking white with cool gray */
body .co-bento-page .co-dark .co-op-kpi {
    background: rgba(234, 236, 238, 0.65) !important;
    border: 1px solid rgba(234, 236, 238, 0.20) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: rgba(234, 236, 238, 0.85) !important;
}

/* ==========================================================================
   운영현황 outer panel — cool gray (matches 출근률 cards) with blur kept
   ========================================================================== */
body .co-bento-page .co-dark {
    background: rgba(234, 236, 238, 0.85) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    color: var(--co-on-surface, #39382f) !important;
    box-shadow: 0 12px 28px rgba(57, 56, 47, 0.10) !important;
}
body .co-bento-page .co-dark::before {
    display: none !important;
}

/* Inside text/icons — flip from light-on-dark to dark-on-light */
body .co-bento-page .co-dark .co-profile-name {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-profile-sub {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-avatar-circle {
    background: rgba(95, 94, 94, 0.12) !important;
    border: 2px solid rgba(95, 94, 94, 0.18) !important;
    color: var(--co-secondary) !important;
}
body .co-bento-page .co-dark .co-pill-tag-light {
    background: rgba(95, 94, 94, 0.10) !important;
    color: var(--co-secondary) !important;
    border: 1px solid rgba(95, 94, 94, 0.14) !important;
}
body .co-bento-page .co-dark .co-op-kpi {
    background: #ffffff !important;
    border: 1px solid rgba(95, 94, 94, 0.10) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: #fafafa !important;
}
body .co-bento-page .co-dark .co-op-kpi-tag {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num span {
    color: var(--co-on-variant, #66655a) !important;
}

/* ==========================================================================
   운영현황 panel — REVERT outer back to dark, only swap yellow glow → cool gray
   ========================================================================== */
body .co-bento-page .co-dark {
    background: var(--co-primary) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(95, 94, 94, 0.18) !important;
}

/* Replace cream/yellow radial glow with cool gray, keep coral glow */
body .co-bento-page .co-dark::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(400px 200px at 100% 0%, rgba(234, 236, 238, 0.16), transparent 60%),
        radial-gradient(300px 150px at 0% 100%, rgba(254, 139, 112, 0.10), transparent 60%) !important;
    pointer-events: none !important;
}

/* Restore inner text/icons to light-on-dark */
body .co-bento-page .co-dark .co-profile-name { color: #ffffff !important; }
body .co-bento-page .co-dark .co-profile-sub { color: rgba(255, 255, 255, 0.62) !important; }
body .co-bento-page .co-dark .co-avatar-circle {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}
body .co-bento-page .co-dark .co-pill-tag-light {
    background: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body .co-bento-page .co-dark .co-op-kpi {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
body .co-bento-page .co-dark .co-op-kpi-tag {
    color: rgba(255, 255, 255, 0.7) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num {
    color: #ffffff !important;
}
body .co-bento-page .co-dark .co-op-kpi-num span {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ==========================================================================
   운영현황 panel — outer cool gray, inner 4 tiles original, coral glow kept
   ========================================================================== */
body .co-bento-page .co-dark {
    background: #eaecee !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    color: var(--co-on-surface, #39382f) !important;
    box-shadow: 0 12px 28px rgba(57, 56, 47, 0.10) !important;
}

/* Glows on the panel: keep coral, swap yellow for soft slate (so no cream tint) */
body .co-bento-page .co-dark::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(400px 200px at 100% 0%, rgba(95, 94, 94, 0.06), transparent 60%),
        radial-gradient(300px 150px at 0% 100%, rgba(254, 139, 112, 0.18), transparent 60%) !important;
    pointer-events: none !important;
}

/* Inner 4 KPI tiles — restore ORIGINAL semi-transparent white */
body .co-bento-page .co-dark .co-op-kpi {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(109, 99, 84, 0.10) !important;
}
body .co-bento-page .co-dark .co-op-kpi:hover {
    background: rgba(255, 255, 255, 0.85) !important;
}
body .co-bento-page .co-dark .co-op-kpi-tag {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-op-kpi-num span {
    color: var(--co-on-variant, #66655a) !important;
}

/* Profile + pill — flip light-on-dark to dark-on-light */
body .co-bento-page .co-dark .co-profile-name {
    color: var(--co-on-surface, #39382f) !important;
}
body .co-bento-page .co-dark .co-profile-sub {
    color: var(--co-on-variant, #66655a) !important;
}
body .co-bento-page .co-dark .co-avatar-circle {
    background: rgba(95, 94, 94, 0.12) !important;
    border: 2px solid rgba(95, 94, 94, 0.18) !important;
    color: var(--co-secondary) !important;
}
body .co-bento-page .co-dark .co-pill-tag-light {
    background: rgba(95, 94, 94, 0.10) !important;
    color: var(--co-secondary) !important;
    border: 1px solid rgba(95, 94, 94, 0.14) !important;
}

/* ==========================================================================
   출력·엑셀 = 원형 아이콘 버튼 (공항버스 프로젝트와 동일 방식)
   custom_settings.py 의 print_btn / xlsx_btn / get_print_btn 클래스에서 사용.
   라벨 텍스트(출력/엑셀다운로드)는 font-size:0 으로 숨기고 가운데 아이콘만 표시.
   배경/호버 색은 기존 .btn-warning(머스터드)·.btn-success(세이지) 테마 그대로.
   ========================================================================== */
.ss-iconbtn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    vertical-align: middle;
    font-size: 0 !important;        /* 라벨 텍스트 숨김 */
    line-height: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}
.ss-iconbtn > * { display: none; }  /* 내부에 <i>/<span> 가 있어도 숨김 */

/* ⚠ 테마의 `#main .btn-warning/.btn-success { background: ... !important }` 가 background 단축속성으로
   background-image(아이콘)를 지워버리므로, 아이콘 배경은 반드시 #main/.modal 스코프 + !important 로 올린다. */
#main .ss-iconbtn,
.modal .ss-iconbtn,
.ss-iconbtn {
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
}
/* 출력(printer) — 코랄 배경 + 흰색 프린터 아이콘 (노란색 대신 코랄로 변경) */
#main .ss-iconbtn--print,
.modal .ss-iconbtn--print,
.ss-iconbtn--print {
    background-color: #fe8b70 !important;
    border-color: #fe8b70 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E") !important;
}
#main .ss-iconbtn--print:hover,
.modal .ss-iconbtn--print:hover,
.ss-iconbtn--print:hover {
    background-color: #f06b51 !important;
    border-color: #f06b51 !important;
}
/* 엑셀(table/grid) — 짙은 세이지 스트로크(#15623E) */
#main .ss-iconbtn--xlsx,
.modal .ss-iconbtn--xlsx,
.ss-iconbtn--xlsx {
    background-color: #8fd3b0 !important;   /* 연한 녹색 (기존 #2c9c66 보다 밝게) */
    border-color: #8fd3b0 !important;
    background-size: 17px 17px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315623E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E") !important;
}
#main .ss-iconbtn--xlsx:hover,
.modal .ss-iconbtn--xlsx:hover,
.ss-iconbtn--xlsx:hover {
    background-color: #7cc7a1 !important;
    border-color: #7cc7a1 !important;
}
/* 항목 패널 접기/펼치기(조건별차량내역조회) — 오른쪽 패널 아이콘. 접힌 상태(.is-off)는 회색으로 */
#main .ss-iconbtn--cols,
.modal .ss-iconbtn--cols,
.ss-iconbtn--cols {
    background-color: #cfd8e3 !important;
    border-color: #cfd8e3 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4e8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3Cline x1='18' y1='8' x2='18' y2='8'/%3E%3Cline x1='18' y1='12' x2='18' y2='12'/%3E%3Cline x1='18' y1='16' x2='18' y2='16'/%3E%3C/svg%3E") !important;
}
#main .ss-iconbtn--cols:hover,
.modal .ss-iconbtn--cols:hover,
.ss-iconbtn--cols:hover {
    background-color: #bccad9 !important;
    border-color: #bccad9 !important;
}
#main .ss-iconbtn--cols.is-off,
.ss-iconbtn--cols.is-off {
    background-color: #e6e3da !important;
    border-color: #e6e3da !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3C/svg%3E") !important;
}
/* 엑셀 버튼이 한 줄에 2개일 때 구분용 변형(파랑) — 예: 탑승인원현황 월별탭 '탑승인원 양식'.
   기본 xlsx(초록)=수입금 양식 / alt(파랑)=탑승인원 양식. 같은 표 아이콘, 색만 다르게. */
#main .ss-iconbtn--xlsx.ss-iconbtn--xlsx-alt,
.modal .ss-iconbtn--xlsx.ss-iconbtn--xlsx-alt,
.ss-iconbtn--xlsx.ss-iconbtn--xlsx-alt {
    background-color: #a7c8ee !important;
    border-color: #a7c8ee !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f4e8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E") !important;
}
#main .ss-iconbtn--xlsx.ss-iconbtn--xlsx-alt:hover,
.modal .ss-iconbtn--xlsx.ss-iconbtn--xlsx-alt:hover,
.ss-iconbtn--xlsx.ss-iconbtn--xlsx-alt:hover {
    background-color: #8fb8e6 !important;
    border-color: #8fb8e6 !important;
}
/* 비활성(조회 전) 원형 아이콘 — 회색 처리. 모양은 원형 아이콘 그대로 유지하되 동작 불가 표시 */
#main .ss-iconbtn:disabled,
.modal .ss-iconbtn:disabled,
#main .ss-iconbtn.disabled,
.modal .ss-iconbtn.disabled {
    background-color: #cfcfcf !important;
    border-color: #cfcfcf !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

/* ── 대시보드 상단 3개 카드 그림자 강화 (운영현황 카드는 index.html 인라인에서 처리).
   운행현황(orb) + 가운데 스택의 수입/비용 카드에 더 진한 그림자. ──────────────── */
body .co-bento-page .co-bento-row > .co-orb-panel,
body .co-bento-page .co-bento-row > .co-bento-stack > .co-glass {
    box-shadow: 0 18px 40px rgba(57, 56, 47, 0.18),
                0 6px 14px rgba(57, 56, 47, 0.10) !important;
}

/* 운영현황 카드 ::before 모서리 글로우 제거 — 가장자리가 흰/금색 테두리처럼
   보이던 원인(좌하단 코랄·우상단 글로우)을 없애 평면 카드로. */
body .co-bento-page .co-dark::before { background: none !important; }

/* ==========================================================================
   대시보드 상단 4카드(금일 운행 현황 · 당월 수입금액 · 집행/입사 현황 · 운영 현황)
   — 통일된 입체(레이어드) 그림자
   상단 하이라이트 + 또렷한 접지 그림자 + 멀리 퍼지는 앰비언트 → 떠 있는 느낌
   ========================================================================== */
body .co-bento-page .co-orb-panel,
body .co-bento-page .co-orb-panel.co-glass,
body .co-bento-page .co-bento-row > .co-bento-stack > .co-glass,
body .co-bento-page .co-info-card {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 2px 5px rgba(57, 56, 47, 0.10),
        0 22px 46px rgba(57, 56, 47, 0.14) !important;
}
/* 운영현황 모서리를 금일운행현황(3rem)과 동일한 형태로 */
body .co-bento-page .co-info-card { border-radius: 3rem !important; }

/* select2 가 숨긴 원본 select 보정 — 테마의 td select { width:100%/height:33px !important } 가
   .select2-hidden-accessible 에도 적용되어, absolute 로 숨은 원본이 셀 밖으로 1행 폭만큼 뻗어
   가로/세로 유령 스크롤을 만드는 문제 차단 (#main/.modal 특이성으로 테마 규칙을 이김) */
#main select.select2-hidden-accessible,
.modal select.select2-hidden-accessible {
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ==========================================================================
   전역 틀고정(sticky thead) — 모든 데이터 테이블
   위 카드 스타일 블록의 overflow:hidden(sticky 무력화) + border-collapse:collapse
   (sticky 시 셀 경계가 본문과 함께 스크롤돼 깨짐)를 데이터 테이블에 한해 되돌림.
   my_css.css 원본이 separate + 셀별 border 라 시각 변화 없음.
   .my_table_input(입력 폼)은 스크롤 그리드가 아니므로 제외.
   ========================================================================== */
.my_table_data,
.my_table_data_no_child,
table.co-sortable,
.hu_table {
    overflow: visible !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    /* 표 위쪽 테두리(1px)가 thead 위에 있으면 sticky 헤더가 컨테이너 상단보다 1px 아래에서 시작해
       첫 스크롤에 헤더가 같이 밀렸다가 붙는다(되돌리면 같이 올라옴) — 헤더를 정확히 상단에 붙임 */
    border-top: 0 !important;
}
.my_table_data > thead,
.my_table_data_no_child > thead,
table.co-sortable > thead,
.hu_table > thead {
    position: sticky;
    top: 0;
    z-index: 3;
    /* 스크롤 시작 시 헤더가 1px 떨리는 서브픽셀 재렌더 방지 — 헤더를 별도 합성 레이어로 */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* overflow:hidden 이 없어지면 14px 라운드가 셀 배경에 가려지므로 모서리 셀에 직접 부여 */
.my_table_data > thead > tr:first-child > *:first-child,
.my_table_data_no_child > thead > tr:first-child > *:first-child,
.hu_table > thead > tr:first-child > *:first-child {
    border-top-left-radius: 14px;
}
.my_table_data > thead > tr:first-child > *:last-child,
.my_table_data_no_child > thead > tr:first-child > *:last-child,
.hu_table > thead > tr:first-child > *:last-child {
    border-top-right-radius: 14px;
}
.my_table_data > tbody > tr:last-child > td:first-child,
.my_table_data_no_child > tbody > tr:last-child > td:first-child,
.hu_table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 14px;
}
.my_table_data > tbody > tr:last-child > td:last-child,
.my_table_data_no_child > tbody > tr:last-child > td:last-child,
.hu_table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 14px;
}

/* .my_table_input 은 입력 폼이라 위 틀고정에서 제외돼 있으나, 검사일정표처럼 레코드가 쌓이는
   스크롤 그리드로 쓰는 화면이 있다 — co-sticky-head 를 붙인 표만 데이터 테이블과 같게 처리.
   카드 스타일의 overflow:hidden / border-collapse:collapse 가 sticky 를 무력화하므로 되돌린다.
   my_css.css 원본이 separate + 셀별 border 라 시각 변화 없음. */
.my_table_input.co-sticky-head,
.hu_table_input.co-sticky-head,
.hu_table_show.co-sticky-head {
    overflow: visible !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-top: 0 !important;
}
.my_table_input.co-sticky-head > thead,
.hu_table_input.co-sticky-head > thead,
.hu_table_show.co-sticky-head > thead {
    position: sticky;
    top: 0;
    z-index: 3;
    /* 스크롤 시작 시 헤더가 1px 떨리는 서브픽셀 재렌더 방지 */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 전역 테이블 정렬(my_js.js) — 정렬 가능한 헤더에 클릭 커서 */
.my_table_data > thead th:not(.table_main),
.my_table_data_no_child > thead th:not(.table_main),
table.co-sortable > thead th:not(.table_main),
.hu_table > thead th:not(.table_main) {
    cursor: pointer;
}

/* 알림 버튼 — 칩(흰 원형·테두리)은 메모장 버튼과 동일, 종 아이콘만 채움형 + 브랜드 코랄로 구분 */
.memo-btn.notify-btn .material-symbols-outlined {
    color: #fe8b70;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.memo-btn.notify-btn:hover .material-symbols-outlined { color: #c54a31; }

/* 알림 배지 — 미확인 개수 (없으면 display:none) */
.memo-btn.notify-btn { position: relative; }
.notify-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #c54a31;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: center;
}

/* 알림 팝업 목록 항목 */
.notify-item {
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.notify-item:hover { background: #f8f9fa; }
.notify-item + .notify-item { margin-top: 4px; }
.notify-item.is-unread { background: #fff4f1; }
.notify-item.is-unread:hover { background: #ffe9e3; }
.notify-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notify-item-msg { font-size: 12px; color: #666; margin-top: 2px; }
.notify-item-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #aaa;
    margin-top: 4px;
}
.notify-read-tag {
    font-size: 10px;
    line-height: 14px;
    padding: 0 6px;
    border-radius: 8px;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.notify-read-tag.is-new {
    color: #fff;
    border-color: #fe8b70;
    background: #fe8b70;
}

/* ── 폼 검증 실패 안내: 어느 칸을 고쳐야 하는지 색으로 표시 ──────────────────
   alert_success.html 이 오류 난 input 에 .is-invalid, 그 항목명(th)에 .is-invalid-label 을 붙인다.
   표 안 입력칸은 위에서 border:none !important 로 평평하게 만들어 두었으므로
   Bootstrap 기본 .is-invalid(빨간 테두리)가 보이지 않는다 → inset 그림자로 빨간 테두리를 그린다. */
/* .is-invalid.is-invalid: 테마의 td input[type="number"] 규칙(속성 선택자)보다 우선순위를 높이기 위한 중복 */
#main .is-invalid.is-invalid,
.modal .is-invalid.is-invalid,
#main .my_table_input td .is-invalid.is-invalid,
.modal .my_table_input td .is-invalid.is-invalid,
#main .my_table_input td .is-invalid.is-invalid:focus,
.modal .my_table_input td .is-invalid.is-invalid:focus,
#main .select2-container .select2-selection.is-invalid,
.modal .select2-container .select2-selection.is-invalid,
#main .hu_table_input td .is-invalid.is-invalid,
#main .hu_table_show td .is-invalid.is-invalid,
.modal .hu_table_input td .is-invalid.is-invalid,
.modal .hu_table_show td .is-invalid.is-invalid,
#main .hu_table_input td .is-invalid.is-invalid:focus,
#main .hu_table_show td .is-invalid.is-invalid:focus,
.modal .hu_table_input td .is-invalid.is-invalid:focus,
.modal .hu_table_show td .is-invalid.is-invalid:focus {
    background-color: #fdecea !important;
    box-shadow: inset 0 0 0 2px #dc2626 !important;
    background-image: none !important;   /* Bootstrap 아이콘은 우측정렬 숫자와 겹치므로 미사용 */
    color: #b91c1c !important;
}
.my_table_input th.is-invalid-label,
.hu_table_input th.is-invalid-label,
.hu_table_show th.is-invalid-label {
    color: #dc2626 !important;
    font-weight: 700 !important;
    background-color: #fdecea !important;
}
.my_table_input th.is-invalid-label::before,
.hu_table_input th.is-invalid-label::before,
.hu_table_show th.is-invalid-label::before {
    content: "⚠ ";
}

/* ── 아이콘 버튼 설명 툴팁(data-tip) ───────────────────────────────
   .ss-iconbtn 은 font-size:0 으로 글자를 숨겨 아이콘만 보이므로(출력 버튼이 여러 개면
   무엇이 무엇인지 구분 불가) data-tip 속성을 주면 마우스를 올렸을 때 설명이 뜬다.
   네이티브 title 은 1초 가까이 지연되고 스타일도 못 줘서 대신 쓴다. */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2000;
    width: max-content;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #172852;
    color: #fff;
    font-size: 12px !important;   /* .ss-iconbtn 의 font-size:0 상속 차단 */
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    pointer-events: none;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}
/* 화면 왼쪽에 있는 버튼은 툴팁을 오른쪽으로 펼친다 */
[data-tip][data-tip-align="left"]::after { right: auto; left: 0; }

/* ==========================================================================
   스크롤바 — 문의 26번(2026-09-21): "마우스 휠로만 조작할 수 있어 답답하다, 한 화면에 다 안 담기면
   측면·하단에 스크롤바를" 요청으로 전 페이지 숨김(2026-09-14)을 되돌린다.
   내용이 넘칠 때만 나타나는 얇은 막대(테마 톤)를 본문·표 wrapper·팝업·select2 목록에 보여 준다.
   사이드바(#aside)는 위쪽 #aside 규칙(숨김)이 그대로 우선한다.
   ========================================================================== */
html, body, * {
    scrollbar-width: thin;                                  /* Firefox · Chrome 121+ · Edge */
    scrollbar-color: #b9b5aa transparent;
}
/* 구버전 Chrome/Edge/Safari (scrollbar-width 미지원) */
@supports not (scrollbar-width: thin) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #b9b5aa; border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
    ::-webkit-scrollbar-thumb:hover { background: #8f8b80; background-clip: content-box; }
    ::-webkit-scrollbar-corner { background: transparent; }
}