/* reset.css */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i,
dl, dt, dd, ol, ul, menu, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, main,
nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 16px;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, picture, source {
	display: block;
}
body {
	line-height: 1;
	box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    line-height: 1.2;
}
p {
    line-height: 1.6;
}
ol, ul, menu, li {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
caption {
    text-align: left;
    font-weight: normal;
}
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
img {
	vertical-align: bottom;
}
img, video, audio {
    max-width: 100%;
    height: auto;
}
/* float 사용시 필요 */
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}
.sr_only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* navigation skip */
#skip {
	position: relative;
	z-index: 99;
}
#skip > a {
	position: absolute;
	display: block;
	width: 100%;
	height: 35px;
	background: #333;
	color: #fff;
	line-height: 35px;
	text-align: center;
	left: 0;
	top: -35px;
}
#skip > a:focus, #skip > a:active {
	top: 0;
}

/* ios대응 */
html {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	/* text크기를 자동으로 조절 안 함 */
}
input, button {
    appearance: auto;
    border-radius: 0;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
select::-ms-expand {
	display: none;
	/* 화살표없애기 for ie10, 11 */
}

input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
	letter-spacing: inherit;
    color: inherit;
		cursor:pointer;
		outline: none;
		border: 0;
		margin: 0;
		padding: 0;
		vertical-align:middle;
		background: transparent;
		-webkit-tap-highlight-color: transparent;
}



/* global.css */
body {background-color: #fff; font-family: 'SUIT', 'Spoqa Han Sans Neo', 'sans-serif'; color: #111; letter-spacing: -0.2px;}

/* font */
.fz24 {font-size: 24px;}
.fz20 {font-size: 20px;}
.fz18 {font-size: 18px;}
.fz16 {font-size: 16px;}
.fz14 {font-size: 16px;}
.fz12 {font-size: 12px;}
.fz10 {font-size: 10px;}

.lh100 {line-height: 100%;}
.lh120 {line-height: 120%;}
.lh160 {line-height: 160%;}

.fw100 {font-weight: 100;}
.fw200 {font-weight: 200;}
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}
.fw900 {font-weight: 900;}

/* color */
.gray000 {color: #111;}
.gray700 {color: #555;}
.gray600 {color: #717479;}
.gray500 {color: #888;}
.gray400 {color: #AAA;}
.gray300 {color: #D9D9D9;}
.gray200 {color: #E9E9E9;}
.gray100 {color: #fff;}

.mainColor01 {color: #CC3626;}
.mainColor02 {color: #387add;}
.mainColor03 {color: #29994c;}

.pending {color:#F3CF06; }
.preparing {background-color: #CC3626;}
.delivered {background-color: #29994c;}
.scheduled {background-color: #387ADD;}
.undelivered {background-color: #CC3626;}
.errorRed {color: #CC3626;}

/* bg color */
.whiteBg {background: #fff;}
.mainColor01Bg {background: #F4F6F6;}
.white20 { background-color: rgba(255,255,255,0.2);}

/* border */
.borderTop {border-top: 1px solid #E9E9E9;}
.borderBottom {border-bottom: 1px solid #E9E9E9;}
.borderRight {border-right: 1px solid #E9E9E9;}
.borderLeft {border-left: 1px solid #E9E9E9;}
.borderAll {border: 1px solid #E9E9E9;}

/* margin */
.mt0 {margin-top: 0px;}
.mt4 {margin-top: 4px;}
.mt8 {margin-top: 8px;}
.mt12 {margin-top: 12px;}
.mt16 {margin-top: 16px;}
.mt20 {margin-top: 20px;}
.mt24 {margin-top: 24px;}
.mt40 {margin-top: 40px;}

.mb0 {margin-bottom: 0px;}
.mb4 {margin-bottom: 4px;}
.mb8 {margin-bottom: 8px;}
.mb12 {margin-bottom: 12px;}
.mb16 {margin-bottom: 16px;}
.mb20 {margin-bottom: 20px;}
.mb24 {margin-bottom: 24px;}

.mr0 {margin-right: 0px;}
.mr4 {margin-right: 4px;}
.mr8 {margin-right: 8px;}
.mr12 {margin-right: 12px;}
.mr16 {margin-right: 16px;}
.mr20 {margin-right: 20px;}
.mr24 {margin-right: 24px;}

.ml0 {margin-left: 0px;}
.ml4 {margin-left: 4px;}
.ml8 {margin-left: 8px;}
.ml12 {margin-left: 12px;}
.ml16 {margin-left: 16px;}
.ml20 {margin-left: 20px;}
.ml24 {margin-left: 24px;}

/* padding */
.pr8 {padding-right: 8px;}
.pr16 {padding-right: 16px;}
.pr24 {padding-right: 24px;}

.pn16 {padding-left: 16px;}

.pbAll4 {padding: 4px;}
.pbAll6 {padding: 6px;}
.pbAll8 {padding: 8px;}
.pbAll16 {padding: 16px;}
.pbAll24 {padding: 24px;}

/* align */
.txtAlignL {text-align: left;}
.txtAlignC {text-align: center;}
.txtAlignR {text-align: right;}

/* Tag */
.dfTag {display: flex; align-items: center; height: 24px; border-radius: 24px; font-size: 14px; font-weight: 400; padding: 0 8px; flex-shrink: 0; border: 1px solid #CC3626; color: #CC3626; background: #fff;}

/* flex box */
.flexBox {display: flex;}
.flexBox._inline {display: inline-flex;}
.flexBox._allCenter {justify-content: center; align-items: center;}
.flexBox._betweenCenter {justify-content: space-between; align-items: center;}
.flexBox._between {justify-content: space-between;}
.flexBox._alignCenter {align-items: center;}
.flexBox._alignStart {align-items: flex-start;}
.flexBox._alignEnd {align-items: flex-end;}
._wrap {flex-wrap: wrap;}
._column {flex-direction: column;}

.flex1 {flex:1;}
.flex2 {flex:2;}
.flex3 {flex:3;}
.flexShrink0 {flex-shrink: 0;}
.flexAuto {flex:auto;}
.gap4 {gap:4px;}
.gap6 {gap:6px;}
.gap8 {gap:8px;}
.gap12 {gap:12px;}
.gap16 {gap:16px;}
.gap24 {gap:24px;}

/* control.css */
/* common */
.dfInput, .dfSelect, .dfTextarea {display: inline-block; font-size: 16px; border-radius: 4px; padding: 10px 12px; border: 1px solid #D9D9D9; background: #fff; width: 100%;}
.dfInput, .dfSelect {height: clamp(40px, 12vw, 48px);}
  .dfInput::placeholder, .dfSelect::placeholder, .dfTextarea::placeholder  {color: #888;}
  .dfInput:focus, .dfSelect:focus, .dfTextarea:focus {border: 1px solid #CC3626;}
  .dfInput:read-only, .dfTextarea:read-only {background: none; border: none; border-bottom: 1px solid #E9E9E9; color: #222; cursor: default; border-radius: 0;}
  .dfInput:disabled, .dfSelect:disabled, .dfTextarea:disabled {background: #E9E9E9; border: 1px solid #D9D9D9; color: #414344; cursor: default; border-radius: 4px; opacity: 1;}
  .dfInput._error, .dfSelect._error, .dfTextarea._error {border: 1px solid #D61919;}

	.dfInput.searchInput {background: #fff url("../img/searchIcon.svg") no-repeat 10px center; padding-left: 35px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
  .dfInput.dateInput {background: #fff url("../img/calendarIcon.svg") no-repeat 10px center; padding-left: 35px;}
  .dfInput.dateInput._range { min-width: 200px; }
  .dfInput.passwordInput {padding-right: 30px;}

.required::after {content: '*'; display: inline-block; font-size: 16px; line-height: 12px; color: #CC3626; margin-left: 5px;}

.dfTextarea {min-height: 48px; line-height: 1.4;}

.dfSelect {background: #fff url("../img/allowDown.svg") no-repeat 98% center; padding-right: 25px;}

/* button */
.dfBtn {display: flex; justify-content: center; align-items: center; font-weight: 500; border-radius: 48px; transition: all 0.2s; flex-shrink: 0; padding: 0; font-size: 16px; cursor: pointer; width: 100%;}
	.dfBtn._square {border-radius: 4px; width: auto; }
	.dfBtn._sizeL {height: clamp(40px, 12vw, 48px); min-width: 72px; padding: 0 12px; font-size: 16px;}
	.dfBtn._sizeM {height: clamp(28px, 8vw, 32px); min-width: 64px; padding: 0 8px; font-size: 16px;}
	.dfBtn._sizeS {height: 24px; min-width: 48px; padding: 0 6px; font-size: 14px; width: auto;}
  .dfBtn._size100 {width: 100%;}

  .dfBtn._mainBg {background: #323234; color: #fff;}
  .dfBtn._grayBg {background: #E9E9E9; color: #AAAAAA;}
  .dfBtn._mainLine {background: #fff; color: #323234; border: 1px solid #323234;}
  .dfBtn._blackLine {background: #fff; color: #414344; border: 1px solid #D9D9D9;}
  .dfBtn._redLine {background: #FFF3F3; color: #D61919; border: 1px solid #D61919;}
  .dfBtn:disabled {background: #e9e9e9; color: #aaa; border: 1px solid #e9e9e9;}

  .dfBtn._iconBtn {min-width: 48px; width: 48px; padding: 0; font-size: 18px;}

  .dfBtn._addIcon::before {content: '+'; display: inline-block; font-size: 130%; color: inherit; margin-right: 5px; font-weight: 400;}
.tabulator-row .tabulator-cell .dfBtn {width: 100%;}

/* custom */
.passwordBox {position: relative;}
	.passwordBox .passwordBtn {position: absolute; right: 16px; top: 16px; font-size: 20px; color: #555;}

/* controlBox */
.controlBox {display: block; position: relative;}
.formLabel {display: block; margin-bottom: 8px; font-size: 16px; color: #555; font-weight: 500; line-height: 1; flex-shrink: 0;}
.formLabel.mb12 {margin-bottom: 12px;}

.controlBox.rightLabel .formLabel {position: absolute; right: 12px; top:50%; margin-top: -8px; margin-bottom: 0; font-size: 16px;}

/* checkbox, radio custom */
.customInputBox {display: flex; flex-wrap: wrap; gap:8px;}
	.customInputBox .customInputList {width: 100%;}
	.customInputBox._list2 .customInputList {width: calc((100% - 8px)/2);}
	.customInputBox._list3 .customInputList {width: calc((100% - 16px)/3);}
	.customInputBox .inputTitle {line-height: 1; margin-bottom: 4px}

.customInput {cursor: pointer; display: flex; align-items: center; gap:8px; border: 1px solid #d9d9d9; border-radius: 4px; padding: 12px;}
	.customInput:has(input:checked):not(._normal) {border: 1px solid #CC3626;}
	.customInput._hideInput input {display: none;}
	.customInput._normal {padding: 0; border: none; border-radius: 0px;}
.customInput input {position: relative; display: inline-block;  appearance:none; width: 14px; height: 14px; flex-shrink: 0;}
  .customInput input:checked ~ .formLabel {color: #333; font-weight: 800;}
.customInput input::before, .customInput input::after {content: ''; display: block; position: absolute;}
.customInput .formLabel {margin-bottom: 0}

.customCheck::before {left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #d9d9d9; background: #fff; border-radius: 2px;}
.customCheck:checked::before {border: 1px solid #CC3626;  background: #CC3626;}
.customCheck:checked::after {top:2px; left: 4px; width: 5px; height: 7px; border: 2px solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);}

.customRadio::before {left: 0; top: 0; width: 100%; height: 100%; border: 1px solid #d9d9d9; background: #fff; border-radius: 7px;}
.customRadio:checked::before {border: 1px solid #CC3626;  background: #CC3626;}
.customRadio:checked::after {top:4px; left: 4px; width: 6px; height: 6px; border-radius: 6px; background: #fff;}

.customSelect {border: 1px solid #d9d9d9; border-radius: 4px; padding: 12px 16px;}
	.customSelect .allList.hidden {display: none;}
	.customSelect .allList {padding-left: 20px; font-size: 16px;}
	.customSelect .allList li {line-height: 16px; height: 16px; margin-top: 12px;}
	.customSelect .allList li span {font-size: 14px; color: #888;}

/* Link */
.dfLink {display: inline-block; text-decoration: underline; cursor: pointer;}

/* layout */
main {max-width: 600px; width: 100%; margin: 0 auto; min-height: 100vh; height: 100%; background: #fff; position: relative;}

.mainBox {padding: 24px 16px;}

/* 로그인 페이지 iOS/Android 푸터 스크롤 처리 */
main.login {height: 100vh; overflow: hidden;}
main.login .mainBox {height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding-bottom: 40px;}
main.login .drawer-footer {padding-bottom: 24px;}
.bottomBtnBox {position: relative; left: 0; bottom:0; z-index: 1; max-width: 600px; width: 100%; padding: 24px 0; background: #fff; display: flex; flex-direction: column; gap:16px;}

/* dialog */
.modalDialog::backdrop {background-color: rgba(0,0,0,0.4); backdrop-filter: blur(1px) opacity(1); max-width: 600px; left: calc(50% - 300px);}
.modalDialog {width: calc(600px - 48px); padding: 24px; border-radius: 8px; border: none; box-shadow: 0 0 5px 0 rgba(0,0,0,0.10); background: #fff;}
.modalDialog .title {font-size: 24px; font-weight: 500; margin-bottom: 12px;}
.modalDialog .contents {font-size: 16px; line-height: 1.4; max-height: 60vh; overflow-y: auto;}
	.modalDialog .contents._txt {font-size: 14px; color: #555; text-align: left; padding-top: 12px;}
.modalDialog .btnWrapper {margin-top: 24px; }
.modalDialog .btnWrapper .dfBtn {flex: 1;}
.modalDialog .btnWrapper .dfBtn:nth-of-type(n+1) {margin-top: 8px;}

.modalDialog._confrim {text-align: center;}

/* 로그인, 회원가입 */
.logoBox {width: 100%; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
	.logo {width: 200px; height: auto;}

.login, .register {padding-top: 10px;}
.titleLine {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
	.titleLine .title {font-size: 20px; font-weight: 500; flex:1; padding-right: 24px; text-align: center;}
.missingBox {display: flex; align-items: center; justify-content: flex-end; gap:8px; margin: 24px 0;}
	.missingBox a {color: #888; font-size: 12px;}
.w120 {width: 120px;}

.progressBarBox {display: flex; align-items: center; margin-bottom: 24px;}
	.progressBarBg {flex:1; background: #F2F2F2; height: 6px; border-radius: 3px;}
	.progressBar {width: 0%; height: 6px; background: linear-gradient(30deg, rgba(204,54,38,1) 0%, rgba(178,33,18,1) 100%); border-radius: 3px; transition: width 0.3s;}
	.progressText {display: inline-block; width: 48px; text-align: right;}

.timerBox {position: relative;}
	.timerBox .timer {position: absolute; top: 16px; right: 16px; line-height: 16px; color: #CC3626; z-index: 1; background: #fff;}

.allChcek	.customInput._normal > span {font-size: 16px; font-weight: 700;}

.customSelectBtn {cursor: pointer;}

.aptList .off {display: none;}
.aptList._empty .off {display: block;}
.aptList._empty .on {display: none;}
.aptList._empty .customInputList {display: none;}
.aptList .customInputBox {padding-bottom: 70px;}

.addressBox {display:none; max-width:calc(600px - 47px); width:calc(100% - 47px); height:100vh; position:fixed; left: 50%; transform: translateX(-50%); top:34px; z-index: 2; background: #fff;}
.addressBox::after {content: ""; display: block; width: 100%; height: 200%; background: #FFF;}

/* 아이디 찾기 */
.idInfo > div {padding: 24px; background: #f8f8f8; text-align: center; border-radius: 8px; margin-bottom: 24px;}

/* scrollbar custom */
*::-webkit-scrollbar {width: 10px; height: 10px;}
*::-webkit-scrollbar-thumb {background: #bbb; border-radius: 10px;}
*::-webkit-scrollbar-track {background: #E9E9E9; border-radius: 10px;}