@charset "utf-8";

/*
  yobolove
  popup css Style
  Author : sohyeon
  date: 2026.01 ~

*/

.popup_bg{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba( 0, 0, 0, 0.5 ); z-index: 5; }
.popup_bg .popup_box{background: #FFFFFF; width: calc(100% - 40px); border-radius: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 80vh; overflow: hidden; display: flex; flex-direction: column;}
.popup_bg .popup_box .day_box{padding: 0 20px 20px; overflow-y: auto; flex: 1;}
.popup_bg .popup_box .day_box h2{padding: 20px 0; border-bottom: 1px solid #ddd; font-size: 20px; position: relative; font-weight: bold;}
.popup_bg .popup_box .popup_footer{display: flex; gap: 10px; padding: 15px 20px; border-top: 1px solid #eee;}
.popup_bg .popup_box .popup_footer button{flex: 1; padding: 15px 0; font-size: 18px; text-align: center;}
.popup_bg .popup_box .diFlex_between .css_select{flex: 1; min-width: 0;}
.popup_bg .popup_box_bottom{overflow: auto; background: #FFFFFF; width: 100%; height: 70%; max-height: calc(-100px + 100vh); border-top-left-radius: 20px; border-top-right-radius: 20px; position: absolute; bottom: 0; left: 0;}
.popup_bg .popup_box_left{background: #FFFFFF; width: 80%; height: 100vh; position: absolute; bottom: 0; left: 0;}
.popup_bg h2{position: relative; font-size: 20px; padding: 20px; border-bottom: 1px solid #ddd;}
.popup_bg .btn_close{position: absolute; top: 15px; right: 0;}

/* 좌측 메뉴 */
.popup_bg .popup_box_left .title{color: #222; font-size: 15px; font-weight: bold;}
.popup_bg .popup_box_left>ul{position: relative;}
.popup_bg .popup_box_left>ul>li{border-bottom: 1px solid #eee;}
.popup_bg .popup_box_left ul li a{display: block; padding: 15px 20px; color: #222; font-size: 20px;}
.popup_bg .popup_box_left ul li ul li a{font-size: 16px; color: #555; padding: 15px 0 15px 35px; background: #f5f5f5;}
.popup_bg .popup_box_left a.point{background: #ffed8f; color: #222; border-radius: 10px; margin: 20px; font-size: 16px; padding: 15px 0 15px 15px;}
.popup_bg .popup_box_left a.footer{padding: 20px 0; position: absolute; bottom: 0; width: 100%; font-size: 16px; color: #4A4A4A; font-weight: bold; text-align: center; background: #e9e9e9;}

/* 하단 */
.popup_bg .popup_box_bottom .title p{font-size: 20px; margin-top: 20px;}
.popup_bg .popup_box_bottom .title .btn_close{right: 20px;}

.sel_list{position: absolute; width: 90%; background: #FFFFFF; border-radius: 5px; box-shadow: 0 0 8px rgb(0 0 0 / 30%); z-index: 1;}
.sel_list li{position: relative;}
.sel_list li input{position: absolute; top: 15px; left: 10px; width: 18px; height: 18px !important; margin: 0;}
.sel_list li input:checked+label{background: rgba(255, 86, 124, 0.08);}
.sel_list li label{display: block; padding: 11px 20px 11px 40px;}


.popup_bg .input_time{position: relative;}
.popup_bg .input_time .time{position: absolute; top: 13px; right: 10px; font-size: 18px;}

/* 텍스트 팝업 */
.sp_popup{height: 75vh; overflow: auto; margin: 60px 20px 20px; padding: 20px; position: relative; background: #fff; border-radius: 10px;}
.sp_popup .btn_close{top: 10px; right: 10px;}
.sp_popup ul{margin-top: 20px;}
.sp_popup li{margin-bottom: 10px; color: #666; font-size: 16px; line-height: 22px;}
.sp_popup li p span{background: #fff6c5; color: #222; padding: 2px 5px; margin: 5px 0; display: inline-block; font-weight: bold;}

/* 하단버튼 */
.footer_btn1{width: 100%; padding: 15px 0; font-size: 19px;}
.footer_btn2{width: calc(100% - 40px); padding: 20px; display: flex !important; align-items: center; justify-content: space-between; position: absolute; bottom: 0; background: #fff;}

/* 공지 팝업 모달 */
.notice_popup_header {
    background: linear-gradient(135deg, #FF567C, #ff8fa3);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.notice_popup_title {
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: -0.3px;
}

.notice_close_x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.notice_close_x:hover {
    color: #fff;
}

.notice_popup_body {
    padding: 24px 22px 16px;
    overflow-y: auto;
    flex: 1;
    line-height: 1.7;
}

.notice_popup_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 20px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.notice_hide_today {
    background: none;
    border: none;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.notice_confirm_btn {
    padding: 11px 28px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
}