@charset "utf-8";
/* input 공통 */
input[type="file"],input[type="text"],input[type="password"],input[type="email"],input[type="number"] {font-size: 17px; background-color: #fff; border: 1px solid #CFCFCF; border-radius: 5px; padding: 12px; box-shadow: unset;}
/* input[type="text"]:read-only,input[type="password"]:read-only,textarea:read-only, input[readonly],textarea[readonly],input[disabled],textarea[disabled] {background-color: var(--input-readonly) !important;} */
input[type="submit"] {cursor: pointer;}
textarea {border: 1px solid #CFCFCF; border-radius: 5px; padding: 12px; box-shadow: unset; width: 100%; min-height: 150px; resize: none; overflow: auto;}
.input-list {display: flex; flex-direction: column; width: 100%; row-gap: 24px;}
.input-row {display: flex; align-items: center; column-gap: 13px;}
.input-wrap {width: 100%; display: flex; flex-direction: column; row-gap: 10px;}
.input-wrap label {font-size: 18px;}
.input-list > input[type="submit"] {margin-top: 40px;}
.search-wrap {border: 1px solid #DDDDDD; border-radius: 50px; padding: 8px; display: flex; align-items: center; justify-content: space-between;}
.search-wrap>input[type="text"] {border: 0;}
/* 셀렉트박스 */
/* 
    <div class="select-wrap">
        <label for="teacherSelect">Teacher Schedule Overview</label>
        <span class="custom-select">
            <select name="teacher" id="teacherSelect">
                <option value="all">All Teacher</option>
            </select>
        </span>
    </div>
*/
.custom-select {position: relative; width: 100%;}
.custom-select select {width: 100%; border: 1px solid #CFCFCF; background-color: #fff; cursor: pointer; padding: 12px; font-size: 18px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; appearance: none;}
.custom-select select:focus {border: 1px solid #000; transition: all 0.3s;}
.custom-select::after { position: absolute; width: 14px; height: 9px; background: url(../img/select-arrow.svg) no-repeat; top: 50%; right: 12px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; display: block; content: '';}
.select-wrap {width: 100%; max-width: 400px; display: flex; flex-direction: column; row-gap: 10px;}
.select-wrap label {font-size: 18px; font-weight: 600;}
/* 박스스타일 체크박스&라디오박스 */
.radio-wrap {width: 100%; display: flex; flex-direction: column; row-gap: 10px;}
.radio-wrap label {font-size: 18px; font-weight: 600;}
.radio-group {width: 100%; display: flex; flex-wrap: wrap; column-gap: 16px;}
.radio-item {transition: background-color 0.2s; padding: 12px 0; width: calc(100% / 6 - (16px * 5) / 6); background-color: #fff; position: relative; display: inline-flex; align-items: center; cursor: pointer; border-radius: 30px; border: 1px solid #EEEEEE;}
.radio-item.time-booked,
.radio-item.time-off {cursor: unset;}
.radio-item:not(.time-booked):not(.time-off):hover {background-color: #EAF2FF; color: #2F80ED;}
.radio-item:not(.time-booked):not(.time-off).checked {background-color: #2F80ED; color: #fff;}
.radio-item input[type="radio"],
.radio-item input[type="checkbox"] {position: absolute;opacity: 0;pointer-events: none;}
.radio-item span {font-size: 18px; font-weight: 500; text-align: center; width: 100%;}
.radio-item.checked span {color: #fff;}
.radio-group2 {column-gap: 14px; row-gap: 10px;}
.radio-group2 .radio-item {height: 65px; border-radius: 40px; width: calc(100% / 4 - (14px * 3) / 4); background-color: #E5E7EB; border: 0;}
.radio-group2 .radio-item:not(.time-booked) span {height: 30px; line-height: 30px; font-size: 18px; color: #374151;}
.radio-group2 .radio-item:not(.time-booked):not(.time-off):hover span {color: #2F80ED;}
.radio-group2 .radio-item.checked span {color: #fff;}
.radio-group2 .radio-item.time-booked {background-color: #9CA3AF;}
.radio-group2 .radio-item.time-booked span {font-size: 16px; color: #fff;}
/* 커스텀 체크박스 */
/* 
    <div class="custom-chk">
        <input type="checkbox" name="" value="" id="">
        <label for=""><span></span><b class="sound_only">전체선택</b></label>
    </div>
*/
/* .custom-chk {display: flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 400;}
.custom-chk input[type="checkbox"] {display: none;}
.custom-chk label {cursor: pointer; display: flex; align-items: center; gap: 6px;}
.custom-chk label span {background-size: 60%; background-image: url(../img/check_icon.svg); background-repeat: no-repeat; background-position: center center; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background-color: var(--icon); position: relative; transition: all 0.2s ease;}
.custom-chk input[type="checkbox"]:checked + label span {background-color: #1362EB;} */
/* .custom-chk input[type="checkbox"]:checked + label span::after {content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -60%) rotate(-45deg);} */
/* 커스텀 라디오박스 */
/*
    <div class="custom-radio">
        <input type="radio" name="ad_sel_addr" id="ad_sel_addr_same" value="same">
        <label for="ad_sel_addr_same">
            <span></span>
            주문자와 동일
        </label>
    </div>
*/
.custom-radio {display: flex; align-items: center; gap: 20px; font-size: 16px; font-weight: 400;}
.custom-radio input[type="radio"] {display: none;}
.custom-radio label {cursor: pointer; display: flex; align-items: center; gap: 6px;}
.custom-radio label span {width: 24px; height: 24px; border-radius: 50%; background-color: var(--icon); position: relative; transition: all 0.2s ease; border: 1px solid #9A9A9A;}
.custom-radio input[type="radio"]:checked + label span {border: 8px solid #1362EB;}
/* 라벨&버튼 */
.btn-wrap {display: flex; align-items: center; column-gap: 24px;}
.round-btn01 {border: 1px solid transparent; font-size: 15px; font-weight: 400; background-color: #F4F4F4; padding: 10px; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.round-btn02 {border: 1px solid transparent; min-width: 37px; min-height: 37px; font-size: 15px; font-weight: 400; background-color: #F4F4F4; padding: 10px; border-radius: 50px; display: flex; align-items: center; justify-content: center;}
.square-btn01 {border: 2px solid transparent; padding: 15px 20px; width: fit-content; display: flex; align-items: center; justify-content: center; column-gap: 10px; border-radius: 10px;}
/* 배경색상 */
.bg-blue-gradient {border: 0; background: #2461E9; background: linear-gradient(180deg, rgba(36, 97, 233, 1) 0%, rgba(30, 81, 219, 1) 100%); color: #fff;}
.bg-purble-gradient {border: 0; background: #2461E9; background: linear-gradient(90deg, #9130E9 0%, #2461E9); color: #fff;}
.bg-white {background-color: #fff;}
/* 라인색상 */
.line-skyblue {border-color: #B1C9FF;}