/* modal size */
.modal-sm { min-width: 550px; padding-left: 20px; padding-right: 20px;}
.modal-ml {min-width: 780px; padding-left: 20px; padding-right: 20px;}
.modal-lg {min-width: 1240px; padding-left: 20px; padding-right: 20px;}



.modal_wrap{background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 555; display: flex; justify-content: center; align-items: center;}
.modal{background-color: #fff; padding: 30px; border-radius: 16px; position: relative;}
.modal h6, .modal h6 span{font-size: 24px; padding-bottom: 10px; font-weight: bold; text-align: center;}



.input_table table{border-radius: 16px; overflow: hidden; border: 1px solid #fff;}
.input_table input{background-color: #fef4e9; padding: 4px 10px; font-size: 15px; color: #333;}
.input_table input::placeholder{font-size: 16px; color: #bbb;}
.input_table input:read-only{background-color: #f6f6f6; font-weight: 400;}
.input_table .radio_wrap input{width: auto; margin-top: 0; position: relative; top: -1px;}
.input_table tr td{border: 1px solid #e5e5e5; vertical-align: middle; font-size: 15px; padding: 10px 16px; background-color: #fff;}
.input_table tr td.left{background-color: #008C43; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; text-align: center;}
.input_table textarea{width: 100%; resize: none; height: 100px; background-color: #fef4e9; border-radius: 10px;}
.input_table .add_text{display: flex; align-items: center;}
.input_table .add_text i{margin-left: 6px;}
i.find{background-color: #008C43; cursor: pointer; height: 31px; color: #fff; line-height: 30px; padding-left: 10px; padding-right: 10px; border-radius: 10px;}

select{width: 100%; background-color: #fef4e9; padding: 3px 10px; border-radius: 10px; font-size: 16px; color: #555; outline: none;}

input, progress {
  accent-color: black;
}

.modal_btn{display: flex; justify-content: flex-end; padding-top: 10px;}
.modal_btn .btn{background-color: #fff; color: #fff; padding: 7px 20px; border-radius: 50px; margin-left: 8px; cursor: pointer;}
.modal_btn .btn.orange{background-color: #008C43;}
.modal_btn .btn.gray{background-color: #bbb;}

.modal_close{background-color: #fff; position: absolute; top: -15px; right: -15px; cursor: pointer; box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.05); border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;}
.modal_close svg{width: 18px; height: 18px;}

input:focus,textarea:focus{outline: 0; border: 0;}

.flex_input{display: flex; align-items: center;}
.flex_input .modal_btn{padding-top: 0;}

.modal .calendar{max-width: 1050px; max-height: 600px; overflow-y: auto;}
.modal .calendar>ul{display: flex; flex-wrap: wrap;}
.modal .calendar>ul li{width: 14.285%;}
.modal .calendar>ul.week{background-color: #fff; border-bottom: 1px solid #e5e5e5; border-top-left-radius: 16px; border-top-right-radius: 16px;}
.modal .calendar>ul.week li{padding: 8px; text-align: center;}
.modal .calendar>ul.month{background-color: #fff; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;}
.modal .calendar>ul.month li{padding: 8px; padding-bottom: 22px; min-height: 125px; text-align: center; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #f5f5f5;}
.modal .calendar>ul.month li:nth-child(7n){border-right: 0;}
.modal .cale_info{display: flex; padding-top: 20px; justify-content: space-between; padding-bottom: 1px; font-weight: bold;}
.modal .cale_info .name span{padding-left: 10px;}
.modal .cale_info .name b{font-weight: bold;}
.modal .cale_info .name b i{font-weight: bold;}
.modal .cale_info .date p{font-weight: bold; font-size: 20px;}
.modal .cale_info .date p i{font-weight: bold;}

.modal .month .top{padding-bottom: 4px; font-size: 14px; text-align: left;}
.modal .month .bot{font-size: 14px;}
.modal .month .bot p{padding-bottom: 3px;}
.modal .month .bot p:nth-child(2){padding-bottom: 6px;}
.modal .month .bot p i{font-weight: bold; margin-left: 4px; font-size: 15px;}
.modal .month .bot .pick i{font-weight: bold; padding: 2px 10px; border-radius: 30px;}
.modal .month .bot .pick i.ok{background-color: #e5e8ff; color: #5c6aff;}
.modal .month .bot .pick i.not{background-color: #ffeae3; color: #ff6f47;}


.modal .total_info{justify-content: flex-end; padding-bottom: 18px; display: flex; align-items: center;}
.modal .total_info p{padding-left: 10px;}
.modal .total_info p i{font-weight: bold; font-size: 18px;}
.modal .total_info.insu p{display: flex; align-items: center;}
.modal .total_info.insu input{width: 110px; padding: 0 10px; margin-left: 4px;}

.modal.common{text-align: center; max-width: 500px; min-width: 450px;}
.modal.common p{line-height: 1.6;}
.modal .common_btn{display: flex; gap: 10px; justify-content: center; padding-top: 16px;}
.modal .common_btn li{width: 50%; text-align: center; cursor: pointer; padding: 14px 0; border-radius: 4px; line-height: 1;}
.modal .common_btn li.complete{background-color: #008C43; color: #fff;}

.modal .common_btn.midbtn{justify-content: flex-end;}
.modal .common_btn.midbtn li{width: 200px;}
.modal .common_btn.midbtn2 li{width: 120px; padding: 12px 0;}
.midbtn.graybtn li{background-color: #eee; color: #333; font-weight: 500;}
.midbtn.graybtn li:hover{background-color: #ddd;}

.month .inner input{margin-right: 2px; background-color: #f5f5f5; padding: 4px 12px; font-size: 14px;}
.month .inner>div{display: flex; align-items: center;}
.month .inner .in_btn{background-color: #008C43; margin-left: 10px; height: 26px; cursor: pointer; line-height: 1; font-size: 14px; color: #fff; padding: 6px 9px 6px 9px; border-radius: 10px;}
.month .inner{display: flex; align-items: center;}
.month input.size_sm{width: 40px; padding: 4px 8px;}

.modal .acc_radio.radio_wrap{display: flex; background-color: #fff; justify-content: center; gap: 4px; border-radius: 10px; align-items: center; margin-top: 9px; padding:16px;}
.modal .acc_radio.radio_wrap label{display: flex; cursor: pointer; align-items: center;}
.modal .acc_radio.radio_wrap input{margin-top: 0;}
.modal .calendar>ul.month.pay li{min-height: 100px;}
.modal .month.pay .top{padding-bottom: 14px;}
.month.pay .inner{justify-content: center;}
.modal .calendar .save_btn{background-color: #008C43; cursor: pointer; font-size: 15px; color: #fff; border-radius: 30px; padding: 4px 10px 5px 10px;}
.modal .calendar:has(.save_btn) .cale_info{margin-bottom: 10px;}

.modal .calendar>ul li.red{color: red;}
.modal .calendar>ul li.blue{color: blue;}

.modal_edit{margin-right: 6px; background-color: #f5f5f5; width: 50px; padding: 4px 12px; font-size: 14px;}
.modal p:has(.modal_edit){display: flex; align-items: center;}
.modal .top_edit{display: flex; justify-content: space-between; align-items: center;}
.modal .top_edit .in_btn{background-color: #008C43; line-height: 1; font-size: 12px; color: #fff; padding: 4px 8px 5px 8px; cursor: pointer; border-radius: 10px;}



.view_detail_modal{z-index: 99;}
.view_detail_modal .modal.common{max-width: 100%;}
.day_select{display: flex;}
.day_select button{display: flex; align-items: center;}
.day_select button p{margin:0 10px}
.day_select button i{width: 35px;height: 35px;}
.day_select div >span{color: #666;}
.day_select .day{display: flex;font-size: 20px; color: #008C43;font-weight: bold;margin:0 30px;}
.day_select .day p,
.day_select .day span{font-weight: inherit;}


.view_detail_modal .acc_radio.radio_wrap{display: block;}
.view_detail_modal .face{width: 30px;height: 30px; margin-right: 4px;}
.view_detail_modal .top {display: flex;justify-content: space-between;width: 100%; background: #008C43; color: #fff;padding:10px;border-radius: 30px;}
.view_detail_modal .top p{display: flex;align-items: center;}
.view_detail_modal .top div{font-size: 20px;}
.view_detail_modal .top div span{font-weight: bold;}

.view_detail_modal .con{margin-top: 15px;}
.view_detail_modal .con li .after{display: none;}
.view_detail_modal .con li > div{display: flex;justify-content: space-between;}
.view_detail_modal .con li .before{font-size: 14px;border:1px solid #eee;padding:4px;border-radius: 4px;background: #f9f9f9;}


.view_detail_modal .con li.check_on .before{display: none;}

.view_detail_modal .con li+li{margin-top: 10px;;}
.view_detail_modal .con li.check_on .after{width: 25px;height: 25px;border:4px solid #222;border-radius: 50%;display: block;;}
.view_detail_modal .con li.check_on .after.red_light{background: #FF0202;}
.view_detail_modal .con li.check_on .after.yellow_light{background: #FFDD15;}
.view_detail_modal .con li.check_on .after.green_light{background: #1AFF1A;}

/* 배차하기 클릭 시 나오는 주문확인 모달 */
.order-info dl {display: flex; border-top: 1px solid #ddd; font-size: 15px;}
.order-info dl > dt {width: 20%; padding: 16px 0; background-color: #f9f9f9; text-align: center;}
.order-info dl > dd {width: 80%; padding: 16px;text-align: left;}
.order-modal h6{padding-bottom: 0;}


.alem-content-wrap > textarea {width: 100%; }

/* 이용약관 모달 */
.terms_wrap .modal h6 {padding-bottom: 26px;}
.terms_wrap p {text-align: left;}
.terms_wrap .modal.common {width: 100%; max-width: 1100px;}
.terms_wrap .modal-content-wrap{width: 100%; height: 410px; overflow-y: scroll; padding: 20px; background-color: #f9f9f9;}
.terms_wrap .ver{margin-bottom: 16px;}


/* 인풋 텍스트 모달 */
.modal_input input{border: 1px solid #ddd; border-radius: 4px; padding:
14px 16px; margin-top: 16px;}


.modal form{margin-bottom: 16px;}
.modal form ul li .modal_input input{margin-top: 6px;}
.modal form ul li p{font-size: 16px; font-weight: 700;}
.modal form ul li + li{margin-top: 16px;}

.modal form .radio_label:first-child{padding-left: 0;}
.modal form .radio_button{margin: 8px 0 12px;}


/* 코스 모달 */
.course_wrap .modal.common{width: 100%; max-width: 1400px;}
/* .course_wrap .modal.common{width: 100%; max-width: 1400px; min-height: 720px; max-height: 720px;} */
.course_wrap h6 span{color: #008C43; font-weight: 700;}
.course_wrap .coursetit{width: 100%; text-align: left; font-size: 20px;}
.course_wrap .coursetit .cdate{color: #888; font-size: .8em;}
.course_wrap .coursetit .cdate:before{content: '('; display: inline; position: relative;}
.course_wrap .coursetit .cdate:after{content: ')'; display: inline; position: relative;}
.course_wrap .coursetit .cname{color: #008C43; font-weight: 700;}
.course_wrap .coursetit i{ font-size: .8em;}
.course_wrap .coursetit i:before{content: '|'; color: #bbb; font-weight: 200; margin: 0 10px 0 4px; font-size: .8em;}
 
.course_wrap .flex{height: 100%; width: 100%; justify-content: space-between;}
.course_wrap .flex > div{height: 100%; } 
.course_wrap .flex .left_side{width: 200px; height: 500px ; overflow-y: auto;}
.course_wrap .flex .left_side ul li{padding: 12px 0; border-radius: 8px; cursor: pointer; font-size: 17px;}
.course_wrap .flex .left_side ul li + li{margin-top: 10px;}
.course_wrap .flex .left_side ul li:hover:not(.active), .course_wrap .flex .left_side ul li.active{color: #008C43; background-color: rgba(228, 241, 224, 0.51); }

.course_wrap .flex .right_table{width: calc(100% - 230px);}
.course_wrap .flex .right_table .table_area thead{position: sticky; top: 0; box-shadow: 0 0 0 3px #ddd inset;}
.course_wrap .flex .right_table .table_area thead th{background-color: #fff;}
.course_wrap .flex .right_table .table_area tbody tr{cursor:initial}
.course_wrap .flex .right_table .table_area .table{overflow: auto;}
.course_wrap .flex .right_table .table_area{position: relative; height: 500px; padding: 0;}


.new_modal_wrap {
  position: fixed;
  bottom: 20px;   /* 화면 아래에서 20px 떨어짐 */
  right: 20px;    /* 화면 오른쪽에서 20px 떨어짐 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 다른 요소 위에 표시되도록 설정 */
}

.new_modal_wrap.common {
  width: 250px;     /* 모달 너비 조정 */
  padding: 15px;
  background: #fff; /* 배경 색상 */
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
}