/* ===================== 공통(전역) ===================== */
/* --- 폰트 --- */
.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;}
/* --- gap --- */
.gap1 {gap: 1px;}
.gap2 {gap: 2px;}
.gap3 {gap: 3px;}
.gap4 {gap: 4px;}
.gap5 {gap: 5px;}
.gap6 {gap: 6px;}
.gap7 {gap: 7px;}
.gap8 {gap: 8px;}
.gap9 {gap: 9px;}
.gap10 {gap: 10px;}
.gap11 {gap: 11px;}
.gap12 {gap: 12px;}
.gap13 {gap: 13px;}
.gap14 {gap: 14px;}
.gap15 {gap: 15px;}
.gap16 {gap: 16px;}
.gap17 {gap: 17px;}
.gap18 {gap: 18px;}
.gap19 {gap: 19px;}
.gap20 {gap: 20px;}
.gap21 {gap: 21px;}
.gap22 {gap: 22px;}
.gap23 {gap: 23px;}
.gap24 {gap: 24px;}

/* --- 라인 --- */
.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;}
.pt120 {padding-top: 120px !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;}
.mb40 {margin-bottom: 40px !important;}



/* 로딩 & 메뉴 */
.loading {
    display: none;
    position: absolute;
    top: 35%;
    left: 50%;
    z-index: 9999;
}

.loading.active {
    display: flex !important;
}

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

/* 전역 안내 */
.err-alert {
    text-align: center;
    font-size: 12px;
}

/* 페이지 타이틀(다른 화면에서도 쓸 수 있으면 유지) */
.br-page-title-bar {
    width: 100%;
    background-color: #D9D9D9;
    color: #333333;
    padding: 12px 20px;
}

/* 버튼 & 배지 테마 */
.btn { border-radius: var(--border-radius-input) !important; height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.form-control { height: 40px !important; }
.br-pill { border-radius: 20px !important; }
.input-group-pill .form-control { border-radius: 8px 0 0 8px !important; }
.input-group-pill .input-group-btn .btn { border-radius: 0 8px 8px 0 !important; }
.form-control { border-radius: var(--border-radius-input) !important; background-color: #fff !important; border-color: var(--line-black-15) !important; }
.select_wrap select { border-radius: var(--border-radius-input) !important; background-color: #fff !important; border-color: var(--line-black-15) !important; }

.btn-primary {
    background-color: var(--bg-blue);
    border-color: var(--bg-blue);
}
.btn-outline-secondary {
    background-color: #fff;
    border-color: var(--line-black-15);
    color: #333;
}

.badge-primary {
    color: #0023DD;
    background-color: #EBEEFF;
    border: 1px solid #AAB6F4;
}

.badge-danger {
    color: #A82525;
    background-color: #FFE8E8;
    border: 1px solid #E2B6B6;
}

/* 텍스트/유틸 */
.margin15 {
    margin-right: 15px;
}

.custom-h4 {
    font-weight: bold;
    color: #737373;
    margin-bottom: 2rem !important;
}

.custom-div-color {
    color: #3B3F4A;
}

.form-control[disabled],
.form-control[readonly] {
    background-color: #D9D9D9;
    border-color: #A8A8A8;
}

/* ====== 컴포넌트 베이스(리네이밍 대비) ====== */
/* 배지 베이스 – 페이지 전용 색상은 user.css에서 */
.c-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem .5rem;
    border-radius: 9999px;
    font-size: 12px;
    line-height: 1;
}

.c-badge--status {
    background: #eef2ff;
    color: #1f2a44;
    border: 1px solid transparent;
}


.dp_inlineBlock {
    display: inline-block;
}





/* --- 로그인 --- */
:root {
    --border-radius-primary: 12px;
    --border-radius-input: 8px;
    --border-color: #dee2e6;
    --table-border-color: #dee2e6;
    --table-thead-bg: #f8fafc;
    --primary-color: #00C5B2;
    --line-black-15: rgba(0, 0, 0, 0.15);
    --card-title: #78909c;
    --bg-blue: #4895ef;
    --bg-red: #eb7f88;
    --txt-coloor: #333333;
}
.txt_color {
    color: var(--txt-coloor);
}
.txt_color_primary {
    color: var(--primary-color);
}
.bg_red {
    background-color: var(--bg-red);
}
.border_radius_primary {
    border-radius: var(--border-radius-primary);
    overflow: hidden;
}
.login_bg_img {
    background: url(../img/BG2.png) center/cover no-repeat;
}
.shadow-base {
    box-shadow: 16px 10px 16px 0px rgba(90, 149, 139, 0.1);
}
.border_radius_primary {
    border-radius: var(--border-radius-primary) !important;
}
.login-main {
    font-size: 22px;
    font-weight: bold;
    color: var(--primary-color);
    margin-top: 12px;
    margin-bottom: 32px;
}
.gnb_profile_circle {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #00c5b2;
    background: url(../img/account-circle-fill-2.svg) center no-repeat;
}
.flx {
    display: flex;
}
.flx_vCenter {
    align-items: center;
}
.flx_vStart {
    align-items: flex-start;
}
.flx_vEnd {
    align-items: flex-end;
}
.flx_hCenter {
    justify-content: center;
}
.flx_hStart {
    justify-content: flex-start;
}
.flx_hEnd {
    justify-self: flex-end;
}
.flx_hBetween {
    justify-content: space-between;
}
.GnbHeadTitle {
    font-size: 20px;
    font-weight: bold;
    /* color: #333333; */
    padding-left: 32px;
}
.sideMenuLogoTile {
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    display: inline-block;
    padding-left: 12px;
    transform: translateY(2px);
}
.sidebar_copyright {
    height: 84px;
    line-height: 1.4;
    padding-left: 16px;
    color: rgba(0, 0, 0, 0.3)
}

/* ===== Sidebar color override ===== */
.br-sideleft { background-color: #fff !important; }
.br-menu-link { color: #333 !important; }
.br-menu-link:hover, .br-menu-link:focus { color: #333 !important; background-color: rgba(0,0,0,0.05) !important; }
.br-menu-link.show-sub { background-color: rgba(0,0,0,0.05) !important; color: #333 !important; }
.br-menu-link.active { background-color: rgba(0,0,0,0.08) !important; color: #333 !important; }
.br-menu-link.show-sub.active { background-color: rgba(0,0,0,0.05) !important; color: var(--primary-color) !important; }
.br-menu-sub { background-color: #fff !important; }
.br-menu-sub .nav-link { color: #333 !important; }
.br-menu-sub .nav-link::before { background-color: rgba(0,0,0,0.35) !important; }
.br-menu-sub .nav-link:hover, .br-menu-sub .nav-link:focus { color: #333 !important; }
.br-menu-sub .nav-link:hover::before, .br-menu-sub .nav-link:focus::before { background-color: var(--primary-color) !important; }
.br-menu-sub .nav-link.active { color: var(--primary-color) !important; }
.br-menu-sub .nav-link.active::before { background-color: var(--primary-color) !important; }
.sidebar-label { color: #333 !important; opacity: 0.4 !important; }

/* ===== Sidebar SVG icons ===== */
.br-menu-item i:first-child:not(.menu-item-arrow) {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px;
    flex-shrink: 0 !important;
    opacity: 0.6;
}
.br-menu-item .sideMenuList1 { background: url(../img/ic_dashboard1.svg) left center / 20px no-repeat; }
.br-menu-item .sideMenuList2 { background: url(../img/ic_user_group.svg) left center / 20px no-repeat; }
.br-menu-item .sideMenuList3 { background: url(../img/ic_wallet.svg) left center / 20px no-repeat; }
/* ================================== */
/* ===== Select box custom arrow ===== */
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand { display: none; }
.select_wrap { position: relative; display: inline-block; }
.select_wrap select { padding-right: 30px; }
.select_wrap::before {
    pointer-events: none;
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url(../img/ic_down.svg) center / 20px no-repeat;
}
/* ===================================== */

.table-scroll-wrapper {
    border-radius: 10px ;
    border: 1px solid var(--table-border) ;
    overflow: auto ;
}
.custom-br-pagebody,
.br-section-wrapper,
.page_title {
    padding: 32px;
    padding-bottom: 8px;
}

.page_title h4,
.page_title p {
    display: inline-block;
    margin-bottom: 0 !important;
    color: #333333;
}
.page_title p {
    margin-left: 8px;
}
thead tr th {
    background-color: var(--table-thead-bg) !important;
    border-bottom: 1px solid var(--table-border-color) !important;
    font-size: 14px !important;
    color: #596980 !important;
}
.th_bb0 thead tr th {
    border-bottom: 0 !important;
}
.page-item.active .page-link { background-color: var(--bg-blue) !important; border-color: var(--bg-blue) !important; }

.ic_reset {
    background-image: url(../img/ic_reset.svg);
}
.btn_ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: url(../img/ic_reset.svg) center / 20px no-repeat;
    margin-left: -4px;
}
.btn {
    gap: 4px;
}

/* ===== Tab pill style ===== */
.nav-pills .nav-link.tabMenu { 
    border-radius: 0 12px 0 0; 
    background-color: #f8fafc; 
    color: #495057; 
    font-size: 14px; 
    font-weight: 500; 
    height: 40px;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-pills .nav-link.tabMenu.active { 
    background-color: var(--bg-blue); 
    color: #fff; 
}
/* ========================== */

.ul_blue {
    border-bottom: solid 1px #bcc7d3;
}
.configForm_title {
    font-size: 20px;
    color: #000;
    margin-bottom: 40px;
}
#configForm label {
    font-size: 16px;
    color: #000;
    margin-bottom: 16px;
}
#configForm label span {
    font-size: 14px;
    color: #adb5bd;
    margin-left: 8px;
}
.form-group {
    margin-bottom: 16px;
}

/* 라벨+인풋 한 줄 레이아웃 */
.form-row-inline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-row-inline > label {
    width: 100px;
    min-width: 100px;
    margin-bottom: 0;
    font-weight: 600;
}

.form-row-inline > .form-control,
.form-row-inline > .d-flex,
.form-row-inline > .select_wrap {
    flex: 1;
}

.form-row-inline > .select_wrap select {
    width: 100%;
}
.alert_st1 {
    font-size: 15px !important;
    line-height: 1.5;
    color: #00C5B2;
    background-color: rgba(0, 197, 178, 0.09);
    border-radius: 4px;
}
.alert_st1 strong {
    background-color:rgba(0, 197, 178, 0.3);
    display: inline-block;
    border-radius: 18px;
    padding: 6px 16px;
    color: #009183;
    margin-bottom: 12px;
}
:root {
    --circle-blue: #8bc1ff;
    --circle-green: rgb(111, 238, 227);
    --circle-purple: #c5aeff;
    --circle-red: #ffb6b7;

    --circle-i-blue: #4896ef;
    --circle-i-green: #00c5b2;
    --circle-i-purple: #9878ec;
    --circle-i-red: #ec7879;
}
.ic_wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ic_wrap.circleBg_blue {
    background-color: var(--circle-blue);
}
.ic_wrap.circleBg_green {
    background-color: var(--circle-green);
}
.ic_wrap.circleBg_purple {
    background-color: var(--circle-purple);
}
.ic_wrap.circleBg_red {
    background-color: var(--circle-red);
}

.ic_wrap.circleBg_blue i {
    color: var(--circle-i-blue);
}
.ic_wrap.circleBg_green i {
    color: var(--circle-i-green);
}
.ic_wrap.circleBg_purple i {
    color: var(--circle-i-purple);
}
.ic_wrap.circleBg_red i {
    color: var(--circle-i-red);
}
.circle_i_blue {
    background-color: var(--circle-i-blue);
}
.circle_i_green {
    background-color: var(--circle-i-green);
}
.circle_i_purple {
    background-color: var(--circle-i-purple);
}
.circle_i_red {
    background-color: var(--circle-i-red);
}

.txt_white {
    color: #fff;
}
.w147 {
    width: 147px !important;
}
.w80 {
    width: 80px !important;
}
.w104 {
    width: 104px !important;
}
.w500 {
    width: 500px !important;
}