@charset "UTF-8";

/*=== basicStyle ================================= .no_data{display:none !important}*/ 
 *{transition:all 0.2s;-webkit-transition:all 0.2s;  letter-spacing: -.3pt;}
.no_data{display:none}

/*=== wrapStyle ================================= */
.mainWrapMobile {padding-left:0 !important;}
.mainWrap {display:inline-block;width:100%;padding-left:240px;-webkit-transition: width 3s;-moz-transition: width 3s; transition: width 3s;}
.menuWrap .drawer-main {display:inline-block;float:left;overflow:hidden;width:15rem;height:100vh;background:#464750;position:fixed;top:0;bottom:0;left:0;
overflow-y: scroll;}
.menuWrap .drawer-main::-webkit-scrollbar, .menuWrap .drawer-main::scrollbar, .menuWrap .drawer-main::-ms-scrollbar{width:5px;}
.menuWrap .drawer-main::-webkit-scrollbar-track, .menuWrap .drawer-main::scrollbar-track, .menuWrap .drawer-main::-ms-scrollbar-track {background: #38383F;}
.menuWrap .drawer-main::-webkit-scrollbar-thumb, .menuWrap .drawer-main::scrollbar-thumb, .menuWrap .drawer-main::-ms-scrollbar-thumb {background: #ADB5BD;}
.menuWrap .drawer-main::-webkit-scrollbar-thumb:hover, .menuWrap .drawer-main::scrollbar-thumb:hover, .menuWrap .drawer-main::-ms-scrollbar-thumb:hover {background: #C6CFD8;}
.logo img {width: 7.5rem;margin: 1.8rem 1.3rem; filter:brightness(500%) saturate(5%);-webkit-filter:brightness(500%) saturate(5%);}

.posTableWrap{display:table;width:100%; max-width:900px}
.posBtnWrap{width:40%;display:table-cell;background:url("../images/main_0.png") 96% top no-repeat;background-size:25%}
.mainBtnWrap{width:60%;display:table-cell;}
.mainBtnWrap li{width:50%;float:left;padding:0.6rem;list-style: none;}
.mainBtnWrap li a{padding:2rem 1.2rem;display:block;background:#f8f8f8;transition:box-shadow,width,transform 0.8s}
.mainBtnWrap li:nth-child(2) a{background:#dce8f3}
.mainBtnWrap li:nth-child(3) a{background:#ebe3df}
.mainBtnWrap li:nth-child(4) a{background:#dcddde}
.mainBtnWrap li a p:first-child{margin-bottom:1rem;diaplay:block;text-align:right}
.mainBtnWrap li a:hover{box-shadow:0 0 2px rgba(200,200,200,0.3);width:110%;transform: translateY(-6%) translateX(-5%);}
.posBtnWrap a{font-size:1.8rem;transform: translateY(-190px);display:block;text-decoration:none;}
.posBtnWrap a:nth-child(2){margin-top:5px;}
.posBtnWrap a:hover{color:#676767;transition:color 0.5s;}

.posBtnWrap a:before{content:"";position:absolute;height:1px;width:0;transition:width 1s;}
.posBtnWrap a:after{content:"";position:absolute;height:1px;width:0;transition:width 1s;}
.posBtnWrap a:hover:before{width:40%;left:60%;bottom:5px;background:#676767;}
.posBtnWrap a:hover:after{width:1.5rem;left:calc(100% - 20px);bottom: 14px;background: #676767;transform: rotate(50deg);}
.posBtnWrap a em{font-weight:bold;}

/*-- leftmenu --*/
.nav-drawer {padding-top: 15px;}
.nav-drawer a {display:block;font-weight:700;}
.nav-drawer >.nav-item > a {color:#fff;border-left:3px solid rgba(0,0,0,0); font-size: 1.1rem; padding: 18px 30px; font-weight: 500; }
.nav-drawer >.nav-item > a:after {position: absolute;right: 30px;font-size: 17px;content: '\f078'; font-weight: 600; transition: all ease 0.2s;}
.nav-drawer >.nav-item.subNav_wrap0 > a:after {position: absolute;right: 30px;font-size: 0px;content: '' !important; font-weight: 600; transition: all ease 0.2s;}
.nav-drawer >.nav-item.on > a {background:#38383F;}
.nav-drawer >.nav-item.on > a:after {font-weight: 600; transform: rotate( -180deg ); }
.nav-drawer >.nav-item .nav-subnav {display:none;transition:display 3s !important; background: #38383F; padding-bottom: 12px;}
.nav-drawer >.nav-item.on .nav-subnav{display:block;}
.nav-drawer >.nav-item .nav-subnav a{padding-left:30px;color:#ADB5BD;padding: 9px 40px; font-size: .97rem; font-weight: 400;}
.nav-drawer >.nav-item .nav-subnav a:hover ,.nav-drawer >.nav-item .nav-subnav a:focus, .nav-drawer >.nav-item .nav-subnav a:active, .nav-drawer >.nav-item .nav-subnav a.active{background:#38383F; color:#fff;}

.drawer-main a:hover{text-decoration: none;}

/*
.userInfo{padding:.9rem 1.8rem;}
.userInfo img{border-radius:50%; width: 55px;}
.userInfo div:last-child{margin-left: .9rem; width: 65%;}
.userInfo div #custNm{color:#fff; font-weight: 500; line-height:1.2rem; margin-bottom:.07rem; padding-top: .45rem}
.userInfo div #username{font-size:0.9em;font-weight:400;color:#ADB5BD; margin-bottom:12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
*/
.userInfo{padding:.9rem .8rem;}
.userInfo img{border-radius:50%; width: 55px;}
.userInfo div:last-child{margin-left: .9rem; width: 100%;}
.userInfo div #menuPatstoNm{color:#fff; font-size: 1.1rem; font-weight: 500; line-height:1.2rem; margin-bottom:.07rem; padding-top: .45rem}

.userCustInfo{padding:.0rem .8rem;}
.userCustInfo div:last-child{margin-left: .9rem; width: 100%;}
.userCustInfo div #custNm{color:#fff; font-weight: 500; line-height:1.2rem; margin-bottom:.07rem;}
.userCustInfo div #username{font-size:0.9em;font-weight:400;color:#ADB5BD; margin-bottom:12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.onlineTableList{background:#e8f5fd !important}

.btn-logout{background: none; border: 1px solid #fff; color: #fff; box-shadow: none !important; font-size: .8rem; padding: .25rem .7rem}
.btn-logout:hover{background:#ADB5BD; color: #fff; border: 1px solid #adb5bd}

/*-- mediaLeftMenu  -- */
.navbar-toggle,.topTitle {display:none;}
.navbar-toggle .icon-bar:last-child{width: 50%;}

@media screen and (max-width:1199.98px) {
	.mainWrap {padding:0px;}
	.menuWrap .drawer-main {display:none;position:absolute;z-index:9999;top:0;left:-25rem;width:25rem;box-shadow:2px 0px 3px rgba(100,100,100,0.3);transition:left 1s;}
	.menuWrap .drawer-main.on{left:0;display:inline-block}
	.userInfo div:last-child{margin-left: .9rem; width: 80%;}
	.navbar-toggle {position:absolute;top:1rem;left:1rem;display:inline-block;background:#00AEF1}
	.navbar-toggle:hover{box-shadow:0px 0px 3px rgba(5,123,169,0.6)}
	.navbar-toggle .icon-bar{background:#fff}
	.dimmed {display:none;background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}
	.posBtnWrap a:hover:before{width:30%;left:70%;bottom:5px;background:#676767;}
.posBtnWrap a:hover:after{width:1.5rem;left:calc(100% - 20px);bottom: 14px;background: #676767;transform: rotate(50deg);}
}
@media screen and (max-width:710px) {
	.posTableWrap{display:block;width:100%;padding-top:0 !important}
	.posBtnWrap{width:100%;display:block;background:url("../images/main_0.png") 103% top no-repeat;background-size:6.5rem}
	.mainBtnWrap{width:100%;display:block;margin-top:3rem;padding:0}
	.mainBtnWrap ul{padding:0}
	.posBtnWrap a{font-size:1.5rem;padding:2rem 0 0;transform: translateY(0);display:block;text-decoration:none;}
	.posBtnWrap a:hover:before{width:40%;left:35%;bottom:5px;}
	.posBtnWrap a:hover:after{width:1.5rem;left:calc(75% - 20px);bottom: 14px;transform: rotate(50deg);}
	.mainBtnWrap li:nth-child(odd) {padding:0.5rem 0.5rem 0.5rem 0;}
	.mainBtnWrap li:nth-child(even){padding:0.5rem 0 0.5rem 0.5rem;}

}
 	.tui-chart{margin:auto !important}
	.chat_wrap{max-width:100% !important;display:inline-block !important}
  	.chart-list-group{text-align:center;}
  	.chart-list-group ul{display:inline-block !important}
  	
@media screen and (max-width: 575.98px) {
	form{width: 100%;overflow-x: hidden;}
	.mainWrap {padding:0%;}
	.menuWrap .mobileNavbar{padding:1em;background:#fff;box-shadow:1px 0 3px rgba(0,0,0,0.4)}
	.menuWrap .drawer-main {left:-100%;width:100%;position:fixed;bottom:0}
	.navbar-toggle {position:relative;background:rgba(0,0,0,0);top:0;left:0;padding:0 4px;}
	.navbar-toggle:hover{box-shadow:0px 0px 0px rgba(0.0.0.0);opacity:0.7}
	.navbar-toggle .icon-bar{background:#4f5460}
	.mobileNavbar .topTitle{display:inline-block;position:relative;padding-left:15px;font-weight: 500;font-size: 18px;color:#4f5460;}
  	.tab-bg {background: #fff; border-bottom: 2px solid #dee0e3;}
  	.table td{padding:0.75rem 0.1rem !important;}
  	.table td input{padding:0; margin:0;}
  	.storeOperationGoods .card > .d-flex { display:block !important;}
  	.storeOperationGoods .catMenu{width:100% !important;}
  	.storeOperationGoodsTab2 .d-flex .col-5 {max-width:100% !important}
  	.storeOperationGoodsTab2 .optionInfo li div span:first-child{font-weight: 400;font-size:0.5rem;}
  	.storeOperationGoodsTab2 .custom-switch .custom-control-label{font-size:0.7rem;}
  }

/*=== inputStyle ==============================================*/
.hiddenBorder{border:0 solid rgba(0,0,0,0) !important;background:rgba(0,0,0,0); width:100%; font-weight:400; color:#495057;}
.hiddenBorder:focus{outline:none !important;}

/* tags input */
.bootstrap-tagsinput {}
.bootstrap-tagsinput input { background: transparent; border: none; padding-left: .5rem; padding-right: .5rem; width: 15rem;}
.bootstrap-tagsinput input:hover, .bootstrap-tagsinput input:focus {outline: none; }
.bootstrap-tagsinput {height: auto; padding: 0.535rem 0.75rem; border: 1px solid #E9ECEF; border-radius: .25rem;}
.bootstrap-tagsinput input::-moz-placeholder {color: #C6CFD8;opacity: 1;}
.bootstrap-tagsinput input::-ms-input-placeholder { color: #C6CFD8;}
.bootstrap-tagsinput input::-webkit-input-placeholder { color: #C6CFD8;}
.bootstrap-tagsinput input:focus { border: none; box-shadow: none;}
.bootstrap-tagsinput .tag [data-role="remove"] {  margin-left: 8px;  cursor: pointer;}
.bootstrap-tagsinput .tag [data-role="remove"]:after {content: "\f00d";font-size: .95rem;color: #6c757d; font-weight:600;}
.bootstrap-tagsinput .tag {margin-right: 3px;color: #495057;background: #e8eef2; padding: 0.125rem .715rem 0.155rem .715rem; border-radius: 1rem; word-break:keep-all; font-size: .95rem; font-weight:500;}

/* place holder */
.form-control::-ms-expand {background-color: transparent;border: 0; }
.form-control::-webkit-input-placeholder{color: #C6CFD8; font-weight: 400; opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.form-control::-ms-input-placeholder{color: #C6CFD8; font-weight: 400;opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.form-control::placeholder{color: #C6CFD8; font-weight: 400;opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.form-control:disabled .form-control[readonly]{color:#6c757d; opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
.form-control:disabled{ cursor: not-allowed; }
.form-control-file,.form-control-range {display: block; }
.form-control-label { padding: 5.1px 5.6px;padding: 0.425rem 0.8rem;margin-bottom: 0;}

/* help block */
.help-block{margin-bottom: 0; font-size: .9rem; color: #868E96; font-weight: 400;}

/*overflow-x:scroll table*/
.scrollTable{width:100%; overflow-x:auto;}
.scrollTable .table{padding-bottom:0;margin-bottom:0;}
.scrollTable table tr th,.scrollTable table tr td{min-width:100px;}
.scrollTable table tr th:first-child,.scrollTable table tr td:first-child{position:absolute;width:150px;background:#fff;}
.scrollTable tr th:nth-child(2),.scrollTable tr td:nth-child(2){min-width:250px;padding-left:150px; height:50px;}
.scrollTable{overflow-x:auto;}

/* agreement */
.agreement{font-size: .93rem; transition:auto; overflow-y:auto; font-weight: 400; height:250px; border-radius: .3rem; padding: .8rem 1rem; background: #FCFCFC; border: 1px solid #F0F3F8;}
.agreement ol{padding-inline-start: 25px; padding-bottom: .7rem;}
.agreement ol li{margin-bottom: .2rem;}
.agreement ol ol{font-size: .9rem; font-weight: 300; margin-top: .5rem; margin-bottom: 1rem;}
.agreement::-webkit-scrollbar-track {background: #f8f9fa;}
.agreement::-webkit-scrollbar-thumb {background: #d4dbe2; border-radius: 5rem;}

.agree .btn-text::before { content: '\f078';font-weight: 600; color:#ADB5BD;}
.agree .btn-text[aria-expanded='true']::before { content: '\f077';font-weight: 600;color:#ADB5BD}

/* line input */
.line-input {border:none;border-bottom:2px solid #ced4da;border-radius:0;outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;transition:border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out;}
.line-input:focus {box-shadow:none;}

/* search Input */
.search {border-radius: 5rem !important; padding-left: 2.7rem; padding-right: .2rem; background:#F8F9FA url("../images/search-icon.png") 1.3rem 50% no-repeat;}
.search> .form-control{border: none !important;}
.search > .form-control >button {margin-left: 0;}
.search {position:relative}
.search ~ p{word-break: keep-all; font-size:.8rem;}
.addSchWrap{height:200px;padding-top: 1rem;overflow-x:hidden;overflow-y:auto;display:block; padding-right: .5rem;}
.addSchWrap label{border: none;line-height:0; padding: 0rem 1rem;height:2em;}
.addSchWrap label:hover, .addSchWrap label:active, .addSchWrap label.active{background: #f0f3f8;}
.addSchWrap label:active, .addSchWrap label.active{font-weight: 500;}
.addSchWrap em{font-style: initial; color: #212529;    line-height: 1.5em;letter-spacing: -0.1em;}
.addSchWrap em b{margin-right: 1rem;}
.addSchWrap label.active::before{content: "";}
.addSchWrap label.active::after{content: "\f00c"; display: inline-block; float: right; margin-left: auto; font-weight: 600; color: #00AEF1;}

/* PIN CODE */
.pinCode input{border:none;background:#eff1f5; text-align:center; font-size:1.3rem; width: 50px;height: 50px;}
.pinCode button{border:1px solid #eff1f5; background:#fff; font-size:1.3rem; box-shadow:none; border-radius:5rem; width:70px; height:70px;}

/*chart*/
.chat_wrap{max-width:200px}

/*select*/
.timepick {background: transparent url("../images/clock-icon.png") no-repeat right center;background-size: 1.2rem;}
.custom-select.on{}
.custom-select.on .option_wrap,.custom-select.on .optionTitle{display:block;}
.custom-select em{font-style:normal}
.option_wrap{position:absolute;border-radius:0 0 .5rem .5rem;display:none;max-height:350px;overflow-y:auto;top:25%;z-index:10;left:0;right:0;background:#fff; border-top:1px solid #e3ebf3}
.optionTitle{padding:1rem 1.5rem 1rem 1.5rem;font-size: 1.2rem;font-weight:500;z-index:10;display:none;top:25%;position:absolute;width: 100%;border-radius:.5rem .5rem 0 0;margin-top: -60px;left: 0;background:#fff;}
.optionTitle .close{line-height: 1.5rem; font-size: 1.3rem; }
.option_wrap div{display:block;cursor:pointer;padding:1rem 1.5rem !important}
.option_wrap div:hover{background:#00AEF1;color:#fff}
.option_wrap div:active, .option_wrap div.active{background:#fff;color:#00AEF1;}
.option_wrap div.active::before{content: ""}
.option_wrap div.active::after{content: "\f00c"; display: inline-block; float: right; margin-left: auto; font-weight: 600;}

.custom-select .dimmed{display:none;position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.2);z-index:9}
.custom-select.on .dimmed{display:block;}

.option_wrap::-webkit-scrollbar{width: 5px;}
.option_wrap::-webkit-scrollbar-track {background: none;}
.option_wrap::-webkit-scrollbar-thumb {background: #D4DBE2; border-radius: 5rem; }
.option_wrap::-webkit-scrollbar-thumb:hover {background: #C6CFD8;}

/* scroll bar */
::-webkit-scrollbar {width: 7px; height:7px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #b2b5bf; border-radius: 5rem;}
::-webkit-scrollbar-thumb:hover {background: #91949a;}

::-moz-selection { /* Code for Firefox */ color: #001f90; background: #d1f0fc;}
::selection { color: #001f90; background: #d1f0fc;}


/* accordion */
.accordion ul {padding-inline-start: 0;}
.accordion ul li {list-style:none;}

/* loginForm */
.login{margin: 0;}
.login-left{background:#00A7F1; padding: 8rem 5rem 5rem 5rem; color: #fff; height:100vh; font-size: 1.1rem; line-height: 2; margin: 0; word-break: keep-all;}
.login-left img{filter:brightness(500%) saturate(5%);-webkit-filter:brightness(500%) saturate(5%); width: 10rem;}
.login-left p{color: #B3E5FB; font-weight: 300;}
.login-left a{text-decoration: underline;}
.login-right h4{font-weight: 600;}
.login-right{ height:100vh; padding: 9rem 10% 10rem 10%;}

/* border style */
.dotted {border-style:dotted !important; border:inherit;}
.dashed {border-style:dashed !important; border:inherit;}

/* Menu wizard */
.wz-menu { background: rgba(222, 222, 222, 0.05); padding-left: 60px; display: none; position: relative;}
.wz-menu > li > a{padding-left:0 !important;}
.wz-menu.active { display: block; }
.wz-menu li { position: relative; }
.wz-menu li:before, .wz-menu li:after { content: ''; width: 8px; height: 8px; background: #fff; background: rgba(0, 0, 0, 0.2); border-radius: 50%; display: block; position: absolute; top: 16px; left: -34px; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.wz-menu li:before { top: 20px; left: -30px; width: 0; height: 0; background: #fff; }
.wz-menu li.active:before, .wz-menu li:hover:before { top: 16px; left: -34px; width: 8px; height: 8px; }
.wz-menu li a:focus, .wz-menu li a:hover, .wz-menu li a:active, .wz-menu li a.active { background-color:#26394b; color:#00AEF1;}
.nav-drawer .wz-menu a::before {position: absolute; content: ""; background: rgb(38, 52, 66); width: 2px; height: 35px; top: -19px; left: -31px;}
.nav-drawer .wz-menu li:first-child a::before {display:none;}
.wz-menu .first-done::after {background-color:#00AEF1;}
.wz-menu .done::after {background-color:#00AEF1;}
.wz-menu .done a::before {background-color:#00AEF1;}

/* Month picker */
.mtz-monthpicker td{padding:10px;}

/* title */
.btn-title{background:none; border:none; font-size:1.9rem; font-weight:400; color: #212529;}
.btn-title:hover{color:#00AEF1; cursor: pointer; transition: .2s;}
.page-header .dropdown-item{padding: .5rem 1.5rem; font-weight:500;}
.page-header .dropdown-menu.show {box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);border: 1px solid #D4DBE2;}

.card .card-header h5{font-weight: 600;}

/* store uplod */
.store-file .file-upload{display: none;}
.store-file-label{color: #00ADF1; cursor: pointer; font-weight:400; padding-right: 10px; overflow-x: hidden; text-overflow: ellipsis;}
.store-file-delete{font-weight:400; border-left: 1px solid #E9ECEF; padding-left: 10px; white-space:nowrap; color: #868E96;}

.shop-img{width:200px; margin-right:1rem;}
.shop-img img, .img-thumbnail{position: absolute; top: 0; left: 0; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: auto;}
.shop-info{width:100%;}
.img-sm{width: 13%; height: auto;}
.shop-img-wrapper{width:200px;}
.user-img-wrapper{width:150px;}
.modal .user-img-wrapper{width: 60px}
.img-info{position: relative; padding-top: 100%; overflow: hidden; }
.img-center{position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);}

/* button ladio */
.button-ladio-group{background: #F0F3F8; padding: .3rem; border-radius: .3rem;}
.btn-ladio{background:#F0F3F8; margin-bottom: 0 !important;}
.btn-ladio:focus, .btn-ladio:hover, .btn-ladio:active, .btn-ladio.focus, .btn-ladio.hover, .btn-ladio.active{background: #00AEF1; color:#fff;}

.button-ladio-img-group {}
.btn-img-ladio{background: none; margin-bottom: 0 !important;filter:grayscale(100%);-webkit-filter:grayscale(100%);}
.btn-img-ladio img{opacity: .2; width: 150px; height: 150px;}
.btn-img-ladio:hover, .btn-img-ladio:active, .btn-img-ladio.hover, .btn-img-ladio.active{filter:grayscale(0%);-webkit-filter:grayscale(0%);}
.btn-img-ladio:hover img, .btn-img-ladio:active img, .btn-img-ladio.hover img, .btn-img-ladio.active img{
	opacity: 1; transition: .1s;}

/* btn-checkbox */
.btn-check{background: #F0F3F8; color: #868E96; font-size: .9rem; padding: .5rem 1.5rem}
.btn-check:hover, .btn-check:active, .btn-check.hover, .btn-check.active{background:#495057; color: #fff; }
.btn-check-o{color: #ADB5BD; padding:0;}
.btn-check-o:hover, .btn-check-o:active, .btn-check-o .hover, .btn-check-o.active{color: #FF962D; padding:0;}


/* PublicAccount */
.PublicAccount {margin: 1rem 0 0 0; border-radius: .3rem; box-shadow:-3px 3px 19px rgba(0, 0, 0, 0.1); }
.PublicAccount #Nb{color:#868E96; border-right: 1px solid #E9ECEF; margin-right: 20px; padding: 0 30px 0 10px;}
.PublicAccount #Id{color:#212529;}
.PublicAccount button{color:#212529; padding: 0;}
.PublicAccount button:hover, .PublicAccount button:active, .PublicAccount button:focus{text-decoration: none; color:#ADB5BD;}
.PublicAccount button .fa-arrow-circle-right{color: #ADB5BD;}
@media screen and (max-width: 767.98px) {
	.PublicAccount .times {position:absolute; right:20px; top:15px; }
}


@media screen and (max-width: 767.98px) {
	.list-group-item .times {position:absolute; right:10px; top:10px; }
}

/* goods */
.goods a {padding:1.2rem; font-size:1.1rem; word-break:keep-all}
.goods a:hover, .goods a:active, .goods .active{border-radius: .5rem 0 0 .5rem; background: #F2F9FC; z-index: 0;}
.goods .active .badge{background: #00AEF1;}

.menulist li{border-bottom: 1px solid #F0F3F8; margin-bottom: 0;}

.optionInfo li{border:1px solid #E9ECEF; border-radius: .3rem; margin-bottom: .5rem;}
.optionInfo li div span{font-weight: 400;}
.optionInfo li .star{color: #ADB5BD; cursor: pointer;}
.optionInfo li .active .star{color: #FF962D;}

/* delivery */
.delivery .list-group-item{padding:1rem 0; border-bottom: 1px solid #F0F3F8;}
.delivery .list-group-item:hover{background:none;}

/* Exclamation, Complete */
.Exclamation{text-align:center; margin:2rem 0;}
.Exclamation img{width:80px; height:auto; margin-bottom:.7rem;}
.Exclamation p{color:#868E96; font-size: 1.1rem;}
.Complete {text-align:center; margin:2rem 0;}
.Complete img{width:120px; height:auto; margin-bottom:1.5rem;}
.Complete p{color:#868E96; word-break: keep-all;}

/* tab-sm */
.tab-sm {margin-bottom: 1rem;}
.tab-sm li {margin-left: 0; margin-right: 1rem;}
.tab-sm li a{padding: .75rem .515rem; font-size:1.1rem;}

/* sales */
.sales li{color: #ADB5BD; padding: .5rem 0}
.sales li:hover{background: none;}
.sales li.active{background: none; color:#212529}
.sales li span{margin-right:1rem;}

.status li{padding: .5rem;}

.popover{padding:.5rem; width:250px; font-size:.9rem; color:#868E96 !important;}

.cc-01{color: #3D79EF}
.cc-02{color: #49C57B}
.cc-03{color: #FEC344}
.cc-04{color: #B1B7C0}
.cc-05{color: #E5E5E9}

/* sijae */
.sijae img{width:25px; margin-right: 1rem; margin-top:-3px;}

/* employee */
@media screen and (max-width: 767.98px) {
	.epl-time {position:absolute; right:0px; top:-40px; }
}

/* setps */
#RegiStep .steps {display: none;}
#RegiStep .wizard .title{display: none;}
#RegiStep .actions li {list-style: none; margin-left: .625rem;}
#RegiStep .actions li a{color: #FFF; background-color: #00AEF1; border-color: #00AEF1; padding-top:.8rem; padding-bottom:.8rem; height:auto; border-radius: 5rem;}
#RegiStep .actions li a:hover{color:#fff;}
#RegiStep .actions li:first-child a{color: #FFF; background-color: #ADB5BD; border-color: #ADB5BD;}

#Join .steps {display: none;}
#Join .actions{display: flex; width: 100%;}
#Join .actions div{ padding: 0 !important;}
#Join .actions li + li{margin-left: .625rem;}
#Join .actions li {list-style: none; width: 50%;}
#Join .actions li a{color: #FFF; background-color: #00AEF1; border-color: #00AEF1; padding-top:.9rem; padding-bottom:.9rem; height:auto; border-radius: 5rem; width: 100%;}
#Join .actions li a:hover{color:#fff;}
#Join .actions li:first-child a{color: #FFF; background-color: #ADB5BD; border-color: #ADB5BD;}

.steps-tab{height: 3px; background:#FCFCFC; width: 100%; margin-top: 1rem; border-radius: 5rem !important;}
.steps-tab li{height: 3px; width: 100%; padding: 0; border-radius: 5rem !important;}
.steps-tab li:hover{width: 100%; padding: 0;}
.steps-tab li .active{background:#00AEF1; width: 100%; padding: 0; }
.steps-tab li .active:hover{background:#00AEF1; width: 100%; padding: 0;}

.last-one{position: absolute; bottom: 0;}

/* Certificate */
.Certificate label{font-weight: 400; color: #868E96;  background: #F2F9FC; width:100%; text-align: center; padding:2rem 1rem;border-radius: .3rem; cursor: pointer; margin-top: .3rem; font-size: 1.075rem; color: #00AEF1; margin-bottom: 1.125rem;  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.Certificate label::after{color:#212529; text-decoration: underline;}
.Certificate label.no-file{cursor:default;}
.Certificate input{display: none;}

/* 모달 */
.full {padding:0 !important;}
.full button{display:inline-block; width:100%;height: 60px !important; font-size:1.1625rem !important}
.full *{margin:0 !important;}
.full button:first-child{width:50%; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;border-bottom-left-radius: calc(1rem - 1px);}
.full button:last-child{width:50%; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: calc(1rem - 1px);;border-bottom-left-radius: 0}
.modal-footer .btn-block{border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: calc(1rem - 1px);border-bottom-left-radius: calc(1rem - 1px); font-size:1.1625rem !important; height:60px;}
.modal-footer *{margin:0;}

.modal-body > .close{position:absolute;top: -10px;right: -10px;background: #F0F3F8;border-radius:5rem;padding: .5rem;opacity: 100;}

/* calendar */
#menu .move-today{position: absolute; right: 1rem; top:1rem;}

/* collapse */
.collapse-icon[aria-expanded='false']::before{content: '\f078';font-weight: 600; color:#ADB5BD;float: right;}
.collapse-icon::before { content: '\f077';font-weight: 600;color:#ADB5BD;float: right;}


.loginFooter{margin-top:20px;font-size:0.65em;}
.mainFooter{margin-left:calc(5.5rem + 240px);border-top: 1px solid #ddd; width:calc(100% - (11rem + 240px));margin-top:20px;padding-top:20px;font-size:0.65em;}

.nav-tabContentSort {margin-right:10px;display:inline-block;}
.nav-tabContentSort > span{width:25px;cursor:pointer;transition:all 2s;display:block;text-align:center;height:15px;line-height:15px;}
.nav-tabContentSort > span:active svg{filter:invert(35%) sepia(70%) saturate(3885%) hue-rotate(7deg) brightness(100%) contrast(101%) blur(2px);}
.nav-tabContentSort > span:hover svg{filter:invert(61%) sepia(38%) saturate(4000%) hue-rotate(159deg) brightness(91%) contrast(108%) blur(2px);}
.nav-tabContentListTitle{text-align: left;width: calc(100% - 170px);}
.nav-tabContentDelete{display:inline-block;cursor:pointer;transition:all 0.4s;font-weight:500;padding:3px 8px;margin-left:10px;border:1px solid #ddd}
.nav-tabContentDelete:hover{background:#00AEF1;border-color: #00AEF1;color:#fff}
.nav-tabContentDelete:active{transform: translateX(2px) translateY(2px);}

.nav-tabContentListTBtn{margin-top: -30px;transition:all 0.3s;float:right;cursor:pointer;color:#00aef1;font-weight:600;padding:2px 30px 2px 2px;}
.nav-tabContentListTBtn:hover{transform: translateX(4px) translateY(3px);}
.nav-tabContentListTBtn:before{content:"";width:3px;height:14px;background:#00aef1;float:right;transform: translate(7px, 5px);}
.nav-tabContentListTBtn:after{content:"";display:inline-block;width:3px;height:14px;background:#00aef1;    transform: rotateZ(90deg) translate(0px, -10px);}

#optionGoodsList .nav-tabContentSort{float:left;transform:translateY(7px)}
#optionGoodsList .nav-tabContentSort + input[type=text] {float:left;width:calc(100% - 35px)}

#menu01 .list-group-item.active {color:#696969}
.custom-switch {
  padding-left: 2.25rem;
}

.custom-switch .custom-control-label::before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  top: 0;
  left: -2.25rem;
  width: 3.35rem;
  height: 1.95rem;
  pointer-events: all;
  border-radius: 5rem;
  background: #ADB5BD;
}

.custom-switch .custom-control-label::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% 50%;
  top: calc(0.1rem + 2px);
  left: calc(-2.1rem + 2px);
  width: calc(1.6rem - 2px);
  height: calc(1.6rem - 2px);
  background-color: #FFF;
  border-radius: 5rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  content: "" !important;
  box-shadow: 0 0.2rem .2rem rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #FFF;
  -webkit-transform: translateX(1.335rem);
  transform: translateX(1.335rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

.classFlex a{display:flex !important;width:100%;justify-content: space-between;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;}
#optionGoodsList .custom-switch input{display:none}
#optionGoodsList .custom-switch label{transform: translateY(-13px);}
#optionGoodsList .btn-sm{padding:0.375rem 0.5625rem !important;    padding-left: 0.25rem  !important;
    padding-right: 0.25rem !important;}
.mrBtn {    border-radius: 30px; width: calc(2.7rem + 2px);  margin-right: 5px; border: 0px solid #00aef4;
    background: #00aef4; color: #fff;outline: none;}
.mrBtn:hover {background:#495057;outline: none;}
#optionGoodsList .list-group-item.active{color:#333}
#goodsTab3_goodUnitprc{justify-content: center;padding: 0 10px 0 30px;}
.spaceBetween{justify-content: space-between;}
.justifyContentFlexEnd{justify-content: flex-end;}
.cursorPointer{cursor:pointer;}
.align-items_center{align-items: center;}
.spanVerticalCenter{margin-right: 15px; transform: translateY(16px);}
.transform10{transform: translate3d(10px, 10px, 10px);}


.align-items-flex-end{align-items: flex-end;}
.justify-content-flex-end{justify-content: flex-end;}
.form_ul{  line-height: 1em;display: flex; margin-bottom: 0; text-align: left;  width: 100%;  padding: 0;}
.form_ul8{margin-top: 3px;line-height: 2em;display: flex; margin-bottom: 0; text-align: left;
    width: 100%;padding: 0;flex-wrap: wrap;flex-direction: row; justify-content: flex-start;}
.form_ul8 li{width: 10%;list-style: none;}
.form_ul8 li input{ margin-right:3px;}
.dashed_line {
    padding: 2px;
    margin-bottom: 15px;
    width: 100%;
    border-bottom: 1px dashed #ddd;
}
.storeOperation_tab3{}
.storeOperation_tab3 li{margin: 1rem 0;box-shadow: -3px 3px 19px rgba(0, 0, 0, 0.1);border-radius: 0.8rem;word-wrap: break-word; background-color: #FFF;  background-clip: border-box; border: 0px solid rgba(0, 0, 0, 0.125);}
.storeOperation_tab3 li > div:first-child{margin-bottom: 1em;}
.storeOperation_tab3 li > div:first-child button{width:40px;}
.storeOperation_tab3 li > div:first-child button:nth-child(1) svg{height:40px;width:24px !important;}
.storeOperation_tab3 li > div:first-child button:nth-child(2) svg{height:40px;width:18px !important;}

.cafePos_popClose{display:block;text-align:right;padding-right:6%;margin-top:30px;margin-bottom:15px;}
.cafePos_popClose span{padding: 0 0 0 6px;line-height:1.6em;border-bottom: 2px solid #FF5722;font-size:1.1em;color: #FF5722;font-weight: 600;}
.custom-select1 select{ outline:0px;padding: 3px 10px;border: 0px; border-bottom: 1px solid #ddd;}

.delvFeeByAreaList .item {
            padding: 10px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .delvFeeByAreaList .item:last-child {
            border-bottom: none;
        }
        .delvFeeByAreaList .item-title {
            font-size: 18px;
            font-weight: bold;
        }
        .delvFeeByAreaList .item-content {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
         .delvFeeByAreaList .button {
            background-color: #d4f4ff;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            font-weight: 500;
            color: #4a5568;
            outline:none;
        }
        .delvFeeByAreaList .button:hover {
            background-color: #b5e8fb;
            transform: translateY(-2px);
        }
        .delvFeeByAreaList .price {
            font-weight: bold;
            font-size: 16px;
        }
#popAreaList .location-group {margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px dashed #efefef;}

#popAreaList .select-group {display: flex; gap: 10px;margin-bottom: 10px;}

#popAreaList .select-group span {
            flex: 1;
            padding: 8px;
            border-bottom: 1px solid #ddd;
}

#popAreaList .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

#popAreaList .checkbox-button {
            position: relative;
            display: inline-block;
        }

#popAreaList .checkbox-button input[type="checkbox"] { display: none;}

#popAreaList .checkbox-button label {
  display: inline-block;
  padding: 3px 15px;
  border:2px solid #47a2e5;
  border-radius: 20px;background:#fff;
  color:#47a2e5;
  cursor: pointer;
  transition: all 0.3s ease; 
  font-weight:normal}

#popAreaList .checkbox-button input[type="checkbox"]:checked + label {background-color: #47a2e5; color: white;}
#popAreaList .checkbox-button input[type="checkbox"]:disabled + label {background-color: #b5e8fb;border:1px solid #b5e8fb; color: white;}
.ml-30{margin-left:30px;}

@media screen and (max-width:710px) {
	.form_ul8 li{width:16.66%;list-style: none;}
	.mainFooter{margin-left:0; width:100%;}
	
}
@media screen and (max-width:510px) {.form_ul8 li{width:20%;list-style: none;}}
 @keyframes popIn {
 		0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
}

 @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
}

#goodStorePopup3 .modal-body{max-height:530px; overflow-y:auto;}

/*주소검색 */
#addressModal .modal-body{padding-top: 1rem;}
.oTableNumWrap1{border-radius:25px;width:100%;height: 49px;background:#f0f3f8;overflow:hidden;color:#999;position:relative;}
.oTableList1{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:2}
.oTableList1 span{padding:10px;float: left;width:50%;display: inline-block;text-align:center;}
.oTableList1 span.active{color:#fff;}
.oTableNumWrap1 .tPoint1{width:50%;transition:left 0.5s;display: inline-block;background:#00aef4;position:absolute;top:0;left:0;height:49px;border-radius:25px}

#addressModal .modal-body{padding-top: 1rem;}

.w2Ul:after ,.w3Ul:after{content:"";display:block;clear:both;} 
.w2Ul li{width:50%;float:left;display:inline-block;}
.w3Ul ul li{width:33.3%;float:left;display:inline-block;text-align:center;}

.border_btn{cursor:pointer;transition:0.2s;border-radius:5px;padding:0.4em;display: inline-block;width:98%;text-align:center;background:#fff;border:2px solid #bfc3c9}
.border_btn.active{background:#00aef4;border-color:#00aef4;color:#fff;}
.packingTitle .oTableNumWrap{border-radius:25px;margin-top: -14px;width:13rem;height: 45px;background:#f0f3f8;overflow:hidden;color:#999;font-size:0.9em;position:relative;}
.packingTitle .oTableList span{padding:12px;float: left;width:50%;}
.packingTitle .oTableNumWrap .tPoint{width:50%;transition:left 0.5s;display: inline-block;background:#00aef4;position:absolute;top:0;left:0;height:45px;border-radius:25px}
.key_kr{margin:1em 0;display:flex;flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;}
.key_kr span{width:10%;cursor:pointer;padding-top: 0.5em;border-radius:3px;margin-top:0.5em;margin-right:1.1%;transition:0.1s;height:3em;text-align:center;border:2px solid #00aef4}
.key_kr span.line2Btn{line-height: 1em;  padding-top: 0.37em;}
.key_kr span:not(.off):hover{transform:translate(3px, 3px);}
.key_kr span:not(.off):active{transform:translate(3px, 3px);background:#e1e1e1}
.border_btn:hover{transform:translate(0px, 3px);}
.border_btn:active{transform:translate(0px, 3px);background:#e1e1e1}
.key_kr span.off{cursor:auto;background:#c5c5c5;border-color:#c5c5c5;color:#adadad}
.key_kr > .active:not(.off){background: #00aef4;color:#fff}
#addressModal hr {margin: 0rem auto;}
 #addressModal .modal-dialog {max-width: 800px;}
.order_title{margin:10px auto 0;border-bottom:1px solid #ddd;padding:12px 0;}
.order_title .btn1{float:right;font-size:0.8em}
.order_title .icon2{margin-left:5px}

.order_list{overflow-y:auto;height:calc(100% - 20px);-webkit-height:calc(100% - 20px);-moz-height:calc(100% - 20px);-o-height:calc(100% - 20px);padding:10px 25px 15px;}
#reservPopup .order_list{overflow-y:auto;height:calc(100% - 20px);-webkit-height:calc(100% - 20px);-moz-height:calc(100% - 20px);-o-height:calc(100% - 20px);padding:10px 0px 15px;}

.order_list li{padding:5px 0;border-bottom:1px solid #ddd}
.order_list .menu_sub{color:#666;}
.order_list li p {overflow:hidden;}
.order_list li p input{}
.order_list li p label{padding:3px 0;display:inline-block;width:95%;float:right;}
.order_list li p label span{float:right}
.order_list li p.menu_sub label{color:#9d9d9d;font-weight:normal;}
.menu_sub em{display:inline-block;margin-right:3px;width:1.2rem;height:1rem;color:#9d9d9d}

.order_state{display:block}
.order_state:after{content:"";clear:both;display:block;width:100%}
.order_state li{width:25%;float:left;text-align:center;}
.order_state li span{padding-bottom:54%;width:54%;box-shadow:0px 0px 4px rgb(100 100 100 / 20%);display:inline-block;border-radius:50%;;}
.order_state li:nth-child(1) span{background-image: url(/images/pos/icon-29-1.png);background-size: 50%;background-color:#f8f8f8;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(2) span{background-image: url(/images/pos/icon-30-1.png);background-size: 50%;background-color:#f8f8f8;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(3) span{background-image: url(/images/pos/icon-28-1.png);background-size: 50%;background-color:#f8f8f8;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(4) span{background-image: url(/images/pos/icon-31-1.png);background-size: 50%;background-color:#f8f8f8;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(1).active span{background-image: url(/images/pos/icon-29.png);background-size: 50%;background-color:#ecf3f7;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(2).active span{background-image: url(/images/pos/icon-30.png);background-size: 50%;background-color:#ffebed;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(3).active span{background-image: url(/images/pos/icon-28.png);background-size: 50%;background-color:#f9f4ec;background-repeat: no-repeat;background-position: center;}
.order_state li:nth-child(4).active span{background-image: url(/images/pos/icon-31.png);background-size: 50%;background-color:#f8f8f8;background-repeat: no-repeat;background-position: center;}
.borderTop3{border-top:2px solid #ADB5BD}
#addressModal .addSchWrap label {
    border: none;
    line-height: 0;
    padding: 0rem 1rem;
    height: auto !important; 
    margin-bottom: 14px;
    display: block;
}
#halllist li.ui-sortable-helper{background:#F2F9FC;}


/* GIS Style */
.fullMap{width:100%;height:20rem}
.map_wrap h5{text-align:center;margin-top:10px}
.map_wrap_scroll{max-height:13rem;padding-right:10px;overflow-y:auto;}
.map_btn{padding:20px;text-align:center;color:#fff;font-size:1.2rem;background:#cdcdcd;border-radius: 0 0 1rem 1rem;}
.map_btn.active{color:#fff;background:#00aef1}
.map_list_wrap{width:100%;margin-bottom:5px;margin-bottom: 10px;    border-bottom: 1px solid #ddd;}
.map_list_wrap .map_list_main{width:100%;display: grid;align-items: center;    grid-template-columns: 3fr 1fr 1fr;}
.map_list_wrap .map_list_main li:first-child{color:#00aef1;}
.map_list_wrap .map_list_main li:nth-child(2){text-align:center;}
.map_list_wrap .map_list_main li:nth-child(3){text-align:right}
.map_list_wrap .map_list_sub{width:100%;display: grid;align-items: center;    grid-template-columns: 4fr 1fr;}
.map_list_wrap .map_list_sub li:first-child:before{content:" "; border-bottom: 1px solid; border-left: 1px solid; transform: rotateZ(-54deg);    left: 0;    top: 12px;    width: 14px;    height: 10px;    position: absolute;display:inline-block;margin-right:5px;}
.map_list_wrap .map_list_sub li:nth-child(2){text-align:center;}
.map_list_wrap .map_list_sub li:nth-child(3){text-align:right;}



/* 키오스크 통합 스타일 - 최적화 버전 */

/* 기본 리셋 */
.kiosk_wrap * { margin: 0; padding: 0; box-sizing: border-box; }
.kiosk_wrap body { font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; overflow: hidden; }
.kiosk_wrap button {outline:none}
/* 키오스크 래퍼 */
.kiosk_wrap { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #ffffff; position: relative; }
.kiosk-container { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #fff; }

/* ===== 1페이지: 메인 화면 ===== */
/* 로고 */
.kiosk_wrap .kiosk_logo { text-align: center; margin-bottom: 40px; }
.kiosk_wrap .kiosk_logo img { height: 55px; }

/* 광고 영역 */
.kiosk_wrap .ad-section { width: 100%; height: 100%; position: fixed; z-index: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; }
.kiosk_wrap .ad-video { width: 100%; height: 100%; object-fit: cover; }
.kiosk_wrap .ad-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-size: 32px; font-weight: bold; }

/* 메인 컨텐츠 */
.kiosk_wrap .main-content { flex: 1; z-index: 1; margin-top: 3rem; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; }
.kiosk_wrap .title-section { text-align: center; margin-bottom: 30px; }
.kiosk_wrap .main-title { font-size: 48px; font-weight: 700; color: #666; margin-bottom: 10px; }

/* 주문 버튼 */
.kiosk_wrap .order-buttons { display: flex; gap: 60px; justify-content: center; align-items: center; flex: 1; }
.kiosk_wrap .order-btn { background: white; border: 3px solid #e0e0e0; border-radius: 24px; width: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.kiosk_wrap .order-btn:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,0.15); border-color: #00aef1; }
.kiosk_wrap .order-btn:active { transform: translateY(-4px); }
.kiosk_wrap .order-icon { width: 180px; height: 180px; }
.kiosk_wrap .order-icon1 { width: 180px; height: 180px; }
.kiosk_wrap .order-text p:first-child{ font-size: 42px; font-weight: 700; color: #333; }
.kiosk_wrap .order-text p:last-child{ font-size: 42px; margin-bottom:2rem;font-weight: 300; color: #959595; }

/* 언어 선택 */
.kiosk_wrap .language-section { margin-top: 30px; width:70%;margin-left:15%;}
.kiosk_wrap .language-scroll-container { position: relative; overflow: hidden; padding: 0 60px; }
.kiosk_wrap .language-scroll { display: flex; gap: 15px; overflow-x: auto; scroll-behavior: smooth; padding: 10px 0; scrollbar-width: none; -ms-overflow-style: none; }
.kiosk_wrap .language-scroll::-webkit-scrollbar { display: none; }
.kiosk_wrap .language-btn { flex-shrink: 0; padding: 18px 32px; background: white; border: 2px solid #ddd; border-radius: 50px; font-size: 22px; font-weight: 600; color: #666; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.kiosk_wrap .language-btn.active { background: #00aef1; color: white; border-color: #00aef1; }
.kiosk_wrap .language-btn:hover:not(.active) { border-color: #999; background: #f5f5f5; }

/* 스크롤 버튼 */
.kiosk_wrap .scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: white; border: 2px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; color: #666; z-index: 10; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.kiosk_wrap .scroll-btn:hover { background: #f5f5f5; border-color: #999; }
.kiosk_wrap .scroll-btn.left { left: 0; }
.kiosk_wrap .scroll-btn.right { right: 0; }

/* ===== 공통: 상단 헤더 ===== */
.kiosk_wrap .header-fixed { position: sticky; top: 0; z-index: 100; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.kiosk_wrap .top-bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; border-bottom: 1px solid #e0e0e0; }
.kiosk_wrap .back-btn { width: 60px; height: 60px; border: 2px solid #fff; border-radius: 12px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 28px; transition: all 0.3s; }
.kiosk_wrap .back-btn:hover { background: #f5f5f5; border-color: #fff; }
.kiosk_wrap .store-title { font-size: 32px; font-weight: 700; color: #333; }
.kiosk_wrap .store-title img { height: 40px; }
.kiosk_wrap .home-btn { width: 60px; height: 60px; border: 2px solid #fff; border-radius: 12px; background: white; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 28px; transition: all 0.3s; }
.kiosk_wrap .home-btn:hover { background: #f5f5f5; border-color: #00aef1; }

/* 로고 섹션 (장바구니 페이지) */
.kiosk_wrap .logo-section { display: flex; align-items: center; gap: 15px; }
.kiosk_wrap .logo { width: 50px; height: 50px; background: linear-gradient(135deg, #00aef1, #0096d5); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: 700; }
.kiosk_wrap .store-info { display: flex; flex-direction: column; }
.kiosk_wrap .store-name { font-size: 14px; color: #999; }
.kiosk_wrap .page-title { font-size: 28px; font-weight: 700; color: #333; }

/* ===== 2페이지: 메뉴 선택 ===== */
/* 카테고리 */
.kiosk_wrap .category-container { position: relative; padding: 0 30px; background: white; }
.kiosk_wrap .category-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding: 12px 0; scrollbar-width: none; -ms-overflow-style: none; }
.kiosk_wrap .category-scroll::-webkit-scrollbar { display: none; }
.kiosk_wrap .category-item { flex-shrink: 0; padding: 16px 32px; background: #f5f5f5; border: 2px solid transparent; border-radius: 50px; font-size: 20px; font-weight: 600; color: #666; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.kiosk_wrap .category-item.active { background: #00aef1; color: white; border-color: #00aef1; }
.kiosk_wrap .category-item:hover:not(.active) { background: #e0e0e0; }

/* 메뉴 그리드 */
.kiosk_wrap .menu-scroll-area { flex: 1; overflow-y: auto; padding: 30px; background: #f8f9fa; }
.kiosk_wrap .menu-grid .section_divFlex{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }
.kiosk_wrap .menu-card { background: white; border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative; }
.kiosk_wrap .menu-card:hover { transform: translateY(-8px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.kiosk_wrap .menu-image { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 80px; overflow: hidden; }
.kiosk_wrap .menu-image img { width: 100%; height: 100%; object-fit: cover; }
.kiosk_wrap .menu-info { padding: 10px 20px; }
.kiosk_wrap .menu-name { font-size: 20px; font-weight: 700; color: #333; margin-bottom: 8px; }
.kiosk_wrap .menu-desc { font-size: 14px; color: #999; margin-bottom: 12px; line-height: 1.4; }
.kiosk_wrap .menu-price {display:flex;align-items: center; justify-content: space-between;}
.kiosk_wrap .menu-price span:first-child{ font-size: 20px; }
.kiosk_wrap .menu-price span:last-child{ font-size: 24px; font-weight: 700; color: #00aef1; }

/* 하단 장바구니 (메뉴 페이지) */
.kiosk_wrap .cart-fixed { position: sticky; bottom: 0; z-index: 100; background: white; border-top: 2px solid #e0e0e0; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); display: flex; }
.kiosk_wrap .cart-items-list { flex: 1; max-height: 310px; overflow-y: auto; padding: 20px 30px; border-right: 2px solid #e0e0e0; }
.kiosk_wrap .cart-item-row { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.kiosk_wrap .cart-item-row:last-child { border-bottom: none; }
.kiosk_wrap .cart-item-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.kiosk_wrap .cart-item-left { flex: 1; }
.kiosk_wrap .cart-item-name { font-size: 20px; color: #333; font-weight: 500; }
.kiosk_wrap .cart-item-options { display: flex; align-items: center; font-size: 18px; color: #666; padding: 2px 0; gap: 4px; }
.kiosk_wrap .cart-item-options .option-arrow { font-size: 10px; }
.kiosk_wrap .cart-item-controls {    display: flex;    flex-direction: row;    align-items: center;    gap: 8px;    flex-shrink: 0;    justify-content: flex-end;}
.kiosk_wrap .cart-item-qty { display: flex; align-items: center; gap: 10px; }
.kiosk_wrap .qty-btn { width: 32px; height: 32px; border: 1px solid #ddd; background: white; border-radius: 6px; cursor: pointer; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.kiosk_wrap .qty-btn:hover { background: #f5f5f5; border-color: #00aef1; }
.kiosk_wrap .qty-display { font-size: 20px; font-weight: 600; min-width: 30px; text-align: center; }
.kiosk_wrap .cart-item-price { font-size: 20px; min-width:85px;font-weight: 700; color: #00aef1; text-align: right; }
.kiosk_wrap .delete-btn { width: 28px; height: 28px; border: 1px solid #ff4757; background: white; color: #ff4757; border-radius: 6px; cursor: pointer; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.kiosk_wrap .delete-btn:hover { background: #ff4757; color: white; }
.kiosk_wrap .cart-summary { min-width: 270px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; background: #f8f9fa; }
.kiosk_wrap .clear-cart-btn { width: 100%; padding: 13px; background: white; border: 1px solid #ff4757; color: #ff4757; border-radius: 8px; font-size: 18px; cursor: pointer; transition: all 0.3s; margin-bottom: 20px; }
.kiosk_wrap .clear-cart-btn:hover { background: #ff4757; color: white; }
.kiosk_wrap .cart-total-section { margin-bottom: 20px; }
.kiosk_wrap .cart-final-total { display: flex; justify-content: space-between; align-items: center; }
.kiosk_wrap .cart-final-label { font-size: 22px; font-weight: 700; color: #333; }
.kiosk_wrap .cart-final-value { font-size: 32px; font-weight: 700; color: #00aef1; }
.kiosk_wrap .cart-btn { width: 100%; padding: 35px 24px; background: #00aef1; color: white; border: none; border-radius: 12px; font-size: 26px; font-weight: 700; cursor: pointer; transition: all 0.3s; }
.kiosk_wrap .cart-btn:hover { background: #0096d5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,174,241,0.3); }
.kiosk_wrap .cart-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
.kiosk_wrap .empty-cart { padding: 50px 30px; text-align: center; color: #999; font-size: 18px; }

/* ===== 3페이지: 옵션 모달 ===== */
.kiosk_wrap .option-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 200; display: none; opacity: 0; transition: opacity 0.3s; }
.kiosk_wrap .option-modal-overlay.show { display: flex; opacity: 1; }
.kiosk_wrap .option-modal { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-radius: 24px 24px 0 0; max-height: 92vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -4px 20px rgba(0,0,0,0.15); }
.kiosk_wrap .option-modal-overlay.show .option-modal { transform: translateY(0); }
.kiosk_wrap .option-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 25px 30px; border-bottom: 2px solid #f0f0f0; }
.kiosk_wrap .option-menu-title { font-size: 28px; font-weight: 700; color: #333; }
.kiosk_wrap .option-header-right { display: flex; align-items: center; gap: 20px; }
.kiosk_wrap .option-main-qty { display: flex; align-items: center; gap: 15px; border: 2px solid #e0e0e0; border-radius: 12px; padding: 8px 16px; }
.kiosk_wrap .option-main-qty-btn { width: 40px; height: 40px; border: none; background: #f5f5f5; border-radius: 8px; font-size: 24px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.kiosk_wrap .option-main-qty-btn:hover { background: #00aef1; color: white; }
.kiosk_wrap .option-main-qty-display { font-size: 24px; font-weight: 700; min-width: 40px; text-align: center; }
.kiosk_wrap .option-main-price { font-size: 28px; font-weight: 700; color: #00aef1; }
.kiosk_wrap .option-modal-body { flex: 1; overflow-y: auto; padding: 30px; }
.kiosk_wrap .option-section { margin-bottom: 35px; }
.kiosk_wrap .option-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.kiosk_wrap .option-section-title { font-size: 22px; font-weight: 700; color: #333; }
.kiosk_wrap .option-section-count { font-size: 18px; color: #666; font-weight: 500; }
.kiosk_wrap .option-required ,#menuDetail .option-required{ display: inline-block; padding: 4px 12px; background: #ff4757; color: white; border-radius: 6px; font-size: 14px; font-weight: 600; }
.kiosk_wrap .option-optional ,#menuDetail .option-optional{ display: inline-block; padding: 4px 12px; background: #00aef1; color: white; border-radius: 6px; font-size: 14px; font-weight: 600; }
.kiosk_wrap .option-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.kiosk_wrap .option-card { background: white; border: 3px solid #e0e0e0; border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s; }
.kiosk_wrap .option-card:hover { border-color: #00aef1; transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0,174,241,0.2); }
.kiosk_wrap .option-card.selected { border-color: #00aef1; background: #f0f9ff; }
.kiosk_wrap .option-card-name { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 8px; }
.kiosk_wrap .option-card-price { font-size: 18px; font-weight: 700; color: #00aef1; }
.kiosk_wrap .option-modal-footer { padding: 25px 30px; border-top: 2px solid #f0f0f0; background: white; display: flex; gap: 15px; }
.kiosk_wrap .option-cancel-btn { flex: 1; padding: 20px; background: white; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 22px; font-weight: 700; color: #666; cursor: pointer; transition: all 0.3s; }
.kiosk_wrap .option-cancel-btn:hover { border-color: #999; background: #f5f5f5; }
.kiosk_wrap .option-add-cart-btn { flex: 2; padding: 20px; background: #00aef1; color: white; border: none; border-radius: 12px; font-size: 24px; font-weight: 700; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.kiosk_wrap .option-add-cart-btn img{width:2rem}
.kiosk_wrap .option-add-cart-btn:hover { background: #0096d5; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,174,241,0.4); }

/* ===== 4페이지: 장바구니 ===== */
.kiosk_wrap .clear-all-btn { padding: 12px 28px; background: #cf0000; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s; }
.kiosk_wrap .clear-all-btn:hover { background: #ff3838; transform: translateY(-1px); }

.kiosk_wrap .cart-scroll-area { flex: 1; overflow-y: auto; padding: 30px; background: #f8f9fa; }
.kiosk_wrap .cart-item { background: white; border-radius: 16px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.kiosk_wrap .item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.kiosk_wrap .item-number { display: inline-block; width: 32px; height: 32px; background: #999; color: white; border-radius: 50%; text-align: center; line-height: 32px; font-size: 16px; font-weight: 700; }
.kiosk_wrap .item-name { font-size: 22px; font-weight: 700; color: #333; flex: 1; margin-left: 15px; }
.kiosk_wrap .delete-item-btn { width: 32px; height: 32px; border: none; background: #666; color: white; border-radius: 8px; font-size: 20px; cursor: pointer; transition: all 0.3s; }
.kiosk_wrap .delete-item-btn:hover { background: #ff3838; transform: scale(1.1); }
.kiosk_wrap .item-options { padding-left: 47px; margin-bottom: 15px; }
.kiosk_wrap .option-row { display: grid; grid-template-columns: 12rem 1fr 120px; gap: 20px; align-items: center; padding: 8px 0; color: #666; font-size: 18px;}
.kiosk_wrap .option-label { display: flex; align-items: center; }
.kiosk_wrap .option-arrow { color: #666;font-size:0.4rem;margin-right: 8px; }
.kiosk_wrap .option-value { color: #333; text-align: left;}
.kiosk_wrap .option-price {  font-weight: 600; text-align: right;}
.kiosk_wrap .item-footer { display: flex; justify-content: space-between; align-items: center; padding-left: 47px; }
.kiosk_wrap .qty-controls { display: flex; align-items: center; gap: 12px; }
.kiosk_wrap .item-total-price { font-size: 24px; font-weight: 700; color: #00aef1; }
.kiosk_wrap .add-option-btn { padding: 8px 20px; background: white; border: 2px solid #ff8a22; color: #ff8a22; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s; margin-left: 15px; }
.kiosk_wrap .add-option-btn:hover { background: #ff8a22; color: white; }

.kiosk_wrap .bottom-fixed { position: sticky; bottom: 0; z-index: 100; background: white; border-top: 2px solid #e0e0e0; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); }
.kiosk_wrap .summary-section { padding: 20px 30px; background: #f8f9fa; border-bottom: 2px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; }
.kiosk_wrap .summary-label { font-size: 20px; color: #666; }
.kiosk_wrap .summary-count { font-size: 20px; font-weight: 700; color: #333; margin-left: 10px; }
.kiosk_wrap .total-value { font-size: 32px; font-weight: 700; color: #00aef1; }
.kiosk_wrap .button-section { padding: 20px 30px; display: flex; gap: 15px; }
.kiosk_wrap .checkout-btn { flex: 2; padding: 20px; background: #00aef1; color: white; border: none; border-radius: 12px; font-size: 24px; font-weight: 700; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 12px; }
.kiosk_wrap .checkout-btn:hover { background: #0096d5; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,174,241,0.4); }

.kiosk_wrap .empty-cart-icon { font-size: 80px; margin-bottom: 20px; }
.kiosk_wrap .empty-cart-icon img{width:6rem;}
.kiosk_wrap .empty-cart-text { font-size: 20px; }

/* ===== 5페이지: 결제 ===== */

/* 알림 메시지 */
.kiosk_wrap .notice-section { padding: 20px 30px;background:#f8f9fa; }
.kiosk_wrap .notice-text { font-size: 18px; color: #fff; font-weight: 400; text-align: center;  padding: 20px 30px; font-weight:bold;background: #00aef1; border: 2px solid #00aef1; border-radius: 8px;}

/* 주문 내역 영역 (스크롤) */
.kiosk_wrap .order-scroll-area { flex: 1; overflow-y: auto; padding: 0 30px 30px 30px; background: #f8f9fa; }
.kiosk_wrap .order-item { background: white; border-radius: 16px; padding: 25px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.kiosk_wrap .item-name-section { display: flex; align-items: center; gap: 15px; }
.kiosk_wrap .item-qty-price { display: flex; align-items: center; gap: 20px; }
.kiosk_wrap .item-qty { font-size: 20px; color: #666; }
.kiosk_wrap .item-qty strong { color: #333; font-size: 22px; }

/* 하단 합계 섹션 (결제 페이지용) */
.kiosk_wrap .summary-right { display: flex; align-items: center; gap: 30px; }
.kiosk_wrap .summary-total-label { font-size: 20px; color: #666; }

/* 결제 버튼 */
.kiosk_wrap .payment-buttons { padding: 20px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.kiosk_wrap .payment-btn { padding: 30px; background: white; border: 3px solid #e0e0e0; border-radius: 12px; font-size: 22px; font-weight: 700; color: #333; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kiosk_wrap .payment-btn:hover { border-color: #00aef1; background: #f0f9ff; transform: translateY(-2px); }
.kiosk_wrap .payment-btn-icon { font-size: 32px; }
.kiosk_wrap .payment-btn-icon img{width: 3rem; }
.kiosk_wrap .payment-btn.samsung { border-color: #00aef1; background: white; }
.kiosk_wrap .payment-btn.easy { border-color: #00aef1; background: white; }

/* 빈 주문 내역 */
.kiosk_wrap .empty-order { text-align: center; padding: 100px 30px; color: #999; }
.kiosk_wrap .empty-order-icon { font-size: 80px; margin-bottom: 20px; }
.kiosk_wrap .empty-order-icon img{ width: 80px;}
.kiosk_wrap .empty-order-text { font-size: 20px; }

 /* 공통 모달 스타일 */
 .payment-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; display: none; opacity: 0; transition: opacity 0.3s; }
 .payment-modal-overlay.show { display: flex; align-items: center; justify-content: center; opacity: 1; }
 .payment-modal { background: white; border-radius: 24px; width: 90%; max-width: 800px; max-height: 90vh; overflow: hidden; transform: scale(0.9); transition: transform 0.3s; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
 .payment-modal-overlay.show .payment-modal { transform: scale(1); }
 
.payment-modal .modal-header { padding:20px; border-bottom: 2px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.payment-modal .modal-title { font-size: 28px; font-weight: 700; color: #333; }
.payment-modal .modal-close { width: 40px; height: 40px; border: none; background: #f5f5f5; border-radius: 50%; font-size: 24px; cursor: pointer; }
.payment-modal .modal-close:hover { background: #ff4757; color: white; }

.payment-modal .modal-body { padding: 40px; text-align: center; overflow-y: auto; max-height: calc(90vh - 200px); }
.payment-modal .modal-message { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 30px; }
.payment-modal .modal-footer { padding: 0px; border-top: 2px solid #f0f0f0; display: flex; justify-content: center; }
.payment-modal .modal-btn { flex:1; padding: 25px; border: none; font-size: 20px; font-weight: 700; cursor: pointer; transition: all 0.3s; }
.payment-modal .modal-btn.primary { background: #00aef1; color: white; }
.payment-modal .modal-btn.primary:hover { background: #0096d5; }
.payment-modal .modal-btn.secondary { background: #666; color: #fff; }
.payment-modal .modal-btn.secondary:hover { border-color: #999; }
.payment-modal .modal-body-btn .back-to-menu {    outline: none; border: 0; display: block;float:right;background: transparent;line-height:3rem;padding:10px 20px 5px; border-bottom:2px solid #00aef1;color:#00aef1}
.payment-modal .modal-body-btn  { text-align: right;margin-bottom:10px;  width: 100%;    display: block;    height: 3rem; }

.kiosk_body .payment-modal {max-height:98vh;}
.kiosk_body .payment-modal .modal-body {max-height: calc(100vh - 200px);}

 /* 8번: 전화번호 입력 */
 .phone-input-section { margin: 0; }
 .phone-display { font-size: 32px; font-weight: 700; color: #00aef1; padding: 20px; background: #f8f9fa; border-radius: 12px; margin-bottom: 30px; min-height: 60px; }
 .point-display { font-size: 32px;  background: #f8f9fa; border-radius: 12px; margin-bottom: 30px; min-height: 60px;position:relative;    display: flex;
    flex-direction: row; align-content: stretch; justify-content: flex-end;align-items: center;}
 .price-display {justify-content: space-between;align-items: center;font-size: 25px;margin-bottom: 10px; display: flex; flex-direction: row; align-content: stretch; }
 .price-display > span:first-child{color: #656565;font-size:20px} 
 .price-display > span:last-child{font-weight: 700;} 
 .point-display > span:first-child{font-weight: 700; color: #00aef1; padding:0 10px;} 
 .point-display > span:last-child{ border-left: 1px solid #eee; border-radius:0 12px 12px 0;color:#777;padding:0 10px;line-height:60px;background: #eee;} 
 .phone-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 400px; margin: 0 auto; }
 .keypad-btn { padding: 20px; background: white; border: 2px solid #e0e0e0; border-radius: 12px; font-size: 24px; font-weight: 700; cursor: pointer; transition: all 0.3s; }
 .keypad-btn:hover { background: #00aef1; color: white; border-color: #00aef1; }
 .privacy-notice { font-size: 14px; color: #999; text-align: left; padding: 20px; background: #f8f9fa; border-radius: 8px; margin: 30px 0 0; line-height: 1.6; }

 /* 9번: 포인트 관리 */
 .point-info {margin-bottom: 20px;display:flex;gap:1.2rem; }
 .point-info > div{ padding: 10px; border-radius: 16px; flex:1;color: white;}
 .point-info > div:first-child{ background:#00aef1}
 .point-info > div:last-child{ background:#8ae3ff}
 .point-label { font-size: 18px; margin-bottom: 10px; opacity: 0.9; }
 .point-value { font-size: 32px; font-weight: 700;}
 .point-input-section { margin: 30px 0; }
 .point-input-wrapper { display: flex; gap: 15px; align-items: center; justify-content: center; margin-bottom: 20px; }
 .point-input { padding: 15px 20px; font-size: 24px; border: 2px solid #e0e0e0; border-radius: 8px; width: 200px; text-align: right; }
 .use-all-btn { padding: 15px 30px; background: #00aef1; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; }
 .use-all-btn:hover { background: #0096d5; }

 /* 10번: IC카드 결제 - 카드 투입 애니메이션 */
 .card-animation-container { height: 300px; display: flex; align-items: center; justify-content: center; position: relative; margin: 40px 0; }
 .card-animation-container img { height: 250px; }
 
 
.payment-option-btn { background: #ffffff; color: #2c3e50; border: 2px solid #e0e0e0; padding: 18px 35px;border-radius: 12px;  font-size: 18px;  font-weight: 600;  cursor: pointer;    transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
.payment-option-btn:hover { background: #00aef1; color: white; border-color: #00aef1;   transform: translateY(-3px);  box-shadow: 0 8px 20px rgba(0, 174, 241, 0.3);}
.payment-option-btn:active {  transform: translateY(-1px);}
 /* 11번: MS카드 결제 - 카드 스와이프 애니메이션 */
 
 /* 12번: 간편결제 */
 .easy-pay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 600px; margin: 20px auto; }
 .easy-pay-btn { padding: 40px 20px; background: white; border: 3px solid #e0e0e0; border-radius: 16px; cursor: pointer; transition: all 0.3s; }
 .easy-pay-btn:hover { border-color: #00aef1; transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,174,241,0.2); }
 .easy-pay-icon { font-size: 48px;width:48px;height:48px;border-radius: 50%; margin-bottom: 15px; margin: 0 auto 15px;    overflow: hidden;}
 .easy-pay-icon img{ width: 3rem; }
 .easy-pay-name { font-size: 18px; font-weight: 600; color: #333; }

 /* 13번: QR코드 스캔 */
 .qr-scan-container { height: 300px; display: flex; align-items: center; justify-content: center; position: relative; margin: 40px 0; }
 .qr-scanner { width: 300px; height: 300px; border: 3px solid #00aef1; border-radius: 16px; position: relative; overflow: hidden; }
 .qr-code { width: 200px; height: 200px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid #333; display: flex; align-items: center; justify-content: center; font-size: 80px; }
 .scan-line { width: 100%; height: 3px; background: #00aef1; position: absolute; top: 0; left: 0; animation: scanLine 2s linear infinite; box-shadow: 0 0 10px #00aef1; }
 @keyframes scanLine {
     0%, 100% { top: 0; }
     50% { top: 100%; }
 }

/* 카테고리 스크롤 개선 */
.kiosk_wrap .section {margin-bottom:2rem;}
.kiosk_wrap .section h2{margin-bottom:1rem;padding-top:1rem;font-size: 1.7rem;}
.kiosk_wrap .category-scroll {cursor: grab;user-select: none;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    scroll-behavior: smooth;}
.kiosk_wrap .category-scroll.active {    cursor: grabbing;}
.kiosk_wrap .category-scroll::-webkit-scrollbar {    display: none;}
.kiosk_wrap .category-scroll {    -ms-overflow-style: none;    scrollbar-width: none;}
/* 카테고리 아이템 클릭 방지 (드래그 중) */
.kiosk_wrap .category-scroll.active .category-item {    pointer-events: none;}
/* 카테고리 아이템 터치 개선 */
.kiosk_wrap .category-item {    touch-action: manipulation;    -webkit-tap-highlight-color: transparent;}

/* ===== 애니메이션 ===== */
.kiosk_wrap .fly-to-cart { position: fixed; pointer-events: none; z-index: 1000; animation: flyToCart 0.8s ease-out; }
@keyframes flyToCart { 
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(0.2); }
}

.kiosk_wrap .cart-icon-fly { position: fixed; pointer-events: none; z-index: 1000; font-size: 48px; animation: flyCartIcon 0.8s ease-out; }
.order-time{position: absolute;  top: calc(50% - 1.9rem);  color: #ffffff;    left: 0;    right: 0;    text-align: center;    font-size: 3.5rem;    text-shadow: 0 0 8px #000;    font-weight: 700;}
@keyframes flyCartIcon {
    0% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.8; transform: scale(0.6) rotate(180deg); }
    100% { opacity: 0; transform: scale(0.2) rotate(360deg); }
}

/* ===== 반응형 ===== */
@media (orientation: landscape) {
    .kiosk_wrap .main-content { padding: 30px 60px; }
    .kiosk_wrap .main-title { font-size: 42px; }
    .kiosk_wrap .order-buttons { gap: 80px; }
    .kiosk_wrap .order-btn { width: 340px; }
    .kiosk_wrap .order-icon { width: 160px; height: 160px; }
    .kiosk_wrap .order-icon1 { width: 160px; height: 160px; }
    .kiosk_wrap .order-text { font-size: 38px; }
    .kiosk_wrap .menu-grid .section_divFlex{ grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .kiosk_wrap .option-cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .kiosk_wrap .cart-item { padding: 20px; }
}

@media (max-width: 1024px) {
    .kiosk_wrap .order-btn { width: 300px; }
    .kiosk_wrap .order-icon { width: 140px; height: 140px; }
    .kiosk_wrap .order-icon1 { width: 140px; height: 140px; }
    .kiosk_wrap .order-text { font-size: 36px; }
    .kiosk_wrap .language-btn { font-size: 20px; padding: 16px 28px; }
    .kiosk_wrap .language-section { width:auto;margin-left:0;}
}
@media (max-width: 700px) {
	.kiosk_wrap .main-content{padding:10px;}
	.kiosk_wrap .order-buttons{gap: 20px;}
	.kiosk_wrap .option-row {grid-template-columns:100px 1fr 120px;}
	
}


/* ===== 14-16페이지: 결과 화면 추가 CSS ===== */

/* 14번: 결제완료 - 성공 아이콘 */
.kiosk_wrap .success-icon { 
    width: 120px; height: 120px; 
    background: linear-gradient(135deg, #00aef1, #0096d5); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 64px; color: white; 
    margin-bottom: 30px; 
    animation: scaleIn 0.5s ease-out; 
    box-shadow: 0 10px 30px rgba(0,174,241,0.3); 
}
@keyframes scaleIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* 대기번호 카드 */
.kiosk_wrap .waiting-number-card { 
    background: white; 
    border-radius: 24px; 
    padding: 50px 80px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.1); 
    margin-bottom: 40px; 
    text-align: center; 
    animation: slideUp 0.6s ease-out 0.2s both; 
}
.kiosk_wrap .waiting-label { font-size: 22px; color: #666; margin-bottom: 20px; }
.kiosk_wrap .waiting-number { font-size: 96px; font-weight: 700; color: #00aef1; line-height: 1; margin-bottom: 10px; }
.kiosk_wrap .waiting-suffix { font-size: 28px; color: #666; }

/* 안내 메시지 */
.kiosk_wrap .info-message { 
    font-size: 18px; color: #999; 
    text-align: center; margin-bottom: 40px; 
    line-height: 1.6; 
    animation: fadeIn 0.8s ease-out 0.4s both; 
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 하단 액션 버튼 (14-16번 공통) */
.kiosk_wrap .action-btn { 
    padding: 25px; 
    background: white; 
    border: 3px solid #e0e0e0; 
    border-radius: 12px; 
    font-size: 20px; font-weight: 700; color: #333; 
    cursor: pointer; 
    transition: all 0.3s; 
    display: flex; flex-direction: column; 
    align-items: center; gap: 10px; 
}
.kiosk_wrap .action-btn:hover { 
    border-color: #00aef1; 
    background: #f0f9ff; 
    transform: translateY(-2px); 
}
.kiosk_wrap .action-btn-icon { font-size: 32px; }
.kiosk_wrap .action-btn.primary { 
    background: #00aef1; 
    color: white; 
    border-color: #00aef1; 
}
.kiosk_wrap .action-btn.primary:hover { background: #0096d5; }

/* 15번: 결제오류 - 에러 아이콘 */
.kiosk_wrap .error-icon { 
    width: 120px; height: 120px; 
    background: linear-gradient(135deg, #ff4757, #ff3838); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 64px; color: white; 
    margin-bottom: 30px; 
    animation: shake 0.5s ease-out; 
    box-shadow: 0 10px 30px rgba(255,71,87,0.3); 
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* 16번: 기타오류 - 경고 아이콘 */
.kiosk_wrap .warning-icon { 
    width: 120px; height: 120px; 
    background: linear-gradient(135deg, #ffa502, #ff7f00); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 64px; color: white; 
    margin-bottom: 30px; 
    animation: pulse 1s ease-in-out infinite; 
    box-shadow: 0 10px 30px rgba(255,165,2,0.3); 
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 에러 카드 (15, 16번 공통) */
.kiosk_wrap .error-card { 
    background: white; 
    border-radius: 24px; 
    padding: 50px 80px; 
    box-shadow: 0 8px 24px rgba(0,0,0,0.1); 
    text-align: center; 
    max-width: 700px; 
    animation: slideUp 0.6s ease-out 0.2s both; 
}
@keyframes slideUp {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.kiosk_wrap .error-title { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 30px; }
.kiosk_wrap .error-message { font-size: 20px; color: #666; margin-bottom: 20px; line-height: 1.6; }

/* 에러 사유 박스 */
.kiosk_wrap .error-reason-box { 
    border-radius: 12px; 
    padding: 20px; 
    margin-top: 30px; 
}
.kiosk_wrap .error-reason-box.payment-error { 
    background: #fff5f5; 
    border: 2px solid #ff4757; 
}
.kiosk_wrap .error-reason-box.general-error { 
    background: #fffbf0; 
    border: 2px solid #ffa502; 
}
.kiosk_wrap .error-reason-label { 
    font-size: 16px; 
    font-weight: 600; 
    margin-bottom: 10px; 
}
.kiosk_wrap .error-reason-label.payment-error { color: #ff4757; }
.kiosk_wrap .error-reason-label.general-error { color: #ffa502; }
.kiosk_wrap .error-reason-text { font-size: 18px; color: #333; }
.kiosk_top_btn{background: #f8f9fa; text-align: right; padding: 10px;}
/* 반응형 (14-16번) */
@media (orientation: landscape) {
    .kiosk_wrap .waiting-number-card { padding: 40px 60px; }
    .kiosk_wrap .waiting-number { font-size: 80px; }
    .kiosk_wrap .error-card { padding: 40px 60px; }
}


/* ===== 배송 상태 지도 스타일 ===== */
.delivery-status-capsule {position:absolute;top:20px;left:50%;transform:translateX(-50%);background:white;padding:12px 24px;border-radius:25px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1000;display:flex;align-items:center;gap:8px;font-weight:bold;font-size:16px;}
.delivery-status-capsule.status-preparing {border-left:4px solid #FF9800;}
.delivery-status-capsule.status-waiting {border-left:4px solid #2196F3;}
.delivery-status-capsule.status-pickup {border-left:4px solid #9C27B0;}
.delivery-status-capsule.status-delivery {border-left:4px solid #4CAF50;}
.delivery-status-capsule.status-complete {border-left:4px solid #4CAF50;}
.delivery-status-capsule .status-icon {font-size:20px;}
.delivery-status-capsule .status-text {color:#333;}
#delivery_status .fullMap {width:100%;height:400px;position:relative;}
#delivery_status .map_wrap {position:relative;}
#delivery_status .map_wrap h5 {padding:10px;background:#f5f5f5;margin:0;}
#delivery_status .map_wrap_scroll {max-height:180px;overflow-y:auto;padding:10px;}
#delivery_status .map_list_wrap {margin-bottom:15px;border-bottom:1px solid #e0e0e0;padding-bottom:10px;}
#delivery_status .map_list_wrap:last-child {margin-bottom:0px;border-bottom:0px solid #e0e0e0;}
#delivery_status .map_list_main {display: grid;grid-template-columns: 1fr 80px 120px; gap: 10px;align-items: center;padding:8px 0;font-weight:bold;}
#delivery_status .map_list_sub {display: grid; position: relative;grid-template-columns: 1fr 80px 120px;gap: 10px;align-items: center;padding:5px 0 5px 20px;color:#666;}
#delivery_status .map_btn {width:100%;padding:15px;background:#ccc;color:white;text-align:center;font-weight:bold;cursor:not-allowed;transition:all 0.3s;}
#delivery_status .map_btn.active {background:#00aef1;cursor:pointer;}
#delivery_status .map_btn.active:hover {background:#2196F3;}
.custom-marker {background:#4CAF50;color:white;padding:8px 12px;border-radius:20px;font-weight:bold;box-shadow:0 2px 6px rgba(0,0,0,0.3);white-space:nowrap;}
.custom-marker.store {background:#4CAF50;}
.custom-marker.driver {background:#2196F3;}
.custom-marker.customer {background:#FF5722;}
.delivery-route-line {stroke:#2196F3;stroke-width:4px;stroke-dasharray:10,5;stroke-opacity:0.6;}
/*광고창*/
.pos_main_ad_link{position:absolute;display:inline-block;border-radius: 8px; overflow:hidden; background: #fff; width: calc(36% + 10px);padding-bottom: 20%; bottom: 5px; right: 9px;}
.pos_main_ad_link iframe, .pos_main_ad_link video{position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%;}
@media screen and (max-width:768px) {
.delivery-status-capsule {top:10px;padding:10px 20px;font-size:14px;}
.delivery-status-capsule .status-icon {font-size:18px;}
#delivery_status .fullMap {height:300px;}
#delivery_status .map_wrap {padding-top:60px;}
#delivery_status .map_wrap_scroll {max-height:150px;}
}
@keyframes markerBounce {0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.custom-marker.animated {animation:markerBounce 1s ease-in-out infinite;}
.map-loading {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:999;}
.map-loading-spinner {width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid #00aef1;border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.employeeListTop ul{list-style: none;margin-bottom: 0;padding-left:0;align-items: center;display:grid;grid-template-columns: 2fr 1fr 1fr 1fr; text-align: center;border-top: 2px solid #ADB5BD; border-bottom: 2px solid #F0F3F8;font-weight: 500;}
.employeeListTop ul li{padding: 0.8rem 0.9375rem}
.emplyeeListBody ul{list-style: none;padding-left:0;align-items: center;display:grid;grid-template-columns: 2fr 1fr 1fr 1fr; }
.emplyeeListBody ul li:nth-child(2),.emplyeeListBody ul li:nth-child(3),.emplyeeListBody ul li:nth-child(4){text-align: center;}
.emplyeeListWrap{max-height:268px;overflow-y:auto}
.emplyeeListBody ul li:nth-child(2) > span,.emplyeeListBody ul li:nth-child(3) > span,.emplyeeListBody ul li:nth-child(4) > span{display:none;}
.employeeInfo .custom-control-label.text-muted{color: #212529 !important;}

@media screen and (max-width:768px) {
	.login{height:100vh;overflow:hidden;box-sizing: border-box;}
	.login-left{height:50vh;padding:8%;font-size: 1em;line-height: 1.2;}
	.login-right{height:50vh;padding:8%;}
	.login .mt-5{margin-top:1rem !important}
	.login .pt-5{padding-top: 1.2rem !important;}
	.login .custom-checkbox .custom-control-label{font-size: 1rem;}
}	

@media screen and (max-width:540px) {
	.form-signin .d-flex {display: block !important;}
	.form-signin .custom-control{display:block; text-align: right;}
	.form-signin .list-inline.align-self-center{ text-align: center;;margin-top:12px}
	.employeeListTop{display:none;}
	.emplyeeListBody ul:first-child{border-top: 1px dashed #dbdbdb;}
	.emplyeeListBody ul{display:block;padding: 0 5px 15px 5px;margin-bottom: 0;border-bottom: 1px dashed #dbdbdb;}
	.emplyeeListBody ul li:nth-child(2),.emplyeeListBody ul li:nth-child(3),.emplyeeListBody ul li:nth-child(4){text-align: left;padding:0 15px 0 4rem;}
	.emplyeeListBody ul li:nth-child(2) > span,.emplyeeListBody ul li:nth-child(3) > span,.emplyeeListBody ul li:nth-child(4) > span{display:inline-block;margin-right:8px;color:#868E96 ;font-size:0.9rem;}
	#storeChoice .modal-body{  padding: 1rem;}
	#storeChoice .modal-footer{justify-content: space-between;padding: 0.75rem;}
	#storeChoice .modal-footer .btn{flex: 1;padding-left:0rem;padding-right: 0rem;min-width: auto;width:100%}
	.posWrap.easyPayWrap .easyWrap1 .btn-primary,.posWrap.easyPayWrap .easyWrap1 .btn-dark {font-size:1.8rem !important}
	#loginForm .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { margin-left: -0.5rem;}
}