body { margin: 0; overflow-x: hidden; }
table, th, thead, tfoot { outline: 0; }
@font-face{ font-family:"Pretendard"; font-weight:700; font-display:swap; src:local("Pretendard Bold"),url("../fonts/pretendard/Pretendard-Bold.woff2") format("woff2"),url("../fonts/pretendard/Pretendard-Bold.woff") format("woff")}  @font-face{ font-family:"Pretendard"; font-weight:600; font-display:swap; src:local("Pretendard SemiBold"),url("../fonts/pretendard/Pretendard-SemiBold.woff2") format("woff2"),url("../fonts/pretendard/Pretendard-SemiBold.woff") format("woff")}  @font-face{ font-family:"Pretendard"; font-weight:500; font-display:swap; src:local("Pretendard Medium"),url("../fonts/pretendard/Pretendard-Medium.woff2") format("woff2"),url("../fonts/pretendard/Pretendard-Medium.woff") format("woff")}  @font-face{ font-family:"Pretendard"; font-weight:400; font-display:swap; src:local("Pretendard Regular"),url("../fonts/pretendard/Pretendard-Regular.woff2") format("woff2"),url("../fonts/pretendard/Pretendard-Regular.woff") format("woff")}

/*btn*/
.btn-white { background: #FFFFFF !important; }
.btn-white.fx { margin-left: 10px; white-space: nowrap; }
.outline-gray-btn { padding: 4px !important; background: #FFFFFF !important; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666 !important; border: 1px solid #EEEEEE !important; }
.outline-gray-red { padding: 4px !important; background: #FFFFFF !important; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #FF003B !important; border: 1px solid #FF003B !important; }
.outline-gray-btn.selected { background: #FFFFFF !important; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #1565C0 !important; border: 1px solid rgba(25, 118, 210, 0.5) !important; }

/*login*/
.form-cont { width: 85%; }
.body-content { border-top: 1px solid #EEEEEE; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #F8F8F8 0% 0% no-repeat padding-box; height: 90vh; box-sizing: border-box; }
.login-content { margin-top: -20px; width: 100%; height: 100%; max-height: 350px; max-width: 400px; padding: 20px; background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.input-group { display: flex; flex-direction: column; width: 100%; margin-bottom: 15px; }
.sys { font: normal normal bold 24px/24px Pretendard; letter-spacing: 0px; color: #000000; }
.lg { font: normal normal 400 21px/24px Pretendard; letter-spacing: 0px; color: #000000; }
.login-note { margin-top: 10px; font-size: 12px; color: #777; }
.login-note { margin-top: 10px; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #888888; }
.site-footer { background: #FFFFFF 0% 0% no-repeat padding-box; font: normal normal normal 14px/16px Pretendard; letter-spacing: 0px; color: #888888; padding: 25px 0; text-align: center; position: fixed; bottom: 0; width: 100%; }
.inp-name, .inp-pass { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #333333; }
.inp { box-sizing: border-box; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #e8e8e8; padding: 6px 9px; width: 100%; border-radius: 4px; font-size: 14px; }
.inp.fx { flex: 1; box-sizing: border-box; }
input::placeholder { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
input:disabled { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #e8e8e8; }
textarea::placeholder { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
textarea:disabled { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #e8e8e8; }

/*layout*/
.container { display: flex; flex-direction: column; height: 100vh; }
.content-wrapper { display: flex; flex: 1; }
.content-inner { overflow-x: hidden; box-sizing: border-box; flex-grow: 1; background-color: #F8F8F8; padding: 20px; height: auto; border-top: 1px solid #EEEEEE; }

/*header*/
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 12px 0; background: #FFFFFF 0% 0% no-repeat padding-box; }
.left-section { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.logo { width: 240px; min-width: 240px; box-sizing: border-box; flex-shrink: 0; }
.logo a { font: normal normal bold 16px/24px Pretendard; letter-spacing: 0px; color: #1565C0; text-decoration: none; margin-left: 25px; margin-right: 0; cursor: pointer; white-space: nowrap; }
.gnb { min-width: 0; overflow-x: auto; }
.gnb::-webkit-scrollbar { height: 4px; }
.gnb ul { display: flex; flex-wrap: nowrap; list-style: none; padding: 0; margin: 0; }
.gnb ul li { margin: 0 24px; cursor: pointer; white-space: nowrap; }
.gnb .gnb-li { text-decoration: none; font: normal normal bold 16px/26px Pretendard; letter-spacing: 0px; color: #333333; white-space: nowrap; }
.gnb .gnb-li.active { font: normal normal bold 16px/26px Pretendard; letter-spacing: 0px; color: #1565C0; }
.user-info { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; }
.user-info .user-name { margin-right: 4px; font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #333333; }
.user-info .user-wel { margin-right: 10px; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #333333; }

/* LNB */
.site-lnb { position: relative; width: 240px; min-width: 240px; background: #FFFFFF 0% 0% no-repeat padding-box; padding: 20px 25px 25px; box-sizing: border-box; }
.site-lnb ul { list-style: none; padding: 0; margin: 0; }
.lnb-tab { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; cursor: pointer; }
.site-lnb .lnb-tab .arrow_u1 { cursor: pointer; background-image: url(../images/icon/ic_up.svg); }
.site-lnb .lnb-tab.selected .arrow_d { background-image: url(../images/icon/ic_down.svg); cursor: pointer; }
.site-lnb .lnb-tab a{ text-decoration: none; font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #333333; padding: 0 12px; }
.site-lnb .lnb-group { margin-top: 4px; }
.site-lnb .lnb-group .sub-menu { padding-left: 16px; }
.site-lnb .lnb-nm{ padding: 6px 0; cursor: pointer; }
.site-lnb .lnb-nm a{ text-decoration: none; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #333333; padding: 0 12px; }
.site-lnb .lnb-nm.active{ background: #F2F6FC 0% 0% no-repeat padding-box; border-radius: 4px; }
.site-lnb .lnb-nm.active a{ text-decoration: none; font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #1565C0; }
.version { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; position: absolute; bottom: 15px; width: 100%; }

/*icon*/
.sub-menu { display: none; }
.sub-menu.open { display: block; }
.lnb-tab i.rotated { transform: rotate(180deg); }

.icon.arrow { transition: transform 0.3s ease; width: 23px; height: 23px; background-size: cover; }
.icon { display: inline-block; background-repeat: no-repeat; background-position: center; }
.close-icon { margin-bottom: -6px; margin-left: 10px; cursor: pointer; }
.pre-cont { position: relative; }
.pre { margin-bottom: -6px; margin-left: 10px; }
.icon-pre { background: #FFFFFF 0% 0% no-repeat padding-box; width: 45px; height: 45px; border: 1px solid #DDDDDD; border-radius: 4px; position: absolute; bottom: 0; right: 0; transform: translate(70%, 60%); }
.pre-img { width: 100%; height: 100%;}

.sort_up { background-image: url(../images/icon/ic_align_up.svg); width: 17px; height: 17px; display: inline-block; }
.sort_down { background-image: url(../images/icon/ic_align_down.svg); width: 17px; height: 17px; display: inline-block; }
.tbl_hd_sort { margin-top: -5px; }

/*breadcrumb*/
i.icon-arrow-right { background-image: url(../images/icon/ic_right.svg); margin-top: -2px; }
.breadcrumb { padding: 0 20px; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; border-bottom: 1px solid #EEEEEE; display: flex; justify-content: space-between; }
h1 { font: normal normal bold 20px/30px Pretendard; letter-spacing: 0px; color: #000000; }
.brdcrb { display: flex; align-items: center; }

/*content search-box*/
.brdcrb-act { font: normal normal 400 14px/21px Pretendard; letter-spacing: 0px; color: #1565C0; }
#content-body { width: 100%; height: fit-content; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #EEEEEE; border-radius: 0px 0px 4px 4px; }
#content-body .contwrap { padding: 20px; }
.td-flex { display: flex; align-items: center; gap: 10px; }
.search-btn-group { display: flex; justify-content: flex-end; padding: 10px 20px 20px 0; }
.center-btn-group { text-align: center; padding: 20px 0; }
.center-btn-group1 { text-align: center; padding-top: 10px; }

/*selectBox*/
.select_wrap3 { position: relative; display: inline-block; }
.select_box { position: relative; cursor: pointer; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #EEEEEE; border-radius: 4px; }
.select_box.active {border: 1px solid #1565C0;}
.select_box.active .select_name { font: normal normal 400 14px/21px Pretendard; letter-spacing: 0px; color: #1565C0; }
.select_box.active .list_wrap { position: absolute; background-color: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 4px; top: calc(100% + 4px); left: 0; right: 0; z-index: 99; display: block; }
.select_btn { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 0 0; }
.select_name { flex: 1; font: normal normal 400 14px / 21px Pretendard; letter-spacing: 0px; color: #333333;  padding: 6px; }
.icon.arrow.down {
    background-image: url('../images/icon/ic_bdown2.svg');
    transition: transform 0.3s ease;
}
.select_box.active .icon.arrow.down {
    transform: rotate(180deg);
}
.list_wrap { display: none; }
.opt_list { max-height: 200px; overflow-y: auto; }
.opt_item { padding: 10px; cursor: pointer; color: #333333; font: normal normal 400 14px / 21px Pretendard; }
.opt_item:hover { background-color: #F8F8F8; color: #000000; }
.opt_item.selected { background-color: #F8F8F8; color: #000000; }

/*radio*/
.select-radio { display: flex; align-items: flex-start; }
.select-radio label { margin-left: 5px; margin-right: 10px; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }
.select-radio1 label { margin-left: 5px; margin-right: 10px; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }

/*datepicker*/
.frm-input { box-sizing: border-box; background: #FFFFFF url(../images/icon/ic_date.svg) no-repeat; background-position: right 8px center; border: 1px solid #EEEEEE; border-radius: 4px; padding: 6px 26px 6px 8px; width: 128px; font-size: 14px; }
.btn-group { gap: 5px; display: flex; }

/*content*/
.content-wrap { background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #EEEEEE; border-radius: 20px; }
.total { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #F8F8F8; border-radius: 4px; width: fit-content; height: 25px; display: flex; justify-content: center; align-items: center; padding: 0 12px; }
.total-text { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.total-cnt { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }
.contwrap .content-wrap { padding: 20px; }
.list-btn-group { display: flex; justify-content: space-between; margin-top: 10px; }
.pg-btn-group { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.btn-left, .btn-right { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tlp { display: flex; align-items: center; gap: 5px; }
.inp-box label.check-btn { font: normal normal normal 14px/21px Pretendard; display: flex; letter-spacing: 0px; color: #333333; }
.check-red { color: #FF003B !important; }
.text-detail { text-decoration: underline; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #1565C0 !important; cursor: pointer; }
.other-fx { display: flex; justify-content: space-between; gap: 10px; }
.inp-box1 { width: 50%; }
.subl { font: normal normal bold 16px/24px Pretendard; letter-spacing: 0px; color: #000000; }

/*checkbox*/
input.checklst { display: inline-block; width: 18px; height: 18px; appearance: none; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; border-radius: 2px; cursor: pointer; margin: 0; margin-bottom: -3px; }
input.checklst + label{ cursor:pointer; margin-left: 8px; margin-top: -2px; }
.checklst.chktd { margin-bottom: -4px; }
input.checklst:checked { background-image: url('../images/icon/ic_check_b.svg'); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 2px; }
input.check{ display:none; }
input.check + label{ cursor:pointer; display: inline-block; }
input.check + label > span{ font: normal normal normal 14px/21px Poppins; letter-spacing: 0px; color: #555555; opacity: 1; margin-left: 10px; }
input.check + label:before{ background: #ffffff; margin-right: 5px; content:""; display:inline-block; width:18px; height:18px; border:1px solid #E5E5E5; border-radius: 2px; vertical-align:middle; }
input.check:checked + label:before{ content:""; background-image: url('../images/icon/ic_check.svg'); background-repeat: no-repeat; background-position: 50%; }

/*tab*/

@media (max-width: 1279px) {
    .logo {
        min-width: 240px;
    }
    .gnb {
        min-width: 700px;
    }
    .user-info {
        min-width: 300px;
    }
}

/* 1280px 해상도 이상 1440px 미만일 때 */
@media (min-width: 1280px) and (max-width: 1439px) {
    #tab-menu {
        max-width: 1005px;
    }
}

/* 1440px 해상도 이상일 때 */
@media (min-width: 1440px) {
    #tab-menu {
        max-width: 1115px;
    }
}

/* 1600px 해상도 이상일 때 */
@media (min-width: 1600px) {
    #tab-menu {
        max-width: 1275px;
    }
}

/* 1920px 해상도 이상일 때 */
@media (min-width: 1920px) {
    #tab-menu {
        max-width: 1595px;
    }
}

.tab-menu { display: flex; gap: 3px; position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-left: 35px; margin-right: 35px; }
.tab-menu::-webkit-scrollbar { display: none; }
.scroll-left-btn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #FFFFFF url(../images/icon/ic_left.svg) no-repeat; border: 1px solid #EEEEEE; border-radius: 4px; padding: 12px; cursor: pointer; }
.scroll-right-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: #FFFFFF url(../images/icon/ic_right.svg) no-repeat; border: 1px solid #EEEEEE; border-radius: 4px; padding: 12px; cursor: pointer; }
.tab-text { margin-bottom: -2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 140px; text-align: left; }
.tab-button { cursor: pointer; background: #EEEEEE 0% 0% no-repeat padding-box; display: inline-flex; justify-content: space-between; align-items: center; padding: 7px 8px 6px 14px; width: 185px; border-bottom: none; border: 1px solid #EEEEEE; border-radius: 4px 4px 0px 0px; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.tab-button.active { border: 1px solid #EEEEEE; border-bottom: none; background: #FFFFFF 0% 0% no-repeat padding-box; color: #1565C0; font: normal normal 600 14px/21px Pretendard; }
.tab-button .icon-arrow-close { cursor: pointer; background-image: url(../images/icon/ic_close2.svg); }
.tab-button.active .icon-arrow-close { cursor: pointer; background-image: url(../images/icon/ic_close.svg); }

/*가로 table*/
.content-list { border: 1px solid #DDDDDD; overflow-x: auto; width: 100%; }
.content-list table { table-layout: auto; width: 100%; border-collapse: collapse; border-spacing: 0; }
.content-list thead th { border-top:0 !important; text-align:center; background: #F8F8F8 0% 0% no-repeat padding-box; }
.content-list thead tr.rows th { border-top: 1px solid #DDDDDD !important; }
.content-list th { font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #000000; padding: 7px 10px; line-height: 1em; }
.content-list td { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #333333; text-align: center; padding: 5px 7px; line-height: 1.4; border-top: 1px solid #e4e5e7; word-break: break-all;}
.content-list th,.content-list td { white-space: nowrap; border-left: 1px solid #e4e5e7; vertical-align: middle; }
.content-list tr:not(.rows) th:first-child,
.content-list tr:not(.rows) td:first-child { border-left: 0 !important; }
.tb-list td { padding: 3px !important; }
.level-dis { display: flex; gap: 5px; }

/*두줄 table*/
.th_bg { background: #EEEEEE 0% 0% no-repeat padding-box !important; }
.content-list2 table { table-layout: auto; width: 100%; border-collapse: collapse; border-spacing: 0; }
.content-list2 { overflow-x: auto; border: 1px solid #DDDDDD; }
.content-list2 thead th { border-top:0 !important; text-align:center; background: #F8F8F8 0% 0% no-repeat padding-box; }
.content-list2 thead tr.rows th { border-top: 1px solid #DDDDDD !important; }
.content-list2 th { font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #000000; padding: 7px 10px; line-height: 1em; }
.content-list2 td { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #333333; text-align: center; padding: 5px 7px; line-height: 1.4; border-top: 1px solid #e4e5e7; border-right: 1px solid #e4e5e7; word-break: break-all;}
.tb-list td { padding: 3px !important; }
.content-list2 th,.content-list2 td { white-space: nowrap; border-left: 1px solid #e4e5e7; vertical-align: middle; }
.content-list2 tr:not(.rows) th:first-child,
.content-list2 tr:not(.rows) td:first-child { border-left: 0 !important; }

/*폼 테이블*/
.tbl { font: normal normal 400 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }
.content-list3 {border: 1px solid #DDDDDD;}
.content-list3 table {width:100%; border-collapse: collapse; border-spacing: 0;}
.content-list3 th, .content-list3 td { font: normal normal normal 14px/21px Pretendard; color: #333333; padding:5px 14px;height:23px;border-bottom:1px solid #e4e5e7;text-align:left;vertical-align:middle;}
.content-list3 th { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #000000; background: #EEEEEE 0% 0% no-repeat padding-box; border-bottom: 1px solid #DDDDDD;}
.content-list3 td em { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; margin-left: 10px; color: #1565C0; }
.content-list td em { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; margin-left: 10px; color: #1565C0; }
.content-list3 td label { margin-right: 7px; }
.content-list3 tr.thover {background:#e4e5e7 !important;}
.frm_address { margin-top:5px; }
.content-list3 tr:last-child th,
.content-list3 tr:last-child td { border-bottom: none; }
.frm_info { font: normal normal normal 14px/21px Pretendard; margin-top: -3px; letter-spacing: 0px; color: #666666 !important; }
.frm_info2 { font: normal normal normal 14px/21px Pretendard; margin-top: -3px; letter-spacing: 0px; color: #1565C0 !important; }
.helptxt { font: normal normal normal 14px/21px Pretendard; margin-top: 10px; letter-spacing: 0px; color: #1565C0; }

/*search-box*/
.search-box { background: #F2F6FC 0% 0% no-repeat padding-box; border: 1px solid #D6E2F4; border-radius: 20px; font-size: 14px; }
.tbl_frm02 { padding: 10px 10px 0 20px; }
.tbl_frm02 table {width:100%; border-collapse: collapse; border-spacing: 0;}
.tbl_frm02 th,.tbl_frm02 td {padding:6px 11px;height:22px;text-align:left;vertical-align:middle;font-size:14px;}
.tbl_frm02 th {font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #000000;}
.search-box .row-align { display: flex; align-items: center; }
.search-box .row-align select { margin-right: 10px; }
/* 기간 프리셋 버튼 컴팩트 (한 줄 유지) */
.search-box .btn-group { display: inline-flex; flex-wrap: nowrap; gap: 4px; }
.outline-gray-btn.MuiButton-root { min-width: 0 !important; padding: 3px 8px !important; font-size: 13px !important; line-height: 1.4 !important; }
/* 콘텐츠 폰트 통일(상단 메뉴 14px 기준) */
.tbl_frm02 select, .tbl_frm02 input, .tbl_frm02 textarea { font-size: 14px; }
.select_wrap3, .select_wrap3 * { font-size: 14px; }
/* input/select 높이 컴팩트(버튼 ~30px 기준) */
.tbl_frm02 select.inp, .content-wrap select.inp { height: 30px; padding-top: 3px; padding-bottom: 3px; }
.contwrap [class*="-control"] { min-height: 30px !important; }
.contwrap [class*="-control"] [class*="ValueContainer"] { padding-top: 0 !important; padding-bottom: 0 !important; }
.contwrap [class*="-control"] [class*="indicatorContainer"] { padding-top: 3px !important; padding-bottom: 3px !important; }
.contwrap [class*="-control"] [class*="indicatorSeparator"] { display: none; }
.ag-cell, .ag-cell-value, .ag-header-cell, .ag-header-cell-text, .ag-header-group-cell { font-size: 14px; }
/* 헤더 텍스트에 \n을 넣은 컬럼(headerClass: "header-multiline")은 실제 줄바꿈으로 렌더링 */
.header-multiline .ag-header-cell-text { white-space: pre-line; text-align: center; }

/*pagination*/
.pagination { display: flex; justify-content: end; align-items: center; margin-top: 10px; }
.pagination a { display: flex; justify-content: center; align-items: center; width: 27px; height: 27px; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; border-radius: 2px; text-decoration: none; }
.pagination a:hover:not(.active) { background-color: #F2F6FC; }
.pagination .page { display: flex; align-items: center; justify-content: center; width: 85px; height: 27px; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; border-radius: 2px; }
.pagination .page .cur { font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #333333; margin-right: 20px; }
.pagination .page .pg { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #888888; }
.first { background-image: url(../images/icon/ic_first.svg); }
.left { background-image: url(../images/icon/ic_left.svg); }
.right { background-image: url(../images/icon/ic_right.svg); }
.last { background-image: url(../images/icon/ic_last.svg); }

/*category*/
.category-box table { padding: 10px 20px 0 20px; width: 100%; border-spacing: 0 10px !important; }
.category-box th { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #000000; text-align: left; width: 150px; }
.category-box { background: #F8F8F8 0% 0% no-repeat padding-box; border: 1px solid #EEEEEE; border-radius: 4px; width: 100%; height: fit-content; }
.cate-txt { font: normal normal 400 14px/21px Pretendard; letter-spacing: 0px; }
.cate-txt2 { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; }
.cate1-txt { font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #1645AD; }

/*category-level*/
.cate-cont { display: flex; flex-direction: row; justify-content: space-between; }
.column { background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; border-right: none; padding: 0; flex-grow: 1; text-align: center; }
.column1 { background: #FFFFFF 0% 0% no-repeat padding-box; padding: 0; flex-grow: 1; flex-basis: 0; text-align: center; }
.column:last-child { border-right: 1px solid #DDDDDD; }
.column h3 { margin: 0; padding: 8px 0; }
.category-container { border-top: 1px solid #DDDDDD; padding: 2px; }
.category-container1 { padding: 2px; }
.category-container .list { height: 300px; overflow-y: scroll; text-align: left; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #EEEEEE; border-radius: 4px; padding: 5px 10px; }
.category-container1 .list { height: 200px; overflow-y: scroll; text-align: left; background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 4px; padding: 5px 10px; box-sizing: border-box; flex-grow: 1; }
.list-item { margin: 1px 0; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; cursor: pointer; color: #333333; }
.list-item0 { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.cate1 .list .list-item.selected { color: #1645AD; }
.cate2 .list .list-item.selected { color: #2FA225; }
.cate3 .list .list-item.selected { color: #EB4B95; }
.cate4 .list .list-item.selected { color: #FF7600; }
.cate5 .list .list-item.selected { color: #A15CD3; }
.buttons { margin-top: 10px; margin-bottom: 10px; }

/*도움말*/
.help-container { background: #F8F8F8 0% 0% no-repeat padding-box; border-radius: 4px; padding: 20px 20px 10px 20px; margin-top: 20px; }
.help-title { font: normal normal bold 16px/24px Pretendard; letter-spacing: 0px; color: #666666; margin-bottom: 10px; }
.help-container ol { padding-left: 20px; margin-top: 0; }
.help-container ol > li { margin-bottom: 10px; font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.help-container ul { list-style-type: none; padding-left: 10px; }
.help-container ul > li { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.help-container ul > li::before { content: "- "; }

/*file*/
.filenm { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.filenm.selected { text-decoration: underline; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #1565C0; }
.file-icon { display: flex; align-items: center; }

/*popup*/
.popup-layer{ align-items: center; display: flex; justify-content: center; position:fixed;z-index:-1;top:0;left:0;width:100%;height:80%;opacity:0;-webkit-transition:all 0.2s;-o-transition:all 0.2s; transition:all 0.2s; padding:60px 0 20px 0}
.popup-layer.on{z-index:999;opacity:1}
.popup-wrap{position:absolute;left:50%;z-index:500;max-width:600px;width:calc(100% - 40px);margin:0 auto;background-color:#fff;border:1px solid #e4e7f0;border-radius:4px;-webkit-transform:translate(-50%, 0);-ms-transform:translate(-50%, 0);transform:translate(-50%, 0); }
.popup-layer .bg-dimmer{background: #000000 0% 0% no-repeat padding-box; opacity: 0.3; height:100%;position:fixed;z-index:400;width:100%;top:0;left:0}
.popup-header { position: relative; text-align: center; padding: 5px 20px; border-bottom: 1px solid #e4e7f0; }
.popup-header .popup-title { font: normal normal 600 20px/30px Pretendard; font-size: 18px; letter-spacing: 0px; color: #000000; margin-top: 8px; margin-bottom: 8px; }
.popup-info-header1 { color: #555555; letter-spacing: 0px; opacity: 1; font: normal normal normal 14px/21px Poppins; position:relative;text-align:left;padding:20px;border-bottom:1px solid #D3D3D3; }
.popup-header .btn-close-popup{margin-left:auto;height:24px;line-height:1;padding:0}
.popup-body{padding:28px;text-align:left; height: 500px; overflow-y: auto; max-height: fit-content;}
.popup-body.is-scroll{height:496px;overflow-y:auto}
.popup-body .popup-title{margin-bottom:20px}
.popup-body .form-item.item-keyword{max-width:240px}
.popup-body .list-body{margin-top:16px}
.popup-body .list-footer .btn-write{min-width:80px}
.popup-close { position: absolute; right: 10px; top: 7px; padding: 10px; cursor: pointer; }
.popup-info-layer{position:fixed;z-index:-1;top:0;left: 0;width:100%;height:100%;opacity:0;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;padding:60px; }
.popup-info-layer.on{z-index:999;opacity:1}
.popup-info-wrap{max-width:400px; width:calc(100% - 40px); background-color:#fff; border:1px solid #D3D3D3; border-radius:4px; float: right; }
.sr-only{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px}
.popup-cont .label label { font: normal normal bold 16px/24px Pretendard; letter-spacing: 0px; color: #000000; }
.popup-cont .label-sub label { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #333333; }
.tlp label { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }
.folder-icon { display: flex; }
.popup-cont ul li { display: flex; justify-content: space-between; }
.inp-box-fx { display: flex; }
.search-input { position: relative; display: flex; flex: 1; }
.search-input input { flex: 1; padding-right: 30px; }
.icon-zip { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: white; cursor: pointer; }
/*상품 이미지 팝업*/
.goods-pre { height: 90px; display: flex; align-items: center; }
.goods-pre2 { height: 90px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-radius: 4px; }
.img-pre2 { display: flex; align-items: center; }
.img-pre img { width: 130px; height: 100%; }
.img-pre2 img { width: 130px; height: 100%; }
.goods1 { font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #000000; margin-left: 15px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.goods1 span { font: normal normal normal 14px/21px Pretendard; margin-left: 10px; }
.goods2 { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; margin-left: 15px; }
.left-content { display: flex; align-items: center; }
/*자료 없는 목록*/
.empty-table { padding: 20px 0 !important; border-right: none !important; }
.empty-txt { color:#666666; }

/*상품 등록 탭*/
.goods-tab-container{ background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #EEEEEE; border-radius: 4px; overflow: hidden; }
.goods-tabs { display: flex; border-bottom: 1px solid #EEEEEE; }
.goods-tab { padding: 10px 20px; cursor: pointer; font: normal normal normal 14px/21px Pretendard; background: #F8F8F8 0% 0% no-repeat padding-box; letter-spacing: 0px; color: #666666; border-right: 1px solid #EEEEEE; flex-grow: 1; text-align: center; }
.goods-tab a{ text-decoration: none; cursor: pointer; font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #666666; }
.goods-tab:last-child { border-right: none; }
.goods-tab.active{ background: #FFFFFF 0% 0% no-repeat padding-box !important; }
.goods-tab.active a{ font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #000000 !important; background: #FFFFFF 0% 0% no-repeat padding-box !important; }
.goods-tab-container .tab-content { margin: 20px; }
.goods-option-txt { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }
.goods-option-txt2 { font: normal normal 500 14px/21px Pretendard; letter-spacing: 0px; color: #000000; }
.option-container { background: #F8F8F8 0% 0% no-repeat padding-box; border-radius: 4px; padding: 10px 20px; margin-top: 10px; }
/*상품 등록 이미지*/
.attach-img-list.d-flex { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
.d-flex { display: flex; }
.attach-img-list.d-flex .attach-img-item { flex: 0 1 calc(15% - 6.75px); }
.attach-img-item.sm { width: 40px; }
.attach-img-item { margin-right: 9px; }
.attach-img-wrap { position: relative; padding-top: 100%; overflow: hidden; background-color: #fff; border: 1px solid #e6e6e6; box-sizing: border-box; }
.attach-img-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translate(50%, 50%); }
.attach-img-area label { display: block; position: absolute; top: 0; left: 0; max-width: 100%; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.attach-img-area label:before { content: ""; display: block; width: 100%; height: 100%; background: url(../images/icon/ic_plus.svg) center center no-repeat; background-size: 18px 18px; }
.attach-img-area input[type=file].attach-img { display: none; }
input[type=file].file-btn { display: none; }
.sel-file { cursor: pointer; display: block; width: 100px; padding: 3px 0; }
.attach-img-area img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.attach-img-wrap.is-attached .btn-delete-attach { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; }
.attach-img-wrap.is-attached .btn-delete-attach img{ margin-left: -10px; margin-top: -5px; }
.goods-fx { display: flex; justify-content: space-between; gap: 10px; }
.goods-fx .content-list { flex: 1; box-sizing: border-box; }

/*주문내역 수정*/
.goodsp { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #000000; margin-top: 5px; }
.container-goodsfx { display: flex; justify-content: space-between; gap: 20px; }
.box-goods { background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; border-radius: 4px; padding: 10px 20px; width: 45%; }
.box-goods h3 { font: normal normal 600 14px/21px Pretendard; letter-spacing: 0px; color: #000000; text-align: center; margin-bottom: 20px; }
.box-goods ul { list-style: none; padding: 0; }
.box-goods li { display: flex; justify-content: space-between; margin-bottom: 10px; }
.box-txt { font: normal normal 500 14px/21px Pretendard !important; letter-spacing: 0px !important; color: #000000 !important; }
.box-goods.nsb li { justify-content: flex-start !important; }
.box-goods li span { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; color: #333333; }

/*에러메시지*/
.error { font: normal normal normal 14px/21px Pretendard; letter-spacing: 0px; margin-top: 5px; }
.search-box .tbl_frm02 th { min-width: 40px; }
.category-box th { min-width: 130px; }

/*AG-GRID*/
.ag-header-center .ag-header-cell-label {
    justify-content: center !important;
}

/* 모든 셀 세로 가운데 정렬 */
.ag-cell {
    display: flex !important;
    align-items: center;
}

/* 가로 가운데 정렬이 필요한 셀에 추가 적용 */
.ag-cell-center {
    justify-content: center;
}

.section-card { display: flex; gap: 20px; }
.dash-card { flex: 1; min-width: 0; overflow: hidden; padding: 25px; border-radius: 18px; background: #FFFFFF; border: 1px solid #EEEEEE; }
.fx-jcsp-group { display: flex; justify-content: space-between; }
.section-title { font: normal normal 600 21px/25px Pretendard; color: #363636; }
.section-sub { font: normal normal 500 14px/17px Pretendard; color: #767676; }
.separator-line { width: 1px; height: 18px; background-color: #E0E0E0; margin: 0 13px; }
.approval-list { list-style: none; padding: 0; margin: 0; }
.approval-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #F3F3F3; font-size: 14px; }
.approval-item:last-child { border: none; }
.approval-item span { font: normal normal 500 17px/20px Pretendard; color: #363636; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-card { border: 1px solid #EEEEEE; border-radius: 20px; padding: 16px 26px; height: 260px; overflow: hidden; background: #FFFFFF 0% 0% no-repeat padding-box; }
.stat-item { display: flex; align-items: center; padding: 19px 0; }
.stat-item:last-child { border-bottom: none; }
.stat-icon { width: 48px; height: 48px; border-radius: 50%; margin-right: 16px; flex-shrink: 0; }
.stat-icon.new-users { background-color: #fff3cd; }
.stat-icon.total-users { background-color: #e7e3ff; }
.stat-icon.posts { background-color: #d4f4dd; }
.stat-content { flex: 1; }
.stat-title { font: normal normal 500 16px/18px Pretendard; color: #363636; margin: 0 0 4px 0; }
.stat-date { font: normal normal 500 14px/17px Pretendard; color: #888888; margin: 0; }
.stat-number { font: normal normal 600 19px/23px Pretendard; color: #363636; margin-left: auto; }

/* 대시보드 - 통계 타일 그리드 */
.stat-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stat-tile { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 16px; padding: 20px; }
.stat-tile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.stat-tile-label { font: normal normal 500 15px/18px Pretendard; color: #363636; }
.stat-tile-number { font: normal normal 700 26px/30px Pretendard; color: #222222; margin-bottom: 4px; }
.stat-tile-desc { font: normal normal 500 13px/16px Pretendard; color: #999999; }

.stat-icon-sm { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-icon-sm.c-yellow { background-color: #fff3cd; color: #b8860b; }
.stat-icon-sm.c-purple { background-color: #e7e3ff; color: #6a4fd1; }
.stat-icon-sm.c-blue { background-color: #dbe9ff; color: #2563eb; }
.stat-icon-sm.c-navy { background-color: #dfe3fb; color: #3b3f8f; }
.stat-icon-sm.c-green { background-color: #d4f4dd; color: #1f9254; }
.stat-icon-sm.c-red { background-color: #fde2e1; color: #d1453b; }
.stat-icon-sm.c-orange { background-color: #ffe8d1; color: #c2661a; }
.stat-icon-sm.c-teal { background-color: #d7f3f0; color: #178a7c; }

/* 대시보드 - 도넛 차트 + 범례 */
.donut-wrap { position: relative; width: 150px; height: 150px; flex-shrink: 0; }
.donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.donut-center .lbl { font: normal normal 500 12px/15px Pretendard; color: #999999; }
.donut-center .val { font: normal normal 700 20px/24px Pretendard; color: #222222; margin-top: 2px; }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; }
.donut-legend li { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #F3F3F3; }
.donut-legend li:last-child { border-bottom: none; }
.donut-legend .dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; }
.donut-legend .lg-label { flex: 1; font: normal normal 500 14px/17px Pretendard; color: #363636; }
.donut-legend .lg-value { font: normal normal 600 15px/18px Pretendard; color: #222222; margin-right: 14px; }
.donut-legend .lg-percent { font: normal normal 500 13px/16px Pretendard; color: #999999; width: 44px; text-align: right; }
/* 조회건수가 0 이면 도넛이 그려지지 않아 자리만 비므로 같은 크기의 빈 링으로 대체한다 (두께 = 반지름 × (1 - innerRadiusRatio)) */
.donut-empty { width: 150px; height: 150px; border-radius: 50%; border: 21px solid #F3F3F3; box-sizing: border-box; }

/* 대시보드 - TOP5 순위 테이블 */
.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th { text-align: left; font: normal normal 500 13px/16px Pretendard; color: #999999; padding: 0 0 10px 0; border-bottom: 1px solid #EEEEEE; }
.rank-table td { padding: 12px 0; font: normal normal 500 14px/17px Pretendard; color: #363636; border-bottom: 1px solid #F3F3F3; }
.rank-table tr:last-child td { border-bottom: none; }
.rank-table .rank-no { width: 32px; color: #888888; }
.rank-table .rank-count { text-align: right; font-weight: 600; color: #222222; }
.rank-table .rank-empty { text-align: center; color: #999999; padding: 24px 0; }

/* 대시보드 - 전월/당월 비교 진행바 */
.compare-bar-row + .compare-bar-row { margin-top: 18px; }
.compare-bar-label { display: flex; justify-content: space-between; font: normal normal 500 13px/16px Pretendard; color: #767676; margin-bottom: 6px; }
.compare-bar-label strong { color: #222222; font-weight: 600; }
.compare-bar-track { background: #F3F3F3; border-radius: 8px; height: 10px; overflow: hidden; }
.compare-bar-fill { height: 100%; border-radius: 8px; }

/* 대시보드 - 짝을 이루는 두 dash-card의 콘텐츠 높이를 맞출 때 사용 (차트가 없는 쪽에만 적용) */
.dash-card-col { display: flex; flex-direction: column; }
.dash-card-col > .ds-card,
.dash-card-col > .notice-list { flex: 1; min-height: 0; }

/* 대시보드 - 알림/문의 카드 */
.notice-list { display: flex; gap: 14px; }
.notice-card { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; border: 1px solid #EEEEEE; border-radius: 16px; padding: 18px 20px; }
.notice-title-row { display: flex; align-items: center; gap: 8px; }
.notice-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #FF4D4F; color: #FFFFFF; font: normal normal 600 12px/1 Pretendard; }
.notice-title { font: normal normal 600 16px/19px Pretendard; color: #363636; }
.notice-desc { font: normal normal 500 13px/16px Pretendard; color: #999999; margin-top: 6px; }

/* 대시보드 - 보안 알림 */
.security-list { list-style: none; margin: 0; padding: 0; }
.security-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #F3F3F3; }
.security-item:last-child { border-bottom: none; }
.security-title { font: normal normal 600 15px/18px Pretendard; color: #363636; margin-bottom: 4px; }
.security-desc { font: normal normal 500 13px/16px Pretendard; color: #999999; }
.security-chevron { margin-left: auto; color: #C7C7C7; }
.security-group + .security-group { margin-top: 20px; }
.security-group-title { font: normal normal 600 14px/17px Pretendard; color: #767676; }
.security-empty { font: normal normal 500 13px/16px Pretendard; color: #999999; padding: 14px 0; }

/* REACT DATEPICKER */
.react-datepicker-popper { z-index: 9999 !important; }
/* REACT SELECTBOX */
.css-1jqq78o-placeholder, input::placeholder { font: normal normal normal 14px/21px Pretendard; }

.toggle-button {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 30px;
    background-color: #ccc;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    outline: none;
    margin-top: 2px;
}
.toggle-button.active {
    background-color: #4a90e2;
}
.toggle-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.toggle-button.active .toggle-handle {
    transform: translateX(40px);
}
.toggle-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* dropzone */
.custom-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 85px;
    padding: 16px;
    /*background-color: #e5faf0;*/
    border: 1px dashed #1565C0;
    border-radius: 4px;
}
.custom-dropzone.has-files {
    justify-content: flex-start;
    background-color: #edefee;
    border-color: #9b9e9d;
}
.dropzone .dz-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: unset;
    margin: 0;
    font-size: 14px;
    color: #3d3e3d;
}
.custom-dropzone .dz-message {
    margin: 0;
    color: #1565C0;
    font-size: 14px;
    font-weight: 600;
}
.dropzone .dz-preview.dz-image-preview {
    background: transparent;
}
.dropzone .dz-preview .dz-filename {
    text-decoration: underline;
}

/* Scroll to Top Button */
.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: #1565C0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.3);
}
.scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
}
.scroll-to-top-btn:hover {
    background: #1976D2;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(21, 101, 192, 0.4);
}
.scroll-to-top-btn i {
    color: #FFFFFF;
    font-size: 20px;
}