@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    src: url('../font/Pretendard-Regular.woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    src: url('../font/Pretendard-Medium.woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    src: url('../font/Pretendard-SemiBold.woff');
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    src: url('../font/Pretendard-Bold.woff');
}



a{text-decoration: none;font-family: 'Pretendard';}
input{font-family: 'Pretendard';}
textarea{font-family: 'Pretendard';}
::placeholder{font-family: 'Pretendard';}
*{box-sizing: border-box;margin: 0;padding: 0;font-family: 'Pretendard';}
ul,ol,li{margin: 0;padding: 0;list-style: none;}
button{cursor: pointer; font-family: 'Pretendard';background-color: transparent;border: 0;}

input:focus,
select:focus,
textarea:focus{
    outline: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Pretendard';
    background-color: #E7EAF3;
    overscroll-behavior:none;
    -ms-overflow-style: none;
}



section{padding: 16px;width: 100%;height: 100%;display: flex;flex-direction: column;gap: 16px;}

.call-wrap{padding: 48px;border-radius: 16px;background-color: #fff;border: 1px solid #caced8;flex-shrink: 0;position: relative;}
.call-txt{display: flex;flex-direction: column;width: calc(100% - 96px);justify-content: center;align-items: center;gap: 24px;position: absolute;left: 48px;top: 48px;transition: 0.3s;z-index: 2;}
.kiosk-section.calling .call-txt{opacity: 0;filter: blur(5px);}
.call-txt>p{font-size: 32px;font-weight: 400;color: #2C3242;text-align: center;}
.call-txt>p>span{font-weight: 700;color: #1CA53E;}
.call-btn>button{width: 250px;display: flex;align-items: center;transition: 0.3s;border-radius: 100px;justify-content: center;padding: 16px 0;gap: 8px;font-size: 26px;font-weight: 700;color: #fff;}
.call-btn>button>img{display: block;width: 40px;height: 40px;}
.call-btn>button.call{background-color: #1CA53E;}
.call-btn>button.call:hover{background-color: #168432;}
.call-btn>button.call-end{background-color: #C83437;}
.call-btn>button.call-end:hover{background-color: #a02a2c;}
.call-btn>button.desable{background-color: #A3A3A3 !important;}

.call-ing{display: flex;width: 100%;gap: 24px;transition: 0.3s;overflow: hidden;opacity: 0;pointer-events: none;filter: blur(5px);height: 172px;}
.kiosk-section.calling .call-ing{height: 464px;opacity: 1;filter: blur(0);pointer-events: inherit;}

.call-my{height: 100%;width: 100%;;transition: 0.3s;}
.call-img{width: 100%;height: 100%;border-radius: 36px;overflow: hidden;position: relative;}
.call-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}
.call-img>span{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: rgba(0, 0, 0, 0.5);backdrop-filter: blur(10px);transition: 0.3s;font-size: 40px;color: #fff;font-weight: 400;}
.call-cs{flex-shrink: 0;display: flex;flex-direction: column;gap: 24px;width: 250px;height: 100%;transition: 0.3s;}
.kiosk-wrap{padding: 80px;width: 100%;height: 100%;background-color: #fff;border: 1px solid #caced8;border-radius: 16px;display: flex;flex-direction: column;justify-content: flex-end;}
.kiosk-title{font-size: 56px;font-weight: 400;color: #2C3242;transition: 0.3s;text-align: center;margin-bottom: 80px;}
.kiosk-title span{font-weight: 700;color: #323232;}
.kiosk-title strong{font-weight: 700;color: #007AFF;}

.kiosk-section.calling .kiosk-title{font-size: 40px;}

.date-sel{margin-bottom: 40px;width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 16px;}
.date-sel>p{font-size: 40px;color: #2C3242;font-weight: 700;}
.date{display: flex;align-items: center;justify-content: center;gap: 24px;}
.date>p{font-size: 48px;font-weight: 800;color: #2C3242;}
.date>button{width: 72px;height: 72px;position: relative;}
.date>button>img{display: block;width: 100%;height: 100%;transition: 0s;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.date>button>img:nth-of-type(1){opacity: 1;}
.date>button>img:nth-of-type(2){opacity: 0;}
.date>button>img:nth-of-type(3){opacity: 0;}
.date>button:hover>img:nth-of-type(1){opacity: 0;}
.date>button:hover>img:nth-of-type(2){opacity: 1;}
.date>button.desable>img:nth-of-type(1){opacity: 0;}
.date>button.desable>img:nth-of-type(2){opacity: 0;}
.date>button.desable>img:nth-of-type(3){opacity: 1;}

.input-wrap{position: relative;width: 100%;margin-bottom: 32px;height: 140px;}
.input-wrap>p{position: absolute;left: 40px;top: 50%;transform: translateY(-50%);font-weight: 700;font-size: 40px;color: #2C3242;}
.input-wrap>input{width: 100%;height: 100%;font-size: 40px;text-align: center;font-size: 48px;font-weight: 700;color: #2C3242;border: 4px solid #292c35;border-radius: 12px;transition: 0.3s;}
.input-wrap>input::placeholder{font-size: 40px;color: #b4bbcf !important;font-weight: 500;}
.input-wrap>input:focus{border-color: #007AFF;}
.input-btn{width: 100%;display: flex;flex-wrap: wrap;}
.input-btn>button{width: calc(33.333% - 8px);margin-right: 12px;margin-bottom: 12px;height: 146px;border-radius: 12px;display: flex;align-items: center;justify-content: center;background-color: #f0f2f7;transition: 0.3s;font-size: 48px;font-weight: 700;color: #2C3242;}
.kiosk-section.calling .input-btn>button{height: 97px;}
.input-btn>button:hover{background-color: #E4ECF7;}
.input-btn>button>span{font-size: 32px;}
.input-btn>button>img{display: block;height: 30px;width: auto;;}
.btn-side{background-color: #fff !important;border: 4px solid #edeff4;}
.btn-side:hover{background-color: #FAFBFD !important;}
.input-btn>button:nth-of-type(3n){margin-right: 0;}
.input-btn>button:nth-of-type(10),
.input-btn>button:nth-of-type(11),
.input-btn>button:nth-of-type(12){margin-bottom: 0;}

.input-wrap.desable>input{background-color: #EFEFF0;border-color: #EFEFF0;pointer-events: none;}
.input-wrap.desable>input::placeholder{color: #b9b9bc !important;}
.input-wrap.desable>p{color: #b9b9bc;}

.btn-wrap{display: flex;gap: 24px;margin-top: 40px;}
.btn-wrap>button{height: 140px;width: 100%;font-weight: 700;border-radius: 12px;display: flex;align-items: center;justify-content: center;font-size: 40px;color: #fff;transition: 0.3s;background-color: #007AFF;}
.btn-wrap>button.desable{background-color: #efeff0;color: #b9b9bc;}
.btn-wrap>button:hover{filter: brightness(0.9);}

.btn-wrap>button.sub-btn{width: 230px;flex-shrink: 0;color: #2C3242;background-color: #EDEFF4;}
.btn-wrap>button.sub-btn:hover{filter: brightness(0.95);}
.btn-wrap>button.sub-btn.desable{background-color: transparent;color: #b9b9bc;}

.kiosk-select{height: 100%;display: flex;flex-direction: column;}
.date-info{background-color: #f7f7f7;border-radius: 16px;padding: 40px;display: flex;align-items: center;justify-content: center;}
.date-info>p{font-size: 40px;color: #8B8E93;font-weight: 500;margin-right: 40px;padding-right: 40px;}
.date-info>p:first-of-type{border-right: 4px solid #d6d6d6;}
.date-info>p:last-of-type{margin-right: 0;padding-right: 0;}
.date-info>p>span{font-weight: 700;color: #2C3242;margin-left: 24px;}

.sel-number-wrap{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;gap: 24px;padding: 80px 0;transition: 0.3s;height: 100%;}
.num-item{height: 148px;border-radius: 12px;border: 4px solid #dbdee3;width: 464px;;display: flex;align-items: center;justify-content: center;transition: 0.3s;font-size: 40px;font-weight: 700;color: #2C3242;}
.num-item.hide{border-color: #dbdee3;color: #8B8E93;}
.num-item.on{border-color: #007AFF;color: #222325;}
.num-item.desable{pointer-events: none;background-color: #efeff0;border-color: #efeff0;color: #B9B9BC;}

.kiosk-section.calling .num-item{height: 117px;}
.kiosk-section.calling .sel-number-wrap{padding: 40px 0;}

.sel-sub-txt{font-size: 32px;text-align: center;color: #2C3242;padding: 40px 0;transition: 0.3s;}
.sel-sub-txt>span{font-weight: 700;color: #FF2F00;}
.sel-sub-txt span{font-weight: 700;}
.kiosk-section.calling .sel-sub-txt{padding-top: 20px;}

.sel-item-2{width: calc(50% - 12px);margin-right: 24px;margin-bottom: 24px;border: 1px solid red;height: 50%;}
.sel-item-2:nth-of-type(2n){margin-right: 0}
.sel-item-2:nth-of-type(3),
.sel-item-2:nth-of-type(4){margin-bottom: 0;}

.sel-item-2{border-radius: 12px;border: 4px solid #dbdee3;display: flex;flex-direction: column;transition: 0.3s;}
.sel-item-2>p{display: flex;align-items: center;height: 100%;font-size: 24px;font-weight: 500;color: #222325;border-bottom: 2px solid #dbdee3;transition: 0.3s;}
.sel-item-2>p:last-of-type{border-bottom: 0;}
.sel-item-2>p strong{font-weight: 500;display: flex;height: 100%;display: flex;align-items: center;padding-left: 32px;width: 150px;border-right: 2px solid #dbdee3;transition: 0.3s;}
.sel-item-2>p span{padding-left: 32px;}

.sel-item-2.hide>p{color: #636569;}
.sel-item-2.on{border-color: #007AFF;}
.sel-item-2.on>p{border-color: rgba(0, 123, 255, 0.5);color: #222325;}
.sel-item-2.on strong{border-color: rgba(0, 123, 255, 0.5);}
.sel-item-2.desable{background-color: rgba(239, 239, 240, 0.5);border-color: #EFEFF0;pointer-events: none;}
.sel-item-2.desable p{border-color: #EFEFF0;color: #B9B9BC;}
.sel-item-2.desable strong{border-color: #EFEFF0;}

.auto-login{display: flex;}
.auto-login>input{
    appearance: none; /* 기본 체크박스 제거 */
    -webkit-appearance: none; /* Safari 등 호환성 */
    -moz-appearance: none;
    display: none;
  }
.auto-login>input[id="check"] + label{
display: flex;align-items: center;transition: 0.3s;cursor: pointer;gap: 24px;}
.auto-login>input[id="check"] + label .check{width: 60px;height: 60px;background-color: transparent;border-radius: 12px;border: 4px solid #E8EBF0;transition: 0.3s;position: relative;background-color: #fff;}
.auto-login>input[id="check"] + label .check>img{width: 30px;height: 30px;transition: 0.3s;opacity: 0;left: 50%;top: 50%;transform: translate(-50%, -50%);position: absolute;}
.auto-login>input[id="check"] + label>span{font-size: 40px;font-weight: 500;color: #2C3242;}

.auto-login>input[id="check"]:checked + label{}
.auto-login>input[id="check"]:checked + label .check{background-color: #D6EAFF;border-color: #C3DFFE}
.auto-login>input[id="check"]:checked + label .check .check-on{opacity: 1;}

.sel-txt{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;border-radius: 16px;background-color: #f7f7f7;padding: 0px 144px;gap: 32px;}

.popup{position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 5;background-color: rgba(0, 0, 0, 0.4);display: none;}
.popup-inner{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: calc(100% - 160px);height: auto;background-color: #fff;border-radius: 16px;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 80px;}
.popup-inner>p{font-size: 48px;font-weight: 700;color: #000;text-align: center;}
.popup-inner>p>span{color: #007AFF;}
.popup-inner .btn-wrap{width: 100%;}
.gutter-72{margin-bottom: 72px;}
.error-info{background-color: #f7f7f7;border-radius: 16px;padding: 40px;gap: 32px;display: flex;align-items: center;justify-content: center;flex-direction: column;width: 100%;margin: 48px auto;}
.error-info>p{font-size: 40px;color: #8B8E93;display: flex;align-items: center;font-weight: 500;justify-content: center;width: 100%;;}
.error-info>p span{color: #007AFF;font-weight: 700;display: flex;align-items: center;width: 224px;}
.error-info>p strong{display: flex;align-items: center;justify-content: center;width: 172px;font-weight: 500;margin-right: 32px;padding-right: 32px;position: relative;}
.error-info>p strong::after{display: block;content: '';position: absolute;right: 0;top: 50%;transform: translateY(-50%);width: 2px;height: 40px;background-color: #d6d6d6;}