.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;
}
.collapsed-menu .br-sideleft .sidebar-copyright {
    text-align: left;
    padding-left: 8px;
}
/* --- 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;
}
.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;
}
/* 아이콘 전용 작은 버튼 (컬럼 설정 기어) */
.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; }