@charset "utf-8";
.bubble {padding: 10px; border-radius: 10px; background-color: rgba(0, 0, 0, 0.6); word-break: keep-all; white-space: nowrap; color: #fff; font-size: 0.813rem; position: relative;}
.bubble::after {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.6);}
button:disabled {cursor: not-allowed;}
/* 모달 */
html:has(.modal.open),
body:has(.modal.open) {overflow-y: hidden;}
.modal {scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.1) transparent; display: none; width: 90%; max-width: 711px; max-height: 80vh; overflow-y: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 30px; border-radius: 30px; background-color: #fff; z-index: 999999;}
.modal::-webkit-scrollbar {display: none;}
.modal .modal-close-btn {min-width: 32px; min-height: 32px; width: 32px; height: 32px; margin-left: auto;}
.modal .modal-tit {margin-bottom: 17px; display: flex; align-items: center; column-gap: 10px; font-size: 1.125rem; font-weight: 500;}
.modal .lang-list {display: flex; gap: 17px; flex-wrap: wrap;}
.modal .lang-list li {width: calc(100% / 4 - (17px * 3) / 4);}
.modal .lang-list li .lang-select-btn {display: flex; flex-direction: column; align-items: flex-start; row-gap: 3px; transition: border 0.2s, background-color 0.2s; width: 100%; border-radius: 10px; padding: 10px; border: 1px solid #D4D4D4;}
.modal .lang-list li .lang-select-btn strong {transition: color 0.3s; display: inline-block; font-size: 14px; font-weight: 500;}
.modal .lang-list li .lang-select-btn span {font-size: 0.875rem; color: #808080;}
.modal .lang-list li .lang-select-btn.on {border-color: #2461E9;}
.modal-bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.5; z-index: 999998;}
.modal.open,
.modal.open+.modal-bg {display: block !important;}
/* input 공통 */
input[type="url"],input[type="tel"],input[type="file"],input[type="text"],input[type="password"],input[type="email"],input[type="number"] {transition: box-shadow 0.3s; font-size: 1rem; background-color: #fff; border: 1px solid #CFCFCF; border-radius: 10px; 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 {font-size: 1rem; transition: box-shadow 0.3s; box-shadow: 2px 4px 4px rgba(208, 208, 208, 0.25); border: 1px solid #CFCFCF; border-radius: 10px; padding: 12px; box-shadow: unset; width: 100%; min-height: 150px; resize: none; overflow: auto;}
textarea:read-only {background-color: #F9FAFB; border-color: #E5E7EB;}
.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: 1rem;}
.input-wrap label .required {color: #81BAFF;}
.input-list > input[type="submit"] {margin-top: 40px;}
.search-wrap {background-color: #fff; transition: box-shadow 0.3s; box-shadow: 2px 4px 4px rgba(208, 208, 208, 0.25); overflow: hidden; border: 1px solid #DDDDDD; border-radius: 50px; height: 50px; padding: 0 6px 0 20px; display: flex; align-items: center; justify-content: space-between;}
.search-wrap>input[type="text"] {border: 0; width: 100%;}
.search-wrap:hover>input[type="text"],
.search-wrap>input[type="text"]:hover {box-shadow: unset;}
.search-wrap>input[type="text"]:focus {outline: 0; border: 0;}
.search-wrap button:hover {box-shadow: none !important;}
/* 커스텀 데이트피커 */
/* 
    <div class="custom-datetime">
        <input type="date" name="r_date" id="r_date" class="datepicker" placeholder="yyyy-mm-dd" required>
    </div>
*/
.date-input-wrap {position: relative; width: 100%;}
.custom-datetime {width: 100%;}
.input-row .custom-datetime {flex: 1;}
.datepicker {box-shadow: 0 0 0 0 rgba(160, 160, 160, 0.25); width: 100%; height: 50px; padding: 0 16px; border: 1px solid #E4E4E4; border-radius: 10px; font-size: 1rem; color: #111827; background-color: #fff; outline: none; appearance: none; -webkit-appearance: none; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s;}
.datepicker:focus {border-color: #000;}
.datepicker::-webkit-calendar-picker-indicator {cursor: pointer; background: url('../img/calendar.svg') no-repeat center; background-size: 20px; width: 24px; height: 24px;}
.datepicker::-webkit-datetime-edit-text,
.datepicker::-webkit-datetime-edit-month-field,
.datepicker::-webkit-datetime-edit-day-field,
.datepicker::-webkit-datetime-edit-year-field {color: #636363;}
/* 셀렉트박스 */
/* <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 {transition: box-shadow 0.3s; box-shadow: 0 0 0 0 rgba(160, 160, 160, 0.25);width: 100%; border: 1px solid #C8C8C8; background-color: #fff; cursor: pointer; padding: 12px 16px; font-size: 0.9375rem; border-radius: 10px; 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: 12px; height: 7px; 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: 1.25rem; font-weight: 600;}
.select-list-tit {font-size: 1rem; margin-bottom: 10px;}
.select-list {display: flex; align-items: center; column-gap: 20px;}
.select-list .select-wrap {flex: 1; max-width: calc(100% / 6 - (20px * 5) / 6);}
/* 박스스타일 체크박스&라디오박스 */
.radio-wrap {width: 100%; display: flex; flex-direction: column; row-gap: 10px;}
.radio-wrap label {font-size: 1.25rem; font-weight: 600;}
.radio-group {width: 100%; display: flex; column-gap: 16px; row-gap: 10px; flex-wrap: wrap;}
.radio-item {transition: background-color 0.2s; padding: 0.75rem 1.25rem; width: fit-content; background-color: #fff; position: relative; display: inline-flex; align-items: center; cursor: pointer; border-radius: 30px; border: 1px solid #E3E3E3;}
.radio-item.checked {border-color: #2461E9;}
.radio-item input[type="radio"],.radio-item input[type="checkbox"] {position: absolute;opacity: 0;pointer-events: none;}
.radio-item span {font-size: 0.938rem; text-align: center; width: 100%; display: flex; align-items: center; column-gap: 4px;}
/* .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 span {height: 30px; line-height: 30px; font-size: 1.25rem; color: #374151;}
.radio-group2 .radio-item:hover span {color: #2461E9;}
.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: 1rem; 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: 1rem; 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 {flex-shrink: 0; border: 1px solid #E5E5E5; background-size: 60%; background-repeat: no-repeat; background-position: center center; display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background-color: transparent; position: relative; transition: all 0.2s ease;}
.custom-chk input[type="checkbox"]:checked + label span {background-color: #009178;}
.custom-chk input[type="checkbox"]:checked + label span::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -60%) rotate(-45deg);}
.custom-chk label .required {color: #81BAFF;}
/* 커스텀 라디오박스 */
/*
    <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; font-size: 0.889rem;}
.custom-radio input[type="radio"] {display: none;}
.custom-radio label {transition: box-shadow 0.3s;max-height: 50px; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 12px 4px; border: 1px solid #E4E4E4; border-radius: 10px; background-color: #fff; text-align: center;}
.custom-radio label span {display: none;}
.custom-radio input[type="radio"]:checked + label {border: 2px solid #1A2744;}
/* 토글버튼 */
/* 
    <div class="input-row toggle-wrap">
        <span class="toggle-label">이메일</span>
        <label class="toggle-switch">
            <input type="checkbox">
            <span class="slider"></span>
        </label>
    </div>
*/
.toggle-wrap {justify-content: space-between;}
.toggle-wrap .toggle-label {font-size: 0.938rem;}
.toggle-switch {position: relative; display: inline-block; width: 2.5rem; height: 1.125rem;}
.toggle-switch input { opacity: 0; width: 0; height: 0;}
.toggle-switch .slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #8491A7; transition: .3s; border-radius: 50px;}
.toggle-switch .slider:before {position: absolute; content: ""; height: 0.875rem; width: 0.875rem; left: 0.125rem; bottom: 0.125rem; background-color: white; transition: .3s; border-radius: 50%;}
.toggle-switch input:checked + .slider {background-color: #2461E9;}
.toggle-switch input:checked + .slider:before {transform: translateX(1.375rem);}
/* 개인정보수집동의 */
/* 
    <div class="privacy-wrap">
        <div class="custom-chk">
            <input type="checkbox" name="agree" value="1" id="agree_chk" required="">
            <label for="agree_chk">
                    <span></span>
                    <p>문의 처리를 위해 <b>개인정보 수집·이용</b>이용에 동의합니다.</p>
            </label>
        </div>
        <button type="button" class="more-btn">자세히</button>
    </div>
*/
.privacy-wrap {}
.privacy-wrap .custom-chk p {color: #4A4A4A; font-size: 0.75rem;}
.privacy-wrap .custom-chk p a {transition: color 0.2s; color: #383838; font-weight: 500;}
.privacy-wrap .custom-chk p b {font-weight: 600;}
.privacy-wrap:has(>.more-btn) {display: flex; align-items: center; justify-content: space-between;}

/* 라벨&버튼 */
.square-btn {width: fit-content; font-weight: 500; padding: 10px 30px; border-radius: 10px; font-size: 1rem; display: flex; align-items: center; justify-content: center; column-gap: 10px;}
.square-btn:has(svg) {padding: 10px 20px;}
.more-btn {width: fit-content; padding: 4px 8px; border-radius: 5px; background-color: #F0F0F0; color: #3B3B3B; font-size: 0.625rem; font-weight: 500; background-color: #F0F0F0;}
.label {width: fit-content; padding: 5px 16px; border-radius: 100px; font-size: 0.875rem; font-weight: 600;}
.square-btn, .more-btn{transition: box-shadow 0.3s; box-shadow: 0 0 0 0 rgba(160, 160, 160, 0.25);}

/* 배경색상 */
.bg-light-gray {background-color: #F8F9FA; color: #575757;}
.bg-white {background-color: #fff; color: #000;}
.bg-navy {background-color: #0D2240; color: #fff;}
.bg-yellow {background-color: #FFD235; color: #fff;}
.bg-light-yellow {background-color: #FFF9E5; color: #DAA800;}
.bg-gradient {color: #fff; background: #009178; background: linear-gradient(90deg, rgba(0, 145, 120, 1) 0%, rgba(31, 64, 113, 1) 100%);}
.bg-gradient2 {background: #E6F4F2; background: radial-gradient(circle, rgba(230, 244, 242, 1) 0%, rgba(248, 249, 250, 1) 100%);}

/* 라인색상 */
.line-yelow {border-color: #DAA800;}
.line-green {border-color: #009178;}


/* 페이지 */
.page-wrap {padding-top: 90px; width: 100%; display: flex; justify-content: center; align-items: center; column-gap: 26px;}
.page-wrap .page-num {display: flex; align-items: center; column-gap: 10px;}
.page-wrap .page-num .ellipsis {font-size: 0.75rem; font-weight: 600;}
.page-wrap .page-btn, .page-wrap .page-num .num {width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600;}
.page-wrap .page-btn:not(.disabled):hover, .page-wrap .page-num .num:not(.on):hover {background-color: rgba(160, 160, 160, 0.25);}
.page-wrap .page-num .num.on {background-color: #000; color: #fff; pointer-events: none; cursor: default;}
.page-wrap .page-btn:not(.disabled):hover svg path {fill: #000; }
.page-wrap .page-btn.disabled {pointer-events: none; cursor: default;}
.page-wrap .page-btn.disabled svg path {fill: #C2C2C2;}


/* 토스트박스 */
.toast-box {position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background-color: #fff; width: fit-content; display: none; align-items: center; column-gap: 10px; padding: 10px 20px; border-radius: 10px; border: 1px solid #E4E4E4; box-shadow: 0 2px 12px #5858580D;}
.toast-box .toast-ico {flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #E4E4E4;}
.toast-box p {font-size: 0.938rem; font-weight: 500; white-space: nowrap;}
.toast-box p span {font-size: 0.813rem; font-weight: 400; white-space: nowrap; color: #464646; display: inline-block; margin-top: 4px;}
.toast-box.saved {border-color: #D1FAE5;}
.toast-box.saved .toast-ico {background-color: #D1FAE5;}
.toast-box.deleted {border-color: #B0D2BD;}
.toast-box.deleted .toast-ico {width: 40px; height: 40px; border-radius: 10px; border: 1px solid #31AF60; background-color: #F0FDF4;}
.toast-box.show { display: flex; animation: fadeInOut 3s forwards;}

@keyframes fadeInOut { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; }}

/* 마우스 호버시에만 */
@media (hover: hover) {
    .square-btn:hover, .more-btn:hover,
    .search-wrap:hover,
    .datepicker:hover,
    .custom-select select:hover,
    .custom-radio label:hover,
    input[type="url"]:hover,textarea:hover,input[type="tel"]:hover,input[type="file"]:hover,input[type="text"]:hover,input[type="password"]:hover,input[type="email"]:hover,input[type="number"]:hover {box-shadow: 0 0 0 5px rgba(160, 160, 160, 0.25);}
    .modal .lang-list li .lang-select-btn:not(.on):hover {background-color: #EAF2FF;}
    .modal .lang-list li .lang-select-btn:not(.on):hover strong {color: #2461E9;}
    .radio-item:hover {background-color: #EAF2FF; color: #2461E9;}
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 768px) {
    .toast-box {top: unset; bottom: 85px;}
}

@media screen and (max-width: 600px) {
}

@media screen and (max-width: 480px) {
}