@charset "utf-8";

/**
 * 학원 강좌 대기 접수 공통 스타일
 *
 * 구성
 *   - PC(.wait_modal)      : cnModal 위에 얹는 대기 접수 / 접수 완료 모달.
 *   - MO(.wait_layer)      : 모바일은 퍼블리싱이 모달이 아닌 전체화면 페이지형이라 오버레이로 구현한다.
 *                            (별도 라우팅/컨트롤러 없이 상세 페이지 안에서 열고 닫기 위함)
 */

/* ──────────────────────────────── PC : 대기 모달 ──────────────────────────────── */
.cn-modal.wait_modal{z-index: 102;}
.cn-modal.wait_modal *{box-sizing: border-box; font-family: 'Pretendard', 'Noto Sans KR', sans-serif;}
.cn-modal.wait_modal .cn-modal-main{border-radius: 16px; overflow: hidden; width: 420px; max-height: 80dvh;}
.cn-modal.wait_modal .cn-modal-main .cn-modal-head{display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 0; min-height: 60px; text-align: left; line-height: normal;}
.cn-modal.wait_modal .cn-modal-main .cn-modal-head strong{flex: 1; font-size: 20px; font-weight: 700; line-height: 150%; letter-spacing: 0;}
.cn-modal.wait_modal .cn-modal-main .cn-modal-head .cn-modal-close{position: relative; width: 40px; height: 40px; line-height: 40px;}
.cn-modal.wait_modal .cn-modal-main .cn-modal-head .cn-modal-close i::after{background: #5C6675; width: 22px; height: 22px;}
.cn-modal.wait_modal .cn-modal-main .modal_content{display: flex; flex-direction: column;}
.cn-modal.wait_modal .cn-modal-main .modal_body{flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 20px;}
.cn-modal.wait_modal .cn-modal-main .body_tit{font-size: 18px; font-weight: 600; line-height: 148%; letter-spacing: -0.01em; color: #121212;}
.cn-modal.wait_modal .cn-modal-main .wait_box{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 1px solid #EDEDF3; border-radius: 12px; min-height: 107px; padding: 16px 20px;}
.cn-modal.wait_modal .cn-modal-main .wait_box span{font-size: 15px; font-weight: 500; line-height: 150%; color: #5C6675;}
.cn-modal.wait_modal .cn-modal-main .wait_box p{font-size: 24px; font-weight: 700; line-height: 127%; color: #121212; margin-bottom: -4px;}
.cn-modal.wait_modal .cn-modal-main .wait_notice li{position: relative; padding-left: 12px; color: #5C6675; font-size: 14px; font-weight: 400; line-height: 160%; letter-spacing: -0.01em;}
.cn-modal.wait_modal .cn-modal-main .wait_notice li::before{content: ''; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; border-radius: 50%; background: #5C6675;}
.cn-modal.wait_modal .cn-modal-main .state_toast{display: flex; align-items: center; gap: 6px; border-radius: 10px; background: #E7EFFD; padding: 10px 12px;}
.cn-modal.wait_modal .cn-modal-main .state_toast span{font-size: 14px; font-weight: 600; line-height: 145%; letter-spacing: -0.01em; color: #025AF6;}
.cn-modal.wait_modal .cn-modal-main .state_toast i{display: inline-flex; justify-content: center; align-items: center; width: 24px; height: 24px;}
.cn-modal.wait_modal .cn-modal-main .state_toast i svg{display: block;}
.cn-modal.wait_modal .cn-modal-main .wait_state_box{display: flex; border: 1px solid #EDEDF3; border-radius: 12px; padding: 24px;}
.cn-modal.wait_modal .cn-modal-main .wait_state_box .state_col{flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;}
.cn-modal.wait_modal .cn-modal-main .wait_state_box .state_col + .state_col{border-left: 1px solid #EDEDF3;}
.cn-modal.wait_modal .cn-modal-main .wait_state_box .state_col span{color: #5C6675; font-size: 15px; font-weight: 500; line-height: 150%; letter-spacing: -0.01em;}
.cn-modal.wait_modal .cn-modal-main .wait_state_box .state_col p{color: #121212; font-size: 24px; font-weight: 700; line-height: 127%;}
.cn-modal.wait_modal .cn-modal-main .wait_state_box .state_col p.point{color: #2773F7;}
.cn-modal.wait_modal .cn-modal-main .modal_footer{flex-shrink: 0; padding: 12px 16px 20px;}
.cn-modal.wait_modal .cn-modal-main .modal_footer .modal_btn{height: 44px; font-size: 16px;}
.cn-modal.wait_modal .cn-modal-main .modal_btn{display: flex; justify-content: center; align-items: center; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em;}
.cn-modal.wait_modal .cn-modal-main .modal_btn.primary{background: #025AF6; border: 1px solid #025AF6; color: #fff;}
.cn-modal.wait_modal .cn-modal-main .modal_btn.disabled{background: #C7CBD3; border-color: #C7CBD3; pointer-events: none;}

/* ──────────────────────────────── MO : 대기 접수 오버레이 ──────────────────────────────── */
.wait_layer{display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: #fff; color: #121212; overflow-y: auto;}
.wait_layer.is_open{display: block;}
.wait_layer *{box-sizing: border-box; font-family: 'Pretendard', 'Noto Sans KR', sans-serif;}
.wait_layer .wait_layer_head{position: relative; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #EDEDF3; height: 100px;}
.wait_layer .wait_layer_head strong{font-size: 32px; font-weight: 600; color: #121212;}
.wait_layer .wait_layer_close{position: absolute; top: 50%; transform: translateY(-50%); left: 16px; width: 68px; height: 68px;}
.wait_layer .wait_layer_close::before,
.wait_layer .wait_layer_close::after{content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 3px; background: #121212;}
.wait_layer .wait_layer_close::before{transform: translate(-50%, -50%) rotate(45deg);}
.wait_layer .wait_layer_close::after{transform: translate(-50%, -50%) rotate(-45deg);}

.wait_layer .wait_page{min-height: calc(100vh - 100px); padding: 48px 40px 240px; display: flex; flex-direction: column; gap: 32px;}
.wait_layer .wait_title{margin: 0; font-size: 36px; font-weight: 700; line-height: 138%; letter-spacing: -0.36px;}
.wait_layer .wait_box{border: 1px solid #EDEDF3; border-radius: 24px; height: 214px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;}
.wait_layer .wait_box span{font-size: 30px; font-weight: 500; line-height: 150%; color: #5C6675;}
.wait_layer .wait_box strong{font-size: 48px; font-weight: 700; line-height: 127%; color: #121212;}

.wait_layer .toast{min-height: 84px; border-radius: 24px; background: #E7EFFD; display: flex; align-items: center; gap: 12px; padding: 12px 24px;}
.wait_layer .toast svg{display: block; flex-shrink: 0;}
.wait_layer .toast p{margin: 0; font-size: 28px; font-weight: 600; line-height: 40px; letter-spacing: -0.28px; color: #025AF6;}

.wait_layer .state_box{border: 1px solid #EDEDF3; border-radius: 24px; padding: 48px 0; display: flex; overflow: hidden;}
.wait_layer .state_col{flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;}
.wait_layer .state_col + .state_col{border-left: 1px solid #EDEDF3;}
.wait_layer .state_col span{font-size: 30px; font-weight: 500; line-height: 150%; letter-spacing: -0.26px; color: #5C6675;}
.wait_layer .state_col strong{font-size: 48px; font-weight: 700; line-height: 127%; letter-spacing: -0.48px;}
.wait_layer .state_col strong.point{color: #025AF6;}

.wait_layer .wait_notice{margin: 0; padding: 0; list-style: none;}
.wait_layer .wait_notice li{position: relative; padding-left: 30px; font-size: 26px; font-weight: 400; line-height: 160%; letter-spacing: -0.28px; color: #5C6675;}
.wait_layer .wait_notice li::before{content: ''; position: absolute; left: 8px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: #5C6675;}

.wait_layer .bottom_cta{position: fixed; left: 0; right: 0; bottom: 0; padding: 24px 40px calc(24px + env(safe-area-inset-bottom));}
.wait_layer .bottom_cta .btn_primary{width: 100%; height: 88px; border-radius: 24px; background: #025AF6; border: 1px solid #025AF6; color: #fff; font-size: 30px; font-weight: 600; letter-spacing: -0.32px; display: flex; align-items: center; justify-content: center;}
.wait_layer .bottom_cta .btn_primary.disabled{background: #C7CBD3; border-color: #C7CBD3; pointer-events: none;}