.loading {
    display: none;
    position: absolute;
    top: 35%;
    left: 50%;
    z-index: 9999;
}

.br-menu-sub2 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 27px;
    background-color: #1a2432;
    /* display: none; */
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}


td {
    vertical-align: middle !important;
    /* 텍스트 수직 가운데 정렬 */
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.searchbtn {
    float: right;
}

.searchtype {
    max-width: 24%;
}

.searchstatus {
    max-width: 23.6%;
}

.searchwave {
    max-width: 2.333333%;
}

.searchtop {
    border-radius: 10px;
}

.input_company {
    margin-bottom: 20px;
}

.modalline {
    border-top: 1px solid #b9b9b9;
}

.section-content {
    transition: max-height 0.3s ease;
    overflow: hidden;
    max-height: 1000px;
}

.section-content.collapsed {
    max-height: 0;
}

.collapsed {
    max-height: 0;
}

.ckbox span {
    margin-left: 15px;
}

.columndiv {
    padding-left: 0;
    width: 100%;
}

.companytop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.statuslabel {
    padding: 0;
    line-height: 1.55;
    width: 25%;
}

.vir_keyword {
    width: 15%;
    display: block;
    padding: 0.65rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15;
    margin-left: 10px;
}

.vir_search {
    margin-right: 5px;
}

.vir_excel {
    margin-right: 10px;
}

.vir-table th {
    text-align: center;
    border: none;
    font-size: 14px !important;
}

.vir-table td {
    border: none;
    text-align: center;
}

th.sortable a {
    color: inherit;
    text-decoration: none;
}

th.sorted-asc::after {
    content: " ▲";
    font-size: 12px;
}

th.sorted-desc::after {
    content: " ▼";
    font-size: 12px;
}

/* 레거시 .active .page-link 규칙 제거 — 페이지네이션 섹션(line 1332~)에서 통합 관리 */

.verstatus {
    margin-left: 10px;
    line-height: 0;
    width: 20%;
}

.contable th {
    color: #000 !important;
    text-align: center;
    padding: 0.6rem !important;
}

.contable td {
    border: none;
    text-align: center;
}

.contract-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.contract-new {
    color: #005eff;
    border: 1px solid #005eff;
    background-color: #eef4ff;
}

.contract-extend {
    color: #ff6c18;
    border: 1px solid #ffcc91;
    background-color: #fff3c2;
}

.contract-prev {
    color: #0d9120;
    border: 1px solid #a4e8a9;
    background-color: #c9f3c4;
}

.contract-renew {
    color: #800080;
    border: 1px solid #bc89cf;
    background-color: #e0dbff;
}

.contract-end {
    color: #ff0000;
    border: 1px solid #fa7a7a;
    background-color: #ffdbdb;
}

.contract-nome {
    color: #000000;
    border: 1px solid #5b5b5b;
    background-color: #d0d0d0;
}

.contract-refund {
    color: #555555;
    border: 1px solid #999999;
    background-color: #e6e6e6;
}

.contract-newtop {
    color: #005eff;
    border: 1px solid #005eff;
    background-color: #eef4ff;
}

.contract-extendtop {
    color: #ff6c18;
    border: 1px solid #ffcc91;
    background-color: #fff3c2;
}

.contract-prevtop {
    color: #0d9120;
    border: 1px solid #a4e8a9;
    background-color: #c9f3c4;
}

.contract-renewtop {
    color: #800080;
    border: 1px solid #bc89cf;
    background-color: #e0dbff;
}

.contract-endtop {
    color: #ff0000;
    border: 1px solid #fa7a7a;
    background-color: #ffdbdb;
}

.contract-nometop {
    color: #000000;
    border: 1px solid #5b5b5b;
    background-color: #d0d0d0;
}

.contract-refundtop {
    color: #555555;
    border: 1px solid #999999;
    background-color: #e6e6e6;
}

.contract-managedtop {
    color: #0066cc;
    border: 1px solid #80b3e6;
    background-color: #d6e9f8;
}

.constatus {
    width: 10%;
}

.br-section-wrapper {
    padding: 30px 20px;
    border-radius: 10px;
}

/* 페이징 + 표시건수 한 줄 배치 (그리드 3열: 빈칸 | 페이징(중앙) | 표시건수(우측)) */
.paging-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* Per-page selector & scrollable table */
.per-page-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 8px;
    gap: 6px;
    font-size: 13px;
}

.paging-row > .per-page-wrapper {
    margin-bottom: 0;
    justify-content: flex-start;
    padding-left: 20px;
}

.per-page-wrapper label {
    margin-bottom: 0;
    line-height: 32px;
}

.per-page-wrapper select {
    width: auto;
    height: 32px;
    font-size: 13px;
    padding: 2px 6px;
}

.table-scroll-wrapper {
    max-height: 75vh;
    overflow: auto;
}

.table-scroll-wrapper table {
    min-width: max-content;
}

.table-scroll-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f1f1f1;
}

.columnth {
    width: 4%;
}

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 20px;
    text-align: center;
}

/* 모달 배경 */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    /* 숨김 상태 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* 모달 보이기 */
.custom-modal.show {
    display: flex;
}

/* 모달 박스 */
.custom-modal-dialog {
    background: white;
    border-radius: 6px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* 모달 헤더 */
.custom-modal-header {
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 닫기 버튼 */
.custom-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* 모달 바디 */
.custom-modal-body {
    padding: 1rem;
}

/* 모달 푸터 */
.custom-modal-footer {
    padding: 1rem;
    border-top: 1px solid #ddd;
    text-align: right;
}

.custom-modal-footer button {
    margin-left: 0.5rem;
}

.open-memo-cell {
    color: #007bff;
    /*text-decoration: underline;*/
    cursor: pointer;
}

.company_name {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.clearBtn {
    width: 12px;
    height: 12px;
    margin-left: -27px;
    left: -4px;
    margin-right: 5px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

/* 검색 툴바 공통 간격 */
.search-toolbar {
    display: flex !important;
    align-items: center !important;
    column-gap: 10px !important;
    white-space: nowrap;
}

.search-toolbar > .form-control,
.search-toolbar > select.form-control {
    width: auto !important;
    flex: 0 0 auto !important;
}

/* 키워드 검색 인풋 너비 */
.search-toolbar > #keywordInput {
    width: 200px !important;
}

.search-toolbar > .btn,
.search-toolbar > a.btn {
    flex: 0 0 auto !important;
}

td.open-memo-cell {
    font-family: "Arial", sans-serif;
    font-weight: normal;
    letter-spacing: 0;
}

.roomset {
    background-color: #999999;
    border-color: #999999;
}

.roombadge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.inroom {
    color: #0f30df;
    border: 1px solid #d4daf9;
    background-color: #ebeeff;
}

.emptyroom {
    color: #000000;
    border: 1px solid #5b5b5b;
    background-color: #d0d0d0;
}

.statusbadge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}

.inr {
    color: #0f30df;
    border: 1px solid #d4daf9;
    background-color: #ebeeff;
}

.outr {
    color: #0d9120;
    border: 1px solid #a4e8a9;
    background-color: #c9f3c4;
}

.nav-link {
    color: #607d8b;
}

.nav-link.active {
    font-weight: bold;
}

.custom-nav-link {
    border: 1px solid #f5f3f3;
    background-color: #ffffff;
}

.custom-nav-link.active {
    color: #226bef;
    border-bottom: 2px solid #007bff;
    font-weight: bold;
}

.currentTime {
    font-size: 15px;
    margin-right: 100px;
    margin-top: 9px;
}

.clickable {
    max-width: 150px;
    cursor: pointer;
}

.columnicon {
    background-color: #e9ecef;
    border-color: #e9ecef;
}

.search-filter-area {
    gap: 8px;
}

.main {
    background-color: #f5f5f5;
}

.justify-content-between {
    justify-content: space-between;
    display: flex !important;
}

a.btn-light {
    background-color: lightgray;
}

a.tx-black {
    font-weight: 500 !important;
}

.shadow-bottom {
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.8) !important;
}

h3.tx-bold {
    color: #000;
    font-weight: bold;
}

.custom-padding {
    padding: 30px 30px;
}

.weekfilter {
    width: fit-content;
    /* 내용에 맞게 너비 자동 조절 */
    margin-left: 0;
    /* 좌측 정렬 */
    padding-left: 0;
    /* 필요 시 패딩 제거 */
}

.h-74 {
    height: 74%;
}

.custom-bg-gray {
    background-color: #d9d9d9;
}

.rounded {
    border-radius: 10px !important;
}

.custom-mg-t {
    margin-top: 19px;
}

.custom-p-3 {
    padding: 1.25rem;
}

.bot-search {
    gap: 10px;
}

.upload-dropzone {
    border: 2px dashed #cbd5e0;
    border-radius: 0.5rem;
    padding: 2rem 1rem;
    cursor: pointer;
    transition: 0.15s;
}

.upload-dropzone:hover {
    border-color: #5b93ff;
}

.upload-dropzone.is-dragover {
    border-color: #5b93ff;
    background: #f5f8ff;
}

.upload-dropzone.has-file {
    border-color: #28a745;
    background: #f6fff8;
}

#modalLoading .modal-content {
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#modalExcelSuccess .modal-content,
#modalExcelSystemError .modal-content,
#modalExcelDataError .modal-content {
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.loading-ring {
    width: 72px;
    height: 72px;
}

.loading-ring .ring-track {
    stroke: rgba(0, 0, 0, 0.08);
}

/* 회색 트랙 */
.loading-ring .ring-spin {
    stroke: #3b82f6;
    /* 파란색(원하는 색으로 변경) */
    stroke-dasharray: 90 113;
    /* 보이는 구간 길이 */
    transform-origin: 50% 50%;
    animation: loading-rotate 1s linear infinite;
}

@keyframes loading-rotate {
    to {
        transform: rotate(360deg);
    }
}

.edit-top {
    gap: 10px;
}

.mancursor {
    cursor: pointer;
}

.roommo {
    border: 2px solid rgba(0, 0, 0, 0.2);
}

#modalRegister,
#modalRegisterReside {
    .modal-header {
        position: relative;
        background: #fff;
        padding: 20px;
        border-bottom: 1px solid #dee2e6;
    }

    .modal.show .modal-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
        width: 100%;
        max-width: 800px;
        height: 600px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        overflow-y: auto;
        flex: 1 1 auto;
    }
}

.custom-card {
    display: block;
}

.hrline {
    border-top: 1px solid #b9b9b9;
    margin-top: 1.5rem;
}

.card-scroll {
    overflow-y: scroll;
    height: 285px;
}

.roomListContainer {
    overflow-y: scroll;
    height: 260px;
}

.roomodal {
    width: 27%;
    max-width: 600px !important;
}

.company_nametop {
    display: flex;
}

.excel_error {
    overflow-y: scroll;
    height: 200px;
}

.ops-supply-keyword {
    width: auto;
    flex: 0 0 auto;
    margin-right: 10px;
}

.select-operation {
    width: 100% !important;
}

.select-nav {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
}

/* HC cumtom width */
.w-1p   { width: 1% !important; }
.w-2p   { width: 2% !important; }
.w-3p   { width: 3% !important; }
.w-4p   { width: 4% !important; }
.w-5p   { width: 5% !important; }
.w-10p  { width: 10% !important; }
.w-15p  { width: 15% !important; }
.w-20p  { width: 20% !important; }
.w-25p  { width: 25% !important; }
.w-30p  { width: 30% !important; }
.w-35p  { width: 35% !important; }
.w-40p  { width: 40% !important; }
.w-45p  { width: 45% !important; }
.w-50p  { width: 50% !important; }
.w-55p  { width: 55% !important; }
.w-60p  { width: 60% !important; }
.w-65p  { width: 65% !important; }
.w-70p  { width: 70% !important; }
.w-75p  { width: 75% !important; }
.w-80p  { width: 80% !important; }
.w-85p  { width: 85% !important; }
.w-90p  { width: 90% !important; }
.w-95p  { width: 95% !important; }
.w-100p { width: 100% !important; }

/*약관 관련 */
.modal-body .terms-inner {
  max-height: 400px;      
  overflow-y: auto;       
  padding-right: 10px;    
}

.modal-sm {
    max-width: 500px !important;
}

/* ================================================================
   Figma LNB (Sidebar) + GNB (Header) Redesign
   ================================================================ */

/* --- Design Tokens --- */
:root {
    --lnb-width: 200px;
    --lnb-width-folding: 71px;
    --lnb-bg: rgba(255, 255, 255, 0.20);
    --lnb-border: rgba(120, 144, 156, 0.30);
    --gnb-height: 65px;
    --blue-gray-100: #cfd8dc;
    --blue-gray-300: #90a4ae;
    --blue-gray-400: #78909c;
    --gray-100: #f5f5f5;
    --gray-800: #424242;
    --primary-500: #00C5B2;
    --primary-10: rgba(0, 197, 178, .1);
}

/* --- Logo --- */
.br-logo {
    width: var(--lnb-width) !important;
    height: var(--gnb-height) !important;
    background-color: transparent !important;
    border-right: none !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-right: solid 1px var(--lnb-border) !important;
}
.sideMenu_logo {
    display: inline-block;
    width: 94px;
    height: 32px;
    background: url(../img/logo_type_h01.svg) 0px center no-repeat;

    text-indent: -999999px;
    font-size: 0;
}
@media (min-width: 992px) {
    .br-logo { left: 0 !important; }
}
.br-logo > a {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--gray-800) !important;
    letter-spacing: -0.5px !important;
}
.br-logo > a span {
    color: var(--blue-gray-400) !important;
    font-weight: 300 !important;
}

/* --- Sidebar toggle button in logo area --- */
.br-logo .sidebar-toggle-btn {
    min-width: 32px;
    height: 32px;
    background: var(--gray-100);
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--blue-gray-400);
    font-size: 16px;
    transition: background 0.2s;

    background: url(../img/ic_sidebar.svg) center no-repeat, var(--gray-100);
}
.br-logo .sidebar-toggle-btn:hover {
    /* background: #e0e0e0; */
}
.br-logo .sidebar-toggle-btn:focus,
.br-logo .sidebar-toggle-btn:active {
    outline: none;
}
.fa-bars {
    display: none;
}
/* --- Sidebar Body --- */
.br-sideleft {
    width: var(--lnb-width) !important;
    /* background-color: var(--lnb-bg) !important; */
    border-right: 1px solid var(--lnb-border) !important;
    top: var(--gnb-height) !important;
    padding: 0 !important;
    left: calc(-1 * var(--lnb-width)) !important;
}
@media (min-width: 992px) {
    .br-sideleft {
        left: 0 !important;
    }
}

/* --- Sidebar label ("Navigation") --- */
.br-sideleft .sidebar-label {
    display: none !important;
}

/* --- Menu links (parent items) --- */
.br-menu-link {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--blue-gray-400) !important;
    padding: 0 16px 0 24px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 4px !important;
    background: transparent !important;
    text-decoration: none !important;
}
.br-menu-link:hover,
.br-menu-link:focus {
    color: var(--gray-800) !important;
    background-color: rgba(120, 144, 156, 0.08) !important;
}
.br-menu-link.active {
    color: var(--gray-800) !important;
    background-color: rgba(120, 144, 156, 0.12) !important;
}

/* --- Menu item layout --- */
.br-menu-item {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 8px !important;
    padding: 0;
}
.br-menu-item .sideMenuList1 {
    background: url(../img/ic_dashboard1.svg) left center no-repeat;
}
.br-menu-item .sideMenuList2 {
    background: url(../img/ic_handshake.svg) left center no-repeat;
}
.br-menu-item .sideMenuList3 {
    background: url(../img/ic_assignment_turned1.svg) left center no-repeat;
}
.br-menu-item .sideMenuList4 {
    background: url(../img/ic_sms.svg) left center no-repeat;
}
.br-menu-item .sideMenuList5 {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 11 18-5v12L3 14v-3z'/><path d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/></svg>") left center / 20px no-repeat;
}

.br-menu-item .menu-item-icon,
.br-menu-item i:first-child:not(.menu-item-arrow) {
    font-size: 0px !important;
    color: var(--blue-gray-400) !important;
    width: 20px !important;
    height: 20px;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.br-menu-item .menu-item-label {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: inherit !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-left: 0;
}

.br-menu-item .menu-item-arrow {
    font-size: 14px !important;
    color: var(--blue-gray-400) !important;
    margin-left: auto !important;
    transition: transform 0.2s !important;
}
.br-menu-link.show-sub .menu-item-arrow {
    transform: rotate(180deg) !important;
}

/* --- Sub-menu items --- */
.br-menu-sub {
    /* background: transparent !important; */
    padding: 0 0 8px 0 !important;
}
.br-menu-sub .nav-item {
    display: flex !important;
    align-items: center !important;
}
.br-menu-sub .nav-link {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--blue-gray-400) !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 16px 0 52px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative !important;

    width: 100%;
}
.br-menu-sub .nav-link::before {
    content: '\2013' !important;
    position: absolute !important;
    left: 34px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    background: none !important;
    color: var(--blue-gray-400) !important;
    font-size: 12px !important;
    opacity: 1 !important;
}
.br-menu-sub .nav-link:hover::before,
.br-menu-sub .nav-link:focus::before,
.br-menu-sub .nav-link.active::before {
    content: '\2013' !important;
    left: 28px !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    color: var(--gray-800) !important;
}
.br-menu-sub .nav-link:hover,
.br-menu-sub .nav-link:focus {
    color: var(--gray-800) !important;
    background: rgba(120, 144, 156, 0.08) !important;
}
.br-menu-sub .nav-link.active {
    color: var(--btn-success-bg) !important;
    font-weight: 600 !important;
}
.br-menu-sub .nav-link.active::before{
    color: var(--btn-success-bg) !important;
}

.collapsed-menu .br-menu-link:hover .br-menu-sub nav {
    /* visibility: visible;
    position: relative;
    top: 0;
    left: 200px;
    z-index: 99; */
}
.collapsed-menu .br-menu-sub.flyout-active {
    display: block !important;
    position: fixed !important;
    left: 71px !important;
    /* --lnb-width-folding 값 */
    z-index: 9999;
    background: #fff;
    border-radius: 8px;
    padding: 8px 0;
    
    min-width: 160px;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
}
.collapsed-menu .br-menu-sub {
    padding-top: 8px !important;
}
.collapsed-menu .br-menu-sub .nav-link {
    padding-left: 32px !important;
}
.collapsed-menu .br-menu-sub .nav-link::before {
    left: 18px !important;
}
.collapsed-menu .br-menu-sub .nav-link:hover::before {
    left: 14px !important;
}


.collapsed-menu .br-menu-sub {
    /* background: #E9EEF5 !important; */
}

/* --- Sidebar footer (copyright) --- */
.br-sideleft .sidebar-copyright {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--blue-gray-300);
    line-height: 1.4;
    padding: 20px 16px 24px;
    background-color: #eaeef3;   /* 블루 회색조(중간 톤) */
}
.collapsed-menu .br-sideleft .sidebar-copyright {
    text-align: left;
    padding-left: 8px;
}
.br-sideleft .sidebar-copyright .sidebar-tel {
    margin-top: 6px;
    font-size: 12px;
    color: var(--blue-gray-400);
}

/* --- Sidebar layout: 메뉴영역 스크롤 + 푸터 하단 고정 --- */
.br-sideleft {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.br-sideleft-menu {
    flex: 1 1 auto;
    height: auto !important;   /* 테마 calc(100% - 150px) 고정높이 제거 */
    min-height: 0;             /* flex 자식 스크롤 허용 */
    overflow-y: auto;
    overflow-x: hidden;
}
.br-sideleft .sidebar-copyright {
    flex-shrink: 0;            /* 스크롤과 무관하게 항상 하단 고정 */
}
/* 얇은 미니멀 스크롤바 (Chrome/Safari/Edge)
   scrollbar-width/color 를 함께 쓰면 최신 Chromium이 아래 webkit 커스텀을 무시함 */
.br-sideleft-menu::-webkit-scrollbar {
    width: 6px;
}
.br-sideleft-menu::-webkit-scrollbar-track {
    background: transparent;
}
.br-sideleft-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}
.br-sideleft-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.32);
}

/* --- Header (GNB) --- */
.br-header {
    height: var(--gnb-height) !important;
    /* background-color: transparent !important; */
    background-color: #e7e8ea !important;
    background: linear-gradient(to right, #e6e8eb 0%, #eff0f2 50%, #eef6f3 100%);
    box-shadow: none !important;
    border-bottom: 1px solid var(--lnb-border) !important;
}
@media (min-width: 992px) {
    .br-header {
        left: var(--lnb-width) !important;
    }
}
.br-header::before {
    display: none !important;
}

/* GNB page title */
.br-header .gnb-page-title {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--blue-gray-400);
    letter-spacing: -0.25px;
    flex: 1;
    padding-left: 32px;
}

/* GNB right area */
.br-header-right {
    padding-right: 32px !important;
    gap: 16px !important;
}
.br-header-right .select-operation {
    border: 1px solid var(--blue-gray-100) !important;
    border-radius: 8px !important;
    height: 32px !important;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    color: var(--blue-gray-400) !important;
    padding: 0 24px 0 12px!important;
    background-color: transparent !important;
    min-width: 160px !important;
}
/* select 기본 화살표 유지 */

.select_wrap {
    position: relative;
}
/* 보자기(.select_wrap) 안에 있는 select 만 브라우저 기본 화살표를 숨긴다.
   → 커스텀 SVG 화살표(::before)와 겹쳐 보이던 "화살표 2개" 버그 해소.
   보자기가 없는 일반 <select> 는 이 규칙이 적용되지 않아 기존 모양 유지. */
.select_wrap > select,
.select_wrap > select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 28px;
    background-image: none !important;
}
.select_wrap::before {
    pointer-events: none;
    content: '';
    display: inline-block;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: url(../img/ic_down.svg);
}
.select_wrap.selectH40::before {
    top: 10px !important;
}

.br-header-right .nav-link-profile {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.br-header-right .nav-link-profile .logged-name {
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--blue-gray-400) !important;
}
.gnb_profile_circle {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #00c5b2;
    background: url(../img/account-circle-fill-2.svg) center no-repeat;
}

/* --- Main panel offset --- */
@media (min-width: 992px) {
    .br-mainpanel {
        margin-left: var(--lnb-width) !important;
    }
}
.br-mainpanel {
    margin-top: var(--gnb-height) !important;
}

/* --- Body background matching Figma --- */
body.main {
    /* background-color: #f0f1f3 !important; */
    min-height: calc(100vh - 65px);
}
/* --- Collapsed sidebar adjustments --- */
@media (min-width: 992px) {
    .collapsed-menu .br-logo {
        width: var(--lnb-width-folding) !important;
    }
    .collapsed-menu .br-sideleft {
        width: var(--lnb-width-folding) !important;
    }
    .collapsed-menu .br-header {
        left: var(--lnb-width-folding) !important;
    }
    .collapsed-menu .br-mainpanel {
        margin-left: var(--lnb-width-folding) !important;
    }

    /* --- 사이드 메뉴 폴딩 --- */
    .collapsed-menu .br-logo > a {
        width: 0px;
    }
    .collapsed-menu .br-menu-sub {
        /* display: none; */
    }
}
/* ================================================================
   Figma 상주업체목록 톤앤매너 — 전체 페이지 공통 적용
   ================================================================ */

/* --- 추가 디자인 토큰 --- */
:root {
    --card-radius: 12px;
    --card-bg: rgba(255, 255, 255, 0.5);
    --card-shadow: 0 1px 6px rgba(207, 216, 220, 0.45);
    --toolbar-bg: #f8fafb;
    --toolbar-border: #e8ecef;
    --table-header-bg: #fff;
    --table-header-color: #546e7a;
    --table-border: #eceff1;
    --table-row-hover: #f5f8fa;
    --table-row-stripe: #fafbfc;
    --btn-primary-bg: #00C5B2;
    --btn-primary-hover: #00b4a2;
    --btn-secondary-bg: #eceff1;
    --btn-secondary-color: #546e7a;
    --btn-success-bg: #00c5b2;
    --btn-success-hover: #00a99a;
    --btn-danger-bg: #ef5350;
    --text-primary: #37474f;
    --text-secondary: #78909c;
    --text-muted: #90a4ae;
    --input-border: #cfd8dc;
    --input-focus-border: #4895ef;
    --input-radius: 8px;
    --page-padding: 32px;
}

/* --- 페이지 배경 그라디언트 (Figma BG) --- */
body.main {
    /* background: linear-gradient(135deg, #e8eaed 0%, #f5f6f8 40%, #ffffff 100%) !important; */
    background: url(../img/BG.png) center/cover no-repeat !important;
}

/* --- 메인 패널 패딩 --- */
.br-mainpanel > main {
    padding: var(--page-padding);
}

/* --- 페이지 제목 (h4) --- */
.br-section-wrapper > .d-flex > h4,
.br-section-wrapper > .d-flex > h3 {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    letter-spacing: -0.3px !important;
}

/* --- 최상위 카드 컨테이너 (br-section-wrapper) --- */
.br-section-wrapper {
    background: var(--card-bg) !important;
    border-radius: var(--card-radius) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 24px !important;
    border: none !important;
}
/* 내부 중첩 br-section-wrapper (테이블 영역) */
.br-section-wrapper .br-section-wrapper {
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* --- 검색 필터 박스 (Toolbar) --- */
.bd.bd-gray-300.rounded-3,
.card.border.rounded {
    background: var(--toolbar-bg) !important;
    border: 1px solid var(--toolbar-border) !important;
    border-radius: var(--input-radius) !important;
    box-shadow: none !important;
    padding: 12px 16px !important;
}
/* shadow-bottom 제거 (Figma에 없음) */
.bd.shadow-bottom,
.card.shadow-bottom {
    box-shadow: none !important;
}

/* --- 입력 필드 (form-control) — Figma 스타일 --- */
.br-section-wrapper .form-control,
.br-section-wrapper select.form-control {
    border: 1px solid var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    background: #fff !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
}
.br-section-wrapper .form-control:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 2px rgba(72, 149, 239, 0.15) !important;
    outline: none !important;
}
.br-section-wrapper .form-control::placeholder {
    color: var(--text-muted) !important;
}
/* 검색 바 내 인라인 스타일 높이 오버라이드 */
.bd.bd-gray-300 .form-control {
    height: 40px;
    font-size: 13px !important;
}

/* --- 버튼 (Figma 둥근 스타일) --- */
.br-section-wrapper .btn {
    border-radius: var(--input-radius) !important;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s !important;
    border: none;
    line-height: 1 !important;
}
/* 예외: 숨김(d-none)은 항상 존중 — 위 display:inline-flex !important 가 Bootstrap d-none을 이겨
   "숨긴 버튼이 계속 보이는" 버그가 있었음(업체 상세 저장/취소 버튼 등, 2026-07 발견).
   특이도 (0,3,0) + !important 로 원인 규칙을 확실히 이긴다. */
.br-section-wrapper .btn.d-none {
    display: none !important;
}
.br-section-wrapper .btn-sm {
    height: 40px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
}
.br-section-wrapper .btn-primary {
    background: var(--btn-primary-bg) !important;
    color: #fff !important;
    border-radius: var(--input-radius) !important;
}
.br-section-wrapper .btn-primary:hover {
    background: var(--btn-primary-hover) !important;
}
.br-section-wrapper .btn-secondary {
    background: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-color) !important;
    border: 1px solid var(--toolbar-border) !important;
}
.br-section-wrapper .btn-secondary:hover {
    background: #dfe3e6 !important;
}
.br-section-wrapper .btn-success {
    background: var(--btn-success-bg) !important;
    color: #fff !important;
}
.br-section-wrapper .btn-success:hover {
    background: var(--btn-success-hover) !important;
}
.br-section-wrapper .btn-outline-success {
    background: transparent !important;
    color: var(--btn-success-bg) !important;
    border: 1px solid var(--btn-success-bg) !important;
}
.br-section-wrapper .btn-outline-success:hover {
    background: var(--btn-success-bg) !important;
    color: #fff !important;
}
.br-section-wrapper .btn-outline-primary {
    background: transparent !important;
    color: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
}
.br-section-wrapper .btn-outline-primary:hover {
    background: var(--btn-primary-bg) !important;
    color: #fff !important;
}
.br-section-wrapper .btn-outline-danger {
    background: transparent !important;
    color: var(--btn-danger-bg) !important;
    border: 1px solid var(--btn-danger-bg) !important;
}
.br-section-wrapper .btn-outline-danger:hover {
    background: var(--btn-danger-bg) !important;
    color: #fff !important;
}
/* outline 보조/경고 버튼 — 기존에 정의가 누락되어 테두리 없는 텍스트처럼 보이던 것 보완 */
.br-section-wrapper .btn-outline-secondary {
    background: transparent !important;
    color: var(--btn-secondary-color) !important;
    border: 1px solid var(--toolbar-border) !important;
}
.br-section-wrapper .btn-outline-secondary:hover {
    background: var(--btn-secondary-bg) !important;
}
.br-section-wrapper .btn-outline-warning {
    background: transparent !important;
    color: #F49917 !important;
    border: 1px solid #F49917 !important;
}
.br-section-wrapper .btn-outline-warning:hover {
    background: #F49917 !important;
    color: #fff !important;
}
/* outline 버튼 선택(active) 상태 — 상태색으로 채움 (토글/세그먼트 공용).
   기존 outline 규칙의 transparent !important가 테마의 .active 채움을 덮어
   선택해도 표시가 안 되던 문제 해결 */
.br-section-wrapper .btn-outline-primary.active {
    background: var(--btn-primary-bg) !important;
    color: #fff !important;
}
.br-section-wrapper .btn-outline-success.active {
    background: var(--btn-success-bg) !important;
    color: #fff !important;
}
.br-section-wrapper .btn-outline-danger.active {
    background: var(--btn-danger-bg) !important;
    color: #fff !important;
}
.br-section-wrapper .btn-outline-secondary.active {
    background: #868e96 !important;
    border-color: #868e96 !important;
    color: #fff !important;
}
.br-section-wrapper .btn-outline-warning.active {
    background: #F49917 !important;
    color: #fff !important;
}
/* 아이콘 전용 작은 버튼 (컬럼 설정 기어) */
.br-section-wrapper .btn-light,
.br-section-wrapper .columnicon {
    background: var(--toolbar-bg) !important;
    border: 1px solid var(--toolbar-border) !important;
    color: var(--text-secondary) !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
}

.br-section-wrapper .btn-outline-success.btn-excel-download,
.br-section-wrapper .btn-success.reside_excel,
.br-section-wrapper .btn-success.vir_excel {
    width: 44px;
    height: 40px;
    border: 1px solid var(--btn-success-bg) !important;
    background: url(../img/ic_download1.svg) center/24px no-repeat !important;
}
.br-section-wrapper .btn-success.reside_excel,
.br-section-wrapper .btn-success.vir_excel {
    background-image: url(../img/ic_upload1.svg) !important;
    border: 1px solid var(--btn-success-bg) !important;
    background-color: var(--btn-success-bg) !important;
}

/* --- 테이블 --- */
.vir-table,
.br-section-wrapper table.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    width: 100% !important;
}

/* 테이블 헤더 (Figma: 회색 배경, 작은 텍스트, 볼드) */
.vir-table thead th,
.br-section-wrapper table.table thead th,
.custom-bg-gray th,
thead.custom-bg-gray th {
    background: var(--table-header-bg) !important;
    color: var(--table-header-color) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--table-border) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
/* 첫 번째 헤더 왼쪽 둥근 모서리 */
.vir-table thead th:first-child,
.br-section-wrapper table.table thead th:first-child {
    border-radius: 8px 0 0 0 !important;
}
/* 마지막 헤더 오른쪽 둥근 모서리 */
.vir-table thead th:last-child,
.br-section-wrapper table.table thead th:last-child {
    border-radius: 0 8px 0 0 !important;
}

/* 테이블 셀 */
.vir-table tbody td,
.br-section-wrapper table.table tbody td {
    padding: 10px 16px !important;
    border: none !important;
    border-bottom: 1px solid var(--table-border) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

/* 짝수 행 stripe */
.vir-table tbody tr:nth-child(even),
.br-section-wrapper table.table tbody tr:nth-child(even) {
    background: var(--table-row-stripe) !important;
}

/* 행 hover */
.vir-table tbody tr:hover,
.br-section-wrapper table.table tbody tr:hover {
    background: var(--table-row-hover) !important;
}

/* custom-bg-gray 오버라이드 (Figma에서는 부드러운 회색) */
.custom-bg-gray {
    background-color: var(--table-header-bg) !important;
}

/* --- 테이블 래퍼 (스크롤) --- */
.table-scroll-wrapper {
    border-radius: 8px !important;
    border: 1px solid var(--table-border) !important;
    overflow: auto !important;
}
.table-scroll-wrapper thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--table-header-bg) !important;
}

/* --- 페이지네이션 --- */
.dataTables_paginate {
    padding: 16px 0 !important;
}
.dataTables_paginate .page-link,
.pagination .page-link,
.pagination-basic .page-item .page-link {
    border: none !important;
    border-radius: 6px !important;
    color: var(--text-secondary, #78909c) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    background: transparent !important;
    transition: all 0.15s !important;
    width: auto !important;
    min-width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.dataTables_paginate .page-link:hover,
.pagination .page-link:hover,
.pagination-basic .page-item .page-link:hover {
    background: var(--toolbar-bg, #f8fafb) !important;
    color: var(--text-primary, #37474f) !important;
}
.dataTables_paginate .page-item.active .page-link,
.pagination .page-item.active .page-link,
.pagination.pagination-basic .page-item.active .page-link {
    background-color: var(--btn-primary-bg, #4895ef) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* --- 건수 선택 (per-page-wrapper) --- */
.per-page-wrapper {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}
.per-page-wrapper select.form-control {
    height: 32px !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    border: 1px solid var(--input-border) !important;
    font-size: 13px !important;
}

/* --- 뱃지 (상주/비상주/계약상태) --- */
.statusbadge,
.contract-badge,
.roombadge {
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    line-height: 1.4 !important;
}
/* 상주 뱃지 (Figma blue) */
.statusbadge.inr,
.badge-outline-primary.statusbadge {
    color: var(--btn-primary-bg) !important;
    border: 1px solid rgba(72, 149, 239, 0.3) !important;
    background: rgba(72, 149, 239, 0.08) !important;
}
/* 비상주 뱃지 (Figma green) */
.statusbadge.outr,
.badge-success.statusbadge {
    color: var(--btn-success-bg) !important;
    border: 1px solid rgba(0, 197, 178, 0.3) !important;
    background: rgba(0, 197, 178, 0.08) !important;
}

/* --- 탭 필터 (주간 필터 등) --- */
.nav-line .nav-link,
.weekfilter .nav-link {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    position: relative !important;
    transition: color 0.15s !important;
}
.nav-line .nav-link:hover,
.weekfilter .nav-link:hover {
    color: var(--text-primary) !important;
    background: var(--toolbar-bg) !important;
}
.nav-line .nav-link.active,
.weekfilter .nav-link.active,
.custom-nav-link.active {
    color: var(--btn-primary-bg) !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--btn-primary-bg) !important;
}

/* --- 알림 박스 (alert) --- */
.br-section-wrapper .alert {
    border-radius: var(--input-radius) !important;
    font-size: 13px !important;
    border: none !important;
}

/* --- 모달 통합 스타일 --- */
.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}
.modal-header {
    border-bottom: 1px solid var(--table-border) !important;
    padding: 20px 24px !important;
}
.modal-header .modal-title {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}
.modal-body {
    padding: 20px 24px !important;
}
.modal-footer {
    border-top: 1px solid var(--table-border) !important;
    padding: 16px 24px !important;
}

/* --- 링크 색상 통합 --- */
.company_name a,
.br-section-wrapper a:not(.btn):not(.nav-link):not(.br-menu-link):not(.ec-status-badge):not(.page-link) {
    color: var(--btn-primary-bg) !important;
}
.company_name a:hover {
    color: var(--btn-primary-hover) !important;
}

.collapsed-menu .br-sideleft:hover .fa-angle-down:before,
.collapsed-menu .br-sideleft:hover .menu-item-label {
    display: none;
}

/* --- 메모 셀 --- */
.open-memo-cell {
    color: var(--btn-primary-bg) !important;
    cursor: pointer !important;
}

/* --- 푸터 --- */
.br-footer {
    background: var(--card-bg) !important;
    border-top: 1px solid var(--table-border) !important;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 13px !important;
    color: var(--text-muted) !important;

    display: none;
}

/* --- 정렬 아이콘 --- */
th.sorted-asc::after,
th.sorted-desc::after {
    color: var(--btn-primary-bg) !important;
}

/* --- 엑셀 업로드 드롭존 --- */
.upload-dropzone {
    border-radius: var(--card-radius) !important;
    border-color: var(--input-border) !important;
}
.upload-dropzone:hover,
.upload-dropzone.is-dragover {
    border-color: var(--btn-primary-bg) !important;
    background: rgba(72, 149, 239, 0.04) !important;
}

/* --- 컬럼/아이콘 FOUC 방지는 header.php 인라인 스타일로 처리 --- */

/* 버튼 Start */
.btn_line_normal {
    
}
.btn_ic {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../img/ic_plusCircle.svg);
    background-position: center;
    background-repeat: no-repeat;
    margin-left: -4px;
}
.ic_trash_w {
    background-image: url(../img/ic_delete_w.svg);
}
.ic_mail_send_w {
    background-image: url(../img/ic_mail_send_w.svg);
}
.ic_plus {
    background-image: url(../img/ic_plusCircle.svg);
}

.ic_edite {
    background-image: url(../img/ic_border_color.svg);
}


<i class="btn_ic ic_trash_w"></i>

.ic_door {
    background-image: url(../img/ic_door_open.svg);
}


.btn_ic_plus {
    background-image: url(../img/ic_plusCircle.svg);
}

.btn_ic_edite {
    background-image: url(../img/ic_border_color.svg);
}

.btn_ic_door {
    background-image: url(../img/ic_door_open.svg);
}
#btnResetFilters {
    background: url(../img/ic_reset.svg) 8px center no-repeat, #fff !important;
    padding-left: 36px !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--input-radius) !important;
}
.btn_icon_l {
    background: url(../img/ic_reset.svg) 10px center no-repeat, #fff;
    padding-left: 36px !important;
    border: 1px solid var(--input-border) !important;
    border-radius: var(--input-radius) !important;
    text-align: ;
    color: black;
}
.btn.btn_icon_l.w104,
.btn.btn_icon_l_fill.w104 {
    width: 104px;
    padding-left: 38px !important;
}

.btn.btn_icon_l.w116,
.btn.btn_icon_l_fill.w116 {
    width: 116px;
}

#btnExcel.btn_icon_l_fill {
    background: url(../img/ic_download_w.svg) 8px center/24px no-repeat, var(--btn-success-bg) !important;
    padding-left: 36px !important;
}

.txtRight {
    text-align: right;
}

/* 버튼 End */

.txtBlack {
    color: #000 !important;
}
.control_r {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
/* --- 탭메뉴 --- */
.nav-pills .nav-link.tabMenu {
    border-radius: 0px 12px 0 0 !important;
    background-color: #e3e7e9;
}
.nav-pills .nav-link.tabMenu.active {
    background-color: var(--primary-500);
}
/* --- 버튼 --- */
.btn_line_normal,
.br-section-wrapper .btn.btn_line_normal {
    background-color: #fff;
    border: 1px solid var(--input-border) !important;
}
/* --- 폰트 --- */
.txt18 { font-size: 18px; }
.txt20 {font-size: 20px;}

/* --- 컬러 --- */
.txtPrimary500 {
    color: var(--primary-500) !important;
}
/* --- 아이콘 --- */
.ic_coin {
    background: url(../img/ic_coin.svg) center/24px no-repeat;
    display: inline-block;
    width: 24px;
    height: 24px;
}
/* --- 폰트색 --- */
.txtPrimary500 {color: var(--primary-500) !important;}
/* --- 배경색 --- */
.bgPrimary10 {
    background-color: var(--primary-10) !important;
}
/* --- 플렉스 --- */
.flx { display: flex; }
.ai_center { align-items: center; }
.jc_sb { justify-content: space-between; }
.gap8 { gap: 8px !important; }

/* --- 라인 --- */
.ul {border-bottom: solid 1px var(--blue-gray-100);}
.ul_green { border-bottom: solid #17A2B8}
/* --- 세로 --- */
.h100per,
.card-scroll.h100per {
    height: 100% !important;
}
.
.min_h100per {min-height: 100% !important;}
.h18, input[type="checkbox"].h18 {height: 18px !important;}
.h40 { height: 40px !important;}
/* --- 가로 --- */
.w18 {width: 18px;}
.w20 {width: 20px;}
.w80 {width: 80px;}
.w100 {width: 100px;}
.w120 {width: 120px;}
.w100per {width: 100% !important;}
/* --- 패딩 --- */
.pr0 {padding-right: 0px;}
.pb0 {padding-bottom: 0px;}
.pl0 {padding-left: 0px;}
.pt0 {padding-top: 0px;}
.pr2 { padding-right: 2px !important; }
.pr4 { padding-right: 4px !important; }
.pr6 { padding-right: 6px !important; }
.pr8 { padding-right: 8px !important; }
.pr10 { padding-right: 10px !important; }
.pr12 { padding-right: 12px !important; }
.pr14 { padding-right: 14px !important; }
.pr16 { padding-right: 16px !important; }
.pr18 { padding-right: 18px !important; }
.pr20 { padding-right: 20px !important; }
.pr22 { padding-right: 22px !important; }
.pr24 { padding-right: 24px !important; }
.pr26 { padding-right: 26px !important; }
.pr28 { padding-right: 28px !important; }
.pr30 { padding-right: 30px !important; }
.pr32 { padding-right: 32px !important; }
.pr34 { padding-right: 34px !important; }
.pr36 { padding-right: 36px !important; }
.pr38 { padding-right: 38px !important; }
.pr40 { padding-right: 40px !important; }
.pb2 { padding-bottom: 2px !important; }
.pb4 { padding-bottom: 4px !important; }
.pb6 { padding-bottom: 6px !important; }
.pb8 { padding-bottom: 8px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb12 { padding-bottom: 12px !important; }
.pb14 { padding-bottom: 14px !important; }
.pb16 { padding-bottom: 16px !important; }
.pb18 { padding-bottom: 18px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb22 { padding-bottom: 22px !important; }
.pb24 { padding-bottom: 24px !important; }
.pb26 { padding-bottom: 26px !important; }
.pb28 { padding-bottom: 28px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb32 { padding-bottom: 32px !important; }
.pb34 { padding-bottom: 34px !important; }
.pb36 { padding-bottom: 36px !important; }
.pb38 { padding-bottom: 38px !important; }
.pb40 { padding-bottom: 40px !important; }
.pl2 { padding-left: 2px !important; }
.pl4 { padding-left: 4px !important; }
.pl6 { padding-left: 6px !important; }
.pl8 { padding-left: 8px !important; }
.pl10 { padding-left: 10px !important; }
.pl12 { padding-left: 12px !important; }
.pl14 { padding-left: 14px !important; }
.pl16 { padding-left: 16px !important; }
.pl18 { padding-left: 18px !important; }
.pl20 { padding-left: 20px !important; }
.pl22 { padding-left: 22px !important; }
.pl24 { padding-left: 24px !important; }
.pl26 { padding-left: 26px !important; }
.pl28 { padding-left: 28px !important; }
.pl30 { padding-left: 30px !important; }
.pl32 { padding-left: 32px !important; }
.pl34 { padding-left: 34px !important; }
.pl36 { padding-left: 36px !important; }
.pl38 { padding-left: 38px !important; }
.pl40 { padding-left: 40px !important; }
.pt2 { padding-top: 2px !important; }
.pt4 { padding-top: 4px !important; }
.pt6 { padding-top: 6px !important; }
.pt8 { padding-top: 8px !important; }
.pt10 { padding-top: 10px !important; }
.pt12 { padding-top: 12px !important; }
.pt14 { padding-top: 14px !important; }
.pt16 { padding-top: 16px !important; }
.pt18 { padding-top: 18px !important; }
.pt20 { padding-top: 20px !important; }
.pt22 { padding-top: 22px !important; }
.pt24 { padding-top: 24px !important; }
.pt26 { padding-top: 26px !important; }
.pt28 { padding-top: 28px !important; }
.pt30 { padding-top: 30px !important; }
.pt32 { padding-top: 32px !important; }
.pt34 { padding-top: 34px !important; }
.pt36 { padding-top: 36px !important; }
.pt38 { padding-top: 38px !important; }
.pt40 { padding-top: 40px !important; }
/* --- 마진 --- */
.ml0 { margin-left: 0 !important; }
.ml2 { margin-left: 2px !important; }
.ml4 { margin-left: 4px !important; }
.ml6 { margin-left: 6px !important; }
.ml8 { margin-left: 8px !important; }
.ml10 { margin-left: 10px !important; }
.ml12 { margin-left: 12px !important; }
.ml14 { margin-left: 14px !important; }
.ml16 { margin-left: 16px !important; }
.ml18 { margin-left: 18px !important; }
.ml20 { margin-left: 20px !important; }
.ml22 { margin-left: 22px !important; }
.ml24 { margin-left: 24px !important; }
.ml26 { margin-left: 26px !important; }
.ml28 { margin-left: 28px !important; }
.ml30 { margin-left: 30px !important; }
.ml32 { margin-left: 32px !important; }
.ml34 { margin-left: 34px !important; }
.ml36 { margin-left: 36px !important; }
.ml38 { margin-left: 38px !important; }
.ml40 { margin-left: 40px !important; }
.mr0 { margin-right: 0 !important; }
.mr2 { margin-right: 2px !important; }
.mr4 { margin-right: 4px !important; }
.mr6 { margin-right: 6px !important; }
.mr8 { margin-right: 8px !important; }
.mr10 { margin-right: 10px !important; }
.mr12 { margin-right: 12px !important; }
.mr14 { margin-right: 14px !important; }
.mr16 { margin-right: 16px !important; }
.mr18 { margin-right: 18px !important; }
.mr20 { margin-right: 20px !important; }
.mr22 { margin-right: 22px !important; }
.mr24 { margin-right: 24px !important; }
.mr26 { margin-right: 26px !important; }
.mr28 { margin-right: 28px !important; }
.mr30 { margin-right: 30px !important; }
.mr32 { margin-right: 32px !important; }
.mr34 { margin-right: 34px !important; }
.mr36 { margin-right: 36px !important; }
.mr38 { margin-right: 38px !important; }
.mr40 { margin-right: 40px !important; }
.mt0 { margin-top: 0 !important; }
.mt2 { margin-top: 2px !important; }
.mt4 { margin-top: 4px !important; }
.mt6 { margin-top: 6px !important; }
.mt8 { margin-top: 8px !important; }
.mt10 { margin-top: 10px !important; }
.mt12 { margin-top: 12px !important; }
.mt14 { margin-top: 14px !important; }
.mt16 { margin-top: 16px !important; }
.mt18 { margin-top: 18px !important; }
.mt20 { margin-top: 20px !important; }
.mt22 { margin-top: 22px !important; }
.mt24 { margin-top: 24px !important; }
.mt26 { margin-top: 26px !important; }
.mt28 { margin-top: 28px !important; }
.mt30 { margin-top: 30px !important; }
.mt32 { margin-top: 32px !important; }
.mt34 { margin-top: 34px !important; }
.mt36 { margin-top: 36px !important; }
.mt38 { margin-top: 38px !important; }
.mt40 { margin-top: 40px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb2 { margin-bottom: 2px !important; }
.mb4 { margin-bottom: 4px !important; }
.mb6 { margin-bottom: 6px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb12 { margin-bottom: 12px !important; }
.mb14 { margin-bottom: 14px !important; }
.mb16 { margin-bottom: 16px !important; }
.mb18 { margin-bottom: 18px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb22 { margin-bottom: 22px !important; }
.mb24 { margin-bottom: 24px !important; }
.mb26 { margin-bottom: 26px !important; }
.mb28 { margin-bottom: 28px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb32 { margin-bottom: 32px !important; }
.mb34 { margin-bottom: 34px !important; }
.mb36 { margin-bottom: 36px !important; }
.mb38 { margin-bottom: 38px !important; }

/* ─────── 컬럼 설정 모달 (Phase 3) ─────── */
.column-list .column-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.column-list .column-item .ckbox {
    margin-bottom: 0;
}

.column-list .drag-handle {
    cursor: move;
    user-select: none;
    padding: 4px 6px;
    color: #888;
    flex-shrink: 0;
}

.column-list .drag-handle:hover {
    color: #333;
}

/* 모달 안 컬럼 리스트가 너무 길 때 세로 스크롤 */
.column-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* 드래그 중 placeholder 스타일 */
.column-list .sortable-ghost {
    opacity: 0.4;
    background: #f0f7ff;
}

.mb40 { margin-bottom: 40px !important; }
/* 컬럼 설정 저장 중 오버레이 (CSP가 inline style 속성을 막으므로 class 토글로 표시 제어) */
.modal-content { position: relative; }
.column-save-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1060;
    background: rgba(255, 255, 255, 0.82);
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}
.column-save-overlay.is-active { display: flex; }
.column-save-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
}
.column-save-overlay__inner .fa-spinner { font-size: 30px; color: #1abc9c; }

/* 전환 컨텍스트 배너 — CSP로 inline style 불가, 클래스로 제공 */
.switch-context-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    /* 고정 GNB(65px) 바로 아래에 붙여 노출 — 오프셋 없으면 GNB 뒤에 가려져 보이지도, 클릭되지도 않음 */
    position: sticky;
    top: var(--gnb-height);
    z-index: 99; /* 본문 위, 사이드바(100)·GNB(1030) 아래 */
}
/* GNB와 동일한 사이드바 오프셋 (br-header / br-mainpanel 규칙과 동일 패턴) */
@media (min-width: 992px) {
    .switch-context-banner {
        margin-left: var(--lnb-width);
    }
    .collapsed-menu .switch-context-banner {
        margin-left: var(--lnb-width-folding);
    }
}
.switch-context-banner.is-working {
    background: #e6f7ef;
    color: #0f6b46;
    border-bottom: 1px solid #b9e8d2;
}
.switch-context-banner.is-readonly {
    background: #fdf6e3;
    color: #8a6314;
    border-bottom: 1px solid #f0e0b0;
}
.switch-context-banner .switch-back-link {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 12px;
}

/* ─── 계약서 수신처 박스 (전자계약 서명요청 수신 대상) ─── */
.contract-recipient-box { border:1px solid #cfe0fb; border-left:4px solid #0866C6; border-radius:9px; background:#f4f8ff; padding:14px 16px; margin-top:8px; }
.contract-recipient-box .crb-title { font-weight:700; color:#1b4f9c; font-size:14px; }
.contract-recipient-box .crb-flow { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:9px; font-size:11px; color:#33486a; }
.contract-recipient-box .crb-chip { background:#fff; border:1px solid #cfe0fb; border-radius:6px; padding:4px 9px; }
.contract-recipient-box .crb-arrow { color:#0866C6; font-weight:800; }
.contract-recipient-box .crb-opt { display:block; border:1px solid #d7dbe2; border-radius:8px; background:#fff; padding:10px 12px; margin-top:9px; margin-bottom:0; cursor:pointer; font-weight:400; }
.contract-recipient-box .crb-opt.is-active { border:1.5px solid #0866C6; background:#eaf3ff; }
.contract-recipient-box .crb-mode { font-weight:700; color:#33486a; font-size:13px; margin-top:8px; }
.contract-recipient-box .crb-resolved { display:block; margin-top:5px; margin-left:22px; font-size:12px; color:#33486a; }
.contract-recipient-box .crb-resolved.is-empty { color:#c0392b; }
.contract-recipient-box .crb-sub { margin-top:10px; }
.contract-recipient-box .crb-sub > label { font-size:12px; font-weight:600; margin-bottom:3px; display:block; }
.contract-recipient-box.is-readonly .crb-opt { cursor:default; }
.contract-recipient-box.is-readonly .crb-resolved { margin-left:0; }

/* ── 셀 내 클릭 라벨 공통 (CSP nonce 정책상 inline style 속성 불가 → 클래스) ── */
.cell-link { text-decoration: underline !important; }
.ti-issue-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ─── 지점 탭 · 지점 구분 표시 (본사 전 지점 통합 조회 Phase 1) ─── */
.branch-tabs { display:flex; flex-wrap:wrap; gap:4px; align-items:flex-end; margin:0 0 14px; border-bottom:1px solid #e2e7ee; }
.branch-tab { display:inline-flex; align-items:center; gap:6px; padding:8px 14px 6px;
  font-size:13px; color:#3e4c59; text-decoration:none; background:#f7f8fa; border:1px solid #e2e7ee;
  border-bottom:none; border-radius:7px 7px 0 0; position:relative; top:1px; line-height:1.5; }
.branch-tab:hover { background:#eef1f5; color:#1f2933; text-decoration:none; }
.branch-tab::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#6b7280; opacity:.35; }
.branch-tab:first-child::after { background:#7b8794; }
.branch-tab.active { background:#fff; color:#1f2933; font-weight:700; border-color:#e2e7ee; }
.branch-tab.active::after { opacity:1; height:3px; }
.branch-tab .bt-count { display:inline-block; min-width:18px; padding:0 5px; border-radius:9px; background:#e2e7ee;
  color:#3e4c59; font-size:11px; font-weight:700; text-align:center; line-height:17px; }
.branch-tab.active .bt-count { background:#1f2933; color:#fff; }

/* 목록 지점 셀 — 지점명 + 본사 지정 색상 언더라인 */
.branch-tag { display:inline-block; font-weight:700; padding-bottom:2px; line-height:1.45;
  border-bottom:3px solid #6b7280; white-space:nowrap; }
.branch-badge { display:inline-block; margin-left:3px; padding:0 5px; border-radius:4px; font-size:10.5px;
  font-weight:700; line-height:16px; vertical-align:1px; }
.branch-badge.is-read { background:#eef1f5; color:#7b8794; }
.branch-badge.is-share { background:#efe9fd; color:#7048e8; }
.branch-badge.is-expired { background:#fdecee; color:#e02d3c; }

/* 지점 소계·통합 안내 */
.scope-notice { background:#f4f8ff; border:1px solid #cfe0fb; border-radius:8px; padding:9px 13px;
  font-size:12.5px; color:#1b4f9c; margin-bottom:12px; }
.branch-summary { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; font-size:12px; color:#3e4c59; }
.branch-summary .bs-item { display:inline-flex; align-items:center; gap:5px; }
.branch-summary .bs-dot { width:9px; height:3px; border-radius:2px; display:inline-block; }
.branch-stat-table th, .branch-stat-table td { vertical-align:middle; font-size:12.5px; }
.branch-stat-table tfoot .branch-stat-total td { background:#eaf1ff; }

/* 지점 구분 색상 지정 패널 */
.branch-color-grid { display:flex; flex-wrap:wrap; gap:10px; }
.branch-color-item { flex:1 1 260px; min-width:240px; border:1px solid #e2e7ee; border-radius:8px; padding:10px 12px; background:#fbfcfe; }
.branch-color-item .bc-name { margin-bottom:8px; font-size:13px; }
.branch-color-item .bc-swatches { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.bc-swatch { width:20px; height:20px; border-radius:5px; border:2px solid transparent; padding:0; cursor:pointer; }
.bc-swatch:hover { transform:scale(1.12); }
.bc-swatch.is-active { border-color:#1f2933; box-shadow:0 0 0 2px #fff inset; }
.bc-custom { width:28px; height:22px; padding:0; border:1px solid #cdd5e0; border-radius:4px; background:#fff; cursor:pointer; margin-left:3px; }

/* W1 지점 선택 (Phase 2) */
.branch-picker { border:1.5px solid #cfe0fb; border-left:4px solid #0866C6; border-radius:9px;
  background:#f4f8ff; padding:12px 14px; margin:10px 0; }
.branch-picker .bp-title { font-weight:700; color:#1b4f9c; font-size:13.5px; margin-bottom:9px; }
.branch-picker .bp-required { color:#e02d3c; }
.branch-picker .bp-options { display:flex; flex-wrap:wrap; gap:8px; }
.branch-picker .bp-option { display:inline-flex; align-items:center; gap:6px; background:#fff;
  border:1px solid #cfe0fb; border-radius:8px; padding:7px 11px; margin:0; cursor:pointer; font-weight:400; }
.branch-picker .bp-option:hover { border-color:#0866C6; }
.branch-picker .bp-option.is-disabled { opacity:.55; cursor:not-allowed; background:#f7f8fa; }
.branch-picker .bp-reason { font-size:11px; color:#e02d3c; }
.branch-picker .bp-hint { margin-top:9px; font-size:11.5px; color:#33486a; }
/* 선택 대상 배지 (쓰기 폼 상단 고정) */
.write-target-badge { display:inline-flex; align-items:center; gap:6px; background:#fdf0e3;
  border:1px solid #f3c99a; color:#8a4b0f; border-radius:7px; padding:5px 11px; font-size:12.5px; font-weight:700; }
/* 교차 지점 경고 띠 */
.cross-branch-warn { background:#fdf6e3; border:1px solid #f0d9a0; color:#8a6a1f; border-radius:8px;
  padding:10px 14px; font-size:12.5px; margin-bottom:12px; }
.branch-picker.is-error { border-color:#e02d3c; }
.branch-picker .bp-error { margin-top:8px; font-size:12px; color:#e02d3c; font-weight:700; }
tr.is-branch-locked { opacity:.5; }
.scope-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:2000;
  background:#1f2933; color:#fff; border-radius:8px; padding:11px 18px; font-size:13px;
  box-shadow:0 4px 14px rgba(0,0,0,.22); transition:opacity .5s; }
.scope-toast.is-out { opacity:0; }

/* 변경 이력 지점 배지 (Phase 3 · G1-5) */
.audit-branch-badge { margin-top:3px; font-size:11px; color:#3e4c59; }
.audit-branch-acting { display:inline-block; background:#fdf0e3; color:#8a4b0f; border-radius:4px; padding:0 5px; font-size:10.5px; font-weight:700; }