/*input type number reset*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } 

/*input Btn*/
.inputBtn { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; cursor: pointer; } 

/*calendar -plugin*/
._calendar.basic { background-image: url(../../img/icon/icon-calendar.png); background-position: calc(100% - var(--unit-32)); background-size: var(--unit-24); cursor: pointer; padding-right: var(--unit-36); } 
._calendar.basic:disabled { cursor:auto; } 

/*텍스트 + | + 텍스트*/
._textSet { display: flex; gap: var(--unit-10); } 
._textSet > * { font-size: var(--unit-24); position: relative; padding-right: var(--unit-10); display: flex; align-items: center; } 
._textSet > *:last-child { padding-right: 0; } 
._textSet > *:last-child:after { display: none; } 
._textSet > *:after { content: ""; display: block; width: 1px; height: 10px; background-color: var(--color_06); position: absolute; right: 0; top: 50%; transform: translateY(-50%); } 

._listTotalCount { padding: var(--unit-40) var(--unit-42) var(--unit-26); font-size: var(--unit-28); } 


._btn.large { width: 100%; font-size: var(--unit-34); height: var(--unit-100); } 
._btn.line { border: 1px solid var(--color_04); } 
._btn.line.red { border:1px solid var(--red); color:var(--red); } 
._btn.surface.gray { background-color: var(--color_02); } 
._btn.surface.navy { background-color: var(--mo-main); color: var(--color_00); } 
._btn.surface.white { background-color: var(--color_00);; } 

._arrowTxt { display: flex; align-items: center; gap: var(--unit-10); } 
._arrowTxt img { width: var(--unit-10) } 


.basic { width: 100%; height: var(--unit-96); background-color:var(--color_00); border:var(--basicLine); font-size: var(--unit-30); padding: 0 var(--unit-30); display: inline-block; transition: border 0.1s; font-weight:var(--fontWeight-medium); } 
.basic::placeholder { color: var(--color_07); } 
.basic:focus { border:1px solid var(--color_09); } 
.basic:disabled { background-color: var(--color_04); color: var(--color_09); } 

/*select*/
select.basic:required:invalid { color:var(--color_07); } 
select.basic:disabled { background-color:var(--color_01); color: var(--color_07); } 
select.basic { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../../img/arrow/arrow-down-08.png); background-position: calc(100% - var(--unit-36)); background-size: var(--unit-24); padding-right: var(--unit-52); } 
textarea.basic { resize: none; padding: var(--unit-32) var(--unit-30); line-height: var(--unit-36); min-height: var(--unit-140); } 


._formBox { display: flex; flex-direction: column; gap: var(--unit-42); } 
._formBox li { display: flex; flex-direction: column; gap:var(--unit-20); } 
._formBox li .tit { font-size: var(--unit-26); font-weight: var(--fontWeight-medium); } 


._list { display: flex; flex-direction: column; gap: var(--unit-20); } 
._list li { background-color: var(--color_00); } 
._list ._infoList li { padding: 0; } 
._listMoreBtn { width:100%; padding: var(--unit-36); } 
._listMoreBtn button { height: var(--unit-72); background-color: var(--mo-bg_01); position: relative; } 
._listMoreBtn button span { font-size: var(--unit-28); font-weight:var(--fontWeight-semiBold); } 
._listMoreBtn button span.page { position: absolute; right:var(--unit-40); color: var(--color_08); font-weight:var(--fontWeight-regular); top: 50%; transform: translateY(-50%); } 
._listMoreBtn button span.btn { display: flex; justify-content: center; align-items: center; gap: var(--unit-10); } 
._listMoreBtn button span.btn img { width: var(--unit-20); } 
._list li.empty { display: flex; background-color: transparent; align-items: center; border:0; font-size: var(--unit-30); color: var(--color_07); height: var(--unit-360); justify-content: center; } 


._dateRangeBox { flex-wrap: wrap; display: flex; gap: var(--unit-20); align-items: center; width: 100%; } 
._dateRangeBox .tit { width: 100%; font-weight: var(--fontWeight-semiBold); color: var(--color_08); font-size: var(--unit-24); } 
._dateRangeBox div { font-size: var(--unit-32); } 
._dateRangeBox ._calendar.basic { flex: 1; } 

.asState { font-size: var(--unit-28); font-weight:var(--fontWeight-semiBold); } 
.asState.colBlue { color: var(--blue); } 
.asState.colBlack { color: var(--color_12); } 
.asState.colGray { color: var(--color_07); font-weight:var(--fontWeight-regular); } 


._infoList { display: flex; flex-direction: column; gap: var(--unit-64); } 
._infoList li { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--unit-42); } 
._infoList li span { color: var(--color_09); font-size: var(--unit-28); } 
._infoList li div { font-size: var(--unit-30); font-weight:var(--fontWeight-semiBold); } 
._fixBottomBtnBox { position: fixed; left: 0; bottom: 0; width: 100%; display: flex; box-shadow: 0px -1px 12px rgba(0, 0, 0, 0.11); } 


/*수리 리스트 - AS 리스트 , 수리내역*/
._asList > li { border-bottom: var(--basicLine); padding: var(--unit-48) var(--unit-40); gap: var(--unit-20); display: flex; flex-direction: column; } 
._asList > li > div { display: flex; justify-content: space-between; align-items: center; gap: var(--unit-10); } 
._asList > li > div ._userName { flex: 1; } 
._asList > li .sub { font-size: var(--unit-30); font-weight:var(--fontWeight-regular); color: var(--color_08); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
._asList > li ._textSet { gap: var(--unit-16); } 
._asList > li ._textSet li { color: var(--unit-10); padding-right: var(--unit-16); font-size: var(--unit-24); font-weight:var(--fontWeight-regular); } 
._asList > li ._textSet li:last-child { padding-right: 0; } 
._asList > li .reserveTime { color: var(--blue); font-size: var(--unit-24); } 

/*접수정보*/
._submissionInfo { border-top: var(--dividerLine); border-bottom: var(--basicLine); } 
._submissionInfo .titBox { display: flex; justify-content: space-between; padding:var(--unit-42) var(--unit-42) var(--unit-24) var(--unit-42); align-items: center; } 
._submissionInfo .titBox .tit { font-size:var(--unit-34); font-weight:var(--fontWeight-semiBold); } 
._submissionInfo .titBox .reserveTime { background-color: var(--color_01); border-radius: var(--unit-48); height: var(--unit-48); padding: 0 var(--unit-24); display: flex; align-items: center; font-size: var(--unit-28); } 
._submissionInfo .info { display: flex; align-items: center; justify-content: space-between; padding:0 var(--unit-42); height:var(--unit-94); } 
._submissionInfo .info ._textSet li { color: var(--color_09); font-size: var(--unit-28); } 
._submissionInfo .memo { background-color: var(--color_01); padding:var(--unit-30) var(--unit-42); font-size: var(--unit-30); line-height: var(--unit-42); font-weight:var(--fontWeight-semiBold); } 



/*카운트*/
._countBox { display: flex; align-items: center; justify-content: space-between; background-color: var(--color_00); height: var(--unit-70); border-radius: var(--unit-70); border:var(--basicLine) } 
._countBox button { display: flex; justify-content: center; align-items: center; width: var(--unit-70); height:var(--unit-70); } 
._countBox button:disabled img { opacity: 0.2; } 
._countBox input { text-align: center; width: var(--unit-64); font-size: var(--28); font-weight: var(--fontWeight-semiBold); } 
._countBox button img { width: var(--unit-24); } 



/*키워드검색 input + btn*/
._searchBox { display: flex; background-color: var(--color_00); height: var(--unit-86); position: relative; } 
._searchBox input { width: 100%; flex: 1; padding: 0 var(--unit-42); background-color: transparent; height: 100%; } 
._searchBox button { width: var(--unit-80); height: var(--unit-80); padding: var(--unit-28); position: absolute; right: var(--unit-3); top:50%; transform: translateY(-50%); background-color: var(--color_01); } 
._searchBox .tit { position: absolute; height: 100%; display: flex; font-size: var(--unit-26); color: var(--color_08); font-weight: var(--fontWeight-medium); align-items: center; padding-left: var(--unit-24); } 
._searchBox .tit + input { padding-left: var(--unit-140); } 






/*싱글 선택 버튼*/
.singleSetList { display: flex; flex-direction: column; gap: var(--unit-16); padding: var(--unit-20); } 
.singleSetList li { position: relative; } 
.singleSetList li input:checked + div { background-color: var(--color_00); border:1px solid var(--blue); background-color: var(--list_on); } 
.singleSetList li > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--unit-16); background-color: var(--color_01); padding: var(--unit-36); border:1px solid transparent; transition: 0.1s all; } 
.singleSetList li div .tit { font-size: var(--unit-28); font-weight: var(--fontWeight-semiBold); } 
.singleSetList li div .txt { font-size: var(--unit-26); font-weight: var(--fontWeight-medium); } 
.singleSetList li div .sub { width: 100%; font-size: var(--unit-26); color: var(--color_09); } 


/*달력*/
._calendar.show .ui-datepicker { box-shadow: none; padding: 0; } 
._calendar.show .ui-datepicker td span, 
._calendar.show .ui-datepicker td a { padding: var(--unit-36) 0; font-size: var(--unit-28); } 


/*금액입력 input + 원*/
.priceInput { display: flex; justify-content: space-between; align-items: center; border:var(--basicLine); position: relative; } 
.priceInput input { padding-right: var(--unit-72); } 
.priceInput div { font-size: var(--unit-30); color: var(--color_08); font-weight: var(--fontWeight-semiBold); position: absolute; padding-right: var(--unit-42); right: 0; top: 50%; transform: translateY(-50%); } 

/*부품정보 리스트*/
.partAdd > .titBox { display: flex; justify-content: space-between; align-items: center; padding: var(--unit-42) var(--unit-42) var(--unit-24) var(--unit-42); } 
.partAdd > .titBox .tit { font-size: var(--unit-34); font-weight:var(--fontWeight-semiBold);; } 
.partAdd > .titBox button { background-color: var(--blue); border-radius: var(--unit-70); height: var(--unit-70); display: flex; align-items: center; padding: 0 var(--unit-36); gap: var(--unit-10); } 
.partAdd > .titBox button span { color: var(--color_00); font-size: var(--unit-28); } 
.partAdd > .titBox button img { width: var(--unit-24); } 
._partList { padding:0 var(--unit-20); display: flex; flex-direction: column; gap: var(--unit-24); } 
._partList li { position: relative; } 
._partList li input:checked + .part { background-color: var(--list_on); border:1px solid var(--blue) } 
._partList li .part { background-color: var(--color_01); padding: var(--unit-42); padding-bottom: var(--unit-20); border:1px solid transparent } 
._partList li .delBtn { position: absolute; width: var(--unit-72); height: var(--unit-72); right: 0; top: 0; padding: var(--unit-24); } 
._partList li .titBox { display: flex; flex-direction: column; padding-bottom:var(--unit-24); gap: var(--unit-10); border-bottom:var(--basicLine); margin-bottom: var(--unit-20); } 
._partList li .titBox .tit { font-size: var(--unit-30); font-weight:var(--fontWeight-bold);; } 
._partList li .titBox .txt { font-size: var(--unit-26); color: var(--color_09); } 
._partList li .box { padding: var(--unit-16) 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } 
._partList li .box .tit { color: var(--color_08); font-size: var(--unit-28); } 
._partList li .box div { font-weight:var(--fontWeight-medium);; font-size: var(--unit-26); } 
._partList li .box .tab { display: flex; gap: var(--unit-10); } 
._partList li .box .tab div { position: relative; } 
._partList li .box .tab input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; } 
._partList li .box .tab div { background-color:var(--color_00); width: var(--unit-120); height: var(--unit-64); font-size: var(--unit-26); font-weight: var(--fontWeight-medium); display: flex; align-items: center; justify-content: center; color: var(--color_08); transition: 0.1s all; } 
._partList li .box .tab input:checked + div { background-color: var(--mo-main); color: var(--color_00); } 
._partList li.empty { padding:var(--unit-36) var(--unit-22); color: var(--color_07); text-align: center; background-color: var(--color_01); } 
._partList li .box .txtInput { width: 100%; margin-top: var(--unit-10); } 


/*
 _splitWrap : 양끝 배치 
 emphasized : margin-left : auto -> 오른쪽 끝으로 보냄
 dir-h : direction + horizontal 가로 방향
 dir-v :direction + vertical 세로 방향
*/

._splitWrap { display: flex; justify-content: space-between; gap: var(--unit-40); } 
._splitWrap .colR { color: var(--red); } 
._splitWrap .emphasized { margin-left: auto;; text-align: right; } 
._splitWrap .emphasized div { color: var(--color_06); } 
._splitWrap .emphasized div.colR { color:red; } 
._splitWrap span { color: var(--color_08); } 
._splitWrap div div { font-weight: var(--fontWeight-semiBold); } 
._splitWrap > div { display: flex; } 
._splitWrap.dir-h > div { align-items: center; gap: var(--unit-16); } 
._splitWrap.dir-v > div { flex-direction: column; gap: var(--unit-16); font-size: var(--unit-30); } 
._splitWrap.dir-v > div div { font-size: var(--unit-30); letter-spacing: -0.5px; } 



/*pairWrap: label-value 세로 배열*/
._pairWrap { display: flex; flex-direction: column; gap: var(--unit-18); } 
._pairWrap span { color: var(--color_08); display: block; line-height:136%; } 
._pairWrap > div { display: flex; justify-content: space-between; align-items: center; gap: var(--unit-36); } 
._pairWrap > div div { font-weight: var(--fontWeight-semiBold); font-size: var(--unit-26); flex: 1; text-align: right; line-height:136%; } 



/*고객명 + 주소 + 전화번호 : user > _userInfoBox / _contactInfo */
._user { background-color: var(--color_00); padding: var(--unit-42); display: flex; flex-direction: column; gap: var(--unit-52); } 
._userName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; font-size: var(--unit-32); font-weight:var(--fontWeight-semiBold); } 

/*고객명 + 주소*/
._userInfoBox { display: flex; flex-direction: column; gap: var(--unit-20); } 
._userInfoBox ._textSet li { color: var(--color_10); } 
._userInfoBox.addr { gap: var(--unit-28); } 
._userInfoBox.addr ._userName { font-size: var(--unit-34); } 
._userInfoBox.addr .addr { font-size: var(--unit-28); color: var(--unit-10); } 
/*전화번호버튼*/
._contactInfo { display: flex; gap: var(--unit-24); } 
._contactInfo button { display: flex; justify-content: center; gap: var(--unit-16); align-items: center; border:var(--basicLine); flex: 1; height: var(--unit-80); border-radius: var(--unit-80); } 
._contactInfo button span { font-size: var(--unit-28); font-weight:var(--fontWeight-semiBold); } 
._contactInfo button img { width: var(--unit-20); } 

/*첨부이미지 리스트*/
._imgThumb { display: flex; gap: var(--unit-48); flex-wrap: wrap; } 
._imgThumb li { width: var(--unit-180); } 
._imgThumb li div { border:var(--basicLine); border-radius: var(--unit-10) var(--unit-10) 0 0; display: flex; justify-content: center; align-items: center; padding: var(--unit-16); } 
._imgThumb li div img { width:calc(var(--unit-100) + var(--unit-48)); height:calc(var(--unit-100) + var(--unit-48)); object-fit: cover; } 
._imgThumb li .delBtn { background-color: var(--mo_bg_light_blue); text-align: center; border:var(--basicLine); border-top: 0; border-radius:0 0 var(--unit-10) var(--unit-10); padding: var(--unit-20) 0; font-weight: var(--fontWeight-medium); } 

/*리스트 페이지 상단 검색 박스(부품주문내역/무상자재 반품관리)*/
.wrapper > .filterBox { display: flex; flex-direction: column; padding: var(--unit-36); gap: var(--unit-16); background-color: var(--color_00); border-bottom: var(--basicLine); } 
.wrapper > .filterBox > button { width: 100%; display: flex; height: var(--unit-92); border:var(--basicLine); align-items: center; padding-left:var(--unit-24); padding-right: var(--unit-24); background-color: var(--color_00); } 
.wrapper > .filterBox > button span { display: inline-block; font-weight: var(--fontWeight-semiBold); color: var(--color_08); width:var(--unit-110); text-align: left; } 
.wrapper > .filterBox > button .txt { color: var(--color_13); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right: var(--unit-20); flex: 1; font-weight: var(--fontWeight-semiBold); font-size: var(--unit-28); background-image: url(../../img/arrow/arrow-right-08.png); background-position: right; text-align: left; background-size: var(--unit-16); } 
.wrapper > .filterBox .monthSet input { height: 100%;; font-weight: var(--fontWeight-semiBold); font-size: var(--unit-28); flex:1; color: var(--color_13); background-color: transparent; padding: 0; } 
.wrapper > .filterBox > button ._calendar { border:0; background-color: transparent; flex: 1; padding: 0; background-position: right; } 
._searchBtn { display: flex; justify-content: space-between; align-items: center; gap: var(--unit-36); } 
._searchBtn ._btn { width: var(--unit-180); height: var(--unit-86); font-size: var(--unit-30); } 
._searchBtn .refreshBtn { padding: 0 var(--unit-30); background-color:var(--color_00); border:var(--basicLine); border-radius: var(--unit-50); height: var(--unit-64); display: flex; gap: var(--unit-10); align-items: center; } 
._searchBtn .refreshBtn img { width: var(--unit-20); flex-shrink: 0; } 

._arrowBtn { display: flex; align-items: center; height: var(--unit-100); gap: var(--unit-16); } 
._arrowBtn span { height: 100%; display: flex; align-items: center; font-size: var(--unit-30); font-weight: var(--fontWeight-bold); text-align: left; }
._arrowBtn img { width: var(--unit-20);; } 

/*처리입력*/
.fieldList { display: flex; flex-direction: column; } 
.fieldList > li { position: relative; padding: var(--unit-42) var(--unit-42) var(--unit-40); display: flex; flex-direction: column; gap: var(--unit-10); border-bottom: var(--basicLine); position: relative; background-image: url(../../img/arrow/arrow-right-08.png); background-size: var(--unit-24); background-position: calc(100% - var(--unit-42)); } 
.fieldList > li div span { font-size: var(--unit-24); color: var(--color_08); font-weight:var(--fontWeight-medium); } 
.fieldList > li > span { padding-right: var(--unit-42); font-size: var(--unit-30); font-weight: var(--fontWeight-semiBold); display: block; min-height: var(--unit-42); line-height: var(--unit-42); position: relative; } 
.fieldList > li > span:empty::before { content: attr(data-placeholder); color: var(--color_07); pointer-events: none; user-select: none; } 
.fieldList > li input[type="month"] { opacity: 0; position: absolute; } 
.fieldList > li.addImg { background-image: none; } 
.fieldList > li.unedited { background-image: none; } 
.fieldList > li.txtBox { align-items: center; flex-direction: row; background-image: none; justify-content: space-between; } 
.fieldList > li.txtBox .tit { font-size: var(--unit-24); color: var(--color_08); font-weight: var(--fontWeight-medium); } 
.fieldList > li.txtBox .txt { font-size: var(--unit-30); font-weight: var(--fontWeight-semiBold); line-height: var(--unit-42); } 



/*CSV 다운로드 플로팅 버튼*/
.csvDownBtn { position: fixed; bottom: var(--unit-36); right: var(--unit-36); } 
.csvDownBtn button { box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.3); border: var(--unit-3) solid var(--color_00); background-color: var(--green); width: var(--unit-200); height: var(--unit-86); border-radius: var(--unit-72); display: flex; gap: var(--unit-16); align-items: center; justify-content: center; } 
.csvDownBtn button span { color: var(--color_00); font-size: var(--unit-28); font-weight: var(--fontWeight-semiBold); } 
.csvDownBtn button img { width: var(--unit-26); } 

/*하단 플로팅버튼*/
._fixbottomBtn { position: fixed; right: var(--unit-24); bottom: var(--unit-24); } 
._fixbottomBtn button { padding: var(--unit-30) var(--unit-36); box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.3); border-radius:var(--unit-100); font-size: var(--unit-28); font-weight: var(--fontWeight-semiBold); border:var(--unit-3) solid var(--color_00) }