/* 변수 */
:root {
  /* 컬러 */
  --color-primary: #6A71FE;
  --color-primary-dark: #4F56E5;
  --color-primary-light: #EEF0FF;

  --color-point-01: #61C2AE;
  --color-point-02: #F6BC4A;
  --color-point-03: #F2796C;

  --color-grey-level-01: #F5F7F4;
  --color-grey-level-02: #E3E7E4;
  --color-grey-level-03: #C3C3C3;
  --color-grey-level-04: #989898;
  
  /* 텍스트 컬러 */
  --text-color-primary: #1F2937;
  --text-color-secondary: #606D80;
  --text-color-muted: #9AA5B1;

  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border: #E3E6EB;
	--color-accent: #CBD5E1;

  --color-sedonary-level-01: #DFF0FF;
  --color-sedonary-level-02: #9BCEEF;
  --color-sedonary-level-03: #3E8EC2;

  --color-sub-level-01: #CFCDEF;
  --color-sub-level-02: #AFACD5;
  --color-sub-level-03: #817BD3;

  --color-grey-level-01: #F7F9FA;
  --color-grey-level-02: #E3E7E4;
  --color-grey-level-03: #C3C3C3;
  --color-grey-level-04: #989898;
  
  /* 폰트 사이즈 */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-md: 1rem;        /* 16px */
  --font-size-md-lg: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-size-4xl: 3rem;       /* 48px */
  --font-size-5xl: 4rem;       /* 64px */
}

html{
  height: 100%;
  scrollbar-gutter: stable;
}

body {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  font-size: var(--font-size-sm);
  color: var(--text-color-primary);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  line-height: normal;
  font-family: 'Pretendard', sans-serif !important;
  background-color: #f2f3f4;
}

/* 스크롤 css */
body::-webkit-scrollbar{display:none;}
::-webkit-scrollbar {width: 8px; height: 8px;}
::-webkit-scrollbar-thumb {background-color: var(--color-border); border-radius: 10px;}
::-webkit-scrollbar-track {background-color: var(--color-grey-level-01); border-radius: 10px;}

/*타이틀 영역 클래스*/
.titleTop {position: relative; min-height: 36px; display: flex; justify-content: space-between;}
.title {position: relative; padding-left: 16px; font-size: var(--font-size-md); line-height: 28px;}
.title:before {
	content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 16px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: var(--color-primary);
}

/*상태 색상*/
.is-normal{color: var(--color-green);}   /*정상*/
.is-caution{color: var(--color-yellow);} /*주의*/
.is-warning{color: var(--color-red);}    /*경고*/

/*section 감싸는 공통 클래스*/
.wrapRow {display: flex; flex-direction: row !important;}
.wrapCol {display: flex; flex-direction: column !important;}

/* 버튼 공통 css */
.btn {display: flex; align-items: center; justify-content: center; padding: 0 16px; box-sizing: border-box; text-align: center; border-radius: 8px; cursor: pointer; font-size: var(--font-size-sm); font-weight: 500; border: none; line-height: normal; transition: all 0.2s ease;}
.btn--primary {background-color: var(--color-primary); color: var(--color-white); transition: all 0.2s ease;}
.btn--primary:hover {background-color: var(--color-primary-dark); color: #fff;}
.btn--primary img {filter: brightness(0) invert(1);}

.btn--secondary {background-color: var(--text-color-muted) !important; color: var(--color-white) !important; transition: all 0.2s ease !important;}
.btn--secondary:hover {background-color: var(--text-color-secondary) !important; color: #fff;}

.btn--accent {background-color: var(--color-accent); color: #000;}
.btn--accent:hover {background-color: #d1d1d1; color: #000;}

.btn--sm {height: 36px;} /*동그란 버튼*/
.btn--md {min-width: 80px; height: 36px;}
.btn--lg {min-width: 120px; height: 48px;}
.btn--icon {position: relative; width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; transition: all 0.2s ease;}
.btn--icon:hover {background-color: var(--color-accent); transition: all 0.2s ease;}

.buttonGroup {
	display: flex;
	gap: 16px;
}

.buttonGroup--right {
	justify-content: end;
}

/*a {
	color: #8B90FF;
}*/

/*a:hover {
	text-decoration: underline;
  text-underline-offset: 4px;
}*/

/* 폰트 색상 */
.cb {color: var(--color-point-01);}
.cg {color: var(--color-point-01);}
.cy {color: var(--color-point-02);}
.cr {color: var(--color-point-03);}

.download {
  display: inline-block;
  color: #0069bd;
  font-weight: 600;
  text-decoration: underline;
}

.warning {
	color: var(--text-color-red);
}

.errorMessage {
	position: absolute;
  bottom: -24px;
  font-size: 12px;
  color: var(--text-color-red);
}

.required::before {
  content: '';
  position: absolute;
  background-color: #F76659;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -4px;
  left: 0;
}

.form-required {
	font-weight: 600;
	display: inline-block;
  background-color: #ffeeec;
  padding: 8px 16px;
  border-radius: 8px;
}

.form-required:before {
	content: '';
  position: relative;
  background-color: #F76659;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -4px;
  left: 0;
  margin-right: 5px;
}

.form-optional {
	font-weight: 600;
	display: inline-block;
  background-color: #F7F9FA;
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--text-color-secondary);
}

/* 폼 input, select 스타일 */
input,
select {
	font-family: 'Pretendard', sans-serif;
  width: 100%;
  height: 36px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

input:hover,
select:hover {
  border: 1px solid var(--color-border);
  background-color: var(--color-primary-light);
}

input:disabled,
select:disabled {
  background-color: var(--color-border) !important;
  border: 1px solid var(--color-border);
  cursor: not-allowed;
  opacity: 1;
}

input:focus,
select:focus {
	outline: none;
	/* box-shadow: 0 0 0 1px var(--color-primary); */
  border: 1px solid var(--color-primary);
  box-shadow: 0 0 0 2px rgba(106, 113, 254, 0.40);
}

select {
	appearance: none;
	-webkit-appearance: none;
	background: url(../assets/icon/icon_arrow_down.svg) no-repeat right 12px center;
	padding-right: 50px !important;
}

option {
	background-color: #fff;
	color: var(--text-color-primary);
	font-size: 14px;
}

input.error,
select.error {
  color: var(--color-point-03);
  background-color: rgb(255 155 134 / 20%);
  border: 1px solid var(--color-point-03);
}

/*input[placeholder] {
	font-size: var(--font-size-sm);
}*/

input[type=checkbox] {
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  outline: none;
  border: 1px solid var(--text-color-muted) !important;
  vertical-align: middle;
  border-radius: 4px;
  padding: 2px;
  margin: 0;
  width: 16px;
  height: 16px;
  background-color: var(--color-white);
}

input[type=checkbox]::before {
  content: url("../assets/icon/icon_checkbox_default.svg");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type=checkbox]:checked {
  content: url("../assets/icon/icon_checkbox_checked.svg");
  background-color: var(--color-primary) !important;
}

input[type=checkbox]:checked::before {
  border-radius: 4px;
  transform: translate(-50%, -50%);
}

input[type=checkbox]:disabled {
  pointer-events: none;
}

input[type=radio] {
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  outline: none;
  border: 1px solid var(--text-color-muted) !important;
  vertical-align: middle;
  border-radius:50%;
  padding: 2px;
  margin: 0;
  width: 16px;
  height: 16px;
  background-color: var(--color-white);
}

input[type=radio]::before {
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type=radio]:checked {
  content:"";
  display: block;
  background-color:#fff;
}

input[type=radio]:checked::before {
  content:"";
  display: block;
  width: 10px;
  position: absolute;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-primary) !important;
}

input[type=radio]:disabled {
  pointer-events: none;
}

/*input 날짜 기본 브라우저 스타일 초기화 후 css*/
input[type='date'],
input[type='month'] {
  -webkit-appearance: none;
  background: url(../assets/icon/icon_calendar.svg) no-repeat 99% center;
  padding-right: 20px !important;
  position: relative;
  
}

/* jQuery UI DatePicker를 사용하는 text input에도 달력 아이콘 표시 */
.input-date-group input[type='text'][readonly],
.input-wrapper input[type='text'][readonly].hasDatepicker {
  background: url(../assets/icon/icon_calendar.svg) no-repeat right 5px center;
  background-size: 22px 22px;
  padding-right: 20px !important;
  cursor: pointer;
}

input[type='time'] {
  -webkit-appearance: none;
  background: url(../assets/icon/icon_time.svg) no-repeat 100% center;
  padding-right: 20px !important;
  color: transparent;
  position: relative;
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='month']::-webkit-calendar-picker-indicator,
input[type='time']::-webkit-calendar-picker-indicator {
  position:absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
}

input[type='date']:invalid:before,
input[type='month']:invalid:before,
input[type='time']:invalid:before {
  color: #808080;
  content: attr(placeholder);
  position: absolute;
}

input[type='date']:focus,
input[type='month']:focus,
input[type='time']:focus {
	box-shadow: 0 0 0 1px #2188f3 !important;
  outline: none !important;
}

input[type='date']:valid,
input[type='date']:active,
input[type='month']:valid,
input[type='month']:active,
input[type='time']:valid,
input[type='time']:active {
  color: #404040;
}

input[type='date']:valid:before,
input[type='date']:focus:before,
input[type='date']:active:before,
input[type='month']:valid:before,
input[type='month']:focus:before,
input[type='month']:active:before,
input[type='time']:valid:before,
input[type='time']:focus:before,
input[type='time']:active:before  {
  display: none;
}

/*input 입력 자동완성 시 배경 색 없애기*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 93, 189, 0.1) inset;
  box-shadow: 0 0 0px 1000px rgba(0, 93, 189, 0.1) inset;
  -webkit-text-fill-color: white;
  transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  box-shadow: 0 0 0px 1000px transparent inset;
  -webkit-text-fill-color: var(--text-color-black);
  transition: background-color 5000s ease-in-out 0s;
}

input[type='search'] {
  background: url(../assets/icon/search.svg) no-repeat 100% center;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 25px 25px;
  padding-right: 40px;
}

textarea {
	padding: 4px 8px;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  font-family: 'Pretendard', sans-serif !important;
  white-space: pre-wrap;
}

/*폼*/
.form {
	position: relative;
}

.form__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: relative;
	max-width: 300px;
}

.form__label {
	padding-left: 4px;
	font-weight: 600;
  position: relative;
}

.form__input {
	background-color: var(--color-white);
	height: 36px;
	padding: 8px;
	flex-grow: 1;
	border-radius: 8px;
	border: 1px solid var(--color-border);
}

.form__input--sm {
	height: 36px;
}

/* 테이블 스타일 css */
/*.tableWrap {
	overflow: auto;
}*/

.table {
	width: 100%;
	/*height: 100%;*/
	position: relative;
	border-radius: 4px;
	box-sizing: border-box;
	/*display: flex;
	flex-direction: column;*/
}

.table__wrap {
	flex: 1;
  overflow: hidden;
  height: 100%;
}

.table--basic thead {
	border-radius: 4px;
}

.table--basic td,
.table--basic th {
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-grey-level-02);
}

.table--basic thead tr th {
	background-color: var(--color-primary-light);
}

/*.table--basic thead tr th:first-child {
	border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.table--basic thead tr th:last-child {
	border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}*/

.table--basic td {
  background-color: var(--color-white);
}

.invoice-box .invoice-top {
  font-size: var(--font-size-md-lg);
  margin: 12px 0;
  text-align: center;
  font-weight: bold;
}

.invoice-box .table--basic td:nth-child(2) {
  text-align: right;
}

/*border 없는 테이블 스타일*/
.table--flat td,
.table--flat th {
  /*padding: 8px;*/
  text-align: left;
  vertical-align: middle;
  /*border: 1px solid var(--color-grey-level-02);*/
}

.table--flat td {
	font-weight: 400;
}

/* 모달 전체 레이아웃 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*display: none;*/
  opacity: 0;
  align-items: center;
  justify-content: center;
  z-index: -1;
  transition: all 0.2s ease;
}

.modal.show {
  display: block;
  opacity: 1;
  z-index: 1000;
  transition: all 0.2s ease;
}

.modal .form {
	/*display: flex;
	flex-direction: column;*/
	gap: 18px 24px;
}

.modal .form__group {
	width: 300px;
	gap: 8px;
}

/* 어두운 배경 */
.modal.show .modal__content {
	transform: translate(-50%, -50%);
	transition: all 0.2s ease;
}

.modal .modal__content {
	transform: translate(-50%, -60%);
	transition: all 0.2s ease;
}

.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(47, 47, 47, 0.80);
}

/* 모달 박스 */
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 1036px;
  /*width: 100%;*/
  max-height: 700px;
  /*height: 100%;*/
  transform: translate(-50%, -50%);
  /*padding: 68px;*/
  padding: 36px;
  z-index: 1;
  gap: 48px;
  border-radius: 24px;
	background: var(--bg-color-white);
	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.20);
}

.modal__wrap {
	overflow-y: auto;
	height: 485px;
}

.modal__wrap::-webkit-scrollbar {width: 8px;}
.modal__wrap::-webkit-scrollbar-thumb {background-color: var(--color-primary); border-radius: 4px;}
.modal__wrap::-webkit-scrollbar-track {background-color: #e0e0e0; border-radius: 4px;}

.modal__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal__message {
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(57, 170, 243, 0.00) 0%, rgba(57, 170, 243, 0.24) 48.56%, rgba(57, 170, 243, 0.00) 100%);
	margin-bottom: 48px;
	padding: 24px;
}

.modal__message img {
	margin: 0 auto;
}

.modal__message p {
	text-align: center;
	margin-top: 16px;
}

.btn--modalClose {
	max-width: 24px;
	max-height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 36px;
	right: 36px;
	z-index: 9999;
}

.modal__title {
	font-size: 20px;
	/*text-align: center;*/
	font-weight: bold;
}

.modal h4 {
	padding-bottom: 12px;
  border-bottom: 1px solid var(--color-sedonary-level-01);
  font-size: var(--font-size-lg);
}

.modal .btnGroup {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.modal__content::-webkit-scrollbar {width: 8px;}
.modal__content::-webkit-scrollbar-thumb {background-color: var(--color-primary); border-radius: 4px;}
.modal__content::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0.20); border-radius: 4px;}

.modal table {
    border-collapse: unset;
    border-spacing: 5px;
    font-size: var(--font-size-sm);
}

.modal .table--basic td,
.modal .table--basic th {
    padding: 8px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    border: none;
}

.modal .table--basic th {
	border-radius: 8px;
	padding: 0 8px;
}

.modal .table--basic td {
	border-radius: 8px;
	/*padding: 0 8px;*/
	padding: 0 8px;
	background-color: var(--color-grey-level-01);
}

.modal .table--basic td input {
	height: 36px;
	background-color: var(--color-grey-level-01);
	border: none;
	padding: 0;
}

.modal .table--basic td input span {
	height: 100%;
  display: inline-block;
}

.modal .table--basic td input:focus {
	background-color: var(--bg-color-white);
}

.th-color-01 {
	background-color: var(--color-sub-level-01);
}

.th-color-02 {
	background-color: var(--color-sedonary-level-01);
}

/* 알럿창 css */
.alert,
.confirm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.alert__cont,
.confirm__cont{
	background: var(--bg-color-white);
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.20);
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  min-width: 260px;
}

.confirm__buttons {
	display: flex;
	justify-content: center;
	gap: 16px;
}

.confirm__buttons button {
	width: 100%;
}

.alert__cont p,
.confirm__cont p {
  margin-bottom: 24px;
  font-size: 16px;
  text-align: left;
  color: var(--text-color-black);
  display: flex;
  justify-content: center;
}

.btn-alert,
.btn-confirm {
	margin: 0 auto;
}

/* 그리드 스타일 css */
.grid {
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
  position: relative;
  z-index: 10;
	display: flex;
	flex-direction: column;
}

.grid__wrap {
	flex: 1;
  overflow: hidden;
  height: 100%;
}

/*.grid__wrap > div {
  height: 100% !important;
  min-height: 0 !important;
}*/

.grid .buttonGroup {
	position: absolute;
	top: -52px;
	right: 0;
}

/* 브레드크럼 영역 css */
.breadcrumb {
	position: relative;
	padding: 21px 24px;
	background-color: var(--color-white);
	margin-bottom: unset;
	border-radius: unset;
}

.breadcrumb__list {
  display: flex;
  gap: 24px;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #6B6B6B;
}

.breadcrumb__item:after {
  content: url(../assets/icon/icon_arrow_right.svg);
  position: absolute;
  top: 0;
  right: -24px;
}

.breadcrumb__item:first-child {
	padding-left: 0;
}

.breadcrumb__item:last-child:after {
  display: none;
}

.breadcrumb__item:last-child span {
	color: var(--text-color-primary);
	font-size: var(--font-size-md-lg);
	font-weight: 600;
}

.breadcrumb__item span {
	color: var(--text-color-muted);
	font-size: var(--font-size-xs);
}

.pq-toolbar{overflow:visible;}

.op-modal .close {
	opacity: unset;
	text-shadow: none;
}

.op-modal.modal-con .modal-header {
	padding: 0;
}

.modal-backdrop.show {
    opacity: 0.7;
}

.chart {
	background-color: #fff;
	padding: 16px;
	border-radius: 8px;
}

/*。tab-pane.active {
	display: block;
}*/

.img-picture {
	max-width: 450px;
	max-height: 450px;
	margin: 0 auto;
}

.img-picture img {
	object-fit: contain;
}

.nav-item.on a {
	background-color: var(--color-primary);
  /*border-color: unset;*/
}