@import url('reset.css');

.app_body {background: #eee; }

/* ========= common */
.wrap{width: 100%; height: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; position: relative; }
.contents{width: 100%; height: 100%; position: relative; padding-top: 76px; padding-bottom: 69px; background: #FFF; overflow-y: auto;}

/* ========= input style */
input[type='checkbox']{width: 16px; height: 16px;border-radius: 3px;border: 1px solid #DDD;background: #FFF;vertical-align: middle;}
input[type='checkbox']:checked{background: url(../images/checkbox_on.svg) no-repeat center;}
input[type='text'],input[type='tel'],
input[type='password']{width: 100%; font-size: 16px; border: 0; outline: 0; padding: 18px 16px;border-radius: 12px;border: 1px solid #E9E9E9;background: #FFF;}
input::placeholder{color: #B4BBC9;font-size: 16px;font-weight: 400;letter-spacing: -0.64px;}
input[type='text']:focus,
input[type='password']:focus{border: 1px solid #3B3F47;}

/* ========= button style */
.btn{width: 100%; border-radius: 10px; color: #fff; vertical-align: middle; font-weight: 700;}
.btn.large{height: 43px; font-size: 16px; letter-spacing: -0.16px;}
.btn.small{height: 38px; border-radius: 8px; font-size: 15px; letter-spacing: -0.15px;}
.btn.primary{background: #4157A5;}
.btn.gray{background: #797D84;} 
.btn.gray02{background: #F2F2F2;}
.btn.cancle{background: #FFEDED;}
.btn:disabled{background: #CCC;}
.btn_text{display: block; margin: 0 auto; color: #A4ABB7;text-align: center;font-size: 14px;font-weight: 500;line-height: 18px; /* 128.571% */letter-spacing: -0.56px;text-decoration-line: underline;}

.btn_block{display: flex;align-items: center;}
.btn_block.center{justify-content: center;}

.btn_today{border-radius: 8px; background: #F1F1F1; height: 30px; padding: 4px 12px; font-size: 14px; font-weight: 500;letter-spacing: -0.56px; color: #222;}

.btn_va{padding: 4px 8px; border-radius: 6px; border: 1px solid #208FFF; color: #208FFF; font-size: 13px;font-weight: 500; letter-spacing: -0.52px;}

/* 팝업 버튼 */
.modal_dialog.style01 .modal_footer .btn{height: 46px; text-align: center;font-size: 15px;font-weight: 700;letter-spacing: -0.6px;}
.modal_dialog.style01 .modal_footer .btn.gray02{color: #24272C;}
.modal_dialog.style01 .modal_footer .btn.cancle{color: #FF5D5D;}

/* ========= badge style */
.badge_today{padding: 4px 8px; border-radius: 30px; background: #E9F4FF; color: #208FFF; font-size: 12px;font-weight: 600;letter-spacing: -0.48px;}


/* ========= tab style */
.time_tab{width: 74px; display: flex; gap: 6px; padding: 2px; border-radius: 60px; background: #F1F1F1;}
.time_tab button{text-indent: -10000000px; width: 32px; height: 32px; border-radius: 50%;}
.time_tab button.tab_list{background:url(../images/icon_tab_off.svg) no-repeat center;}
.time_tab button.tab_list.active{background:url(../images/icon_tab_on.svg) no-repeat center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);}
.time_tab button.tab_calendar{background:url(../images/icon_date_off.svg) no-repeat center;}
.time_tab button.tab_calendar.active{background:url(../images/icon_date_on.svg) no-repeat center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));}

/* ========= place_tab */
.place_tab{border-bottom: 1px solid #EDEDED; overflow: hidden; white-space: nowrap;}
.place_tab .tab_scroller{overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;} /* justify-content: center; */
.place_tab .tab_scroller::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.place_tab .tab_scroller ul{padding: 0 16px; display: flex; align-items: stretch; white-space: nowrap;}
.place_tab .tab_scroller ul::-webkit-scrollbar{display: none;}
.place_tab .tab_scroller ul li a{display: block; border-bottom: 2px solid #fff; padding: 16px 20px; color: #5A5A5A;text-align: center;font-size: 16px;font-weight: 600;letter-spacing: -0.64px;}
.place_tab .tab_scroller ul li.on a{color: #222; font-weight: 700; border-bottom: 2px solid #222;}

/* ========= modal style */
.modal_overlay{display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 5000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.60);}
.modal_overlay.bottom{align-items:end; padding-bottom: 27px;}
.modal_overlay.active{display: flex;}

/* 로그인 팝업 스타일 */
.modal_dialog{width: 90%; max-width: 315px; background: #fff; border-radius: 14px; margin-bottom: 60px; }
.modal_dialog .modal_util{padding: 20px 16px 16px 20px; display: flex; align-items: center; justify-content: space-between;}
.modal_dialog .modal_util span{color: #4157A5;font-size: 16px;font-weight: 600;line-height: 18px;letter-spacing: -0.16px;}
.modal_dialog .modal_util .close_modal{width: 24px; height: 24px;}
.modal_dialog .modal_content{padding: 24px 20px 40px 20px;}

.modal_dialog .modal_content .modal_text_main{margin-bottom: 6px; color: #333;text-align: center;font-size: 18px;font-weight: 600;line-height: 22px; /* 122.222% */letter-spacing: -0.18px;}
.modal_dialog .modal_content .modal_text_sub{margin-bottom: 22px; color: #666;text-align: center;font-size: 15px;font-weight: 400;line-height: 20px; /* 133.333% */letter-spacing: -0.15px;}

.modal_footer{padding: 0 20px 20px 20px;}
.modal_footer .btn_block{gap: 6px;}


/* 앱 내부 팝업 스타일 */
.modal_dialog.style01 .modal_util .close_modal{width: 30px; height: 30px;}

/* 내 일정 팝업 */
.modal_dialog .modal_util .date{display: flex; align-items: center;color: #222;font-size: 16px;font-weight: 500;letter-spacing: -0.64px;}
.modal_dialog .modal_util .date strong{padding-right: 3px; font-size: 18px;font-weight: 600;letter-spacing: -0.72px;}
.modal_dialog .modal_util .date .badge_today{margin-left: 8px; color: #208FFF; font-size: 12px; font-weight: 600; letter-spacing: -0.48px; line-height: normal;}

.modal_dialog .modal_content.my_plan_content{padding: 0 16px 26px;}

.plan_time_box{margin-bottom: 24px; padding:16px 20px 16px 60px; border-radius: 12px; border: 1px solid #E7E7E7; background: #FFF url(../images/icon_briefcase.svg)no-repeat left 20px center;}
.plan_detail_time{margin-bottom: 4px; color: #222;font-size: 16px;font-weight: 500;line-height: 20px;}
.plan_detail_time span{padding-right: 8px; color: #208FFF;font-size: 14px;font-weight: 600;line-height: 20px; letter-spacing: -0.56px;}
.plan_all_time{color: #555;font-size: 14px;font-weight: 400;letter-spacing: -0.56px;}

.plan_list_detail{width: 100%;}
.plan_list_detail li{padding:16px 0; border-bottom:1px solid #F4F4F4;}
.plan_list_detail li p{display: flex; align-items: center; justify-content: space-between; color: #444;font-size: 15px;font-weight: 400;letter-spacing: -0.6px;}
.plan_list_detail li p + p{margin-top: 12px;}
.plan_list_detail li p .location{color: #208FFF;font-size: 16px;font-weight: 700;letter-spacing: -0.64px;}
.plan_list_detail li p > span > strong{color: #333;font-size: 16px;font-weight: 700;letter-spacing: -0.64px;}
.plan_list_detail li p > span > span{color: #333; font-size: 16px; padding-left: 6px;}
.plan_list_detail li p .user-self {padding-left: 6px; font-weight: 500; color:#208FFF;}

.profile_image{padding-top: 16px; display: flex; justify-content: flex-end; align-items: center;}
.profile_image > div{margin-left: -5px; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; overflow: hidden;}
.profile_image > div > img{width: 100%;}

/* 로그인 토스트 팝업 */
.login_toast_modal{width: 90%; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); border-radius: 10px;background: rgba(0, 0, 0, 0.60);display: flex;padding: 16px 26px;justify-content: space-between;align-items: center; gap: 17px; z-index: 100;}
.login_toast_modal span{color: #FFF;font-size: 15px;font-weight: 400;line-height: 18px; /* 120% */letter-spacing: -0.15px;}

/* 내부 토스트 팝업 */
.toast_modal{width: 90%; max-width: 600px; position: absolute; bottom: 79px; left: 50%; transform: translateX(-50%); border-radius: 12px;background: rgba(62, 62, 62, 0.84);display: flex;padding: 16px;justify-content: space-between;align-items: center; gap: 17px; z-index: 10;}
.toast_modal span{color: #FFF;font-size: 15px;font-weight: 400;line-height: 18px; /* 120% */letter-spacing: -0.15px;}
.toast_modal span i{margin-right: 8px;}

/* ========= icon */
[class*="icon_"] {display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 50%; background-size: cover;}
.icon_close_bl{background: url(../images/icon-close-bl.svg)no-repeat center;}
.icon_close_w{background: url(../images/icon-close-w.svg)no-repeat center;}
.icon_success{background: url(../images/icon_success.svg)no-repeat center;}

/* ========= size */
.size_16{width: 16px; height: 16px;}
.size_20{width: 20px; height: 20px;}
.size_24{width: 24px; height: 24px;}

/* ========= header */
header{width: 100%; background: #4157A5;position: absolute; top: 0; left: 0; z-index: 1;}
header .header_info{display: flex; justify-content: space-between; align-items: center; padding: 12px 20px;}
header .user_info{color: #FFF;}
header .user_info .user_badge{padding: 4px 8px; margin-right: 8px; border-radius:40px; background: #112A84; font-size: 12px; font-weight: 600; letter-spacing: -0.36px;}
header .user_info .user_name{font-size: 14px; font-weight: 400; letter-spacing: -0.28px;}
header .user_info .user_name strong{padding-right: 3px; font-size: 15px;font-weight: 700;}
header .user_img{width: 36px; height: 36px; border-radius: 50%; background: #FFF url(../images/icon_photo_none.svg) no-repeat center; overflow: hidden;}
header .user_img img{width: 100%; height: 100%; object-fit: cover;}
header .header_bottom{width: 100%; height: 16px; border-radius: 16px 16px 0 0; background: #fff;}

/* ========= nav */
nav{width: 100%; z-index: 10; padding: 0 20px; position: absolute; bottom: 0; left: 0; background: #FFF; border-top: 1px solid #EAEAEA;}
nav ul{display: flex; justify-content: space-between; align-items: center;}
nav ul li{width: 20%; text-align: center; padding: 12px 0;} 
nav ul li.active{border-top: 3px solid #4157A5 ;}
nav ul li a img{width: 24px; height: 24px; margin-bottom: 2px;}
nav ul li a p{font-size: 12px; font-weight: 500; color: #333;}


/* ========= calender style */
.calender{width: 100%; overscroll-behavior: contain;}
.calender tr th{width: 14.2857%; text-align: center; height: 48px; padding-bottom: 8px; font-size: 15px; font-weight: 500;letter-spacing: -0.6px; color: #757575;}
.calender tr td{width: 14.2857%; cursor: pointer; text-align: center; vertical-align: top; height: 60px; text-align: center; font-size: 16px;font-weight: 500;letter-spacing: -0.64px; color: #1E1E1E;}
.calender tr td:first-child{color: #FF5C5C;}
.calender tr td:last-child{color: #4157A5;}
.calender tr .not_m{color: #B3B3B3;}
.calender tr td.not_m:first-child{opacity: 0.5;}
.calender tr td.not_m:last-child{opacity: 0.5;}
.calender tr td > div{display: flex; flex-direction: column; align-items: center;}
.calender tr td > div .service_date{display: inline-block; width: 36px; height: 36px; line-height: 36px; border-radius: 50%;}
.calender tr td .on .service_date{background: #E9F4FF; color: #208FFF; font-weight: 600;}
.calender tr td .pick .service_date{background: #4157A5; color: #fff; margin-left: 2px;}
.calender tr td .today .service_date{line-height: 30px; border: 3px solid #4157A5; box-sizing: border-box; margin-left: 2px;}
.calender tr td .today .service_time{color: #4157A5; padding-top: 6px; font-size: 13px;font-weight: 600;letter-spacing: -0.44px;}
.calender tr td .today .service_time::before{display: none;}
.calender tr td > div .service_time{position: relative; padding-top: 6px; color: #24272C;font-size: 11px;font-weight: 500;letter-spacing: -0.44px;}
.calender tr td > div .service_time::before{content: ''; display: block; width: 10px; height: 10px; background: #208FFF; border-radius: 50%; position: absolute; top: -7px; left: 54%; transform: translateX(-50%); border: 1px solid #005BBB; box-sizing: border-box; }


/* ========= login */
.login_warp{padding: 0 40px; height: 100%; display: flex; justify-content: center; align-items: center;}
.login_con{width: 100%; max-width: 295px;}
.login_con .logo_box{display: flex; justify-content: center; margin-bottom: 46px;}
.login_con .logo_box img{width: 86px;}

.login_form .input_box{margin-bottom: 8px;}
.login_form .input_box.password{margin-bottom: 14px;}

.login_btn_box{display: flex; justify-content: space-between; align-items: center; margin-bottom: 52px;}

.login_btn_box label{color: #686D76;font-size: 14px;font-weight: 400;letter-spacing: -0.56px; vertical-align: middle;}
.login_btn_box button{color: #686D76;font-size: 14px;font-weight: 400;letter-spacing: -0.56px;}

/* ========= 임시 비밀번호 발급 */
.modal_dialog .modal_content.temporary_pw input[type='text']+input[type='text']{margin-top: 6px;} 
.pw_issuance_email{padding: 12px;border-radius: 12px;background: #F5F7FA;font-weight: 500;font-size: 14px; color: #333; line-height: 24px;text-align: center;}
.modal_dialog .modal_content.login_pw_email{padding-bottom: 30px;}
.login_pw_email .btn_text{margin-top: 20px;}
.login_toast_modal .close_modal .icon_close_w{background-size: 10px;}

/* ========= 내 일정 */
.top_link{width: 100%; display: flex; gap: 8px; padding: 0 16px 14px 16px; border-bottom: 1px solid #F0F0F0; margin-bottom: 12px;}
.top_link a{display: inline-block; width: 25%; padding: 0 10px;}
.top_link a img{width: 20px; height: 20px; margin-bottom: 4px;}
.top_link a p{color: #000;font-size: 14px;font-weight: 600;}
.top_link a span{color: #757575;font-size: 13px;font-weight: 400;letter-spacing: -0.5px;}
.top_link a span strong{color: #4157A5; font-weight: 500;}

.control_box.fixed{background: #fff; position: fixed; top: 76px; width: 100%; z-index: 1;}

.control_box .date_control{display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px 16px;}
.control_box .date_control .date_info{display: flex; gap: 18px; align-items: center; justify-content: space-between;}
.control_box .date_control .date_info button{width: 24px; height: 24px;}
.control_box .date_control .date_info span{font-size: 18px;font-weight: 700; color: #202020;}

.time_control{display: flex; align-items: center; justify-content: space-between; padding: 0 16px 12px 16px;}
.time_control .time_info{display: flex; align-items: center; gap:6px; color: #757575; font-size: 14px;font-weight: 400;letter-spacing: -0.56px;}
.time_control .time_info strong{color: #222; font-weight: 600;}
.time_control .time_info img{width: 20px; height: 20px;}

.plan_list{padding: 0 16px;}

.daliy_plan{padding: 20px 0; border-top: 1px solid #F2F2F2;}
.daliy_plan:first-child{border-top: none; padding-top: 14px;}

.plan_date{display: flex; align-items: center;height: 20px;}
.plan_date span{color: #222;font-size: 16px;font-weight: 500;letter-spacing: -0.64px;} 
.plan_date span strong{font-weight: 700;}
.plan_date .place{position: relative; padding-left: 20px;}
.plan_date .place::before{content: ''; display: block; width: 4px; height: 4px; background: #B6B6B6; border-radius: 50%; position: absolute; top: 50%; left: 8px; transform: translateY(-50%);}
.plan_date .badge_today{display: none; margin-left: 6px; color: #208FFF; font-size: 12px;font-weight: 600;letter-spacing: -0.48px;}

.plan_detail{padding-left: 20px; padding-top: 16px;}
.plan_detail li{padding: 14px 16px; border-radius: 12px; background: #F8F8F8;}
.plan_detail li + li{margin-top: 5px;}
.plan_detail li a{display: inline-block; width: 100%; padding-left: 12px; padding-right: 30px; border-left: 2px solid #D4D4D4; background: url(../images/icon_plan_color.svg)no-repeat right center;}
.plan_detail li a.none{background: none; color: #666;font-size: 15px;font-weight: 400;letter-spacing: -0.6px;}
.plan_detail li .list_time{margin-bottom: 8px; color: #333;font-size: 16px;font-weight: 600;line-height: 18px;}
.plan_detail li .list_time span{padding-right: 6px; color: #757575;font-size: 15px;font-weight: 600;letter-spacing: -0.6px;}
.plan_detail li .list_people{color: #333;font-size: 15px;font-weight: 400;letter-spacing: -0.6px;}
.plan_detail li .list_people .leader {padding-right: 4px; font-weight: 600 !important;}
.plan_detail li .list_people .user-self {padding-right: 4px; font-weight: 500; color:#208FFF;}
.plan_detail li .list_people span{padding-right: 4px;}


.daliy_plan.today .plan_date .badge_today{display: block;}
.daliy_plan.today .plan_detail li{background: #F4F9FF;}
.daliy_plan.today .plan_detail li a{border-left: 2px solid #C2E1FF;}
.daliy_plan.today .plan_detail li .list_time span{color: #208FFF;}

.calender_list{padding: 0 16px;}

@media screen and (max-width: 360px) {
   .top_link a{padding: 0 8px;}   
}
@media screen and (max-width: 320px) {
   .top_link a{padding: 0 4px;}   
}

/* ========= 자원봉사 신청 */
.plan_list.va_list{padding: 0 20px;}
.va_list .daliy_plan:first-child{padding-top: 20px;}
.va_list .daliy_plan .va_info{display: flex; align-items: center; justify-content: space-between;}
.va_list .daliy_plan .va_info .plan_date span{display: flex; align-items: center; gap: 3px; line-height: normal;}
.va_list .daliy_plan .va_info .plan_date span strong{font-size: 20px; font-weight: 700;}
.va_list .daliy_plan.today .va_info .plan_date span{color: #208FFF;}
.va_list .daliy_plan .va_info .va_num{padding-left: 20px; background: url(../images/icon_calendar_gray.svg)no-repeat left center; color: #757575;font-size: 14px;font-weight: 400;}

.va_list .plan_detail{padding-left: 0;}
.va_list .plan_detail li,
.va_list .daliy_plan.today .plan_detail li{background: none;}
.va_list .plan_detail li{padding: 14px 0;}
.va_list .daliy_plan .plan_detail li{display: flex; align-items: center; justify-content: space-between;} 
.va_list .daliy_plan .plan_detail li a{border-left: 4px solid #A1D0FF; background: none;}
.va_list .daliy_plan.today .plan_detail li a{border-left: 4px solid #208FFF;}
.va_list .plan_detail li .list_time span{color: #208FFF;}