@charset "utf-8";
@import url(variable.css);

*::-webkit-scrollbar{width:5px;height:10px;}
*::-webkit-scrollbar-thumb{background-color:var(--gray400);border-radius:4px;}
*::-webkit-scrollbar-track{background-color:var(--gray200);padding:50px;}
*{margin:0;padding:0;box-sizing:border-box; font-family:var(--font);}
html{ width:100%; height:100%; }
body{width:100%;height:100%; display: flex; background: var(--white); overflow: hidden; flex-direction: column;}
body, button, input, select, textarea, a { font-size: var(--ft14);}
textarea { resize: none;}
a{text-decoration:none;color:var(--black100); display: inline-flex; cursor: pointer;}
li{list-style:none;}
span { display: inline-block;}

/*-----------color */
.crPurple { color:var(--purple500)}
.crPrimary { color:var(--primary500)  !important}
.crRed500 { color:var(--red500)}
.crGray400 { color:var(--gray400) !important}
.crGray500 { color:var(--gray500) !important}
.crGray600 { color:var(--gray600) !important}
.crGray700 { color:var(--gray700)}
.crGray800 { color:var(--gray800)}
.crGreen { color:var(--green500)}
.crBlue { color:var(--blue500)}

.bgBlue100 { background: var(--blue100) !important;}

.ft12 { font-size: var(--ft12);}
.ft13 { font-size: var(--ft13);}
.ft16 { font-size: var(--ft16);}
.ft18 { font-size: var(--ft18);}
.ft20 { font-size: var(--ft20);}
.ft24 { font-size: var(--ft24);}
.ft28 { font-size: var(--ft28);}
.ft32 { font-size: var(--ft32);}
.fwR { font-weight: var(--fwR);}
.fwM { font-weight: var(--fwM);}
.fwSB { font-weight: var(--fwSB);}

.line150 { line-height: 150% !important;}

/*-----------align */
.flexS { display: flex; align-items: start;}
.flexC { display: flex; align-items: center;}
.flex1 { flex:1; }
.flex { display: flex;}
.flexBetween { display: flex; justify-content: space-between;}
.flexCol { flex-direction: column;display: flex;}
.flexColInit { flex-direction: initial !important;}
.justiC { justify-content: center !important;}
.justiE { justify-content: end;}
.justiInit { justify-content: initial !important;}
.colInit { flex-direction: initial !important;}
.flexInit { flex: initial !important}
.flexWrap { flex-wrap: wrap; display: flex;}

.po-rel { position: relative;}
.po-ab { position: absolute;}

.wd100 { width:100% !important; }
.wd500 { width: 500px; }
.wd1200 { width: 1200px;}
.wdAuto { width: auto !important}

.scroll { overflow: hidden; overflow-y: auto;}
.scrollN { overflow: hidden !important;}
.scrollInit { overflow: initial !important;}

.gap0 { gap: 0px !important}
.gap4 { gap: 4px !important}
.gap8 { gap:8px !important; }
.gap12 { gap:12px !important; }
.gap16 { gap:16px !important; }
.gap20 {gap:20px !important;}
.gap24 {gap:24px !important;}
.gap32 {gap:32px !important;}
.gap40 {gap:40px !important;}
.gap48 {gap:48px !important;}

.p-0 { padding:0 !important}
.p-b20 { padding-bottom: 20px !important;}
.p-t0 { padding-top: 0 !important}
.p-t20 { padding-top: 20px !important}
.p-t40 { padding-top: 40px !important}

.mAuto { margin: 0 auto !important}
.m-lAuto { margin-left: auto !important; }
.m-r20 { margin-right:20px !important}
.m-b12 { margin-bottom: 12px !important;}
.m-b16 { margin-bottom: 16px !important;}
.m-b24 { margin-bottom: 24px !important;}
.m-t4 { margin-top:4px !important}
.m-t6 { margin-top:6px !important}
.m-t12 { margin-top:12px !important}
.m-t40 { margin-top: 40px !important;}
.m-t8 { margin-top: 8px !important;}
.m-b0 { margin-bottom: 0 !important;}
.m-b8 { margin-bottom: 8px !important;}
.m-b20 { margin-bottom: 20px !important;}

.txtL { text-align: left !important;}
.txtC { text-align: center !important;}

.b-bGray200 { border-bottom: 1px solid var(--gray200) !important;}

.br-50 { border-radius: 50px !important; }

.clamp1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; }


/*-----------layout */
.wrap { flex:1; padding:12px 8px 0 40px ; display: flex; flex-direction: column; }
.wrap .pageTt h2 { font-size: var(--ft24);font-weight: var(--fwSB); padding-bottom:24px; font-family: var(--high);}
.contents { display: flex; flex-direction: column; flex:1; overflow: hidden;}
.container { display: flex; flex:1; padding:20px; overflow: hidden;}

/*-----------header*/
header { background: var(--gray900); height: 56px; width:100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
header h1 .logo { width:130px; height:24px; }
.btnAlarm { position: relative;}
.new.btnAlarm::after { content: ''; width:4px; height:4px; display: inline-block; background: var(--red500); border-radius: 50px; position: absolute; right:0; top:0;}

.accountInfo { display: flex; align-items: center; color:var(--white); }
.accountInfo button { margin-left:12px; margin-right:2px; padding:0; color:var(--white); text-decoration: underline;}

/*-----------nav*/
nav { width:100px; background: var(--black); display: flex; flex-direction: column; padding-bottom:8px; border-radius: 10px;}
.nav { gap:8px; padding:8px; flex:1; display: flex;flex-direction: column;  }
.nav li a { color:var(--white); border-radius:8px; display: flex; flex-direction: column; align-items: center; gap:8px; padding: 12px; font-size: var(--ft12);}
.nav li a i { width:20px;height:20px; mask:none; background-color: transparent; filter: grayscale(1);}
.nav li.active a, .nav li:hover a  { background: var(--white20); }
.nav li.active i { filter: grayscale(0); }

.nav1 { background-image: url(../images/icon/nav-1.svg); }
.nav2 { background-image: url(../images/icon/nav-3.svg); }
.nav3 { background-image: url(../images/icon/nav-5.svg); }
.nav4 { background-image: url(../images/icon/nav-4.svg); }
.nav5 { background-image: url(../images/icon/nav-2.svg); }
.nav6 { background-image: url(../images/icon/nav-9.svg); }


/*-----------schArea*/
.schArea { flex-wrap: wrap; gap:4px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;}
.schArea>div { display: flex; align-items: center; gap:8px; }
.schArea button { height:40px; padding:0 16px;}
.schArea button i { width:12px;height:12px;}
/*-----------form*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; }
input:focus, textarea:focus { outline: none; }
input::placeholder, textarea::placeholder { color:var(--gray400)}
input[disabled=""],input[disabled="disabled"] { color:var(--black)}
.ipt, select { background-color: var(--white); border:1px solid var(--gray300); height:40px;border-radius: 8px; padding:0 14px; }
.ipt:has(textarea) { height:auto;}
select { cursor: pointer; background: var(--white) url(../images/icon/ico-arw-gray.svg) no-repeat calc( 100% - 12px ) center; appearance: none; padding-right: 34px; }
select:focus { outline: none; border-color:var(--gray500)}
.ipt {display: flex; align-items: center;}
.ipt input, .ipt textarea { border:none; width:100%; height:100%; }
.ipt textarea { padding-top:10px; min-height:70px; }
.ipt.readonly { background: var(--gray100);}
.ipt:has(input:focus), .ipt:has(textarea:focus) { border-color: var(--gray500) !important;}
.ipt:has(input[disabled="disabled"]), .ipt:has(input[disabled=""]), .ipt:has(textarea[disabled="disabled"]), .ipt:has(textarea[disabled=""]) {background: var(--gray100); }
.ipt:has(.ico-sch) input { flex:1; }

.ipt:has(input[name="from"]):has(input[name="to"]) input[name="from"],
.ipt:has(input[name="from"]):has(input[name="to"]) input[name="to"] {
  width: 90px; flex: initial !important
}

.ipt:has(input[name="from"]):has(input[name="to"]) span { margin-right:8px;  }


.ipt .btn_icon { width:20px;height:20px;padding:0;}
.ipt .btn_icon i { width:20px; height: 20px; }


.form { gap: 24px; display: flex; flex-direction: column; }
.form>section { border-bottom:1px solid var(--gray100); padding-bottom: 32px; display: flex; flex-direction: column; gap:16px; }
.form>section:nth-last-of-type(1) { border-bottom: none;}
.form>section.col { flex-direction: initial;}
.form>section.col .formTt { width: 600px; }
.form ul { padding-bottom:32px; display: flex; flex-direction: column; gap:16px; }
.form ul:last-of-type { padding-bottom: 0; border:none; }
.form ul.row>li { flex-direction: column;}
.form ul.row>li>label { padding-top:0; width: 100%;}
.form ul.row>li>label .btn_icon { height: auto;}
.form ul>li { display: flex; gap:12px; }
.form ul>li>label { color:var(--gray600);width:120px; gap:8px; display: flex; padding-top:11px; }
.form ul>li>label.ness::after { content: '*'; color:var(--red500); }
.form ul>li>label+* { display: flex; flex-direction: column; gap:8px; flex:1;}
.form ul>li:has(.chkList) { min-height:40px; }
.form ul>li .chkList { align-items: center;}
.form ul>li .ipt+button { height:40px;}
.helper { color:var(--gray500); font-size: var(--ft12);display: none; padding-left:12px;}
.helper.open { display: flex;}
.helper.err { color: var(--red500);}
.helper.suc { color:var(--green500)}

.formTt { display: flex; flex-direction: column; gap: 12px;}
.formTt:has(h5) { margin-bottom:20px;}
.formTt h4 { font-size: var(--ft18); color:var(--gray800)}
.formTt h5 { font-size: var(--ft14); color:var(--gray500); font-weight: var(--fwR); line-height:var(--ft18); }

.cmt { gap:8px; display:none; font-size: 12px; color:var(--gray600); font-size: var(--ft14); line-height:150%; }
.cmt.open { display: flex;}
.cmt i { width:16px;height:16px; mask-image: url(../images/icon/ico-info.svg); margin-top:2px; background-color: var(--gray500);}
.cmt span { flex:1;}
.cmt.red { color:var(--red500)}
.cmt.red i { background-color: var(--red500);}

.cmtBg { padding:12px; display: flex; align-items: center; justify-content: space-between;background: var(--gray100);}

/*-----------icon*/
i { width:24px;height:24px; display: inline-block; -webkit-mask: no-repeat center / cover; mask: no-repeat center / cover; background: var(--gray600);background-size: cover;}
.i12 { width:12px !important;height:12px !important;}
.i14 { width:14px !important; height:14px !important; }
.i16 { width:16px !important;height:16px !important;}
.i20 { width:20px !important; height:20px !important; }
.i24 { width:24px !important; height:24px !important; }

i.red { background-color: var(--red500);}
i.gray400 { background-color: var(--gray400);}

.ico-undo { mask-image: url(../images/icon/ico-undo.svg); -webkit-mask-image: url(../images/icon/ico-undo.svg); background-color: var(--gray500); }
.ico-undo.active { animation: rotate .5s linear infinite; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.ico-chk { mask-image: url(../images/icon/ico-chkShape-wh.svg); -webkit-mask-image: url(../images/icon/ico-chkShape-wh.svg)}
.ico-sch { mask-image: url(../images/icon/ico-sch.svg); -webkit-mask-image: url(../images/icon/ico-sch.svg)}
.ico-add { mask-image: url(../images/icon/ico-add-primary.svg); -webkit-mask-image: url(../images/icon/ico-add-primary.svg);}
.ico-setting { mask-image: url(../images/icon/ico-setting.svg); -webkit-mask-image: url(../images/icon/ico-setting.svg);}
.ico-drag { mask-image: url(../images/icon/ico-move-gray500.svg); -webkit-mask-image: url(../images/icon/ico-move-gray500.svg); cursor: pointer;}
.ico-chk-bk { mask-image: url(../images/icon/ico-check-bk.svg); -webkit-mask-image: url(../images/icon/ico-check-bk.svg); }
.ico-close { mask-image: url(../images/icon/ico-close-bk.svg);  -webkit-mask-image: url(../images/icon/ico-close-bk.svg); }
.ico-close.gray600 {mask-image: url(../images/icon/ico-close-gray600.svg); -webkit-mask-image: url(../images/icon/ico-close-gray600.svg); }
.ico-arw-gray { mask-image: url(../images/icon/ico-arw-gray.svg); -webkit-mask-image: url(../images/icon/ico-arw-gray.svg);}
.ico-arw-gray.right { transform: rotate(-90deg);}
.ico-headphone  { mask-image: url(../images/icon/ico-headphone.svg); -webkit-mask-image: url(../images/icon/ico-headphone.svg); }
.ico-resize { mask-image: url(../images/icon/ico-resize.svg); -webkit-mask-image: url(../images/icon/ico-resize.svg); }
.ico-mius { mask-image: url(../images/icon/ico-mius.svg); -webkit-mask-image: url(../images/icon/ico-mius-black.svg); }
.ico-mius.red { background-color: var(--red500);}
.ico-date { mask-image: url(../images/icon/ico-date.svg); -webkit-mask-image: url(../images/icon/ico-date.svg); }
.ico-person { mask-image: url(../images/icon/ico-person.svg); -webkit-mask-image: url(../images/icon/ico-person.svg); }
.ico-logout { mask-image: url(../images/icon/ico-logout.svg); -webkit-mask-image: url(../images/icon/ico-logout.svg); background-color: var(--white);}
.arw-line { mask-image: url(../images/icon/arw-line.svg); -webkit-mask-image: url(../images/icon/arw-line.svg);  }
.ico-bad { mask-image: none; background-image: url(../images/icon/ico-bad.svg); background-color: transparent;}
.bgBlue500 { background-color: var(--blue500);}
.logo { background-image: url(../images/img/logo_wh.png); mask-image: none; background-color: transparent; width:130px;}
.logo.bk { background-image: url(../images/img/logo_bk.png);}

.ico-cmt {  background-image: url(../images/icon/ico-cmt.svg); background-color: transparent;}
.ico-smile { background-image: url(../images/icon/ico-smile.svg); background-color: transparent;}
.ico-quo { mask-image: url(../images/icon/ico-quotation.svg); -webkit-mask-image: url(../images/icon/ico-quotation.svg); }
.ico-quo.close { transform: scaleX(-1);}
.ico-alarm { background-image: url(../images/icon/ico-alarm.svg); background-color: transparent;}
.ico-more { mask-image: url(../images/icon/ico-more.svg); -webkit-mask-image: url(../images/icon/ico-more.svg); }
.ico-delete { mask-image: url(../images/icon/ico-delete.svg); -webkit-mask-image: url(../images/icon/ico-delete.svg); }
.ico-copy { mask-image: url(../images/icon/ico-copy.svg); -webkit-mask-image: url(../images/icon/ico-copy.svg); }
.ico-down { mask-image: url(../images/icon/ico-down.svg); -webkit-mask-image: url(../images/icon/ico-down.svg); background-color: var(--black);}
.ico-down.upload { transform: rotate(180deg);}
.ico-chartbar { background-image: url(../images/icon/ico-chartbar.svg); background-color: transparent;}
.ico-ai { background-image: url(../images/icon/ico-ai.svg); background-color: transparent !important;}
.ico-tip { mask-image: url(../images/icon/ico-help-gray.svg); -webkit-mask-image: url(../images/icon/ico-help-gray.svg); background-color:var(--gray300); }


/*-----------button*/
button { background: none; gap:8px; display: inline-flex; align-items: center; border-radius:8px; border:1px solid transparent; cursor: pointer; padding: 0 12px; height:32px; font-weight: var(--fwM); justify-content: center; }
button:hover{ opacity: 0.8;}
button[disalbed="disabled"], button[disabled=""] { background: var(--gray200); color: var(--gray500); cursor: default; }
button[disalbed="disabled"] i, button[disabled=""] i { display: none;}
button[disalbed="disabled"]:hover, button[disabled=""]:hover { opacity: 1;}
button i { width:12px;height:12px;}
button:has(.red) { border:2px solid var(--red500); border-radius: 50px; }
.btnArea { display: flex; align-items: center; gap:12px;}
.btn_icon { padding:0 !important; border-radius: 4px; }
.btn_icon[class*="bg"] { width:24px;height:24px; }
.btn_icon.bgPrm01 { background: var(--primary100); }
.btn_icon.bgPrm01 i { background-color: var(--primary500);}
.btn_circle { border-radius: 50px; }
.btn_20 { height:20px;width:20px;}
.btn_24 { height:24px;width:24px;}

.btn_tip { width:14px;height:14px; -webkit-mask: no-repeat center / cover; mask: no-repeat center / cover; mask-image: url(../images/icon/ico-help-gray.svg);  background: var(--gray600); background-color: var(--gray500);}
.btn_link { text-decoration: underline;}
.btn_txt i { width: 14px; height: 14px; }
.btn_txt  { height: auto; color:var(--gray600); padding: 0; }

.btn_p { background: var(--primary500); color:var(--white); }
.btn_p i { background-color: var(--white);}
.btn_s { background: var(--black); color:var(--white); }
.btn_s i { background-color: var(--white);}
.btn_g8 { background: var(--gray800); color:var(--white); }
.btn_g8 i { background-color: var(--white);}
.btn_g3 { background: var(--gray300);  }
.btn_purple { background: var(--purple500); color:var(--white);  }
.btn_purple i { background-color: var(--white)}
.btn_red { background: var(--red500); color:var(--white);  }
.btn_red i { background-color: var(--white)}
.btn_blue { background: var(--blue500); color:var(--white);}
.btn_blue i { background-color: var(--white)}
.btn_b { background: var(--black); color:var(--white)}
.btn_b i { background-color: var(--white)}

.btn_l { border-color: var(--gray300); background: var(--white); color:var(--gray900);}
.btn_l.primary { border-color:var(--primary500); color:var(--primary500);}
.btn_l.primary i { background-color: var(--primary500);}
.btn_l.blue { border-color:var(--blue500); color:var(--blue500);}
.btn_l.g9 { border-color:var(--gray900); color:var(--gray900);}
.btn_l.red { border-color:var(--red500); color:var(--red500);}
.btn_l.purple { border-color:var(--gray300); color:var(--gray900);}
.btn_l.gradi { position: relative; z-index: 1; background: var(--white); color: var(--gray900); padding: 8px 16px; border: none; border-radius: 8px; overflow: hidden;}
.btn_l.gradi::before { content: ''; position: absolute; inset: 0; padding: 1px; border-radius: 8px; background: linear-gradient( 270deg, #00c6c6, #007bff, #9b5de5, #ff6b6b, #00c6c6);background-size: 400% 400%; animation: borderFlow 2s ease infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude; z-index: -1;}
@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%;}
  100% { background-position: 0% 50%; }
}

.btn_l[disabled="disabled="], .btn_l[disabled=""] { border-color:var(--gray300);color:var(--gray500);background: var(--white);}
.btn_l[disabled="disabled="] i, .btn_l[disabled=""] i { display: none;}

.btn_h28 { height: 28px !important; }
.btn_h32 { height: 32px !important; padding: 0 12px !important }
.btn_hw32 { height:32px !important;width:32px !important; padding:0 !important;}

.btn_h40 { height: 40px; padding:0 16px; }
.btn_h48 { height: 48px; padding:0 16px; font-size: var(--ft16);}
.btn_h48 i { width:14px; height: 14px;}

.toggle { display: flex; align-items: center; padding: 0;}
.toggle[disabled] { background: none;}
.toggle .toggleTxt { color:var(--gray700);font-size: var(--ft16); font-weight: var(--fwM);}
.toggle .toggleBar { background:var(--gray200); width:34px;height:10px;border-radius: 50px; position: relative; }
.toggle .toggleBar span { transition: .2s ease-in-out; left:0; top:50%; position: absolute; margin-top:-10px; background:var(--gray400); width: 20px; height:20px;border-radius: 50px;}

.toggle.on .toggleTxt { color:var(--black);}
.toggle.on .toggleBar { background:var(--primary500)}
.toggle.on .toggleBar span { left:14px; background: var(--gray900);}

/*-----------controls*/
input[type="checkbox"], input[type="radio"] { display: none;}
.chkList { display: flex; flex-direction: column; gap:12px; }
.chkList.col { flex-direction: initial; }
.chk .chkShape { width: 16px; height:16px; background-size:cover; border: 1px solid var(--gray300); }
.chk input:checked + label .chkShape { border: none; background-image: url(../images/icon/ico-chk-on.svg);}
.chk input:checked + label .chkTxt { color:var(--black); }
.chk .chkTxt { color:var(--gray600); display: inline-flex; gap:4px; flex:1; }
.chk label { display: inline-flex; gap: 8px; cursor: pointer;}
.chk input[type="radio"] + label .chkShape { border-radius: 50px; }

.chk.dark .chkTxt { color:var(--gray400); }
.chk.dark input:checked + label .chkTxt { color:var(--white)}

.chk.chkBtn label { color:var(--gray900); border-radius: 8px; height:32px; border:1px solid var(--gray300); padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap:8px;}
.chk.chkBtn label i { width:12px; height:12px; background-color: var(--gray400);}
.chk.chkBtn.h40 label { height:40px;}
.chk.chkBtn input:checked + label { background: var(--primary500); color:var(--white); border-color:transparent}
.chk.chkBtn input:checked + label i { background-color: var(--white); }
.chk.chkBtn input[disabled]:not(:checked) + label { background: var(--gray200); border-color:transparent; color:var(--gray500); cursor: default;}
.chk.chkBtn input[disabled]:not(:checked) + label i { background-color: var(--gray400);}

.chk.chkBtn.line label { background: var(--white); border:1px solid var(--gray400); border-radius: 50px; }
.chk.chkBtn.line input:checked + label { background: var(--white); border-color: var(--primary500); color:var(--primary500); }
.chk.chkBtn.line input:checked + label .chkTxt { color:var(--primary500)}

.chk.chkBtn.chkBtn40 label { width:40px; height:40px; }
.chk.chkBtn.circle label { border-radius: 50px; }

.chk input[disabled] + label { cursor: default;}


.chkBoxType { display: flex; gap: 12px;}
.chkBoxType>div { border-radius: 12px; border:1px solid var(--gray300); padding: 20px ; align-items: start; display: flex; flex-direction: column; gap:12px; max-width:360px;}
.chkBoxType>div:has(.chk input:checked) { border-color:var(--primary500)}

/*-----------tbl*/
table { border-collapse: collapse; width:100%;}
.tbl { overflow: hidden;flex:1; background: var(--white); padding:20px 0 0; display: flex; flex-direction: column; }
.tbl .empty ~ .tblTop, .tbl .empty ~ .tblHd, .tbl .empty ~ .tblBody { display: none !important;}
.tblTop { margin-bottom:16px; display: flex; align-items: center; justify-content: space-between;}
.tblTop strong { margin-right:4px;}
.tblHd { background: var(--gray100); padding-right:5px;}
.tblHd th { font-size:var(--ft13); padding:12px; border-right:1px solid var(--gray300); color:var(--gray700); font-weight: var(--fwR);}
.tblHd th:last-child { border: none; }
.tblBody { flex:1; overflow: hidden; overflow-y: scroll;}
.tblBody tr:hover { background: var(--primary-04);}
.noCursor tr:hover { cursor: default; background-color: transparent;}
.tblBody tr { cursor: pointer;}
.tblBody td {  border-bottom:1px solid var(--gray200); border-right: 1px solid var(--gray200);padding: 12px; word-break: break-all;}
.tblBody td:last-child { border-right:none;}
.btn_sort { font-weight: var(--fwR); color:var(--gray700); height: auto; padding:0; width:100%; display: flex; align-items: center; justify-content: space-between;font-size:var(--ft13);}
.btn_sort i { background-image: url(../images/icon/ico-sort.svg);width:12px;height:12px; mask: none; background-color: transparent;}
.btn_sort.up i { background-image: url(../images/icon/ico-sort-up.svg); }
.btn_sort.down i { background-image: url(../images/icon/ico-sort-down.svg); }
.btn_sort span { display: inline-flex; align-items: center; gap:4px;}
table td button { height: 24px; border-radius: 6px; }
.tblBody tr:has(input:checked), .tblBody tr.selected { background: var(--primary-04);}
.tbl:has(.tblBody.scrollN) .tblHd { padding-right: 0; }

/*---pagination*/
.pagination { padding-top:12px; display: flex; align-items: center; justify-content: space-between; }
.paging, .paging ul { gap:4px; display: flex; align-items: center; justify-content: space-between;}
.paging ul a { border-radius:4px; border:1px solid transparent; height:32px; padding:0 12px; color:var(--gray500); align-items: center; justify-content: center;}
.paging ul a.active { background: var(--white); border-color: var(--gray300); color:var(--black)}
.paging button::after {content: ''; display: inline-block; width:10px;height:10px; background-image: url(../images/icon/paging.svg); background-size: cover;}
.paging button.max::after { background-image: url(../images/icon/paging-max.svg);}
.paging button[disabled=""], .paging button[disabled="disabled"] { background: none;}
.paging button.prev { transform: rotate(180deg);}
.paging button[disabled=""]::after, .paging button[disabled="disabled"]::after { background-image: url(../images/icon/paging-disabled.svg);}
.paging button[disabled=""].max::after, .paging button[disabled="disabled"].max::after { background-image: url(../images/icon/paging-max-disabled.svg);}
.paging button { padding: 0 8px; }
.pagination select { height:32px;}

/*-----------page*/
.layoutCon { display: flex; flex-direction: column; gap:20px; padding: 56px; overflow: hidden; overflow-y: auto;}

/*-----------popup*/
.pop { overflow: hidden; padding:8px 0; display: none; background: var(--dim); position: absolute; right:0; bottom:0; top:0; left:0; align-items: center; justify-content: end;z-index: 5;}
.pop.open { display: flex;}
.popBox { transform: translateX(100px); transition: .2s ease-in-out; display: flex; flex-direction: column; background: var(--white); border-radius: 16px 0 0 16px; height:100%; padding: 40px 64px 32px; }
.pop.open .popBox { animation: .2s pop forwards;}
@keyframes pop { from { transition: .2s ease-in-out; } to {transform: translateX(0); }}
.popHd { padding-bottom:24px; display: flex; align-items: center; justify-content: space-between; }
.popHd h3, .popHd h3 * {font-size: var(--ft24);display: flex;align-items: center;gap: 4px; font-family: var(--high); font-weight: var(--fwB);}

.popCon { padding:20px 0 0; flex:1; overflow: hidden; overflow-y: auto; display: flex; flex-direction: column;}
.popClose { width:24px;height:24px;background:var(--gray200); display: flex; align-items: center; justify-content: center; border-radius: 50px;}
.popClose::after{ content: ''; display: inline-flex; width:10px;height:10px;background-image: url(../images/icon/ico-close-bk.svg); background-size: cover;}
.popFooter { margin-top:20px; display: flex; align-items: center; justify-content: space-between; gap:8px; }
.popFooter button { height:40px; padding:0 16px; font-size: 14px;font-weight: var(--fwSB);}

.pop.page { padding:12px;}
.pop.page .popCon { gap:24px; }
.pop.page .popBox { width:100%; border-radius: 16px; transform: translateX(0) translateY(10%); }
.pop.page.open .popBox { animation: .2s pages forwards; }
@keyframes pages { from { transition: .2s ease-in-out; } to {transform: translateY(0); }}
.pageHd { display: flex; justify-content: space-between; align-items: start;}
.pageHd strong { font-size: var(--ft28);}
.pageHd .btnArea button { width:100px; padding:0;}
.pageTt { display: flex; flex-direction: column; gap:8px; font-family: var(--high);}
.pageTt p { color:var(--gray600); line-height: 150%;}
.pageCon { display: flex; justify-content: space-between; flex:1; gap:56px; overflow: hidden; overflow-y: auto;}
.pop.page .popHd { padding-bottom:4px; }
.pop.page .tbl { padding:0;}


/*-----alert*/
.alert { justify-content: center; background: none;}
.alertBox { transform: translateY(20%); animation: alert .2s forwards; box-shadow:var(--shadow2); width:320px; gap:20px; display: flex; flex-direction: column; text-align: center; justify-content:center; padding:28px 32px 24px; background: var(--white); border-top:8px solid var(--gray600);}
@keyframes alert { from { transition: .2s ease-in-out; } to { transform: translateY(0%); }}
.alertCon { display: flex; flex-direction: column; gap:12px; align-items: center;}
.alertCon > i { width:32px;height:32px; background-image: url(../images/icon/ico-alert-que.svg); background-color: transparent;}
.alertTxt { color:var(--gray600); line-height:150%; font-size:var(--ft13);  width:100%;}
.alertTt { font-weight: var(--fwM); width:100%; }
.alertFooter { display: flex; align-items: center; gap:8px; justify-content: center; }

.alert.err .alertBox { border-color:var(--red500)}
.alert.err .alertCon > i { background-image: url(../images/icon/ico-alert-err.svg);}
.alert.err .alertTt { color:var(--red500)}
.alert.conf .alertBox { border-color:var(--primary500)}
.alert.conf .alertCon > i { background-image: url(../images/icon/ico-alert-conf.svg);}

/*-----modal*/
.modal.noBg {  background: transparent;}
.modal.noBg .popBox { box-shadow: var(--shadow1); }
.modal .popBox { height: auto;padding: 0 32px 20px; animation: none !important; border-radius: 12px; transform: translateX(0);}
.modal .popFooter { justify-content: center;}
.modal .popFooter button { height:32px;  }

/*-----popbtnlist*/
.popBtnList { position: fixed; right: 0; bottom: 0; left: 0; top: 0; z-index: 55555555555; }
.popBtnList ul { margin-top:2px; overflow: hidden; position: absolute; top: 0; z-index: 55555555555555555555; border: 1px solid var(--gray300); display: flex; flex-direction: column; background: var(--white); border-radius: 8px;}
.popBtnList a {width: 100%;border-bottom: 1px solid var(--gray300);padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
.popBtnList a:hover { background: var(--gray100);}
.popBtnList a i { width: 12px; height: 12px; }

/*-----toast*/
.toast {position: absolute; right: 0; left: 0; top: 0; padding-top:24px; display: flex; justify-content: center;z-index: 55;}
.toastBox { transform: translateY(100%); animation: toast .2s forwards; gap:4px; display: flex;flex-direction: column; padding:8px 16px; background: var(--black90); border-radius: 8px;}
@keyframes toast { from { transition: .2s ease-in-out; } to { transform: translateY(0%); }}
.toastTt { color:var(--primary500); display: flex; align-items: center; gap:8px; }
.toastTt i { width: 16px; height:16px; mask-image: url(../images/icon/ico-info-primary.svg); -webkit-mask-image: url(../images/icon/ico-info-primary.svg); background-color: var(--primary500); }
.toastTxt { color:var(--white); padding-left:24px; font-size: var(--ft13);}

/*-----tooltip*/
.toolTip { display: flex; flex-direction: column; align-items: center; position: fixed; z-index: 555;}
.toolTip::before { content: '';  width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--gray900);}
.toolTip .tipTxt { border-radius:4px; max-width:240px; background: var(--gray900); padding:8px; color:var(--white); font-size: var(--ft13);}

/*-----------tag*/
.tag { background: var(--gray100) ; color:var(--gray900); padding:4px 8px; border-radius: 4px;font-size: var(--ft13); line-height: initial; display: inline-flex; align-items: center; gap: 8px; }
.tag i { width: 16px; height:16px; }
.tag.red100 { background: var(--red100); color:var(--red500);}
.tag.green { background: var(--green100); color:var(--green500)}
.tag.blue { background: var(--blue100); color:var(--blue500)}
.tag.purple { background: var(--purple100); color:var(--purple500)}
.tag.g4 { background: var(--gray400);}

.tag.line { background: var(--white); border:1px solid var(--primary500); }
.tag.br-50 { padding: 8px 12px; }
.tag.br-50 i { width: 10px; height:10px; }

.tag.L { padding:12px 16px; font-size: var(--ft14);}

/*-----------tab*/
.tab { display: inline-flex; align-items: center; gap:8px; padding:8px; border-radius: 50px; border:1px solid var(--gray300); background: var(--white);}
.tab a { color:var(--gray800); padding: 8px 16px; border-radius: 50px; display: inline-flex; align-items: center; gap:4px;}
.tab a.active { color:var(--white); background: var(--black);}

.tab.line { border-radius: 0; border:none; border-bottom:4px solid var(--gray200); padding:0; gap:0; }
.tab.line a { border-radius: 0; padding: 0 16px 16px ; background: none; color: var(--gray800); position: relative;}
.tab.line a::after { content: ''; display: inline-block; position: absolute; left:0; right:0; bottom: -4px; height:4px; }
.tab.line a.active::after { background: var(--black); }
.tab.line li:last-child a { width:100%; }
.tab.line a.active { color: var(--black); font-weight: var(--fwM);}

.tab3 {border-radius: 0;border-color: transparent transparent var(--gray300); padding: 8px 16px; }
.tab3 a { padding: 0; gap:0; margin-right: 4px; color:var(--gray600)}
.tab3 a::after { margin-left:12px; content: ''; display: inline-block; width:1px; height:12px; background: var(--gray300);}
.tab3 a.active { background: none; color: var(--black); font-weight: var(--fwM); }
.tab3 li:last-child a { margin-right:0; }
.tab3 li:last-child a::after { display: none;}

.step {   display: flex; align-items: center; gap: 12px;}
.step li { font-weight: var(--fwM); display: flex; align-items: center; gap:12px;color:var(--gray600); }
.step li::after { content: ''; display: inline-block; width:16px;height:1px; background: var(--gray400); }
.step li i { background-image: url(../images/icon/ico-step.svg);width:16px;height:16px; background-color: transparent; mask: none; }
.step li.active { color:var(--black)}
.step li.active i { background-image: url(../images/icon/ico-step-on.svg);}
.step li.finish { color:var(--gray700)}
.step li.finish i { background-image: url(../images/icon/ico-step-finish.svg);}
.step li:last-child::after { display: none;}

/*-----------bg*/
.bg1 { background: var(--white); border:1px solid var(--gray300); border-radius: 16px; padding:20px; gap:24px; display: flex; flex-direction: column;}
.bg2 { border:1px solid var(--gray300);}
.bg2>* { padding:20px; border-right:1px solid var(--gray300);}
.bg2>*:last-child { border-right: none; }

/*------------------------datepicker*/
.ui-datepicker { display: none; position: absolute; z-index: 55; background: var(--white); padding: 16px 12px 12px; box-shadow: var(--shadow2);border-radius: 12px; ;}
.ui-datepicker td>*, .ui-datepicker th>* { margin: 4px; width:28px;height:28px; display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: 50px; color:var(--gray800)}
.ui-datepicker td .ui-state-active { background: var(--primary500); color:var(--white)}
.ui-datepicker td.ui-datepicker-today>* { background: var(--blue100);color:var(--black);}
.ui-datepicker-header { display: flex; align-items: center; justify-content: center; position: relative;}
.ui-datepicker-header a { cursor: pointer; position: absolute; left:0; width:24px; height:24px; text-indent: -999999px; display: flex; align-items: center; justify-content: center;  transform: rotate(90deg);}
.ui-datepicker-header a>span {  width: 12px; height:12px; background-image: url(../images/icon/ico-arw-gray.svg); background-size: cover; }
.ui-datepicker-header a.ui-datepicker-next { right:0; lefT: auto; transform: rotate(-90deg);}
.ui-datepicker-calendar { margin-top:12px;}
.ui-datepicker-title { display: flex; align-items: center; gap:8px; }
.ui-datepicker-week-end [title="Sunday"] { color:var(--red500) }
.ui-datepicker-week-end [title="Saturday"] { color:var(--blue500) }
.ui-datepicker-unselectable >* { color:var(--gray400) !important}
.ipt:has([name="from"])::before, .ipt:has([name="to"])::before, .ipt:has([name="singleDate"])::before { content: ''; width:16px; height:16px; background-image: url(../images/icon/ico-date.svg); display: inline-block; background-size: cover; margin-right:8px; }
.ipt:has([name="from"]) input, .ipt:has([name="to"]) input, .ipt:has([name="singleDate"]) input { flex:1; }

/*-----------list*/
/*------기본 카운트 리스트*/
.list1 { display: flex; flex-direction: column; gap:8px; flex:1; overflow: hidden;overflow-y: auto;}
.list1 a { border-radius:8px; padding: 16px; display: flex; color:var(--gray700)}
.list1 a.active { color:var(----black);background: var(--blue100);}
.list1 a dl { font-weight: var(--fwM); gap:16px; width:100%; display: flex; align-items: center;justify-content: space-between;}
.list1 a dl dd { color:var(--blue500);}
.list1 a dl dt { display: flex; flex-direction: column; gap:4px; }
.list1 small { font-size: var(--ft13); color:var(--gray600); font-weight: var(--fwR); display: block;}

.list1.sub a::after { transition: .2s ease-in-out; content: ''; display: inline-block; width:12px;height:12px;background-image: url(../images/icon/ico-arw-gray.svg); margin: 4px 0 0 16px; }
.list1.sub a+* { padding: 16px 16px 4px; display: none;}
.list1.sub a.active::after { transform: rotate(180deg);}
.list1.sub a.active+* { display: flex; }

/*------드래그 가능한 리스트*/
.list_drag { flex:1; display: flex; flex-direction: column; gap: 12px; overflow: hidden; overflow-y: auto;}
.list_drag li { display: flex; align-items: center; gap:8px;}
.list_drag li.disabled button:has(.ico-close){ visibility: hidden;}
.list_drag i { width:16px;height:16px; }
.list_drag .ico-drag + * { flex:1; }
.list_drag .ipt { border-color:transparent;}
.list_drag .ipt:hover { border-color:var(--gray300);}
.list_drag .ipt input { flex:1; }
.list_drag .ipt input + i { display: none; }
.list_drag .ipt input:focus + i { display: inline-flex; }
.list_drag a.active dl { background: var(--blue100);}
.list_drag a { width:100%; }
.list_drag dl { display: flex; flex-direction: column; gap:2px;padding:12px; width:100%; }
.list_drag dl dd { font-size: var(--ft13); color:var(--gray600)}
.list_drag:has(dl) { gap:0; }
.list_drag.disabled .ico-drag { display: none; }

/*------선택 결과 리스트*/
.list_sel { width:320px; display: flex; flex-direction: column;gap:16px;overflow: hidden;}
.list_sel ul {  display: flex; flex-direction: column; gap:8px; overflow: hidden; overflow-y: auto;}
.list_sel ul li { gap:8px; display: flex; align-items: center;}
.list_sel ul li i { width:10px;height:10px;}
.list_sel ul dl { gap:4px; display: flex; align-items: center; background: var(--gray100); border-radius: 50px; padding: 8px 16px;}
.list_sel ul dl dd { color:var(--gray600); font-size: var(--ft13);}

.listSelHd { gap:8px; display: flex; align-items: center; font-size: var(--ft16); }
.listSelHd h4 { font-weight: var(--fwM); display: flex; gap:8px; align-items: center;}
.listSelHd strong { color:var(--primary500); font-weight: var();}

.list_sel.row ul dl { flex-direction: column; align-items: start; padding:8px 20px; gap:2px;}

/*------기본 dl 리스트*/
.list_dl { gap:20px; display: flex; flex-direction: column;}
.list_dl>section { display: flex; flex-direction: column; gap:12px; border-bottom: 1px solid var(--gray300); padding-bottom: 20px; }
.list_dl>section:last-child { border-bottom-color: transparent; padding-bottom: 0;}
.list_dl dl { display: flex; align-items: center; justify-content: space-between;}
.list_dl dl dt { color:var(--gray800); }
.list_dl dl dd { font-size: var(--sb);}

/*------정보 리스트*/
.infoList { display: flex; flex-direction: column; gap: 4px; }
.infoList li { display: flex; gap:6px; }
.infoList li::before { margin-top:6px; content: ''; display: inline-block; width: 4px; height:4px; border-radius: 50px; background: var(--gray700);}
.infoList li span { flex:1; line-height: 18px;}

.infoList.ft12 li::before { width:3px; height:3px; margin-top:7px; }
.infoList.crGray500 li::before { background: var(--gray500);}

/*-----------title*/
.title1 { display: flex; align-items: center; justify-content: space-between; }
.title1 h2 { font-size: var(--ft18); font-weight: var(--fwSB);}

/*-----------ztree*/
.ztree { width:280px; }

.ztree li span.button {  width:16px;height:16px; background: url(../images/icon/ico-arw-gray.svg) no-repeat; background-size: cover; }

.ztree li span.button.root_open { margin-right:8px; background-position: 0; width:12px;height:12px; }
.ztree li span.button.ico_docu { margin-right:8px; background-image: url(../images/icon/ico-file-gr500.svg); background-position: 0; }
.ztree li span.button.ico_open { margin-right:8px; background-image: url(../images/icon/ico-folder-gr700.svg); background-position: 0; }
.ztree li a { border:1px solid transparent; height: auto !important; padding: 8px !important; border-radius: 8px;}
.ztree li a.curSelectedNode { background: var(--blue100); border-color:transparent; opacity: 1;}
.ztree li span.button.root_open { margin-top:12px; }
.ztree li span.button.switch { display: none;}
.ztree li span { color:var(--gray800)}

/*-----------empty*/
.empty { gap:16px; text-align: center; display: none; flex-direction: column;justify-content: center; align-items: center; padding-top:20px;}
.empty.open { display: flex;}
.empty>i { width:64px;height:64px;background-image: url(../images/icon/ico-empty.svg); mask: none; background-color: transparent;}
.empty dl { display: flex; flex-direction: column; gap:4px; }
.empty dl dt { font-size: var(--ft16); color:var(--gray800); }
.empty dl dd { color:var(--gray500)}

/*-----------loading*/
.loading { position: absolute; right:0; top:0; bottom:0; right:0; background: var(--dim); display: flex; align-items: center; justify-content: center; width:100%; height:100%; z-index: 555555;}
.loadingCon { background: var(--white); padding:20px; border-radius: 12px; display: flex; flex-direction: column; gap:12px; text-align: center; color:var(--gray600)}

/*-----------policy*/
.policyWrap { color:var(--gray800); overflow: hidden; overflow-y: auto; padding:20px;}
.policyWrap h1 { font-size:var(--ft28); margin-bottom: 4px; }
.policyWrap h1 + p { color:var(--gray600);}
.policyWrap * { font-size: var(--ft13);}
.policyWrap section { margin-bottom: 40px; display: flex; flex-direction: column; gap:8px;}
.policyWrap section h2 { font-size: var(--ft18);}
.policyWrap section dl { display: flex;flex-direction: column; gap: 4px; }
.policyWrap section dl dt { font-weight: var(--fwSB);}
.policyWrap section ul { display: flex; flex-direction: column; gap:8px; }
.policyWrap section ul li { display: flex; gap:8px;}
.policyWrap section ul li::before { content: ''; display: inline-block; width:4px; height:4px; background-color: var(--gray500);border-radius: 50px; margin-top: 8px;}
.policyWrap section ul li span { display: flex; flex-direction: column; gap:8px; flex: 1;}
.policyWrap .dlList { display: flex; flex-direction: column; gap:20px; margin-top: 8px;}


.infoBox { width:100%; background: var(--gray100); border-radius: 12px; padding:12px; display: flex; flex-direction: column; gap:12px; align-items: start;}
.infoBox dl { display: flex; flex-direction: column; gap: 12px; text-align: left;}
.infoBox dl dt { color:var(--gray800); font-weight: var(--fwSB);}
.infoBox dl dd { color:var(--gray600); font-size: var(--ft13);}


/*-----------fileUpload*/
.uploadBox { width: 100%;height: 150px; border: 2px dashed #cbd5e0;border-radius: 10px; text-align: center;position: relative;transition: all 0.25s ease; cursor: pointer;}
.uploadBox[data-state="active"] {border-color:var(--primary500); background: var(--primary100);}
.uploadBox[data-state="fill"] { border-color:transparent; background: var(--gray100); }
.uploadBox[data-state="fill"] .uploadTxt { display: none;}
.uploadTt { color:var(--gray700) }
.uploadTxt { color:var(--gray500); font-size: var(--ft13);}
.uploadBox input[type="file"] { position: absolute;width: 100%; height: 100%;opacity: 0;cursor: pointer;top: 0; left: 0;}
.uploadCon { padding:20px; gap:12px; width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.uploadCon i { width:16px; height:16px; background-color: var(--gray500) }
.uploadCon .ico-chk { background-color: var(--primary500) }

/*-----------dashTotal*/
.dashTotal { display: flex; align-items: center; justify-content: space-between; gap:8px}
.dashTotal>dl { flex:1; background:var(--gray100); border-radius: 16px; padding:20px 24px; display: flex; flex-direction: column; gap:8px; align-items: center;}
.dashTotal>dl.blue { background: var(--blue100);}
.dashTotal>dl.red { background: var(--red100);}
.dashTotal>dl dt { color:var(--gray600); }
.dashTotal>dl dd { font-size: var(--ft24); font-weight: var(--fwB);}