/* 폰트 */
@font-face {
  font-family: "Noto Sans KR";
  font-weight: 100;
  src: url("/fonts/notosanskr-light.woff2") format("woff2"),
    url("/fonts/notosanskr-light.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 400;
  src: url("/fonts/notosanskr-regular.woff2") format("woff2"),
    url("/fonts/notosanskr-regular.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 500;
  src: url("/fonts/notosanskr-medium.woff2") format("woff2"),
    url("/fonts/notosanskr-medium.woff") format("woff");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 900;
  src: url("/fonts/notosanskr-bold.woff2") format("woff2"),
    url("/fonts/notosanskr-bold.woff") format("woff");
}

/* 메인 컬러 */
:root { --primary: #008897; }

/* 기본 리셋 */
* { margin: 0; padding: 0; box-sizing: border-box; word-break:break-all; position: relative; font-family: "Noto Sans KR", sans-serif; letter-spacing: -1px; outline: none !important; }
*:focus { outline: none; }
*::selection { background-color: #000; color: #FFF; }
html, body { width: 100%; min-width: 1200px; height: 100%; float: left; color: #333; font-size: 14px; }
body{ background: #fff; }
.wrap { width: 100%; height: 100%; float: left; min-width: 1600px; }

a { color: inherit; text-decoration: none; }
img { max-width:100%; vertical-align: middle; }
ul, li { list-style: none; }
button { border: 0; cursor: pointer; }
table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
label { cursor: pointer; }
label > .on { display: none; color: #3366CC; }
label > .off { display: inline-block; color: #CCC; }
input[type="checkbox"], input[type="radio"] { display: none; }
input[type="checkbox"]:checked + label > .on { display: inline-block; }
input[type="checkbox"]:checked + label > .off { display: none; }
input[type="radio"]:checked + label > .on { display: inline-block; }
input[type="radio"]:checked + label > .off { display: none; }
/* input이 label 안에 있을 때 (custom_check_box만 붙이면 둘 다 동작) */
label.custom_check_box input[type="checkbox"]:checked ~ .on,
label.custom_check_box input[type="radio"]:checked ~ .on { display: inline-block; }
label.custom_check_box input[type="checkbox"]:checked ~ .off,
label.custom_check_box input[type="radio"]:checked ~ .off { display: none; }


/* 공통 구조 */
.common_box { width: 100%; float: left; }

.lp0{letter-spacing: 0;}

/* 백그라운드 색상 */
.gray_bg{background-color: #EDEDED !important;}
.main_bg{background-color: color-mix(in srgb, var(--primary) 8%, white) !important;}

/* 한줄일때 텍스트 처리 */
.txt_1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 색상 */
.primary { color: var(--primary) !important; } /*메인색상*/
.primary_bg { background-color: var(--primary) !important; }
.primary_line { border: 1px solid var(--primary) !important; }

/* 폰트굵기 */
.f_regular { font-weight: 400; }
.f_medium { font-weight: 500; }
.f_blod { font-weight: 600; }

.point { color: #F03737 !important; }
.blue_point { color: #286CFF !important; }
.green_point { color: #16BD00 !important; }
.gray_point { color: #999999 !important; }
.orange_point { color: #FF8800 !important; }
.gray7_point { color:#777 !important; }
.black_point { color:#000 !important; }

/* 폰트 굵기 */
.fw_r { font-weight: 400 !important; }
.fw_m { font-weight: 500 !important; }
.fw_b { font-weight: 600 !important; }

/* 마진 */
.mt_0 { margin-top: 0 !important; }
.mb_0 { margin-bottom: 0 !important; }
.ml_0 { margin-left: 0 !important; }

.mt_10 { margin-top: 10px !important; }
.mt_15 { margin-top: 15px !important; }
.mt_20 { margin-top: 20px !important; }
.mt_50 { margin-top: 50px !important; }

.ml_5 { margin-left: 5px !important; }
.ml_10 { margin-left: 10px !important; }
.ml_20 { margin-left: 20px !important; }

.mr_5 { margin-right: 5px !important; }

.mb_10 { margin-bottom: 10px !important; }

.p_5{ padding: 5px !important; }
.pl_20{ padding-left: 20px !important; }
.pr_20{ padding-right: 20px !important; }

.t_10{ top: 10px !important; }

.w_us{width:unset !important;}
.w10{ width: 10% !important; } 
.w30{ width: 30% !important; } 
.w40{ width: 40% !important; } 
.w50{ width: 50% !important; } 
.w80{ width: 80% !important; } 
.w100{ width: 100% !important; } 

.dpi{ display: inline; }
.fr{ float: right; }

/* 한줄일때 텍스트 처리 */
.txt_1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 셀렉트박스 */
select, .table_form{
  width: 100%;
  float: left;
  height: 35px;
  line-height: 35px;
  font-size: 13px;
  border: 1px solid #e1e1e1;
  color: #666;
  padding: 0 10px;
  border-radius: 5px;
}
select * , .table_form *{
  font-size: 12px;
}


/* 버튼 (hover 공통) */
.btn { cursor: pointer; padding: 0 20px; height: 35px; line-height: 35px; background: transparent; font-size: 14px; font-weight: 600; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 3px; }
.btn:hover { opacity: 0.85; }
.gray_btn{ background-color: #F5F5F5; border: 1px solid #E1E1E1; color: #666; }
.line_btn { background-color: #FFF; border: 1px solid var(--primary); color: var(--primary); }
.gray_line_btn { background-color: #FFF; border: 1px solid #D3D3D3; color: #666; }
.main_btn { background-color: var(--primary); color: #FFF; border: none; }
.excel_btn { padding: 0 10px; background-color: #FFF; border: 1px solid #4DA542; color: #4DA542;}
.excel_btn i { font-size: 16px; }
.filter_btn { padding: 0 10px; background-color: #FFF; border: 1px solid #E1E1E1; color: #E1E1E1; }
.filter_btn i { font-size: 16px; }


/* custom_check_box 공통 */
label.custom_check_box { font-size: 19px; display: inline-block; vertical-align: middle; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; cursor: pointer; margin-right: 5px; }
label.custom_check_box i { font-size: inherit; }
label.custom_check_box > .on { display: none; color: var(--primary); }
label.custom_check_box > .off { display: inline-block; color: #CCC; }

/* 테이블용 */
label.custom_check_box.list_check_box { font-size: 19px; float: none; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; cursor: pointer; margin-right: 5px; }
label.custom_check_box.list_check_box i { font-size: inherit; float: none; }
.check_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.check_wrap input[type="radio"],
.check_wrap input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.check_wrap .custom_check_box { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #666; margin-right: 0; }
.check_wrap .custom_check_box i { font-size: 16px; }
.check_wrap .custom_check_box > .on { color: var(--primary); }
.check_wrap .custom_check_box > .off { color: #CCC; }

/* toggle */
label.toggle {
  cursor: pointer;
  background-color: #EEE;
  width: 60px;
  height: 30px;
  transition: all 0.5s;
  padding: 5px 7px;
  border-radius: 25px;
  display: inline-block;
  float: none;
  top: 1.5px;
}

label.toggle>div {
  width: 20px;
  height: 20px;
  background-color: #FFF;
  border-radius: 100%;
  float: left;
  transition: all 0.5s;
  left: 0;
}

input.toggle { display: none; }

input.toggle:checked+label.toggle { background-color: #2790FF; }

input.toggle:checked+label.toggle>div { left: 26px; }

input.txt_box {
  width: 100%;
  height: 35px;
  float: left;
  color: #666;
  padding: 0 10px;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
}

textarea.txt_box {
  width: 100%;
  height: 100px;
  float: left;
  color: #666;
  padding: 10px;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
}

.sort_handle { cursor: n-resize !important; }

.row_hover:hover{ background-color: #F5F4F9; }

/* border-radius */
.br0{border-radius: 0 !important;}

/* flex */
.gap_7{gap: 7px !important;}

.sub_txt {float: left; width: 100%; font-size: 12px; color: #999;}
.input_txt{float: left; font-size: 12px; color: #999; height: 35px !important; line-height: 35px !important; margin-left:10px !important;}

.tal{text-align: left !important;}
.tar{text-align: right !important;}
.tac{text-align: center !important;}

.f_l{float: left !important;}
.f_r{float: right !important;}


.line_wrap { border: 1px solid #D3D3D3; border-radius: 10px; }

/* 공통 상태 뱃지 */
.common_badge { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 13px; font-weight: 500; border: none; }
.common_badge_gray { background: color-mix(in srgb, #999999 10%, transparent); color: #999999; }
.common_badge_blue { background: color-mix(in srgb, #0178FF 10%, transparent); color: #0178FF; }
.common_badge_green { background: color-mix(in srgb, #28a745 10%, transparent); color: #28a745; }
.common_badge_red { background: color-mix(in srgb, #CC3333 10%, transparent); color: #CC3333; }