html,body{height: 100%;width: 100%;margin: 0;font-family: Pretendard;}
p,h3,h4,h5,ul{margin: 0;padding: 0;}
ul{list-style-type: none}
a{color: #000000;text-decoration: none;}
a.link{text-decoration: underline;text-underline-position : under;}
li{list-style-type: none;}
.d-none{display: none !important;}
em{font-style: normal;}
.colorRed{color: #ff0000 !important;}
.noScroll{overflow: hidden !important;}
.text-conter{text-align: center;}
/* print */
@media print{
.printDiv{display: block !important}
.insOder{display: none !important;}
.oderList{display: none;}
.topDiv{display: none;}
.divKakaoTalkChat{display: none;}
.printDiv > div > p{padding: 20px 7px;}
@page {
margin-top: 0;
margin-bottom: 0;
}
thead { display: none; }
tfoot { display: none; }
}
/* loding bar */
.loadingBox .dim {position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.2);}
.loadingBox .circle {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:40px; height:40px; border:3px solid #fff; border-top:3px solid #02B763; border-radius:50em; transition:all .2s;animation-name:spinCircle;animation-duration:.8s;animation-iteration-count:infinite;animation-timing-function:linear;}
img.loadingBar {transform: translate(-50%, -50%);width: 40px;transition: all 0.2s;animation-name: spinCircle;animation-duration: 1.5s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes spinCircle {
from {transform:translate(-50%, -50%) rotate(0);}
to {transform:translate(-50%, -50%) rotate(360deg);}
}
/* button */
button{cursor: pointer;}
button.btn{border-radius: 1000px;font-weight: 700;font-size: 16px;line-height: 24px;text-align: center;letter-spacing: -0.02em;color: #FFFFFF;border: none;height: 56px;width: 100%;}
button.green{background: #02B763;box-shadow: 0px 4px 16px rgba(0, 206, 110, 0.2);}
button.navy{background: #4D5980;}
button.btn:disabled{cursor: default;background: #E9EDF6;color: #A7ADBF;box-shadow: none;}
button.gray{background: #A7ADBF;}
button.iconText{position: absolute;width: 70px;background: #717A99;border-radius: 100px;font-weight: 500;font-size: 12px;line-height: 20px;text-align: center;letter-spacing: -0.02em;color: #FFFFFF;height: 36px;display: flex;align-items: center;justify-content: center;top: 10px;right: 90px;box-shadow: none;}
button.iconText img{padding-right: 4px;}
button.iconText.green{background: #02B763;right: 16px;}
button.icon{background: #F4F6FB;border-radius: 8px;width: 28px;height: 28px;border: none;}
button.icon img{width: 16px;height: 16px;}
button.btnImg{border: none;background: none;padding: 0;}
/* 로그인 */
.content-login{width: 100%;height: 100%;background-image: url("/static/images/bg/bgLogin.svg");background-position: 50% 50%;background-repeat: no-repeat;position: absolute;}
.content-login > div{background: #FFFFFF;box-shadow: 0px 8px 32px rgba(77, 89, 128, 0.1);border-radius: 32px;width: 292px;margin: 0 auto;transform: translateY(-50%);top: 50%;position: relative;padding: 32px;}
.content-login > div .logo{text-align: right;padding: 8px 8px 0 0;}
.content-login > div h3{font-weight: 700;font-size: 24px;line-height: 32px;letter-spacing: -0.02em;color: #363A44;padding-top: 61px;}
.content-login > div p{font-weight: 500;font-size: 14px;line-height: 22px;letter-spacing: -0.02em;color: #787E91;padding-top: 8px;}
.content-login > div .idDiv{margin-top: 32px;background: #F8F9FC;border-radius: 100px;height: 56px;display: flex;align-items: center;}
.content-login > div .idDiv img{padding: 0 16px 0 24px;}
.content-login > div .idDiv input{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #363A44;border: none;outline: none;background: transparent;}
.content-login > div .idDiv input::placeholder{color: #A7ADBF;}
.content-login > div .pwDiv{margin: 8px 0 24px;background: #F8F9FC;border-radius: 100px;height: 56px;display: flex;align-items: center;}
.content-login > div .pwDiv img{padding: 0 16px 0 24px;}
.content-login > div .pwDiv input{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #363A44;border: none;outline: none;background: transparent;}
.content-login > div .pwDiv input::placeholder{color: #A7ADBF;}
.content-login > div .smsDiv{margin: 0 0 24px;background: #F8F9FC;border-radius: 100px;height: 56px;display: flex;align-items: center;padding-left: 20px;}
.content-login > div .smsDiv input{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #363A44;border: none;outline: none;background: transparent;}
.content-login > div .smsDiv input::placeholder{color: #A7ADBF;}
/* 로그인 - 모바일 */
.body-m .content-login{background-size: 220%;}
/* 로그인 - 비밀번호 변경 모달 */
.pwdChgModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:5;justify-content:center;align-items:center;}
.pwdChgModal > div{background:#FFFFFF;box-shadow:0px 8px 32px rgba(77,89,128,0.1);border-radius:32px;padding:32px;width:500px;box-sizing:border-box;}
.pwdChgModal > div h3{font-weight:700;font-size:18px;line-height:26px;letter-spacing:-0.02em;color:#363A44;padding-top:0;margin-bottom:12px;}
.pwdChgModal > div .pwdChgNotice{font-weight:500;font-size:13px;line-height:1.6;letter-spacing:-0.02em;color:#FF8718;background:#FFF6EE;border:1px solid #FFC38B;border-radius:12px;padding:10px 14px;margin-bottom:20px;}
.pwdChgModal > div .pwdChgNotice strong{font-weight:700;}
.pwdChgModal .pwdDiv{margin:0 0 12px;background:#F8F9FC;border-radius:100px;height:56px;display:flex;align-items:center;padding-left:20px;}
.pwdChgModal .pwdDiv input{font-weight:500;font-size:16px;line-height:24px;letter-spacing:-0.02em;color:#363A44;border:none;outline:none;background:transparent;width:100%;}
.pwdChgModal .pwdDiv input::placeholder{color:#A7ADBF;}
.pwdChgModal .pwdDiv:last-of-type{margin-bottom:24px;}
.body-m .pwdChgModal > div{width:100%;height:100%;border-radius:0;}
.pwdChgModal .btnRow{display:flex;gap:8px;}
.pwdChgModal .btnRow button.btn{flex:1;}
.body-m .pwdChgModal .btnRow{flex-direction:column;}
/* alert / confirm */
.alertPopup{background-color: rgba(0, 0, 0, 0.15);position: fixed;z-index: 10;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;top: 0;left: 0;}
/*.alertPopup > div > div{width: 280px;background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;padding: 32px 16px 16px;transition: 0.2s all;transform: scale(0.8);a}*/
.alertPopup > div > div{width: 280px;background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;padding: 32px 16px 16px;transition: 0.2s all;animation-duration: 0.2s;opacity: 0;animation-fill-mode: forwards;}
/*.alertPopup.show > div > div{transform: scale(1);}*/
.alertPopup.show > div > div{animation-name: aniAertShow;}
.alertPopup.hide > div > div{animation-name: aniAertHide;}
/*.alertPopup.hide > div > div{opacity: 0.5;}*/
.alertPopup > div > div > span{font-weight: 700;font-size: 20px;line-height: 28px;text-align: center;color: #363A44;display: block;}
.alertPopup > div > div > p{font-weight: 500;font-size: 14px;line-height: 22px;text-align: center;color: #787E91;padding: 4px 0 32px;}
.alertPopup > div > div > button{height: 48px;box-shadow: none;}
.confirmPopup > div > div > div{display: flex;}
.confirmPopup > div > div > div button{height: 48px;box-shadow: none;flex: 1;}
.confirmPopup > div > div > div button:first-child{width: 112px;margin-right: 8px;flex: none;}
@keyframes aniAertShow {
0%{opacity: 1;transform: scale(0.8);}
100%{transform: scale(1);opacity: 1;}
}
@keyframes aniAertHide {
0%{opacity: 1;transform: scale(1);}
100%{transform: scale(0.8);opacity: 0;}
}
/* top */
.topDiv > div{display: flex;height: 40px;align-items: center;padding: 0 16px;border-bottom: 1px solid #F0F2F9;}
.topDiv > div .cstHome + span{position: relative;top: -1px;}
.topDiv > div .menuDiv{position: relative;flex: 1;text-align: center;display: flex;justify-content: center;}
.topDiv > div .menuDiv ul li{float: left;display: flex;align-items: center;height: 40px;margin: 0 8px;align-items: center;justify-content: center;}
.topDiv > div .menuDiv ul li.on{border-bottom: solid 2px #22242A;}
.topDiv > div .menuDiv ul li a{width: 80px;font-weight: 700;font-size: 13px;line-height: 22px;text-align: center;letter-spacing: -0.02em;color: #22242B;display: inline-block;position: relative;}
.topDiv > div .ramtDiv{background: #F2FCF7;border: 1px solid #D9F8EA;border-radius: 100px;display: flex;align-items: center;padding: 2px 12px 2px 4px;position: relative;}
.topDiv > div .ramtDiv span{font-weight: 700;font-size: 12px;line-height: 21px;text-align: center;letter-spacing: -0.02em;color: #00AB5B;display: inline-block;padding-left: 4px;}
.topDiv > div .ramtDiv > div{background: #363A44;box-shadow: 0px 8px 8px -4px rgba(34, 36, 42, 0.15);border-radius: 4px;font-weight: 600;font-size: 12px;line-height: 20px;display: flex;align-items: center;text-align: center;color: #FFAB5E;position: absolute;padding: 4px 10px;top: 40px;width: 80px;left: 50%;transform: translateX(-50%);}
.topDiv > div .ramtDiv > div:after{content: '';position: absolute;width: 10px;height: 10px;background: #363A44;top: -5px;left: 50%;transform: translateX(-50%) rotateZ(45deg);}
/* PWA 앱 다운로드 버튼 */
.topDiv > div .pwaInstallBtn{background: none;border: 1px solid #02B763;border-radius: 4px;padding: 2px 4px;margin-left: 12px;cursor: pointer;display: flex;align-items: center;justify-content: center;height: 26px;width: 26px;}
.topDiv > div .pwaInstallBtn:hover{background: #F2FCF7;}
.topDiv > div .pwaInstallBtn img{width: 16px;height: 16px;}
.topDiv > div .appPrintBtn{margin-left: 12px;height: 26px;width: 26px;padding: 2px;border: none;background: none;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.topDiv > div .appPrintBtn img{width: 20px;height: 20px;}
.topDiv > div .logout{margin-left: 16px;cursor: pointer;}
@media (max-width: 750px) {
.topDiv > div .menuDiv ul li{width: 70px;}
}@media (max-width: 695px) {
.topDiv > div .menuDiv ul li{width: 55px;}
}
/* top - mobile*/
.body-m .topDiv{position: sticky;top: 0;background-color: #FFFFFF;z-index: 1;}
.body-m .topDiv > div{height: 98px;display: block;padding: 0;}
.body-m .topDiv.cst > div{height: 50px;}
.body-m .topDiv > div .logoDiv{display: flex;padding: 17px 20px 13px;}
.body-m .topDiv > div .logoDiv .logo{flex: 1;display: flex;align-items: center;}
.body-m .topDiv > div .logoDiv .logo > span{position: relative;top: -1px;}
.body-m .topDiv > div .menuDiv{display: block;}
.body-m .topDiv > div .menuDiv ul{display: flex;padding: 0 8px;}
.body-m .topDiv > div .menuDiv ul li{float: none;flex: 1;margin: 0;}
.body-m .topDiv > div .ramtDiv > div{top: 0;left: -65px;}
.body-m .topDiv > div .ramtDiv > div:after{top: 9px;left: calc(100% - 5px);transform: rotateZ(45deg);}
/* PWA 앱 다운로드 버튼 — 모바일 */
.body-m .topDiv > div .pwaInstallBtn{margin-left: 8px;height: 24px;width: 24px;padding: 2px;}
.body-m .topDiv > div .pwaInstallBtn img{width: 14px;height: 14px;}
.body-m .topDiv > div .appPrintBtn{margin-left: 8px;height: 24px;width: 24px;padding: 2px;border: none;background: none;}
.body-m .topDiv > div .appPrintBtn img{width: 20px;height: 20px;}
.body-m .topDiv > div .logout{margin-left: 12px;}
/* input */
.inputSpan,.dateSpan{position: relative;width: 100%;}
.inputSpan input[type=text],.dateSpan input[type=text],.inputSpan input[type=tel],.inputSpan input[type=password]{background: #FFFFFF;border-radius: 8px;font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #363A44;padding: 8px 36px 8px 16px;border: 1px solid #DFE4F1;width: calc(100% - 54px);}
.inputSpan input[type=text]:disabled,.inputSpan input[type=tel]:disabled{background: #F8F9FC;}
.inputSpan input[type=text]:focus,.inputSpan input[type=tel]:focus{outline: none;}
.inputSpan input[type=text]::placeholder .inputSpan input[type=tel]::placeholder{color: #A7ADBF;}
.dateSpan input[type=text] + i{background-image: url("/static/images/icon/iconCalendar.svg");background-size: 16px 16px;width: 16px;height: 16px;position: absolute;right: 15px;transform: translateY(-50%);top: 50%;}
.inputSpan input[type=text]:not(:placeholder-shown) + i, .inputSpan input[type=tel]:not(:placeholder-shown) + i{background-image: url("/static/images/icon/iconInputClear.svg");background-size: 30px 30px;width: 30px;height: 30px;position: absolute;right: 4px;transform: translateY(-50%);top: 50%;}
.inputSpan input[type=text]:read-only + i, .inputSpan input[type=tel]:read-only + i{display: none;}
@media (max-height: 716px) {
/* PC */
.inputSpan input[type=text], .inputSpan input[type=tel]{font-size: 11px;padding: 5px 36px 5px 10px;}
.inputSpan input[type=text]:not(:placeholder-shown) + i, .inputSpan input[type=tel]:not(:placeholder-shown) + i{background-size: 20px 20px;background-repeat: no-repeat;width: 20px;height: 20px;right: 12px;}
/* 모바일 */
.body-m .inputSpan input[type=text], .body-m .inputSpan input[type=tel]{font-size: 12px;padding: 8px 36px 8px 16px;}
}
/* input - 모바일*/
.body-m .inputSpan input[type=text]:not(:placeholder-shown) + i, .body-m .inputSpan input[type=tel]:not(:placeholder-shown) + i{background-image: url("/static/images/icon/iconInputClear.svg");background-size: 20px 20px;width: 20px;height: 20px;position: absolute;right: 10px;transform: translateY(-50%);top: 50%;}
/* checkbox */
.checkbox{display: flex;align-items: center;padding-right: 16px;}
.checkbox label{display: flex;align-items: center;cursor: pointer;}
.checkbox label input[type=checkbox]{display: none;}
.checkbox label input[type=checkbox] + i{background: url("/static/images/icon/iconCheckboxOff.svg") no-repeat center;background-size: 24px 24px;width: 24px;height: 24px;display: inline-block;padding-right: 12px;background-position-x: 0;}
.checkbox label input[type=checkbox]:checked + i{background-image: url("/static/images/icon/iconCheckboxOn.svg");}
/* radio */
.radiobox{display: flex;align-items: center;padding-right: 16px;}
.radiobox label{display: flex;align-items: center;cursor: pointer;}
.radiobox label input[type=radio]{display: none;}
.radiobox label input[type=radio] + i{background: url("/static/images/icon/iconRadioOff.svg") no-repeat center;background-size: 24px 24px;width: 24px;height: 24px;display: inline-block;padding-right: 12px;background-position-x: 0;}
.radiobox label input[type=radio]:checked + i{background-image: url("/static/images/icon/iconRadioOn.svg");}
/* select */
select{background: #FFFFFF;border-radius: 8px;font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #363A44;padding: 8px 28px 8px 16px;border: 1px solid #DFE4F1;height: 36px; -webkit-appearance:none;-moz-appearance:none;appearance:none;background-image: url("/static/images/icon/iconArrow.svg");background-size: 12px 12px;background-repeat: no-repeat;background-position: calc(100% - 16px) center;}
@media (max-height: 716px) {
/* PC */
select{font-size: 11px;padding: 0px 10px;height: 32px;}
}
/* 모바일 */
.body-m select{font-size: 12px;height: 36px;background-position: calc(100% - 11px) center;}
/* datepicker */
.ui-datepicker{width: 320px;border-radius: 20px;left: calc(50% - 164px) !important;top: 50% !important;transform: translateY(-50%);}
.ui-datepicker .ui-datepicker-header{background: none;border: none;padding-top: 10px;}
.ui-datepicker thead th:first-child, .ui-datepicker tbody td:first-child > a {color: #eb4f5d;}
.ui-datepicker thead th:last-child, .ui-datepicker tbody td:last-child > a {color: #5a6ef6;}
.ui-datepicker td a, .ui-datepicker td span{width: 36px;margin: 0 auto;background-color: #FFFFFF !important;border: none !important;padding: 10px 0;text-align: center;}
.ui-datepicker select.ui-datepicker-year{width: 44%;margin-right: 1%;}
.ui-datepicker select.ui-datepicker-month{width: 44%;margin-left: 1%;}
.ui-datepicker .ui-datepicker-today a{background: #d1d1d1 !important;color: #fff !important;border-radius: 50%;}
.ui-datepicker td.ui-datepicker-current-day a{background: #02B763 !important;color: #fff !important;border-radius: 50%;}
.ui-datepicker .ui-datepicker-prev{top: 13px;left: 10px;}
.ui-datepicker .ui-datepicker-prev span{background-image: url("/static/images/icon/iconArrowLeft.svg");background-position: 0px;top: 53%;left: 50%;}
.ui-datepicker .ui-datepicker-next{top: 13px;right: 10px;}
.ui-datepicker .ui-datepicker-next span{background-image: url("/static/images/icon/iconArrowRight.svg");background-position: 0px;top: 53%;left: 50%;}
.dimm{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);}
/* search top */
.searchTopDiv{position: relative;width: 720px;height: 56px;margin: 16px auto 16px;background: #F4F6FB;border-radius: 100px;}
.searchTopDiv > div{text-align: center;padding-top: 10px;}
.searchTopDiv > div .dateSpan input,.searchTopDiv > div .inputSpan input{border: none !important;width: 128px !important;}
.searchTopDiv > div .dateSpan + .dateSpan{padding-left: 10px;}
.searchTopDiv .dateSpan input[type=text]:read-only + i, .searchTopDiv .dateSpan input[type=tel]:read-only + i{display: block;}
/* search top - mobile */
.body-m .searchTopDiv{width: 100%;}
.body-m .searchTopDiv > div .inputSpan input{width: 70px !important;}
/* table */
.tableDiv table{margin: 0 auto; border-spacing: 0;border: 1px solid #DFE4F1;border-radius: 16px;width: 728.2px;table-layout: fixed;}
.tableDiv table thead tr th{background: #F8F9FC;height: 36px;font-weight: 500;font-size: 11px;line-height: 19px;text-align: center;letter-spacing: -0.02em;color: #787E91;}
.tableDiv table thead tr th:first-child{border-top-left-radius: 16px;}
.tableDiv table thead tr th:last-child{border-top-right-radius: 16px;}
.tableDiv table tbody tr td{padding: 12px 0;font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #535867;border-bottom: 1px solid #DFE4F1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.tableDiv table tbody tr td.one{padding: 140px 0;font-size: 16px;text-align: center;cursor: default;}
.tableDiv table tbody tr td a{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #535867;}
.tableDiv table tbody tr:last-child td{border-bottom: none;}
.tableDiv table tbody tr td.center{text-align: center}
.tableDiv table tbody tr td.right{text-align: right}
.tableDiv table tbody tr td button + button{margin-left: 5px;}
/* table - mobile*/
.body-m .tableDiv table{width: 100%;border-radius: 0;}
.body-m .tableDiv table thead tr th:first-child{border-radius: 0;}
.body-m .tableDiv table thead tr th:last-child{border-radius: 0;}
/* paging */
.paging{text-align: center;position: relative;padding-top: 20px;max-width: 800px;margin: 0 auto;}
.paging > div{display: inline-flex;align-items: center;justify-content: center;border-radius: 100px;border: 1px solid #C8CFE2;background: #FFFFFF;width: 240px;margin: 0 auto;padding: 3px 0;}
.paging > div > span{font-weight: 500;font-size: 12px;line-height: 20px;text-align: center;letter-spacing: -0.02em;color: #363A44;background: #F8F9FC;border-radius: 100px;padding: 10px 28px;}
.paging > div > a{width: 100%;}
.paging > div > a > img{padding: 10px 0;}
.paging > button{width: 120px;height: 48px;position: absolute;right: 39px;top: 20px;}
/* form */
form > ul > li{padding-bottom: 16px;}
form > ul > li label{font-weight: 500;font-size: 11px;line-height: 19px;letter-spacing: -0.02em;color: #787E91;padding-bottom: 4px;display: block;position: relative;}
form > ul > li label em{color: #00AB5B;font-size: 10px;position: absolute;right: 0;}
form > ul > li > div{display: flex;}
form > ul > li > div.half > div{flex: 1;}
form > ul > li > div.half > div:last-child{padding-left: 8px;}
form > ul > li > div .inputSpan + .inputSpan{padding-left: 8px;}
form > ul > li > div + div{padding-top: 8px;}
form > ul > li > div.addr{position: relative;}
form > ul > li > div.addr img{position: absolute;width: 12px;height: 12px;top: 12px;right: 12px;}
form > ul > li > div.addrDtpt .inputSpan:first-child{width: 120px;}
form > ul > li > div.addrDtpt .inputSpan:first-child input{width: calc(100% - 32px);padding: 8px 16px;}
form > ul > li > div .ldtnDiv{display: flex;}
ul.list > li{padding: 8px 0;display: flex;align-items: center;border-bottom: 1px solid #F8F9FC;}
ul.list > li:last-child{border-bottom: none;}
ul.list > li label{font-weight: 500;font-size: 14px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;width: 64px;padding-right: 24px;}
ul.list > li p{flex: 1;font-weight: 500;font-size: 16px;line-height: 24px;color: #363A44;}
@media (max-height: 716px) {
/* PC */
form > ul > li{padding-bottom: 10px;}
form > ul > li label{font-size: 10px;}
form > ul > li > div.addrDtpt .inputSpan:first-child input{padding: 5px 22px 5px 10px;}
/* 모바일 */
.body-m form > ul > li{padding-bottom: 16px;}
.body-m form > ul > li label{font-size: 12px;}
.body-m form > ul > li > div.addrDtpt .inputSpan:first-child input{padding: 8px 16px;}
}
/* 고객입력 */
.insCst{width: 478px;margin: 0 auto;}
.insCst h3{font-weight: 700;font-size: 16px;line-height: 24px;letter-spacing: -0.02em;color: #22242B;padding: 30px 0;position: relative;}
.insCst h3 button{position: absolute;right: 0;top: 25px;}
.insCst .buttonDiv{position: fixed;bottom: 24px;width: 100%;text-align: center;height: 48px;left: 0;}
.insCst .buttonDiv button{height: 48px;}
.body-m .insCst{width: calc(100% - 40px);margin: 0 20px;}
/* 레이어 팝업 */
.layerPopup{position: fixed;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);top: 0;left: 0;display: none;}
.layerPopup.show{display: block;z-index: 1;}
.layerPopup > div{width: 700px;background-color: #FFFFFF;margin: 10px auto 0;padding: 0 34px 16px;border-radius: 20px;transition: 0.2s all;animation-duration: 0.2s;opacity: 0;top: 50%;position: relative;transform: translateY(100%);position: relative;max-height: 720px;overflow: auto;}
.layerPopup.show > div.show{transform: translateY(-50%);opacity: 1;}
.layerPopup .headerDiv{display: flex;align-items: center;height: 40px;padding: 16px 0;position: sticky;top: 0;z-index: 1;background-color: #FFFFFF;}
.layerPopup .headerDiv h3{flex: 1;font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;}
.layerPopup .headerDiv h3 .qr{margin-left: 5px;}
/* 레이어 팝업 - mobile*/
.body-m .layerPopup > div{width: calc(100% - 40px);height: 100%;max-height: 100%;border-radius: 0;padding: 0 20px 0;margin-top: 0;}
/* 주소 검색 팝업 */
.ppAddrSerc .closeDiv{text-align: right;padding-bottom: 10px;}
.ppAddrSerc .closeDiv button{width: 40px;height: 40px;}
.ppAddrSerc .closeDiv button img{padding-top: 6px;width: 18px;}
.ppAddrSerc .searchTopDiv{width: 100%;margin-top: 0;}
.ppAddrSerc .searchTopDiv > div .inputSpan input{width: 200px !important;}
.ppAddrSerc .tableDiv{height: 357px;}
.ppAddrSerc .tableDiv table{width: 100%;}
.ppAddrSerc .tableDiv table td{padding: 0 0 0 10px;height: 51px;white-space: normal;}
.ppAddrSerc .tableDiv table td.one{padding: 120px;font-size: 16px;}
.ppAddrSerc .tableDiv table td.btn{padding: 0;}
.ppAddrSerc .tableDiv table td.btn button{width: 55px;height: 34px;font-size: 12px;}
.ppAddrSerc .paging > button{right: 0;}
/* 주소 검색 팝업 - mobile */
.body-m .ppAddrSerc .headerDiv{width: 100%;}
.body-m .ppAddrSerc > div{width: calc(100% - 32px);padding: 16px;}
.body-m .ppAddrSerc .tableDiv table td.one{width: calc(100% - 32px);padding: 16px;}
.body-m .searchTopDiv > div{text-align: left;padding-left: 20px;}
.body-m .ppAddrSerc .searchTopDiv > div .inputSpan input{width: calc(100% - 150px) !important;}
.body-m .ppAddrSerc button.iconText{right: 17px;}
/* 앱 설치 안내 팝업 */
.ppAppInstall > div{width: 460px;padding-bottom: 0;}
.ppAppInstall .appInstallBody{padding: 4px 0 16px;}
.ppAppInstall .guideTxt{font-size: 13px;line-height: 20px;color: #5E6278;background-color: #F4F6FA;border-radius: 12px;padding: 12px 14px;margin-bottom: 16px;}
.ppAppInstall .guideTxt strong{color: #02B763;font-weight: 700;}
.ppAppInstall .appInstallStep{display: flex;flex-direction: column;gap: 12px;}
.ppAppInstall .appInstallStep li{display: flex;align-items: center;gap: 12px;border: 1px solid #EDF0F5;border-radius: 12px;padding: 12px 14px;position: relative;}
.ppAppInstall .appInstallStep li .num{position: absolute;top: -8px;left: 10px;width: 20px;height: 20px;border-radius: 50%;background-color: #02B763;color: #fff;font-size: 11px;font-weight: 700;display: flex;align-items: center;justify-content: center;}
.ppAppInstall .appInstallStep li > img{width: 56px;height: 56px;flex-shrink: 0;}
.ppAppInstall .appInstallStep li .txt{display: flex;flex-direction: column;gap: 3px;}
.ppAppInstall .appInstallStep li .txt strong{font-size: 14px;font-weight: 700;color: #363A44;}
.ppAppInstall .appInstallStep li .txt span{font-size: 12px;line-height: 17px;color: #7E8299;}
.ppAppInstall .appInstallStep li .txt span em{color: #02B763;font-style: normal;font-weight: 600;}
.ppAppInstall .appInstallFooter{position: sticky;bottom: 0;background-color: #fff;padding: 12px 0 16px;display: flex;gap: 8px;}
.ppAppInstall .appInstallFooter .btn{position: static;flex: 1;width: 100%;height: 48px;left: 0;font-size: 14px;}
.body-m .ppAppInstall > div{width: calc(100% - 32px);padding: 0 16px;}
/* QR코드 출력 - 인증번호 입력 팝업 */
.ppQrPrint > div{width: 400px;}
.ppQrPrint .qrPrintBody{padding: 8px 0 16px;}
.ppQrPrint .qrPrintBody .guideTxt{font-size: 13px;line-height: 20px;color: #5E6278;background-color: #F4F6FA;border-radius: 12px;padding: 12px 14px;margin-bottom: 16px;}
.ppQrPrint .qrPrintBody li label{font-size: 16px;padding-bottom: 10px;display: block;}
.ppQrPrint .qrPrintBody li input{font-size: 16px;padding: 12px 36px 12px 16px;width: 100%;box-sizing: border-box;}
.ppQrPrint .qrPrintFooter{padding: 4px 0 0;}
.ppQrPrint .qrPrintFooter .btn{width: 100%;height: 48px;}
.body-m .ppQrPrint > div{width: calc(100% - 32px);padding: 0 16px;}
/* 주문상세 팝업 */
.ppOderDtpt > div{width: calc(640px - 68px);}
.ppOderDtpt .info .header{background: #ECFCF5;border-radius: 16px;padding: 24px;position: relative;}
.ppOderDtpt .info .header > p{font-weight: 500;font-size: 14px;line-height: 22px;color: #00AB5B;padding-bottom: 8px;}
.ppOderDtpt .info .header > p span{margin-left: 6px;padding-left: 6px;border-left: 1px solid #DFE4F1;}
.ppOderDtpt .info .header > span{font-weight: 700;font-size: 14px;line-height: 22px;color: #363A44;}
.ppOderDtpt .info .header > a{font-weight: 700;font-size: 14px;line-height: 22px;color: #363A44;text-underline-position: under;text-decoration: underline;}
.ppOderDtpt .info .header > h5{font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;}
.ppOderDtpt .info .header:after{font-weight: 700;font-size: 12px;line-height: 18px;letter-spacing: -0.02em;background: #FFFFFF;border-radius: 100px;width: 64px;height: 64px;display: flex;align-items: center;justify-content: center;transform: rotateZ(15deg);position: absolute;right: 30px;top: 30px;}
.ppOderDtpt .info.type02 .header{background: #ECFCF5;}
.ppOderDtpt .info.type02 .header:after{content: '픽업대기';color: #02B763;border: 1px solid #80DBB1;}
.ppOderDtpt .info.type03 .header{background: #FFF6EE;}
.ppOderDtpt .info.type03 .header p{color: #FF8718}
.ppOderDtpt .info.type03 .header:after{content: '픽업예정';color: #FF8718;border: 1px solid #FFC38B;}
.ppOderDtpt .info.type04 .header{background: #FFF6EE;}
.ppOderDtpt .info.type04 .header p{color: #FF8718}
.ppOderDtpt .info.type04 .header:after{content: '픽업예정';color: #FF8718;border: 1px solid #FFC38B;}
.ppOderDtpt .info.type05 .header{background: #EFF7FF;}
.ppOderDtpt .info.type05 .header p{color: #0C75F1}
.ppOderDtpt .info.type05 .header:after{content: '배달중';color: #0C75F1;border: 1px solid #85BAF8;}
.ppOderDtpt .info.type06 .header, .ppOderDtpt .info.type07 .header, .ppOderDtpt .info.type08 .header{background: #F4F6FB;}
.ppOderDtpt .info.type06 .header p, .ppOderDtpt .info.type07 .header p, .ppOderDtpt .info.type08 .header p{color: #787E91;}
.ppOderDtpt .info.type06 .header:after, .ppOderDtpt .info.type07 .header:after, .ppOderDtpt .info.type08 .header:after{content: '배달완료';color: #787E91;border: 1px solid #C8CFE2;}
.ppOderDtpt .info .imgList h5{font-weight: 700;font-size: 16px;line-height: 24px;color: #22242B;padding: 24px 0 12px;}
.ppOderDtpt .info ul{padding-top: 8px;padding-bottom: 7px;}
.ppOderDtpt .info .imgList .swiper-slide{width: 120px;height: 120px;border-radius: 16px;overflow: hidden;}
.ppOderDtpt .info .imgList .swiper-slide:after{content: '';position: absolute;background-image: url("/static/images/icon/iconImgView.svg");width: 30px;height: 30px;right: 8px;bottom: 8px;background-size: 30px 30px;background-repeat: no-repeat;pointer-events: none;}
.ppOderDtpt .info .imgList .swiper-slide img{width: 100%;height: 100%;object-fit: cover;cursor: pointer;}
.ppOderDtpt .info .buttonDiv{text-align: center;}
/* 주문상세 - mobile*/
.body-m .ppOderDtpt .info .header:after{top: 16px;right: 16px;}
.body-m .ppOderDtpt .info .header > div{background: #FFFFFF;border-radius: 8px;text-align: center;margin-top: 16px;}
.body-m .ppOderDtpt .info .header > div p{font-weight: 500;font-size: 14px;line-height: 20px;letter-spacing: -0.02em;color: #535867;padding: 12px 0;}
.body-m .ppOderDtpt .info ul{padding-top: 32px;}
.body-m .ppOderDtpt .info .buttonDiv{position: fixed;bottom: 32px;left: 0;display: flex;width: calc(100% - 40px);padding: 0 20px;}
.body-m .ppOderDtpt .info .buttonDiv button{width: 116px;}
.body-m .ppOderDtpt .info .buttonDiv button:last-child{width: 100%;flex: 1;margin-left: 8px;}
/* 고객 리스트 */
.cstList .tableDiv{height: 385px;}
.cstList .tableDiv > p{width: 720px;margin: 0 auto;text-align: right;padding-bottom: 10px;font-size: 15px;}
.body-m .cstList{text-align: right;padding-bottom: 100px;}
.body-m .cstList button.iconText{right: 17px;}
.body-m .cstList .searchTopDiv{margin-bottom: 10px;}
.body-m .cstList > button{height: 48px;width: 200px;margin: 0 auto;display: block;position: fixed;bottom: 32px;left: 50%;transform: translateX(-50%);}
/* 주문 리스트 */
.oderList .searchTopDiv{width: 800px;}
.oderList .searchTopDiv select{width: 100px;border: none;}
.oderList .searchTopDiv > div .dateSpan input{width: 60px !important;}
.oderList .tableDiv{height: 385px;}
.oderList .tableDiv table td{cursor: pointer;}
.oderList .badge{background: #E9EDF6;border-radius: 100px;width: 58px;font-weight: 700;font-size: 10px;line-height: 18px;display: flex;align-items: center;text-align: center;letter-spacing: -0.02em;justify-content: center;height: 24px;margin: 0 auto;}
.oderList .badge.type02{background: #02B763;color: #FFFFFF;}
.oderList .badge.type03{background: #FFEDDC;color: #FF8718;}
.oderList .badge.type04{background: #DFEEFF;color: #0C75F1;}
.oderList .oderCancel ul{margin: 0 auto;width: 130px;font-weight: 500;font-size: 14px;line-height: 22px;color: #787E91;padding-bottom: 10px;}
.oderList .oderCancel ul li{padding: 5px 0;}
.oderList .oderCancel ul li input{position: relative;top: 1px;}
.oderList .oderCancel p{padding-bottom: 5px;}
.oderList .tableDiv > p{width: 800px;margin: 0 auto;text-align: right;padding-bottom: 10px;font-size: 15px;}
/* 주문 리스트 - mobile*/
.body-m .oderList .searchTopDiv{width: 100%;}
.body-m .oderList .searchTopDiv select{width: 100px;}
.body-m .oderList .tableDiv table td.one{padding: 140px 0;}
.body-m .oderList button.iconText{right: 17px;}
/* 주문 */
.insOder{display: flex;max-width: 1000px;margin: 0 auto;}
.insOder #delyMensDiv{flex-wrap: wrap;display: flex;gap: 5px 16px;}
.insOder #delyMensDiv > span{padding: 0;}
.insOder .inpDiv{padding: 15px 30px 0;width: 400px;flex: 1;position: relative;}
.insOder .inpDiv .rpreNoDiv{height: 36px;position: relative;}
.insOder .inpDiv .rpreNoDiv > button{top: 0;right: 0;}
.insOder .inpDiv .rpreNoDiv > span{display: flex;align-items: center;justify-content: center;font-weight: 500;font-size: 11px;line-height: 19px;letter-spacing: -0.02em;color: #363A44;background: #F2FCF7;height: 36px;width: 162px;border-radius: 8px;}
.insOder .inpDiv .rpreNoDiv > span em{color: #00AB5B;font-style: normal;padding-left: 8px;}
.insOder .inpDiv .rpreNoDiv > div{background: #F2FCF7;display: inline-block;}
.insOder .inpDiv .rpreNoDiv > div p{font-weight: 500;font-size: 11px;color: #363A44;}
.insOder .inpDiv form > ul{padding-top: 16px;}
.insOder .inpDiv form > ul > li > div.half > div:first-child{width: 270px;flex: none;}
.insOder .inpDiv form > ul > li > div.half .flex{display: flex;}
.insOder .inpDiv > button{height: 48px;width: 200px;margin: 0 auto;display: block;}
.insOder .inpDiv .inputSpan select{width: 100%;}
.insOder .inpDiv .inputSpan input[type=checkbox]{display: none;}
.toastOderCpl{border-radius: 12px;background: #22242A;box-shadow: 0px 8px 16px 0px rgba(34, 36, 42, 0.10);color: #FFF;font-size: 16px;font-style: normal;font-weight: 700;line-height: 22px;letter-spacing: -0.32px;padding: 21px 0;position: absolute;width: calc(100% - 80px);z-index: 1;transition: 0.5s all;opacity: 0;top: -30px;pointer-events: none;max-width: 1000px;left: 50%;transform: translateX(-50%);}
.toastOderCpl.show{opacity: 1;top: 55px;}
.toastOderCpl div{display: flex;align-items: center;justify-content: center;}
.toastOderCpl div img{padding-right: 8px;}
.insOder .rightDiv{width: calc(100% - 710px);display: flex;flex-direction: column;background: #F4F6FB;}
.insOder .rightDiv .cst{height: 100%;display: flex;}
.insOder .rightDiv .cst ul{calc(100% - 32px);flex: 1;padding: 16px;display: flex;flex-direction: column;gap: 8px;}
.insOder .rightDiv .cst ul li{background: #FFFFFF;border-radius: 8px;color: #363A44;display: flex;align-items: center;padding: 5px 16px;min-height: 73px;height: 100%;}
.insOder .rightDiv .cst ul li.on{border: 1px solid #C8CFE2;}
.insOder .rightDiv .cst ul li.on i{background-image: url("/static/images/icon/iconCheckbox.svg");background-size: 24px 24px;width: 24px;height: 24px;}
.insOder .rightDiv .cst ul li div{flex: 1;}
.insOder .rightDiv .cst ul li div h5{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;}
.insOder .rightDiv .cst ul li div p{font-weight: 500;font-size: 12px;line-height: 16px;letter-spacing: -0.02em;color: #787E91;}
.insOder .rightDiv .cst ul li div span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;}
.insOder .rightDiv .cst .btnUnDownDiv{display: flex;flex-direction: column;padding: 16px 16px 9px 0;}
.insOder .rightDiv .cst .btnUnDownDiv button{height: 100%;background: #FFFFFF;border: 1px solid #DFE4F1;border-radius: 8px;width: 55px;background-image: url("/static/images/icon/iconArrowDown.svg");background-position: center;background-repeat: no-repeat;background-size: 24px;}
.insOder .rightDiv .cst .btnUnDownDiv button:active{background-color: #02B763;color: #FFFFFF;background-image: url("/static/images/icon/iconArrowDownWhite.svg");}
.insOder .rightDiv .cst .btnUnDownDiv button.btnUp{margin-bottom: 8px;background-image: url("/static/images/icon/iconArrowUp.svg");}
.insOder .rightDiv .cst .btnUnDownDiv button.btnUp:active{background-image: url("/static/images/icon/iconArrowUpWhite.svg");}
.insOder .sideDiv{width: calc(100% - 780px);}
.insOder .sideDiv h5{padding: 13px 10px;}
.insOder .sideDiv ul{padding-left: 10px;}
.insOder .sideDiv ul li{padding: 8px;font-size: 14px;margin-bottom: 10px;background: #E9EDF6;box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);border-radius: 10px;}
.insOder .sideDiv ul li.type02{background: #02B763;color: #FFFFFF;}
.insOder .sideDiv ul li.type02 a{color: #FFFFFF;}
.insOder .sideDiv ul li.type03{background: #FFEDDC;color: #FF8718;}
.insOder .sideDiv ul li.type03 a{color: #FF8718;}
.insOder .sideDiv ul li.type04{background: #DFEEFF;color: #0C75F1;}
.insOder .sideDiv ul li.type04 a{color: #0C75F1;}
.insOder .sideDiv ul li div{display: flex;align-items: center;padding-bottom: 5px;}
.insOder .sideDiv ul li div .badge{border: 1px solid;border-radius: 100px;width: 58px;font-weight: 700;font-size: 10px;line-height: 18px;display: flex;align-items: center;text-align: center;letter-spacing: -0.02em;justify-content: center;height: 24px;margin-right: 5px;}
.insOder .sideDiv ul li > p{padding-top: 5px;}
.insOder .oderCancel ul{margin: 0 auto;width: 130px;font-weight: 500;font-size: 14px;line-height: 22px;color: #787E91;padding-bottom: 10px;}
.insOder .oderCancel ul li{padding: 5px 0;}
.insOder .oderCancel ul li input{position: relative;top: 1px;}
.insOder .oderCancel p{padding-bottom: 5px;}
.insOder form > ul > li{padding-bottom: 10px;}
@media (max-width: 1000px) {
.insOder .sideDiv{display: none;}
.insOder .rightDiv{width: 320px;};
}
/* 주문 - 모바일*/
.body-m .insOder .inpDiv{padding: 15px 20px;width: 100%;}
.body-m .insOder .inpDiv form{padding-bottom: 70px;}
.body-m .toastOderCpl{width: calc(100% - 40px);top: -90px;left: 50%;transform: translateX(-50%);}
.body-m .toastOderCpl.show{top: 10px;}
.body-m .insOder .inpDiv .searchDiv{padding-bottom: 20px;}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv{position: relative;}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv input{padding: 13px 16px;font-size: 16px;width: calc(100% - 34px);}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv i{right: 50px;}
.body-m .insOder .inpDiv .searchDiv.active div.cphoneDiv input{border-radius: 8px 8px 0 0;}
.body-m .insOder .inpDiv .searchDiv div.cphoneDiv img{position: absolute;right: 16px;top: 0;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv{height: 264px;background: #F4F6FB;border: 1px solid #DFE4F1;border-radius: 0px 0px 8px 8px;display: none;}
.body-m .insOder .inpDiv .searchDiv.active div.cstDiv{display: flex;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul{padding: 9px 16px;flex: 1;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li{background: #FFFFFF;border-radius: 8px;color: #363A44;min-height: 58px;display: flex;align-items: center;padding: 6px 0 6px 16px;margin-top: 8px;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li.on{border: 1px solid #C8CFE2;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li.on i{background-image: url("/static/images/icon/iconCheckbox.svg");background-size: 24px 24px;width: 24px;height: 24px;margin-right: 16px;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div{flex: 1;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div h5{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div p{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv ul li div span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #787E91;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv{display: flex;flex-direction: column;padding: 16px 16px 9px 0;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button{height: 100%;background: #FFFFFF;border: 1px solid #DFE4F1;border-radius: 8px;width: 50px;background-image: url("/static/images/icon/iconArrowDown.svg");background-position: center;background-repeat: no-repeat;background-size: 24px;}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button:active{background-color: #02B763;color: #FFFFFF;background-image: url("/static/images/icon/iconArrowDownWhite.svg");}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button.btnUp{margin-bottom: 8px;background-image: url("/static/images/icon/iconArrowUp.svg");}
.body-m .insOder .inpDiv .searchDiv div.cstDiv .btnUnDownDiv button.btnUp:active{background-image: url("/static/images/icon/iconArrowUpWhite.svg");}
.body-m .insOder .inpDiv .searchDiv .inputSpan input[type=text]:not(:placeholder-shown) + i + img{display: none;}
.body-m .insOder .inpDiv .searchDiv .inputSpan input[type=text]:not(:placeholder-shown) + i{right: 16px;}
.body-m .insOder .inpDiv > button{position: sticky;bottom: 32px;}
.body-m #oderDrcLdtnAmt{padding-right: 27px;width: calc(100% - 45px);}
/* 주문(고객) */
.insCstOder{height: calc(100% - 51px);overflow: hidden}
.insCstOder > div{height: 100%;position: relative;box-sizing: initial;transition: 0.3s all;width: 100%;display: flex;}
.insCstOder > div.step1{transform: translate3d(-100%, 0px, 0px);}
.insCstOder > div.step2{transform: translate3d(-200%, 0px, 0px);}
.insCstOder > div > div{width: 100%;height: 100%;flex-shrink: 0;display: flex;}
.insCstOder > div > div.cstSelectBox{display: flex;align-items: center;justify-content: center;gap: 20px;padding: 0 20px;width: calc(100% - 40px);}
.insCstOder > div > div.cstSelectBox > button{height: 170px;border-radius: 10px;font-size: 20px;font-weight: 700;}
.insCstOder > div > div.cstSelectBox > button span{font-size: 16px;display: block;padding-top: 20px;font-weight: 400;word-break: keep-all;}
.insCstOder > div > div.cstSelectBox > button:first-child{background-color: #FFFFFF;color: #363A44;border: 1px solid #DFE4F1;}
.insCstOder > div > div.cstSelectBox > button:last-child{background-color: #02B763;}
.insCstOder > div .inpDiv{overflow-y: auto;}
.insCstOder > div .inpDiv > button{display: none;position: sticky;left: 0;transform: translateX(0);}
.insCstOder > div.step1 .inpDiv > button,
.insCstOder > div.step2 .inpDiv > button{display: block;}
.insCstOder > div .phoneAuthArea{display: flex;justify-content: center;width: 100%;height: 100%;align-items: center;}
.insCstOder > div .phoneAuthArea ul{width: 250px;}
.insCstOder > div .phoneAuthArea ul li{padding-bottom: 20px;}
.insCstOder > div .phoneAuthArea ul li label{font-size: 16px;padding-bottom: 10px;display: block;}
.insCstOder > div .phoneAuthArea ul li input{font-size: 16px;padding: 12px 36px 12px 16px;}
/* 첫 화면 wrapper - 기존 버튼 영역 + QR 출력 버튼을 세로로 배치 (m/pc 공통) */
.insCstOder > div > div.cstSelectWrap{flex-direction: column;align-items: center;justify-content: center;gap: 20px;padding: 0 20px;width: calc(100% - 40px);}
.insCstOder > div > div.cstSelectWrap .cstSelectBox{display: flex;align-items: center;justify-content: center;gap: 20px;width: 100%;}
.insCstOder > div > div.cstSelectWrap .cstSelectBox > button{height: 170px;border-radius: 10px;font-size: 20px;font-weight: 700;}
.insCstOder > div > div.cstSelectWrap .cstSelectBox > button span{font-size: 16px;display: block;padding-top: 20px;font-weight: 400;word-break: keep-all;}
.insCstOder > div > div.cstSelectWrap .cstSelectBox > button:first-child{background-color: #FFFFFF;color: #363A44;border: 1px solid #DFE4F1;}
.insCstOder > div > div.cstSelectWrap .cstSelectBox > button:last-child{background-color: #02B763;}
/* QR코드 출력 버튼 - 기존 버튼 영역 바로 아래 가로 풀폭 */
.insCstOder > div > div.cstSelectWrap > button.qrPrintBtn{width: 100%;height: 56px;border-radius: 10px;font-size: 18px;font-weight: 700;background-color: #02B763;}
@media (max-width: 500px) {
.body-m .insCstOder > div .cstSelectBox > button{width: 200px;}
}
.cstHome{border: none;background: none;}
.cstHome > img{width: 20px;}
/* keypad */
.keypadDiv{display: none;}
.keypadDiv.show{display: block;}
.keypadDiv .keypad{position: fixed;right: 0;bottom: 0;width: 250px;animation-duration: 0.2s;animation-fill-mode: forwards;transition: 0.2s all;z-index: 99999999;;}
.keypadDiv.show .keypad{animation-name: keypadShow;}
.keypadDiv.hide .keypad{animation-name: keypadHide;}
.keypadDiv .keypad .btnDiv{display: flex;padding: 10px 0;}
.keypadDiv .keypad .btnDiv button{height: 48px;box-shadow: none;flex: 1;}
.keypadDiv .keypad .btnDiv button:first-child{width: 92px;margin-right: 8px;flex: none;}
.keypad{background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 16px 16px 0px 0px;padding: 17px 16px 0;}
.keypad input{margin-bottom: 16px;}
.keypad table{width: 100%;border-spacing: 4px;}
.keypad table tbody td button{background: #F4F6FB;border-radius: 8px;height: 48px;text-align: center;font-weight: 500;font-size: 18px;line-height: 26px;letter-spacing: -0.02em;color: #4D5980;width: 100%;border: none;}
.keypad table tbody td button:active{background: #02B763;color: #FFFFFF;}
@keyframes keypadShow {
0%{transform: translateY(100%);}
100%{transform: translateY(0);}
}
@keyframes keypadHide {
0%{transform: translateY(0);}
100%{transform: translateY(100%);}
}
/* 결제 */
.ldtnList > div{width: 478px;margin: 0 auto;padding-top: 16px;}
.ldtnList > div .tab{background: #F8F9FC;border: 1px solid #F0F2F9;border-radius: 1000px;height: 40px;width: 350px;display: flex;margin: 0 auto;}
.ldtnList > div .tab li{font-weight: 700;font-size: 14px;line-height: 22px;text-align: center;letter-spacing: -0.02em;color: #787E91;width: 100%;padding: 9px 0 11px;cursor: pointer;}
.ldtnList > div .tab li.active{background: #FFFFFF;border: 1px solid #535867;box-shadow: 0px 4px 8px rgba(34, 36, 43, 0.1);border-radius: 1000px;color: #535867;}
.ldtnList > div > p{margin-top: 16px;padding: 10px 0;background: #F2FCF7;border-radius: 8px;font-weight: 500;font-size: 11px;line-height: 19px;letter-spacing: -0.02em;text-align: center;}
.ldtnList > div > p span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #00AB5B;}
.ldtnList > div .list li{display: flex;background: #FFFFFF;border: 1px solid #F0F2F9;border-radius: 8px;padding: 11px 24px;margin-top: 8px;align-items: center;}
.ldtnList > div .list li span{font-weight: 500;font-size: 12px;line-height: 20px;letter-spacing: -0.02em;color: #535867;}
.ldtnList > div .list li span.cstNm{width: 80px}
.ldtnList > div .list li span.dtc{width: 60px}
.ldtnList > div .list li span.date{flex: 1;}
.ldtnList > div .list li span.amt{color: #363A44;font-weight: 700;}
.ldtnList > div .list li span.amt:before{content: '';background: url("/static/images/icon/iconPay.svg") no-repeat;background-size: 16px 16px; width: 16px;height: 16px;display: inline-block;position: relative;top: 4px;right: 4px;}
.ldtnList > div .list li.noData{justify-content: center;padding: 150px 0;}
.ldtnList > div .list.card li span:first-child{flex: 1;text-align: left;display: flex;align-items: center;padding-right: 5px;}
.ldtnList > div .list.card li span:nth-child(2){width: 180px;text-align: left;}
.ldtnList > div .list.card li span:nth-child(3){width: 30px;}
.ldtnList > div .list.card li span > img{width: 30px;}
.ldtnList > div .list.card li span a{color: #535867;text-decoration: underline;text-underline-position: under;}
.ldtnList .tabContent{position: relative;}
.ldtnList .tabContent > button{width: 200px;top: 400px;position: absolute;transform: translateX(-50%);}
/* 결제 - 모바일 */
.body-m .ldtnList > div{width: 100%}
.body-m .ldtnList .tabContent > button{width: 200px;position: fixed;bottom: 32px;left: 50%;top: auto;}
.body-m .ldtnList > div .list.card li span:nth-child(2){width: 140px;}
/* 공지 */
.anncList > div.tabDiv{width: 478px;margin: 0 auto;padding-top: 16px;}
.anncList > div.tabDiv .tab{background: #F8F9FC;border: 1px solid #F0F2F9;border-radius: 1000px;height: 40px;width: 250px;display: flex;margin: 0 auto;}
.anncList > div.tabDiv .tab li{font-weight: 700;font-size: 14px;line-height: 22px;text-align: center;letter-spacing: -0.02em;color: #787E91;width: 100%;padding: 9px 0 11px;cursor: pointer;}
.anncList > div.tabDiv .tab li.active{background: #FFFFFF;border: 1px solid #535867;box-shadow: 0px 4px 8px rgba(34, 36, 43, 0.1);border-radius: 1000px;color: #535867;}
.anncList > div.tableDiv{padding-top: 20px;height: 357px;}
/* 공지 - 모바일 */
.body-m .anncList > div.tabDiv{width: 100%;}
/* 공지 상세 */
.ppAnncDtpt .header{background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;display: flex;padding: 24px;background: #F4F6FB;border-radius: 16px;align-items: flex-end;margin-bottom: 16px;}
.ppAnncDtpt .header p{font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;flex: 1;padding-right: 24px;}
.ppAnncDtpt .header span{font-weight: 500;font-size: 14px;line-height: 22px;display: flex;align-items: center;color: #787E91;}
.ppAnncDtpt .ck.ck-editor__editable_inline{padding: 0;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){border: none;height: 356px;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar{width: 5px;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-track{background: #F1F1F1;}
.ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-thumb{background: #C1C1C1;height: 20%;border-radius: 10px;}
.ppAnncDtpt.urgency .headerDiv button{display: none;}
.ppAnncDtpt.urgency .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){border: none;height: 250px;}
.ppAnncDtpt.urgency .bottom{display: block !important;text-align: center;}
.ppAnncDtpt.urgency .bottom > span{justify-content: center;padding: 18px 0;}
.ppAnncDtpt.urgency .bottom > button{width: 200px;}
.ppAnncDtpt.urgency .bottom > button:disabled{cursor: default;background-color: #E9EDF6;color: #A7ADBF;box-shadow: none;}
.ppAnncDtpt.urgency h3:before{content: '';background-image: url("/static/images/icon/iconUrgency.svg");height: 24px;width: 24px;display: inline-block;position: relative;top: 7px;margin-right: 8px;}
/* 공지 상세 - 모바일 */
.body-m .ppAnncDtpt .header{border-bottom: 1px solid #F0F2F9;background: none;box-shadow: none;border-radius: 0;display: block;padding: 0 0 25px 0;}
.body-m .ppAnncDtpt .header p{font-weight: 500;font-size: 24px;line-height: 36px;color: #363A44;padding-bottom: 8px;padding-right: 0;}
.body-m .ppAnncDtpt .header span{display: block;}
.body-m .ppAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){height: auto;}
.body-m .ppAnncDtpt.urgency .bottom{padding-bottom: 20px;}
.body-m .ppAnncDtpt.layerPopup .headerDiv h3{text-align: center;}
.body-m .ppAnncDtpt.urgency h3:before{height: 24px;width: 24px;top: 6px;}
/* 긴급 공지 상세 */
.ppUrgtAnncDtpt .header{background: #FFFFFF;box-shadow: 0px -4px 8px rgba(34, 36, 43, 0.05);border-radius: 32px;display: flex;padding: 24px;background: #F4F6FB;border-radius: 16px;align-items: flex-end;margin-bottom: 16px;}
.ppUrgtAnncDtpt .header p{font-weight: 700;font-size: 16px;line-height: 24px;color: #363A44;flex: 1;padding-right: 24px;}
.ppUrgtAnncDtpt .header span{font-weight: 500;font-size: 14px;line-height: 22px;display: flex;align-items: center;color: #787E91;}
.ppUrgtAnncDtpt .ck.ck-editor__editable_inline{padding: 0;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){border: none;height: 356px;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar{width: 5px;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-track{background: #F1F1F1;}
.ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused)::-webkit-scrollbar-thumb{background: #C1C1C1;height: 20%;border-radius: 10px;}
/* 긴급 공지 상세 - 모바일 */
.body-m .ppUrgtAnncDtpt .header{border-bottom: 1px solid #F0F2F9;background: none;box-shadow: none;border-radius: 0;display: block;padding: 0 0 25px 0;}
.body-m .ppUrgtAnncDtpt .header p{font-weight: 500;font-size: 24px;line-height: 36px;color: #363A44;padding-bottom: 8px;padding-right: 0;}
.body-m .ppUrgtAnncDtpt .header span{display: block;}
.body-m .ppUrgtAnncDtpt .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){height: auto;}
/* 이미지 확대 */
.img-expand{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #22242A;z-index: 1;border-radius: 16px;}
.img-expand > div{position: relative;margin: 0 auto;height: 100%;}
.img-expand > div .head{padding: 16px 16px 4px;text-align: right;}
.img-expand > div .head .close{width: 40px;height: 40px;background-color: #000000;border: none;border-radius: 8px;display: inline-flex;align-items: center;justify-content: center;}
.img-expand > div .cont{height: 90%;}
.img-expand > div .cont img{width: 80%;position: relative;top: 45%;transform: translateY(-50%);margin: 0 auto;display: block;}
.img-expand > div.height .cont{position: relative;margin: 0 auto;max-width: 80%;}
.img-expand > div.height .cont img{height: 100%;position: unset;transform: none;width: auto;}
/* 이미지 확대 */
.body-m .img-expand{border-radius: 0;}
.body-m .img-expand > div .head{width: calc(100% - 32px);}
.body-m .img-expand > div .cont{height: 90%;width: 100%;}
/* editor */
.ppAnncDtpt .ck.ck-editor__main>.ck-content p{margin-bottom: 1rem;}
/* 카카오톡 채널 */
.divKakaoTalkChat{position: fixed;right: 47px;bottom: 10px;}
.divKakaoTalkChat img{box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);border-radius: 100%;width: 60px;}
.body-m .divKakaoTalkChat{right: 14px;bottom: 70px;}
.body-m .divKakaoTalkChat img{width: 45px;}
/* 카드 정보 */
.ppCardDtpt ul.list > li label{width: 100px;}
.ppCardDtpt ul.list > li input{padding: 8px;width: calc(100% - 18px);font-size: 14px;}
.ppCardDtpt ul.list > li .space{padding: 0 3px;}
.ppCardDtpt ul.list > li div{display: flex;align-items: center;}
.ppCardDtpt > .show{width: 400px;}
.ppCardDtpt > .show .info > p{font-size: 14px;color: #ff0000;}
.ppCardDtpt .buttonDiv{padding-top: 10px;text-align: center;margin-top: 10px;}
/* 카드 정보 - 모바일 */
.body-m .ppCardDtpt ul.list > li{flex-direction: column;align-items: flex-start;padding-bottom: 0px;}
.body-m .ppCardDtpt ul.list > li label{width: 100%;padding-bottom: 5px;}
.body-m .ppCardDtpt .buttonDiv{display: flex;gap: 10px;justify-content: center;}
.body-m .ppCardDtpt > .show .info > p{padding-top: 10px;}
/* 장보기 주문 toast */
.toast-popup {position: fixed;bottom: 100px;left: 50%;transform: translateX(-50%);background-color: #4CAF50;color: white;padding: 14px 24px;border-radius: 8px;font-size: 16px;box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);display: flex;align-items: center;animation: fadeInOut 1s ease-in-out, toastGlow 1s infinite alternate;z-index: 0;cursor: pointer;}
.toast-icon {margin-right: 10px;font-size: 20px;}
/* 장보기 주문 toast - 모바일 */
.body-m .toast-popup{width: 280px;}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateX(-50%) translateY(50%); }
100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastGlow {
0% {box-shadow: 0 0 8px rgba(76, 175, 80, 0.1);}
100% {box-shadow: 0 0 14px rgba(1, 1, 1, 0.6);}
}
/* 장보기 내역 팝업 */
.ppOderShppDtpt .header ul{display: flex;align-items: center;gap: 10px;padding-bottom: 20px;}
.ppOderShppDtpt .header ul li{}
.ppOderShppDtpt .header ul li button{color: #000000;height: auto;padding: 5px 15px;font-size: 14px;letter-spacing: 0;font-weight: 500;}
.ppOderShppDtpt .header ul li button.on{color: #ffffff;background-color: #02B763;}
.ppOderShppDtpt .header .swiper-slide{width: 120px;}
.ppOderShppDtpt .header .swiper-slide button{color: #000000;height: auto;padding: 5px 15px;font-size: 14px;letter-spacing: 0;font-weight: 500;}
.ppOderShppDtpt .header .swiper-slide button.on{color: #ffffff;background-color: #02B763;font-weight: 700;}
.ppOderShppDtpt .buttonDiv{padding-top: 10px;text-align: center;margin-top: 10px;}
.body-m .ppOderShppDtpt .buttonDiv{position: fixed;bottom: 32px;left: 0;display: flex;width: calc(100% - 40px);left: 50%;transform: translateX(-50%);justify-content: center;}
/* 주문 완료 - 고객 모바일용 */
.body-m .oderCpl div{display: flex;flex-direction: column;align-items: center;padding-top: 200px;font-size: 20px;}
.body-m .oderCpl div img{width: 50px;margin-bottom: 20px;}
.body-m .oderCpl{background: linear-gradient(135deg, #f0f4f8, #d9e4f5);display: flex;justify-content: center;align-items: center;margin: 0;height: 100vh;}
.body-m .oderCpl .container {background: #ffffff;padding: 40px;border-radius: 12px;box-shadow: 0 8px 20px rgba(0,0,0,0.1);text-align: center;max-width: 400px;}
.body-m .oderCpl .container h1 {font-size: 22px;color: #333;margin-bottom: 20px;}
.body-m .oderCpl .container p {font-size: 16px;color: #555;line-height: 1.6;margin: 10px 0;}
.body-m .oderCpl .container .highlight {color: #2a6edc;font-weight: bold;}
/* QR코드 출력용 인증번호 박스 */
.body-m .oderCpl .container .qrAuthBox{padding: 20px 18px;margin-top: 24px;font-size: initial;background: linear-gradient(135deg, #eef3ff, #e3ecff);border: 1px solid #d3e0ff;border-radius: 14px;gap: 8px;width: 100%;box-sizing: border-box;}
.body-m .oderCpl .container .qrAuthBox .qrAuthLabel{font-size: 14px;color: #5a6b85;font-weight: 500;}
.body-m .oderCpl .container .qrAuthBox .qrAuthNum{font-size: 38px;font-weight: 800;letter-spacing: 6px;color: #2a6edc;line-height: 1.2;margin: 2px 0;}
.body-m .oderCpl .container .qrAuthBox .qrAuthDesc{font-size: 12px;color: #8a96a8;}
/* QR 라벨 인쇄 (PC) - 55mm x 75mm 라벨 용지 */
/* .qrPage 높이는 용지(75mm)보다 살짝 작게 - px 반올림으로 페이지를 넘치면 다음 장부터 위로 밀림 */
#oderQrPrintWrap { display: block !important;margin: 0;padding: 0;}
#oderQrPrintWrap .qrPage {width: 55mm;height: 74mm;margin: 0;padding: 1.5mm 3mm;box-sizing: border-box;overflow: hidden;page-break-after: always;break-after: page;page-break-inside: avoid;break-inside: avoid;}
#oderQrPrintWrap .qrPage:last-child {page-break-after: auto;break-after: auto;}
#oderQrPrintWrap .qrPage h1 {margin: 0;padding: 0;font-size: 4mm;line-height: 1.3;text-align: left;word-break: break-all;}
#oderQrPrintWrap .qrPage h1 em {font-size: 6.5mm;font-weight: 700;}
#oderQrPrintWrap .qrPage h1 em .rpreNoHead{font-size: 5.5mm;}
#oderQrPrintWrap .qrPage h1 em .rpreNoTail{font-size: 8mm;}
#oderQrPrintWrap .qrPage h2 {margin: 0;padding: 0 0 1mm;font-size: 4mm;}
#oderQrPrintWrap .oderQrNo {display: flex !important;flex-direction: column;align-items: center;justify-content: flex-start;font-size: 3.5mm;margin: 1mm 0 0;}
#oderQrPrintWrap .oderQrNo > div:first-child {text-align: left;width: 100%;min-width: 0;font-size: 4mm}
#oderQrPrintWrap .oderQrCode {flex: 0 0 auto;margin-top: 1mm;}
#oderQrPrintWrap .oderQrCode img {width: 35mm !important;height: 35mm !important;image-rendering: pixelated;}
#oderQrPrintWrap .qrPage p {margin: 1mm 0 0;font-size: 4mm;text-align: center;}
.body-m #oderQrPrintWrap { display: block !important; }
/* 캡처 전용 영역 - 기기 화면 크기와 무관하게 라벨(55x75mm) 비율의 고정 px로 유지해야 폰/태블릿 출력이 동일함. 급지 길이 보정은 앱에서 처리 */
.body-m #oderQrPrintWrap .qrPage {width: 388px;box-sizing: border-box;page-break-after: always;break-after: page;overflow: hidden;height: 528px;}
.body-m #oderQrPrintWrap .qrPage:last-child {page-break-after: auto;break-after: auto;}
.body-m #oderQrPrintWrap .oderQrNo div{text-align: left;font-size: 24px;padding-top: 10px;}
.body-m #oderQrPrintWrap .oderQrNo div em{font-size: 42px;}
.body-m #oderQrPrintWrap .qrPage {padding-left: 10px;display: flex;align-items: center;}
.body-m #oderQrPrintWrap .qrPage > div{flex: 1;padding: 0 10px;}
.body-m #oderQrPrintWrap .qrPage h1{margin: 0;font-size: 28px;padding: 0;width: 100%;}
.body-m #oderQrPrintWrap .qrPage h1 em{font-size: 44px;line-height: 53px;}
/* 접수번호 앞/뒷자리 크기 차등 - line-height 고정으로 줄 높이(53px) 유지 */
.body-m #oderQrPrintWrap .qrPage h1 em .rpreNoHead{font-size: 36px;line-height: 53px;}
.body-m #oderQrPrintWrap .qrPage h1 em .rpreNoTail{font-size: 52px;line-height: 53px;}
.body-m #oderQrPrintWrap .qrPage h2{margin: 0;font-size: 28px;padding: 10px 0 10px 0;width: 100%;}
.body-m #oderQrPrintWrap .oderQrNo {text-align: left;font-size: 28px;margin: 0 0 12px;display: flex !important;align-items: center;justify-content: space-between;flex-direction: column;}
.body-m #oderQrPrintWrap .oderQrCode img {width: 240px !important;height: 240px !important;image-rendering: pixelated;}
.body-m #oderQrPrintWrap .qrPage p {font-size: 34px;line-height: 34px;}
/* QR 라벨 인쇄 - 55mm x 75mm 라벨 용지 */
@media print {
@page {
size: 55mm 75mm;
margin: 0;
}
}
/* ═══════════════════════════════════════════════════════════
고객 접수 3단계 위저드 (insCstOder) - 디자인: 접수 화면 3단계
태블릿 기준으로 작성 후 모바일(~767px) 미디어쿼리로 축소 대응
═══════════════════════════════════════════════════════════ */
.cstOderWiz{display: flex;flex-direction: column;min-height: calc(100vh - 51px);min-height: calc(100dvh - 51px);background: #F4F6F8;color: #1A1D1F;}
.cstOderWiz.d-none{display: none;}
.cstOderWiz .wizScreen{flex: 1;display: flex;flex-direction: column;}
.cstOderWiz .wizScreen.d-none{display: none;}
/* 공통 입력 요소 - 전역 input/select 스타일 재정의 */
.cstOderWiz input[type=text],
.cstOderWiz input[type=tel]{box-sizing: border-box;height: 56px;padding: 0 18px;font-size: 17px;font-weight: 500;color: #1A1D1F;background: #FFFFFF;border: 2px solid #DDE1E6;border-radius: 14px;outline: none;width: 100%;}
.cstOderWiz input[type=text]::placeholder,
.cstOderWiz input[type=tel]::placeholder{color: #AAB1B8;}
.cstOderWiz input[type=text]:focus,
.cstOderWiz input[type=tel]:focus{border-color: #FEB415;}
.cstOderWiz input[type=text]:disabled,
.cstOderWiz input[type=text]:read-only{background: #F4F6F8;border-color: #E4E8EB;color: #5F6368;}
.cstOderWiz select{box-sizing: border-box;height: 56px;padding: 0 40px 0 16px;font-size: 17px;font-weight: 500;color: #1A1D1F;background-color: #FFFFFF;border: 2px solid #DDE1E6;border-radius: 14px;outline: none;background-position: calc(100% - 14px) center;}
.cstOderWiz select:focus{border-color: #FEB415;}
/* 공통 버튼 */
.cstOderWiz .wizPrimaryBtn{width: 100%;height: 64px;font-size: 20px;font-weight: 700;color: #2A1C00;background: #FEB415;border: none;border-radius: 16px;cursor: pointer;box-shadow: 0 6px 18px rgba(254, 180, 21, 0.38);}
.cstOderWiz .wizPrimaryBtn:active{background: #F5A800;}
.cstOderWiz .wizAmberBtn{flex: none;height: 56px;padding: 0 22px;font-size: 17px;font-weight: 700;color: #8A5A00;background: #FFF4DF;border: 2px solid #FFE0A3;border-radius: 14px;cursor: pointer;white-space: nowrap;}
.cstOderWiz .wizAmberBtn:active{background: #FFEBC2;}
.cstOderWiz .wizAmberSmBtn{height: 38px;padding: 0 14px;font-size: 14px;font-weight: 700;color: #8A5A00;background: #FFFFFF;border: 2px solid #FFE0A3;border-radius: 10px;cursor: pointer;}
.cstOderWiz .wizAmberSmBtn:active{background: #FFF4DF;}
.cstOderWiz .wizAmberSmBtn:disabled{color: #A7ADBF;background: #F4F6F8;border-color: #E4E8EB;cursor: default;}
.cstOderWiz .wizGhostBtn{flex: none;height: 46px;padding: 0 18px;font-size: 15px;font-weight: 500;color: #5F6368;background: #FFFFFF;border: 2px solid #DDE1E6;border-radius: 12px;cursor: pointer;white-space: nowrap;}
.cstOderWiz .wizGhostBtn:active{border-color: #B9C0C6;}
.cstOderWiz .wizBackBtn{align-self: flex-start;height: 48px;padding: 0 20px;font-size: 16px;font-weight: 500;color: #5F6368;background: transparent;border: 2px solid #DDE1E6;border-radius: 12px;cursor: pointer;}
.cstOderWiz .wizBackBtn:active{background: #EEF1F3;}
/* 필드 공통 */
.cstOderWiz .wizField{display: flex;flex-direction: column;gap: 10px;}
.cstOderWiz .wizField > label{font-size: 17px;font-weight: 700;color: #3C4043;display: flex;align-items: center;gap: 10px;}
.cstOderWiz .wizField .wizOptTxt{font-size: 14px;font-weight: 400;color: #9AA0A6;}
.cstOderWiz .wizField .wizFieldHint{margin: 0;font-size: 14px;color: #5F6368;}
.cstOderWiz .wizDtcKm{font-size: 14px;font-weight: 500;color: #8A5A00;}
.cstOderWiz .wizGrid2{display: grid;grid-template-columns: 1fr 1fr;gap: 14px;}
.cstOderWiz .wizInpMd{max-width: 380px;}
/* ───── 시작 화면 ───── */
.cstOderWiz .wizStart{align-items: center;justify-content: center;padding: 48px 24px;box-sizing: border-box;}
.cstOderWiz .wizStartInner{width: 100%;max-width: 1040px;display: flex;flex-direction: column;gap: 36px;}
.cstOderWiz .wizStartTitle{text-align: center;}
.cstOderWiz .wizStartTitle h2{margin: 0;font-size: 30px;font-weight: 700;letter-spacing: -0.8px;}
.cstOderWiz .wizStartTitle p{margin: 10px 0 0;font-size: 18px;color: #5F6368;}
.cstOderWiz .wizStartCards{display: grid;grid-template-columns: 1fr 1fr;gap: 24px;}
.cstOderWiz .wizCard{text-align: left;display: flex;flex-direction: column;gap: 14px;padding: 32px 28px;background: #FFFFFF;border: 2px solid #DDE1E6;border-radius: 22px;cursor: pointer;}
.cstOderWiz .wizCard:active{border-color: #FEB415;background: #FFFBF2;}
.cstOderWiz .wizCardIcon{width: 60px;height: 60px;border-radius: 16px;background: #F4F6F8;color: #5F6368;font-size: 28px;font-weight: 700;display: flex;align-items: center;justify-content: center;}
.cstOderWiz .wizCardTitle{font-size: 26px;font-weight: 700;color: #1A1D1F;letter-spacing: -0.6px;}
.cstOderWiz .wizCardDesc{font-size: 17px;color: #5F6368;line-height: 1.5;word-break: keep-all;}
.cstOderWiz .wizCardGo{font-size: 17px;font-weight: 700;color: #5F6368;margin-top: 4px;}
.cstOderWiz .wizCardPrimary{background: #FEB415;border-color: #FEB415;box-shadow: 0 10px 28px rgba(254, 180, 21, 0.38);}
.cstOderWiz .wizCardPrimary:active{background: #F5A800;border-color: #F5A800;}
.cstOderWiz .wizCardPrimary .wizCardIcon{background: #FFF0CC;color: #6B4400;}
.cstOderWiz .wizCardPrimary .wizCardTitle{color: #4A3000;}
.cstOderWiz .wizCardPrimary .wizCardDesc{color: #6B4A00;}
.cstOderWiz .wizCardPrimary .wizCardGo{color: #6B4A00;}
.cstOderWiz .wizInvoiceBtn{width: 100%;height: 62px;font-size: 19px;font-weight: 700;color: #8A5A00;background: #FFFFFF;border: 2px solid #FFE0A3;border-radius: 16px;cursor: pointer;}
.cstOderWiz .wizInvoiceBtn:active{background: #FFF4DF;}
.cstOderWiz .wizInvoiceBtn.d-none{display: none;}
/* ───── 기존고객 인증 화면 ───── */
.cstOderWiz .wizAuth{align-items: center;justify-content: center;padding: 48px 24px;box-sizing: border-box;}
.cstOderWiz .wizAuthInner{width: 100%;max-width: 620px;display: flex;flex-direction: column;gap: 24px;}
.cstOderWiz .wizAuthTitle h2{margin: 0;font-size: 28px;font-weight: 700;letter-spacing: -0.8px;}
.cstOderWiz .wizAuthTitle p{margin: 10px 0 0;font-size: 17px;color: #5F6368;}
.cstOderWiz .wizAuthCard{background: #FFFFFF;border: 1px solid #E4E8EB;border-radius: 20px;padding: 28px;display: flex;flex-direction: column;gap: 22px;}
.cstOderWiz .wizAuthPhoneRow{display: flex;gap: 12px;}
.cstOderWiz .wizAuthPhoneRow input{flex: 1;min-width: 0;}
.cstOderWiz .wizAuthPhoneRow .wizGhostBtn{height: 56px;border-radius: 14px;}
.cstOderWiz .wizAuthCodeLabel{display: flex;align-items: center;justify-content: space-between;}
.cstOderWiz .wizAuthCodeLabel label{font-size: 17px;font-weight: 700;color: #3C4043;}
.cstOderWiz #inpAuthNum{letter-spacing: 5px;}
/* ───── 스텝 인디케이터 ───── */
.cstOderWiz .wizSteps{flex: none;background: #FFFFFF;border-bottom: 1px solid #E4E8EB;padding: 16px 20px;}
.cstOderWiz .wizStepsInner{max-width: 1040px;margin: 0 auto;display: flex;align-items: center;}
.cstOderWiz .wizStepItem{display: flex;align-items: center;flex: 1;min-width: 0;}
.cstOderWiz .wizStepItem:last-child{flex: none;}
.cstOderWiz .wizStepDot{width: 42px;height: 42px;flex: none;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: 700;background: #EEF1F3;color: #AAB1B8;}
.cstOderWiz .wizStepTxt{display: flex;flex-direction: column;min-width: 0;padding-left: 10px;}
.cstOderWiz .wizStepTxt em{font-size: 12px;font-weight: 500;color: #9AA0A6;letter-spacing: 0.4px;}
.cstOderWiz .wizStepTxt strong{font-size: 16px;font-weight: 700;letter-spacing: -0.4px;color: #AAB1B8;white-space: nowrap;}
.cstOderWiz .wizStepBar{flex: 1;height: 4px;margin: 0 16px;border-radius: 2px;background: #E4E8EB;}
.cstOderWiz .wizStepItem.on .wizStepDot{background: #FEB415;color: #2A1C00;}
.cstOderWiz .wizStepItem.on .wizStepTxt strong{color: #1A1D1F;}
.cstOderWiz .wizStepItem.done .wizStepDot{background: #FFF4DF;color: #8A5A00;}
.cstOderWiz .wizStepItem.done .wizStepTxt strong{color: #1A1D1F;}
.cstOderWiz .wizStepItem.done .wizStepBar{background: #FEB415;}
/* ───── 스텝 본문 ───── */
.cstOderWiz .wizBody{flex: 1;padding: 28px 20px 40px;box-sizing: border-box;}
.cstOderWiz .wizBodyInner{max-width: 1040px;margin: 0 auto;}
.cstOderWiz .wizStep{display: flex;flex-direction: column;gap: 20px;}
.cstOderWiz .wizStep.d-none{display: none;}
.cstOderWiz .wizStepHead{display: flex;align-items: flex-end;justify-content: space-between;gap: 16px;}
.cstOderWiz .wizStepHead h3{margin: 0;font-size: 26px;font-weight: 700;letter-spacing: -0.8px;}
.cstOderWiz .wizStepHead p{margin: 6px 0 0;font-size: 16px;color: #5F6368;word-break: keep-all;}
.cstOderWiz .wizCardBox{background: #FFFFFF;border: 1px solid #E4E8EB;border-radius: 20px;padding: 26px;display: flex;flex-direction: column;gap: 26px;}
/* 주소 */
.cstOderWiz .wizAddrRow{display: flex;gap: 14px;}
.cstOderWiz .wizAddrRow input{flex: 1;min-width: 0;cursor: pointer;}
.cstOderWiz .wizAddrDtptRow{display: flex;gap: 14px;}
.cstOderWiz .wizAddrDtptRow .wizZipc{width: 160px;flex: none;}
.cstOderWiz .wizAddrDtptRow input:last-child{flex: 1;min-width: 0;}
/* 공동현관 */
.cstOderWiz .wizEnthRow{display: flex;gap: 14px;}
.cstOderWiz .wizEnthRow select{width: 240px;flex: none;}
.cstOderWiz .wizEnthRow input{flex: 1;min-width: 0;}
/* 비밀번호 입력란은 readonly 로 두고 전용 키패드로 입력하므로 일반 입력란처럼 보이게 처리 */
.cstOderWiz .wizEnthRow #oderJoinEnthPwTxt:read-only{background: #FFFFFF;border-color: #DDE1E6;color: #1A1D1F;cursor: pointer;}
.cstOderWiz .wizEnthRow #oderJoinEnthPwTxt:disabled{background: #F4F6F8;border-color: #E4E8EB;color: #5F6368;cursor: default;}
/* 접수번호 - 자동발급 안내 */
.cstOderWiz .wizRpreNoAuto{display: inline-flex;align-items: center;gap: 8px;font-size: 15px;font-weight: 500;color: #5F6368;background: #FFF4DF;border-radius: 12px;padding: 14px 18px;align-self: flex-start;}
.cstOderWiz .wizRpreNoAuto em{font-size: 17px;font-weight: 700;color: #8A5A00;}
/* 박스 수 버튼 */
.cstOderWiz .wizBoxBtns{display: flex;gap: 12px;max-width: 520px;}
.cstOderWiz .wizBoxBtn{flex: 1;height: 58px;font-size: 19px;font-weight: 700;border-radius: 14px;cursor: pointer;border: 2px solid #DDE1E6;background: #FFFFFF;color: #3C4043;}
.cstOderWiz .wizBoxBtn.on{border-color: #FEB415;background: #FEB415;color: #2A1C00;}
/* 배달물품 칩 */
.cstOderWiz .wizChipWrap{display: flex;flex-wrap: wrap;gap: 12px;}
.cstOderWiz .wizChip{display: flex;align-items: center;gap: 8px;padding: 10px 16px;border-radius: 14px;border: 2px solid #DDE1E6;background: #FFFFFF;}
.cstOderWiz .wizChip.d-none{display: none;}
.cstOderWiz .wizChip.on{border-color: #FEB415;background: #FFFAEF;}
.cstOderWiz .wizChip label{display: flex;align-items: center;gap: 10px;cursor: pointer;margin: 0;}
.cstOderWiz .wizChip input[type=checkbox]{width: 22px;height: 22px;accent-color: #FEB415;cursor: pointer;margin: 0;flex: none;}
.cstOderWiz .wizChip .wizChipTxt{font-size: 17px;font-weight: 500;color: #3C4043;white-space: nowrap;}
.cstOderWiz .wizChip.on .wizChipTxt{font-weight: 700;color: #8A5A00;}
.cstOderWiz .wizChip select{height: 42px;padding: 0 32px 0 12px;font-size: 15px;border-radius: 10px;background-position: calc(100% - 10px) center;}
.cstOderWiz .wizChip select:disabled{background-color: #F4F6F8;color: #AAB1B8;}
/* ───── 확인(STEP 3) 요약 ───── */
.cstOderWiz .wizSumBox{background: #FFFFFF;border: 1px solid #E4E8EB;border-radius: 20px;padding: 6px 24px 14px;}
.cstOderWiz .wizSumBox h4{margin: 0;font-size: 17px;font-weight: 700;color: #8A5A00;padding: 18px 0 8px;}
.cstOderWiz .wizSumRow{display: flex;align-items: center;gap: 16px;padding: 16px 0;border-top: 1px solid #EEF1F3;}
.cstOderWiz .wizSumLabel{width: 140px;flex: none;font-size: 15px;font-weight: 500;color: #5F6368;}
.cstOderWiz .wizSumVal{flex: 1;min-width: 0;font-size: 18px;font-weight: 500;color: #1A1D1F;word-break: break-all;}
.cstOderWiz .wizSumVal.empty{font-weight: 400;color: #AAB1B8;}
.cstOderWiz .wizSumEdit{flex: none;height: 44px;padding: 0 20px;font-size: 15px;font-weight: 700;color: #8A5A00;background: #FFFFFF;border: 2px solid #FFE0A3;border-radius: 12px;cursor: pointer;}
.cstOderWiz .wizSumEdit:active{background: #FFF4DF;}
/* ───── 하단 고정 이전/다음 바 ───── */
.cstOderWiz .wizFooter{flex: none;position: sticky;bottom: 0;background: #FFFFFF;border-top: 1px solid #E4E8EB;padding: 14px 20px;padding-bottom: calc(14px + env(safe-area-inset-bottom));z-index: 1;}
.cstOderWiz .wizFooterInner{max-width: 1040px;margin: 0 auto;display: flex;gap: 14px;}
.cstOderWiz .wizPrevBtn{flex: none;width: 150px;height: 64px;font-size: 19px;font-weight: 700;color: #3C4043;background: #F4F6F8;border: 2px solid #DDE1E6;border-radius: 16px;cursor: pointer;}
.cstOderWiz .wizPrevBtn:active{background: #E9EDF0;}
.cstOderWiz .wizPrevBtn.d-none{display: none;}
.cstOderWiz .wizNextBtn{flex: 1;height: 64px;font-size: 20px;font-weight: 700;color: #2A1C00;background: #FEB415;border: none;border-radius: 16px;cursor: pointer;box-shadow: 0 6px 18px rgba(254, 180, 21, 0.38);}
.cstOderWiz .wizNextBtn:active{background: #F5A800;}
.cstOderWiz .wizNextBtn:disabled{background: #E9EDF6;color: #A7ADBF;cursor: default;box-shadow: none;}
/* ───── 공동현관 비밀번호 키패드 (바텀시트) ───── */
.wizKeypad{position: fixed;inset: 0;background: rgba(20, 16, 4, 0.5);z-index: 100;display: flex;align-items: flex-end;justify-content: center;}
.wizKeypad.d-none{display: none;}
.wizKeypadSheet{width: 100%;max-width: 560px;max-height: 92vh;max-height: 92dvh;overflow-y: auto;box-sizing: border-box;background: #FFFFFF;border-radius: 24px 24px 0 0;padding: 16px 20px 20px;padding-bottom: calc(20px + env(safe-area-inset-bottom));box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22);display: flex;flex-direction: column;gap: 12px;}
.wizKeypadHead{display: flex;align-items: center;justify-content: space-between;gap: 14px;}
.wizKeypadHead h3{margin: 0;font-size: 19px;font-weight: 700;color: #3C4043;}
.wizKeypadHead button{width: 40px;height: 40px;flex: none;border-radius: 12px;background: #F4F6F8;border: none;font-size: 22px;line-height: 1;color: #5F6368;cursor: pointer;}
.wizKeypadHead button:active{background: #E9EDF0;}
.wizKeypadDisplay{flex: none;background: #2A2620;border-radius: 14px;padding: 12px 18px;display: flex;align-items: center;justify-content: space-between;gap: 14px;min-height: 34px;}
.wizKeypadDisplay span{flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 24px;font-weight: 700;letter-spacing: 4px;color: #FFD980;}
.wizKeypadDisplay span.empty{font-size: 15px;font-weight: 400;letter-spacing: 0;color: #8B8578;}
.wizKeypadDisplay em{font-size: 15px;color: #9A9385;flex: none;}
.wizKeypadHint{margin: -6px 0 0;font-size: 14px;color: #8A8578;}
.wizKeypadKeys{display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}
.wizKeypadKeys .wizPadKey{height: 58px;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 2px;border-radius: 14px;cursor: pointer;background: #FFFFFF;border: 2px solid #DDE1E6;}
.wizKeypadKeys .wizPadKey:active{background: #F4F6F8;}
.wizKeypadKeys .wizPadKey strong{font-size: 24px;font-weight: 700;color: #1A1D1F;line-height: 1.1;}
.wizKeypadKeys .wizPadKey em{font-size: 12px;color: #AAB1B8;line-height: 1.1;}
.wizKeypadKeys .wizPadKey.fn{background: #FFF4DF;border-color: #FFE0A3;}
.wizKeypadKeys .wizPadKey.fn:active{background: #FFEBC2;}
.wizKeypadKeys .wizPadKey.fn strong{font-size: 20px;color: #8A5A00;}
.wizKeypadKeys .wizPadKey.fn em{color: #9A8B6A;}
.wizKeypadKeys .wizPadKey.del{background: #F4F6F8;border-color: #E4E8EB;}
.wizKeypadKeys .wizPadKey.del:active{background: #E9EDF0;}
.wizKeypadKeys .wizPadKey.del strong{font-size: 20px;color: #5F6368;}
.wizKeypadKeys .wizPadKey.del em{color: #5F6368;}
.wizKeypadFooter{display: flex;gap: 10px;}
.wizKeypadFooter #btnKeypadClear{flex: 1;height: 54px;font-size: 17px;font-weight: 700;color: #5F6368;background: #F4F6F8;border: 2px solid #E4E8EB;border-radius: 14px;cursor: pointer;}
.wizKeypadFooter #btnKeypadClear:active{background: #E9EDF0;}
.wizKeypadFooter #btnKeypadDone{flex: 2;height: 54px;font-size: 18px;font-weight: 700;color: #4A3000;background: #FEB415;border: none;border-radius: 14px;cursor: pointer;box-shadow: 0 6px 18px rgba(254, 180, 21, 0.38);}
.wizKeypadFooter #btnKeypadDone:active{background: #F5A800;}
/* ───── alert/confirm 이마트 테마 (insCstOder 화면 전용, body.wizEmartTheme) ───── */
/* 버튼/입력 요소는 기본적으로 본문 폰트를 상속받지 않아 OS 기본 폰트로 렌더링되므로 본문과 동일하게 통일 */
.wizEmartTheme button,
.wizEmartTheme input,
.wizEmartTheme select{font-family: Pretendard;}
.wizEmartTheme .alertPopup button.green{background: #FEB415;color: #2A1C00;box-shadow: 0px 4px 16px rgba(254, 180, 21, 0.25);}
.wizEmartTheme .alertPopup > div > div > button.green{box-shadow: none;}
/* 앱 다운로드 버튼 - 이마트 테마 (아이콘은 JS 에서 iconDownloadAmber.svg 로 교체) */
.wizEmartTheme .topDiv > div .pwaInstallBtn{border-color: #FEB415;}
.wizEmartTheme .topDiv > div .pwaInstallBtn:hover{background: #FFF4DF;}
/* 상단 홈 버튼 - 디자인(노랑 라운드 사각형 + 홈 아이콘) 적용, 더블클릭 시 로그아웃 */
/* touch-action: manipulation - 모바일 더블탭 시 화면 확대 방지 및 탭 지연 제거 */
.wizEmartTheme .topDiv > div .cstHome{height: 36px;flex: none;box-sizing: border-box;border-radius: 10px;background: #FFF4DF;border: 2px solid #FFE0A3;display: flex;align-items: center;justify-content: center;gap: 6px;padding: 0 12px 0 10px;cursor: pointer;touch-action: manipulation;}
.wizEmartTheme .topDiv > div .cstHome:active{background: #FFEBC2;}
.wizEmartTheme .topDiv > div .cstHome > img{width: 18px;height: 18px;}
.wizEmartTheme .topDiv > div .cstHome .cstHomeTxt{font-size: 13px;font-weight: 700;color: #8A5A00;white-space: nowrap;}
.wizEmartTheme .topDiv > div .cstHome + span{top: 0;margin-left: 10px;font-weight: 700;}
/* 36px 버튼이 50px 상단바 안에 수직 중앙 정렬되도록 여백만 조정 (기존 block 레이아웃 유지) */
.body-m.wizEmartTheme .topDiv.cst > div .logoDiv{padding: 7px 16px;align-items: center;}
/* 송장 출력 모달 - 이마트 테마 (출력 버튼) */
.wizEmartTheme .ppQrPrint .qrPrintFooter button.green{background: #FEB415;color: #2A1C00;font-weight: 700;box-shadow: 0px 4px 16px rgba(254, 180, 21, 0.25);}
/* 주소 검색 팝업 - 폰트 확대 (insCstOder 화면 전용) */
.wizEmartTheme .ppAddrSerc .headerDiv h3{font-size: 19px;}
.wizEmartTheme .ppAddrSerc .searchTopDiv > div .inputSpan input{font-size: 16px;line-height: 24px;padding: 8px 36px 8px 16px;}
.wizEmartTheme .ppAddrSerc .searchTopDiv button.iconText{font-size: 15px;width: 84px;height: 40px;top: 8px;}
.wizEmartTheme .ppAddrSerc .tableDiv table thead tr th{font-size: 14px;height: 42px;}
.wizEmartTheme .ppAddrSerc .tableDiv table td{font-size: 15px;line-height: 22px;height: auto;padding: 12px 0 12px 12px;}
.wizEmartTheme .ppAddrSerc .tableDiv table td.one{font-size: 16px;}
.wizEmartTheme .ppAddrSerc .paging > div > span{font-size: 15px;}
/* 주소 검색 팝업 - PC/태블릿(768px~) : 중앙 다이얼로그 유지 */
@media screen and (min-width: 768px) {
.body-m.wizEmartTheme .ppAddrSerc > div{width: 640px;padding: 0 24px 16px;box-sizing: border-box;}
}
/* 주소 검색 팝업 - 모바일(~767px) : 해상도가 작으므로 전체화면 전환 */
@media screen and (max-width: 767px) {
.body-m.wizEmartTheme .ppAddrSerc > div{width: 100%;height: 100%;max-height: none;margin: 0;padding: 0 16px 12px;box-sizing: border-box;border-radius: 0;top: 0;transform: translateY(8%);display: flex;flex-direction: column;}
.body-m.wizEmartTheme .ppAddrSerc.show > div.show{transform: translateY(0);}
.wizEmartTheme .ppAddrSerc .searchTopDiv{flex: none;}
/* 남는 세로 공간을 결과 테이블이 채우고 내부 스크롤 */
.wizEmartTheme .ppAddrSerc .tableDiv{height: auto;flex: 1;overflow-y: auto;}
.wizEmartTheme .ppAddrSerc .paging{flex: none;padding: 12px 0;}
}
/* 앱 설치 안내 모달 - 이마트 테마 */
.wizEmartTheme .ppAppInstall .guideTxt strong{color: #C98800;}
.wizEmartTheme .ppAppInstall .appInstallStep li .num{background-color: #FEB415;color: #2A1C00;}
.wizEmartTheme .ppAppInstall .appInstallStep li .txt span em{color: #C98800;}
.wizEmartTheme .ppAppInstall .appInstallFooter button.green{background: #FEB415;color: #2A1C00;font-weight: 700;box-shadow: 0px 4px 16px rgba(254, 180, 21, 0.25);}
.wizEmartTheme .ppAppInstall .appInstallFooter button.green img{filter: brightness(0);}
/* ───── 접수 완료 모달 ───── */
.ppWizCpl > div{width: 420px;border-radius: 22px;padding: 0 28px 28px;}
.ppWizCpl .wizCplBody{text-align: center;padding-top: 36px;}
.ppWizCpl .wizCplIcon{width: 76px;height: 76px;margin: 0 auto 18px;border-radius: 50%;background: #FFF4DF;color: #8A5A00;font-size: 38px;display: flex;align-items: center;justify-content: center;}
.ppWizCpl .wizCplBody h3{margin: 0;font-size: 24px;font-weight: 700;color: #1A1D1F;}
.ppWizCpl .wizCplBody p{margin: 10px 0 0;font-size: 17px;color: #5F6368;}
.ppWizCpl .wizCplBody p span{font-weight: 700;color: #8A5A00;}
.ppWizCpl .wizPrimaryBtn{width: 100%;height: 64px;margin-top: 26px;font-size: 20px;font-weight: 700;color: #2A1C00;background: #FEB415;border: none;border-radius: 16px;cursor: pointer;}
/* 모바일 공통 규칙(.body-m .layerPopup > div 전체화면)을 해제하고 디자인처럼 중앙 컴팩트 카드로 표시 */
.body-m .ppWizCpl > div{width: calc(100% - 32px);box-sizing: border-box;max-width: 420px;height: auto;max-height: 85%;border-radius: 22px;padding: 0 28px 28px;}
/* ───── 모바일 대응 (~767px) ───── */
@media screen and (max-width: 767px) {
.cstOderWiz .wizStart{padding: 28px 16px;}
.cstOderWiz .wizStartInner{gap: 24px;}
.cstOderWiz .wizStartTitle h2{font-size: 24px;}
.cstOderWiz .wizStartTitle p{font-size: 16px;}
.cstOderWiz .wizStartCards{gap: 14px;}
.cstOderWiz .wizCard{padding: 22px 20px;gap: 10px;}
.cstOderWiz .wizCardIcon{width: 48px;height: 48px;font-size: 22px;border-radius: 13px;}
.cstOderWiz .wizCardTitle{font-size: 21px;}
.cstOderWiz .wizCardDesc{font-size: 15px;}
.cstOderWiz .wizCardGo{font-size: 15px;}
.cstOderWiz .wizAuth{padding: 28px 16px;}
.cstOderWiz .wizAuthTitle h2{font-size: 23px;}
.cstOderWiz .wizAuthTitle p{font-size: 15px;}
.cstOderWiz .wizAuthCard{padding: 20px 16px;}
.cstOderWiz .wizSteps{padding: 12px 14px;}
.cstOderWiz .wizStepDot{width: 34px;height: 34px;font-size: 15px;}
.cstOderWiz .wizStepTxt{padding-left: 8px;}
.cstOderWiz .wizStepTxt em{font-size: 10px;}
.cstOderWiz .wizStepTxt strong{font-size: 13px;}
.cstOderWiz .wizStepBar{margin: 0 8px;}
.cstOderWiz .wizBody{padding: 20px 16px 32px;}
.cstOderWiz .wizStepHead{flex-direction: row;align-items: flex-start;}
.cstOderWiz .wizStepHead h3{font-size: 21px;}
.cstOderWiz .wizStepHead p{font-size: 14px;}
.cstOderWiz .wizCardBox{padding: 18px 16px;gap: 22px;}
.cstOderWiz .wizInpMd{max-width: 100%;}
.cstOderWiz input[type=text],
.cstOderWiz input[type=tel]{height: 50px;font-size: 16px;padding: 0 14px;}
.cstOderWiz select{height: 50px;font-size: 16px;}
.cstOderWiz .wizAmberBtn{height: 50px;padding: 0 16px;font-size: 15px;}
.cstOderWiz .wizAuthPhoneRow .wizGhostBtn{height: 50px;}
.cstOderWiz .wizAddrDtptRow .wizZipc{width: 110px;}
.cstOderWiz .wizEnthRow{flex-direction: column;}
.cstOderWiz .wizEnthRow select{width: 100%;}
/* 세로(컬럼) 배치 시 flex:1 이 높이에 적용되어 input 이 찌그러지므로 해제 */
.cstOderWiz .wizEnthRow input{flex: none;width: 100%;}
.cstOderWiz .wizBoxBtns{max-width: 100%;gap: 8px;}
.cstOderWiz .wizBoxBtn{height: 50px;font-size: 16px;}
.cstOderWiz .wizChip{padding: 8px 12px;}
.cstOderWiz .wizChip .wizChipTxt{font-size: 15px;}
.cstOderWiz .wizSumBox{padding: 4px 16px 10px;}
.cstOderWiz .wizSumLabel{width: 84px;font-size: 13px;}
.cstOderWiz .wizSumVal{font-size: 15px;}
.cstOderWiz .wizSumEdit{height: 38px;padding: 0 14px;font-size: 13px;}
.cstOderWiz .wizFooter{padding: 12px 16px;padding-bottom: calc(12px + env(safe-area-inset-bottom));}
.cstOderWiz .wizPrevBtn{width: 104px;height: 56px;font-size: 17px;}
.cstOderWiz .wizNextBtn{height: 56px;font-size: 18px;}
.wizKeypadSheet{padding: 14px 16px 16px;padding-bottom: calc(16px + env(safe-area-inset-bottom));gap: 10px;}
.wizKeypadHead h3{font-size: 17px;}
.wizKeypadDisplay{padding: 10px 14px;}
.wizKeypadDisplay span{font-size: 21px;}
.wizKeypadKeys{gap: 8px;}
.wizKeypadKeys .wizPadKey{height: 52px;}
.wizKeypadKeys .wizPadKey strong{font-size: 21px;}
.wizKeypadKeys .wizPadKey.fn strong,
.wizKeypadKeys .wizPadKey.del strong{font-size: 18px;}
.wizKeypadKeys .wizPadKey em{font-size: 11px;}
}
/* ───── 소형 모바일 대응 (~559px) - 고객 유형 카드 1열 전환 ───── */
@media screen and (max-width: 559px) {
.cstOderWiz .wizStartCards{grid-template-columns: 1fr;}
}
/* ───── 소형 모바일 대응 (~450px) - 수령인 1열 전환 ───── */
@media screen and (max-width: 450px) {
.cstOderWiz .wizGrid2{grid-template-columns: 1fr;}
}