@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; }

header.has_title+.contents { padding-top: 120px; }

/* ========= 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='tel']: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.apply { background: #E8F1FF; }
.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; }
.btn_va.disabled { border-color: #ccc; color: #ccc; cursor: default; }
.btn.apply.disabled { opacity: 0.4; cursor: default; }

/* 팝업 버튼 */
.modal_dialog,
.modal_dialog.style01 { overflow: visible !important;}

.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.apply { color: #3B66FF; }
.modal_dialog.style01 .modal_footer .btn.cancle { color: #FF5D5D; }
.modal_dialog.style01 .modal_footer .btn.cancle:disabled { color: #24272C; }
.modal_dialog.style01 .modal_footer .dropdown-wrap { position: relative; }
.modal_dialog.style01 .modal_footer .dropdown { position: absolute; right: 0; /* ✅ 우측 정렬 */ bottom: 100%; /* 버튼 위로 오픈 (아래로 열고 싶으면 bottom 대신 top:100%) */
   margin-bottom: 8px;

   min-width: 180px;
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, .15);
   border-radius: .25rem;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
   padding: 4px 0;
   /* 부트스트랩 dropdown-menu 기본 패딩 */
   display: none;
   /* 기본 숨김 */
   z-index: 500;
}

.modal_dialog.style01 .modal_footer .dropdown ul { list-style: none; margin: 0; padding: 0px; }
.modal_dialog.style01 .modal_footer .dropdown li { padding: 8px 10px; font-size: 15px; color: #212529; white-space: nowrap; cursor: pointer; }
.modal_dialog.style01 .modal_footer .dropdown li:hover { background: #f8f9fa; }

/* ========= 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: 400; 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; }
.modal_overlay.bottom .modal_dialog.style01 { display: flex; flex-direction: column; max-height: calc(100vh - 87px - env(safe-area-inset-top)); max-height: calc(100svh - 87px - env(safe-area-inset-top)); max-height: calc(100dvh - 87px - env(safe-area-inset-top)); }
.modal_overlay.bottom .modal_dialog.style01 .modal_content.my_plan_content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.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; }

/* 일정 팝업 연락처 링크 */
.plan_list_detail .contact_row { padding: 12px 0; }
.plan_list_detail .contact_row + .contact_row { border-top: 1px solid #F4F4F4; }
.plan_list_detail .contact_label { color: #444; font-size: 15px; font-weight: 400; letter-spacing: -0.6px; margin-bottom: 8px; }
.plan_list_detail .contact_list { display: flex; flex-direction: column; gap: 10px; }
.plan_list_detail .contact_item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan_list_detail .contact_cong { width: 100%; padding-left: 38px; font-size: 12px; color: #999; letter-spacing: -0.48px; margin-top: -4px; }
.plan_list_detail .contact_photo { display: inline-block; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: #E0E0E0 url("../images/profile_default.svg") no-repeat center / cover; }
.plan_list_detail .contact_name { color: #333; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -0.6px; }
.plan_list_detail .leader_name, .plan_list_detail .leader_name .contact_name, .plan_list_detail .user-self .leader_name, .plan_list_detail .user-self .leader_name .contact_name { color: #208FFF !important; }
.plan_list_detail .contact_name:active { color: #208FFF; }
.plan_list_detail .contact_phone { color: #888; text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: -0.52px; }
.plan_list_detail .contact_phone:active { color: #208FFF; }
.plan_list_detail .contact_sms { display: inline-block; color: #4157A5; text-decoration: none; font-size: 11px; font-weight: 600; padding: 1px 6px; border: 1px solid #4157A5; border-radius: 4px; margin-left: 6px; letter-spacing: -0.4px; line-height: 1.5; }
.plan_list_detail .contact_sms:active { background: #4157A5; color: #fff; }
.plan_list_detail .user-self .contact_name { color: #208FFF; }

/* 불참 사유 목록 */
.cancel_type_list { list-style: none; margin: 0; padding: 0; }
.cancel_type_list li { padding: 14px 16px; border-bottom: 1px solid #F4F4F4; font-size: 15px; color: #333; cursor: pointer; }
.cancel_type_list li:last-child { border-bottom: none; }
.cancel_type_list li:active { background: #F5F7FA; }

.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: 999; }
.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: 999; }
.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; }

/* ========= datepicker */
nav.datepicker--nav { position: static; border: 0; }
.report_detail_wrap .form_group input.datepicker-here { background: url(../images/icon_calendar_line.svg) no-repeat right 16px center; }

/* ========= header */
header { width: 100%; background: #4157A5; position: absolute; top: 0; left: 0; z-index: 5; }
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; }
header.has_title .header_bottom { height: auto; padding: 24px 20px 12px 20px; display: flex; align-items: center; justify-content: space-between; }
header .header_bottom .btn_back { width: 24px; height: 24px; background: url(../images/icon_arrow_bl_left.svg) no-repeat center; }
header .header_bottom .btn_close { width: 24px; height: 24px; background: url(../images/icon_close_bl.svg) no-repeat center; }
header .header_bottom h1 { color: #202020; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: -0.5px; }

/* ========= 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 { display: inline-block; }
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; }
.calender tr td>div .dot_need_support { display: block; width: 10px; height: 10px; background: #FF3B30; border-radius: 50%; margin: -3px auto 0; border: 1px solid #CC2F26; 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; }
.login_lang_select { display: flex; justify-content: center; margin-top: 24px; }
.login_lang_select select { appearance: none; -webkit-appearance: none; background: #F5F7FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23686D76' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid #E0E0E0; border-radius: 8px; padding: 8px 32px 8px 14px; font-size: 14px; color: #333; cursor: pointer; outline: none; }
.login_lang_select select:focus { border-color: #4A6CF7; }

/* ========= 임시 비밀번호 발급 */
.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; text-align: center; }
.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; display: flex; flex-wrap: wrap; row-gap: 2px;}
.plan_detail li .list_people .leader { padding-right: 4px; font-weight: 600 !important; color: #208FFF; }
.plan_detail li .list_people .user-self { padding-right: 4px; font-weight: 500; color: #208FFF; }
.plan_detail li .list_people span { padding-right: 4px; white-space: nowrap; }

.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; }
.va_list .daliy_plan .plan_detail li a { display: block; width: auto; flex: 1 1 0%; min-width: 0; }
.va_list .daliy_plan .plan_detail li .list_info,
.va_list .daliy_plan .plan_detail li .list_people { min-width: 0; flex: 1 1 auto; }

/* ========= 공지사항 */
.page_title { padding: 4px 20px 12px 20px; color: #202020; font-size: 20px; font-weight: 700; letter-spacing: -0.6px; }
.notice_container { height: 100%; overflow-y: auto; }
.notice_list { list-style: none; margin: 0; padding: 0; }
.notice_list li { padding: 20px; }
.notice_list li a { display: inline-block; width: 100%; }
.notice_list li a p { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notice_list li a p .noti_place { padding-left: 28px; line-height: 20px; background: url(../images/icon-notice-s.svg) no-repeat left center; color: #4157A5; font-size: 15px; font-weight: 500; letter-spacing: -0.6px; }
.notice_list li a p .noti_place.new { background: url(../images/icon-notice-s-new.svg)no-repeat left center; }
.notice_list li a p .noti_date { color: #757575; font-size: 14px; font-weight: 400; letter-spacing: -0.56px; }
.notice_list li a .noti_title { display: inline-block; padding-left: 28px; color: #222; word-break: break-all; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.64px; overflow: hidden; text-overflow: ellipsis;
   display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}



.notice_title { padding: 16px 20px; border-bottom: 1px solid #F6F6F6; }
.notice_title .noti_place { margin-bottom: 8px; color: #4157A5; font-size: 14px; font-weight: 500; letter-spacing: -0.56px; }
.notice_title .noti_title { margin-bottom: 8px; color: #222; font-size: 18px; font-weight: 500; line-height: 26px; letter-spacing: -0.72px; word-break: break-all;}
.notice_title .noti_date { color: #757575; font-size: 14px; font-weight: 400; letter-spacing: -0.56px; }

.notice_text { padding: 20px; word-break: break-all; color: #222; font-size: 15px; font-weight: 400; line-height: 25px; letter-spacing: -0.6px; }
.notice_text img { max-width: 100%; height: auto; }
/* 에디터 리치 콘텐츠 스타일 */
.notice_text strong, .notice_text b { font-weight: 700; }
.notice_text em, .notice_text i { font-style: italic; }
.notice_text u { text-decoration: underline; }
.notice_text s, .notice_text del { text-decoration: line-through; }
.notice_text h1 { font-size: 24px; font-weight: 700; margin: 16px 0 8px; line-height: 1.3; }
.notice_text h2 { font-size: 20px; font-weight: 700; margin: 14px 0 8px; line-height: 1.3; }
.notice_text h3 { font-size: 18px; font-weight: 700; margin: 12px 0 6px; line-height: 1.3; }
.notice_text h4 { font-size: 16px; font-weight: 700; margin: 10px 0 6px; line-height: 1.3; }
.notice_text p { margin: 0 0 8px; }
.notice_text ul, .notice_text ol { padding-left: 20px; margin: 8px 0; }
.notice_text ul { list-style: disc; }
.notice_text ol { list-style: decimal; }
.notice_text li { margin-bottom: 4px; line-height: 1.6; }
.notice_text blockquote { border-left: 3px solid #ccc; padding: 8px 12px; margin: 8px 0; color: #555; background: #f9f9f9; }
.notice_text pre { background: #f4f4f4; padding: 12px; border-radius: 4px; overflow-x: auto; font-family: monospace; font-size: 13px; margin: 8px 0; }
.notice_text code { background: #f4f4f4; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 13px; }
.notice_text table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.notice_text table th, .notice_text table td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; font-size: 14px; line-height: 1.5; }
.notice_text table th { background: #f5f5f5; font-weight: 600; }
.notice_text table tr:nth-child(even) { background: #fafafa; }
.notice_text a { color: #4157A5; text-decoration: underline; }
.notice_text hr { border: none; border-top: 1px solid #ddd; margin: 12px 0; }

.link_box { padding: 10px 20px 20px;}
.link_box>div { width: 100%; padding: 14px 16px 14px 48px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.01); background: #F7FAFF; word-wrap: break-word; }
.link_box>div+div { margin-top: 8px; }
.link_box>div.link { background: #F7FAFF url(../images/icon-link.svg) no-repeat left 16px center; }
.link_box>div.download { background: #F7FAFF url(../images/icon-download.svg) no-repeat left 16px center; }
.link_box>div a { font-size: 13px; font-weight: 400; line-height: 18px; word-break: break-all;}
.link_box>div.link a { color: #1641FF; }
.link_box>div.download a { color: #303030; letter-spacing: -0.26px;}

/* ========= 봉사 보고 */
.report_top { padding: 20px; border-bottom: 6px solid #F2F4F6; }
.report_top .top_text { color: #1E1E1E; font-size: 17px; font-weight: 400; line-height: 24px; letter-spacing: -0.085px; }
.report_top .experiences_btn { display: inline-block; padding: 18px 15px; margin-top: 14px; width: 100%; border-radius: 14px; background: #F2F4F6 url(../images/icon_arrow_bl_right.svg) no-repeat right 18px center; }
.report_top .experiences_btn span { display: inline-block; height: 26px; padding-left: 38px; color: #000; font-size: 17px; font-weight: 500; line-height: 26px; letter-spacing: -0.17px; background: url(../images/icon_experience.png) no-repeat left center; background-size: 26px; }
.report_top .experiences_list_btn { display: inline-block; padding: 14px 15px; margin-top: 8px; width: 100%; border-radius: 14px; border: 1px solid #E9E9E9; background: #FFF url(../images/icon_arrow_bl_right.svg) no-repeat right 18px center; }
.report_top .experiences_list_btn span { display: inline-block; height: 22px; color: #4157A5; font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: -0.15px; }

.experiences_area { padding: 26px 20px; }
.experiences_area h2 { color: #202020; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.experiences_list+.experiences_list { margin-top: 18px; }
.experiences_list .experiences_date { color: #222; font-size: 15px; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 9px; }
.experiences_list .experiences_date b { font-size: 17px; font-weight: 600; letter-spacing: -0.68px; }
.experiences_list ul li { padding: 16px 18px; border-radius: 12px; border: 1px solid #DDD; display: flex; align-items: center; justify-content: space-between; }
.experiences_list ul li+li { margin-top: 6px; }
.experiences_list ul li>div { padding-left: 40px; background: url(../images/icon_briefcase.svg)no-repeat left center; }
.experiences_list ul li>div .ex_place { color: #222; font-size: 16px; font-weight: 500; letter-spacing: -0.64px; margin-bottom: 4px; }
.experiences_list ul li>div .ex_time { color: #222; font-size: 16px; font-weight: 400; }
.experiences_list ul li>div .ex_time span { color: #208FFF; font-size: 14px; font-weight: 600; margin-right: 6px; }
.experiences_list ul li>.btn_report { padding: 4px 8px; border-radius: 6px; border: 1px solid #208FFF; color: #208FFF; font-size: 13px; font-weight: 500; letter-spacing: -0.52px; }
.experiences_list ul li > .btn_report.disabled { border: 1px solid #B3B3B3; color: #B3B3B3; }
.experiences_list ul li > .btn_report.reported { border: 1px solid #4CAF50; color: #4CAF50; }

.report_detail_wrap { padding: 20px; }
.report_date { color: #222; font-size: 17px; font-weight: 500; letter-spacing: -0.8px; margin-bottom: 16px; }
.report_date b { font-size: 20px; font-weight: 600; vertical-align: text-bottom; }
.report_info { padding: 18px 20px; border-radius: 12px; background: #F2F4F6; margin-bottom: 30px; }
.report_info .ex_place { color: #000; font-size: 17px; font-weight: 500; letter-spacing: -0.68px; margin-bottom: 8px; }
.report_info .ex_time { color: #000; font-size: 16px; font-weight: 400; letter-spacing: -0.64px; }
.report_info .ex_time span { color: #208FFF; font-size: 16px; font-weight: 600; letter-spacing: -0.64px; margin-right: 5px; }

/* .report_info{padding: 20px; border-radius: 14px; background: #F2F4F6;}
.report_info .experiences_date{color: #222;font-size: 15px;font-weight: 500;letter-spacing: -0.6px; margin-bottom: 16px;}
.report_info .experiences_date b{font-size: 17px;font-weight: 600;letter-spacing: -0.68px;}
.report_info .ex_place{padding-left: 30px; height: 20px; line-height: 20px; margin-bottom: 7px; color: #000;font-size: 17px;font-weight: 500; background: url(../images/icon_briefcase.svg) no-repeat left center; background-size: 20px;}
.report_info .ex_time{padding-left: 30px; color: #000;font-size: 16px;font-weight: 400;}
.report_info .ex_time span{color: #208FFF;font-size: 14px;font-weight: 600;letter-spacing: -0.56px; margin-right: 6px;} */

.report_detail_wrap h2 { margin-top: 30px; margin-bottom: 14px; color: #757575; font-size: 17px; font-weight: 500; letter-spacing: -0.68px; }

.publication_list li { padding: 20px 18px; border-radius: 14px; border: 1px solid #DDD; display: flex; align-items: center; justify-content: space-between; }
.publication_list li+li { margin-top: 6px; }
.publication_list li>span { color: #000; font-size: 17px; font-weight: 500; letter-spacing: -0.68px; }
.publication_list li>div { display: flex; align-items: center; justify-content: space-between; }
.publication_list li>div button { width: 24px; height: 24px; }
.publication_list li>div .btn_minus { background: url(../images/icon-minus.svg) no-repeat center; }
.publication_list li>div .btn_minus:disabled { background: url(../images/icon-minus-dis.svg) no-repeat center; }
.publication_list li>div .btn_plus { background: url(../images/icon-plus.svg) no-repeat center; }
.publication_list li>div span { display: inline-block; width: 57px; color: #000; text-align: center; font-size: 20px; font-weight: 500; letter-spacing: -0.8px; }
.report_detail_wrap textarea { width: 100%; height: 152px; resize: none; font-size: 15px; padding: 16px 18px; border-radius: 14px; border: 1px solid #DDD; background: #FFF; font-family: "Pretendard"; }
.report_detail_wrap textarea::placeholder { color: #000; opacity: 0.16; font-family: "Pretendard"; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0.091px; }
.report_detail_wrap textarea:focus { outline: none; }

.btn_submit { margin-top: 40px; margin-bottom: 40px; width: 100%; padding: 14px; border-radius: 12px; background: #4157A5; color: #FFF; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: -0.085px; }

.report_detail_wrap .form_group label { color: #757575; font-size: 17px; font-weight: 500; letter-spacing: -0.68px; }
.report_detail_wrap .form_group input { margin-top: 12px; color: #000; font-family: "Pretendard"; font-size: 18px; font-weight: 400; }
.report_detail_wrap .form_group select {
   width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid #E9E9E9; background: #FFF;
   font-size: 16px; color: #222; appearance: none; -webkit-appearance: none;
   background-image: url(../images/icon_arrow_gray2_right.svg); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.report_detail_wrap .form_group select:focus { border-color: #3B3F47; outline: none; }

.date_dd { position: relative; z-index: 4;}
.date_dd .dd_panel{ position:absolute; left:0; right:0; top: calc(100% + 4px); z-index: 4; max-height: 280px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ddd; background: #fff; border-radius: 12px; }
.date_dd .dd_list { margin:0; padding:0; list-style:none; }
.date_dd .dd_list li {  padding: 10px 12px; cursor:pointer; border-bottom: 1px solid #eee; transition: background-color .12s ease;}
.date_dd .dd_list li:hover { background: #f5f7ff; /* 기존 #f5f5f5보다 선택 느낌 강화 */}
.date_dd .dd_list li:last-child{ border-bottom: none; }
.date_dd .dd_sentinel { height: 1px; }
.date_dd .dd_list li.empty{ padding: 16px 12px; text-align: center; color: #999; font-size: 14px; cursor: default; pointer-events: none; background: #fafafa; }
.page_overlay{ position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 3; display: none; }

/* ========= radio button style */
.report_detail_wrap .form_group + .form_group{margin-top: 30px;}
.report_detail_wrap .radio_group{display: flex; gap: 8px; margin-top: 12px;}
.report_detail_wrap .radio_option{flex: 1; position: relative; cursor: pointer;}
.report_detail_wrap .radio_option input[type="radio"]{position: absolute; opacity: 0; width: 0; height: 0;}
.report_detail_wrap .radio_option .radio_label{display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; border-radius: 12px; border: 1px solid #E9E9E9; background: #FFF; color: #000; font-size: 16px; font-weight: 400; letter-spacing: -0.64px; transition: all 0.2s; position: relative;}
.report_detail_wrap .radio_option input[type="radio"]:checked + .radio_label{border: 1px solid #4157A5;}
.report_detail_wrap .radio_option .radio_label::after{content: ''; display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #E9E9E9; background: #FFF; margin-left: 8px; transition: all 0.2s; flex-shrink: 0;}
.report_detail_wrap .radio_option input[type="radio"]:checked + .radio_label::after{border: 2px solid #4157A5; background: #4157A5; background-image: radial-gradient(circle, #FFF 0%, #FFF 30%, transparent 30%, transparent 100%);}



/* ========= 설정 페이지 */
.settings_wrap {
   padding: 0 20px;
}

.settings_wrap .page_title {
   margin-bottom: 30px;
}

.profile_section {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px 0;
}

.profile_image_wrap {
   margin-bottom: 10px;
}

.profile_image_circle {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   border: 2px solid #F5F5F5;
   background: #FFF;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.profile_image_circle img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.profile_info {
   text-align: center;
}

.profile_name {
   color: #000;
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -0.8px;
   margin-bottom: 4px;
}

.profile_church {
   color: #4157A5;
   font-size: 15px;
   font-weight: 500;
   line-height: 18px;
   letter-spacing: -0.6px;
}

.settings_list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.settings_list li {
   border-bottom: 1px solid #F0F0F0;
}

.settings_list li a {
   display: block;
   padding: 20px 0;
   text-decoration: none;
}

.menu_item {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.menu_icon {
   width: 24px;
   height: 24px;
   margin-right: 12px;
   flex-shrink: 0;
}

.menu_text {
   flex: 1;
   color: #333;
   font-size: 16px;
   font-weight: 600;
   line-height: 18px;
   letter-spacing: -0.64px;
   text-align: left;
}

.menu_arrow {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
}

.menu_right {
   display: flex;
   align-items: center;
   gap: 8px;
}

.menu_value {
   color: #4157A5;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: -0.6px;
}

.app_version {
   text-align: left;
   padding: 20px 0;
}

.app_version p {
   color: #8C8C8C;
   font-size: 16px;
   font-weight: 500;
   line-height: 18px;
   letter-spacing: -0.64px;
}

.app_version p span {
   font-weight: 400;
   padding-left: 6px;
}

/* ========= 내 정보 관리 페이지 */
.my_info_wrap {
   padding: 0 20px 40px 20px;
}

.profile_photo_section {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px 0 20px;
}

.profile_photo_circle {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   border: 2px solid #E9E9E9;
   background: #FFF;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   margin-bottom: 14px;
}

.profile_photo_circle img {
   width: 80px;
   height: 80px;
   object-fit: contain;
}

.btn_profile_change {
   padding: 7px 10px;
   border-radius: 6px;
   background: #F2F2F2;
   color: #515151;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: -0.6px;
   border: none;
   cursor: pointer;
}

.info_list {
   margin-bottom: 40px;
}

.info_item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 0;
   border-bottom: 1px solid #F0F0F0;
}

.info_item:last-child {
   border-bottom: none;
}

.info_label {
   color: #333;
   font-size: 16px;
   font-weight: 600;
   line-height: 18px;
   /* 112.5% */
   letter-spacing: -0.64px;
}

.info_value {
   color: #333;
   font-size: 15px;
   font-weight: 400;
   letter-spacing: -0.6px;
}

.info_value.data_none {
   color: #888;
}

.info_right {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 1;
   justify-content: flex-end;
}

.info_input {
   flex: 1;
   max-width: 200px;
   padding: 0;
   border: 0;
   outline: 0;
   background: transparent;
   color: #B4BBC9;
   font-size: 17px;
   font-weight: 400;
   letter-spacing: -0.68px;
   text-align: right;
}

.info_input::placeholder {
   color: #B4BBC9;
}

.info_input:focus {
   color: #222;
}

.btn_change {
   padding: 4px 10px;
   border-radius: 50px;
   border: 1px solid #4157A5;
   background: #FFF;
   color: #4157A5;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: -0.56px;
   cursor: pointer;
   flex-shrink: 0;
}

.btn_info_submit {
   width: 100%;
   padding: 14px;
   background: #fff;
   color: #4157A5;
   text-align: center;
   font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.08px;
   border-radius: 12px;
   border: 1px solid #4157A5;
}

/* ========= 전화번호 변경 페이지 */
.change_phone_wrap {
   padding: 20px;
   position: relative;
   height: 100%;
}

.change_guide {
   color: #202020;
   font-size: 20px;
   font-weight: 600;
   line-height: 28px;
   /* 140% */
   letter-spacing: -0.5px;
   margin-bottom: 20px;
}

.change_phone_wrap .form_group {
   margin-bottom: 30px;
}

.change_phone_wrap .form_group label {
   display: block;
   color: #555;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: -0.6px;
   margin-bottom: 10px;
}

.change_phone_wrap .phone_input {
   width: 100%;
   padding: 18px 16px;
   border-radius: 12px;
   border: 1px solid #E9E9E9;
   background: #FFF;
   color: #222;
   font-family: "Pretendard";
   font-size: 16px;
   font-weight: 400;
   letter-spacing: -0.64px;
   outline: none;
}

.change_phone_wrap .phone_input:focus {
   border: 1px solid #3B3F47;
}

.change_phone_wrap .phone_input:read-only {
   border-radius: 14px;
   border: 1px solid #EDF0F4;
   background: #F9FAFB;
   color: #888;
   font-size: 17px;
   font-weight: 400;
}

.change_phone_wrap .phone_input::placeholder {
   color: #B4BBC9;
}

/* .bottom_fixed{position: absolute; width: calc(100% - 40px); bottom: 40px;} */

/* ========= 이메일 인증 */
.verify_hint { margin-top: 8px; color: #888; font-size: 13px; letter-spacing: -0.52px; }

.verify_btn_group { display: flex; gap: 10px; margin-top: 20px; }
.verify_btn_group .btn_info_submit { flex: 1; }
.verify_btn_group #btnResend { background: #F2F2F2; color: #555; border: 1px solid #DDD; }

.verify_status { text-align: center; padding-top: 80px; }
.verify_desc { margin-top: 10px; color: #888; font-size: 15px; letter-spacing: -0.6px; }
.verify_icon { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: #4157A5; color: #fff; font-size: 32px; line-height: 64px; text-align: center; }
.verify_icon.fail { background: #FF5D5D; }

/* ========= 언어 선택 페이지 */
.language_wrap {
   padding: 20px;
}

.language_list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.language_list li+li {
   margin-top: 12px;
}

.language_option {
   display: block;
}

.language_option input[type="radio"] {
   position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
}

.language_card {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 16px;
   border-radius: 12px;
   border: 1px solid #E5E5E5;
   background: #FFF;
   transition: all 0.2s;
}

.language_card .language_text {
   color: #000;
   font-size: 17px;
   font-weight: 500;
   letter-spacing: -0.68px;
}

.language_card .language_radio {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2px solid #DADADA;
   background: #FFF;
   flex-shrink: 0;
   transition: all 0.2s;
}

.language_option input[type="radio"]:checked+.language_card {
   border: 1px solid #4157A5;
}

.language_option input[type="radio"]:checked+.language_card .language_radio {
   border: 2px solid #4157A5;
   background: #4157A5;
   background-image: radial-gradient(circle, #FFF 0%, #FFF 35%, transparent 35%, transparent 100%);
}

.btn_language_confirm {
   width: 100%;
   padding: 14px;
   border-radius: 12px;
   background: #4157A5;
   color: #FFF;
   text-align: center;
   font-size: 17px;
   font-weight: 700;
   letter-spacing: -0.085px;
   border: none;
   cursor: pointer;
   margin-top: 40px;
   margin-bottom: 40px;
}

/* ========= 고정 스케줄 신청 */
.fixed_schedule_wrap { padding: 20px; }

.fixed_schedule_wrap .form_group { margin-bottom: 24px; }

.fixed_schedule_wrap .field_label { display: block; color: #555; font-size: 15px; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 10px; }

.fixed_schedule_wrap .field_label_row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }

.fixed_schedule_wrap .field_hint { color: #999; font-size: 13px; font-weight: 400; letter-spacing: -0.52px; }

.fixed_schedule_wrap .select_input {
   width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #E9E9E9; background: #FFF;
   font-size: 16px; color: #222; appearance: none; -webkit-appearance: none;
   background-image: url(../images/icon_arrow_gray2_right.svg); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.fixed_schedule_wrap .select_input:focus { border-color: #3B3F47; outline: none; }

.time_select_list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }

.time_select_list li { flex: 0 0 calc(50% - 5px); }

.time_select_input { position: absolute; opacity: 0; width: 0; height: 0; }

.time_select_item {
   display: flex; align-items: center; justify-content: space-between;
   padding: 14px 16px; border-radius: 10px; border: 1px solid #E9E9E9; background: #FFF; cursor: pointer;
   transition: all 0.15s ease;
}
.time_select_item:active { background: #F5F7FF; }

.time_select_input:checked + .time_select_item { border-color: #4157A5; background: #F0F3FF; }

.time_select_input:disabled + .time_select_item { opacity: 0.5; cursor: default; }
.time_select_item.applied { border-color: #CCC; background: #F5F5F5; color: #999; }

.time_text { font-size: 15px; font-weight: 500; letter-spacing: -0.6px; color: #222; }

.time_check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #DADADA; flex-shrink: 0; transition: all 0.2s; }
.time_select_input:checked + .time_select_item .time_check {
   border-color: #4157A5; background: #4157A5;
   background-image: radial-gradient(circle, #FFF 0%, #FFF 30%, transparent 30%, transparent 100%);
}

.time_select_list .empty_time { flex: 0 0 100%; padding: 20px; text-align: center; color: #999; font-size: 14px; }

.fixed_action_bar {
   position: sticky; bottom: 0; left: 0; right: 0; padding: 12px 20px; background: #FFF;
   border-top: 1px solid #F0F0F0;
}

/* ========= 문의하기 */
.inquiry_wrap { padding: 0 20px; }

.btn_new_inquiry {
   display: flex; align-items: center; justify-content: center;
   padding: 16px; margin: 16px 0; border-radius: 12px; border: 1px dashed #B4BBC9; background: #FAFBFD; cursor: pointer;
   transition: background 0.15s ease;
}
.btn_new_inquiry:active { background: #F0F3FF; }
.btn_plus_text { color: #4157A5; font-size: 15px; font-weight: 600; letter-spacing: -0.6px; }

.inquiry_list { list-style: none; margin: 0; padding: 0; }
.inquiry_list li { border-bottom: 1px solid #F2F2F2; }
.inquiry_list li a { display: block; padding: 16px 0; }

.inquiry_title { color: #222; font-size: 16px; font-weight: 600; letter-spacing: -0.64px; margin-bottom: 6px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inquiry_content_preview { color: #888; font-size: 14px; font-weight: 400; letter-spacing: -0.56px; margin-bottom: 10px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inquiry_meta { display: flex; align-items: center; gap: 8px; }
.inquiry_status { font-size: 13px; font-weight: 600; letter-spacing: -0.52px; padding: 2px 8px; border-radius: 4px; }
.inquiry_status.status_completed { color: #4157A5; background: #EDF0FA; }
.inquiry_status.status_processing { color: #E88B00; background: #FFF5E5; }
.inquiry_date { color: #B4BBC9; font-size: 13px; font-weight: 400; letter-spacing: -0.52px; }

.empty_message { padding: 60px 20px; text-align: center; }
.empty_message p { color: #B4BBC9; font-size: 15px; font-weight: 400; letter-spacing: -0.6px; }

/* 문의 작성 */
.inquiry_form { padding: 16px 0; }
.inquiry_form .form_group { margin-bottom: 20px; }
.inquiry_form .form_group label { display: block; color: #555; font-size: 15px; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 10px; }
.inquiry_form .form_input {
   width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #E9E9E9; background: #FFF;
   font-size: 16px; color: #222; outline: none;
}
.inquiry_form .form_input:focus { border-color: #3B3F47; }
.inquiry_form .form_textarea {
   width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid #E9E9E9; background: #FFF;
   font-size: 16px; color: #222; outline: none; resize: vertical; font-family: inherit; line-height: 1.5;
}
.inquiry_form .form_textarea:focus { border-color: #3B3F47; }

.form_actions { display: flex; gap: 10px; margin-top: 24px; }
.form_actions .btn_cancel {
   flex: 1; padding: 14px; border-radius: 10px; border: none; background: #F2F2F2;
   color: #555; font-size: 16px; font-weight: 700; cursor: pointer;
}
.form_actions .btn_submit {
   flex: 1; padding: 14px; border-radius: 10px; border: none; background: #4157A5;
   color: #FFF; font-size: 16px; font-weight: 700; cursor: pointer;
}

/* 문의 상세 */
.inquiry_detail { padding: 16px 0; }
.inquiry_detail_header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.inquiry_detail_subject { color: #222; font-size: 18px; font-weight: 600; letter-spacing: -0.72px; line-height: 26px; margin-bottom: 16px; }
.inquiry_detail_contents { color: #555; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; margin-bottom: 24px; word-break: break-all; }

.inquiry_reply_box { padding: 16px; border-radius: 12px; background: #F8F9FB; margin-bottom: 24px; }
.reply_label { color: #4157A5; font-size: 14px; font-weight: 600; letter-spacing: -0.56px; margin-bottom: 10px; }
.inquiry_reply_contents { color: #555; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; word-break: break-all; }

/* ========= 경험담 리스트 */
.exp_list_wrap { padding: 0 20px; }

.exp_list { list-style: none; margin: 0; padding: 0; }
.exp_list li { border-bottom: 1px solid #F2F2F2; }
.exp_list li .exp_item { display: block; padding: 16px 0; cursor: pointer; }

.exp_content_preview { color: #222; font-size: 15px; font-weight: 500; letter-spacing: -0.6px; margin-bottom: 8px;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp_meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp_badge { font-size: 13px; font-weight: 600; letter-spacing: -0.52px; padding: 2px 8px; border-radius: 4px; }
.exp_badge.badge_visit { color: #208FFF; background: #E9F4FF; }
.exp_badge.badge_experience { color: #4157A5; background: #EDF0FA; }
.exp_badge.badge_no_visit { color: #888; background: #F2F2F2; }
.exp_badge.badge_study { color: #0EAA5F; background: #E6F9F0; }
.exp_badge.badge_no_study { color: #888; background: #F2F2F2; }
.exp_badge.badge_receipt { color: #4157A5; background: #EDF0FA; }
.exp_badge.badge_not_receipt { color: #E88B00; background: #FFF5E5; }
.exp_date { color: #B4BBC9; font-size: 13px; font-weight: 400; letter-spacing: -0.52px; }

/* ========= 공지된 경험담 목록 (카드형) */
.exp_cards { list-style: none; margin: 0; padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }
.exp_card { width: 100%; text-align: left; display: block; padding: 16px 18px; border-radius: 14px;
   border: 1px solid #E9E9E9; background: #FFF; cursor: pointer; font-family: "Pretendard";
   transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.exp_card:active { transform: scale(0.995); border-color: #C9D0E4; box-shadow: 0 2px 8px rgba(65, 87, 165, 0.08); }

.exp_card_top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.exp_card_top .exp_badge { flex: none; }
.exp_place { display: inline-flex; align-items: center; gap: 4px; min-width: 0;
   padding: 4px 10px 4px 8px; border-radius: 8px; background: #F2F4F6;
   color: #4A5468; font-size: 13px; font-weight: 600; letter-spacing: -0.52px;
}
.exp_place::before { content: ""; flex: none; width: 16px; height: 16px;
   background: url(../images/icon_pin_gray.svg) no-repeat center / 16px 16px;
}
.exp_place > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp_place.is_empty { color: #B4BBC9; background: #F7F8FA; }
.exp_card_date { margin-left: auto; flex: none; color: #8C95A8; font-size: 13px; font-weight: 500; letter-spacing: -0.52px; }

.exp_card_text { color: #333; font-size: 15px; font-weight: 400; line-height: 23px; letter-spacing: -0.6px;
   word-break: break-word; white-space: pre-wrap;
   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 경험담 상세 */
.exp_detail { padding: 16px 0; }
.exp_detail_header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.exp_detail_contents { color: #555; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; margin-bottom: 24px; white-space: pre-wrap; word-break: break-all; }

/* 공지된 경험담 상세 */
.exp_notice_detail { padding: 20px; }
.exp_notice_detail_top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.exp_notice_detail .exp_place { max-width: 100%; }
.exp_notice_detail_title { color: #202020; font-size: 18px; font-weight: 700; line-height: 26px; letter-spacing: -0.72px; margin-bottom: 4px; }
.exp_notice_detail_addr { color: #8C95A8; font-size: 13px; font-weight: 400; line-height: 19px; letter-spacing: -0.52px; margin-bottom: 16px; word-break: break-word; }
.exp_info_list { list-style: none; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: #F7F8FA; display: flex; flex-direction: column; gap: 8px; }
.exp_info_list li { display: flex; align-items: baseline; gap: 12px; }
.exp_info_list .exp_info_key { flex: none; width: 66px; color: #8C95A8; font-size: 13px; font-weight: 500; letter-spacing: -0.52px; }
.exp_info_list .exp_info_val { color: #333; font-size: 14px; font-weight: 500; letter-spacing: -0.56px; word-break: break-word; }
.exp_notice_body { color: #333; font-size: 15px; font-weight: 400; line-height: 25px; letter-spacing: -0.6px; white-space: pre-wrap; word-break: break-word; }

/* ========= 프로필 사진 확대 라이트박스 */
.photo_lightbox { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 500; background: rgba(0, 0, 0, 0.7); }
.photo_lightbox img { max-width: 80%; max-height: 80%; border-radius: 12px; object-fit: contain; }
.photo_lightbox .lightbox_close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.3); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.photo_lightbox .lightbox_close::before,
.photo_lightbox .lightbox_close::after { content: ''; position: absolute; width: 18px; height: 2px; background: #fff; border-radius: 1px; }
.photo_lightbox .lightbox_close::before { transform: rotate(45deg); }
.photo_lightbox .lightbox_close::after { transform: rotate(-45deg); }

/* ========= 짝짓기 뱃지 */
.plan_list_detail .contact_photo { cursor: pointer; }
.pair_badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #4157A5; background: #fff; color: #4157A5; font-size: 11px; font-weight: 700; flex-shrink: 0; cursor: pointer; margin-right: 4px; transition: all 0.15s ease; }
.pair_badge.assigned { background: #4157A5; color: #fff; }
.pair_badge:active { transform: scale(0.9); }
.pair_badge.readonly { cursor: default; opacity: 0.8; }
.btn_save_pairs { width: 100%; height: 38px; border-radius: 8px; background: #4157A5; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -0.15px; border: none; margin-top: 12px; cursor: pointer; }
.btn_save_pairs:disabled { background: #CCC; }
.btn_sms_all { display: block; width: 100%; height: 38px; line-height: 36px; text-align: center; box-sizing: border-box; border-radius: 8px; background: #fff; color: #4157A5; border: 1px solid #4157A5; font-size: 15px; font-weight: 700; letter-spacing: -0.15px; margin-top: 8px; text-decoration: none; cursor: pointer; }
.btn_sms_all:active { background: #4157A5; color: #fff; }

/* 라우터 페이지 로드 실패 — 2차 실패 시 표시 */
.page_load_error { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; gap: 16px; text-align: center; }
.page_load_error p { color: #333; font-size: 15px; font-weight: 500; }
.page_load_error button { width: 160px; height: 40px; border-radius: 8px; background: #4157A5; color: #fff; font-size: 14px; font-weight: 700; border: none; cursor: pointer; }
.page_load_error button:active { background: #324684; }

/* ========= 푸시 히스토리 */
.push_history_wrap { padding: 20px; }

.push_item { padding: 16px; border-radius: 12px; border: 1px solid #E9E9E9; background: #FFF; margin-bottom: 12px; transition: background 0.15s; }
.push_item.unread { border-left: 3px solid #4157A5; background: #F8F9FF; }
.push_item.read { opacity: 0.7; }

.push_item_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.push_title { color: #222; font-size: 15px; font-weight: 600; letter-spacing: -0.6px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.push_date { color: #B4BBC9; font-size: 13px; font-weight: 400; letter-spacing: -0.52px; flex-shrink: 0; }
.push_body { color: #555; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.56px; margin: 0; word-break: break-all; }

.push_empty { padding: 60px 20px; text-align: center; color: #B4BBC9; font-size: 15px; font-weight: 400; letter-spacing: -0.6px; }
/* 채팅 */
.plan_list_detail .contact_chat { display: inline-block; color: #0E9F6E; text-decoration: none; font-size: 11px; font-weight: 600; padding: 1px 6px; border: 1px solid #0E9F6E; border-radius: 4px; margin-left: 6px; letter-spacing: -0.4px; line-height: 1.5; }
.plan_list_detail .contact_chat:active { background: #0E9F6E; color: #fff; }
.btn_chat_group { display: block; width: 100%; height: 38px; line-height: 36px; text-align: center; box-sizing: border-box; border-radius: 8px; background: #fff; color: #0E9F6E; border: 1px solid #0E9F6E; font-size: 15px; font-weight: 700; letter-spacing: -0.15px; margin-top: 8px; text-decoration: none; cursor: pointer; }
.btn_chat_group:active { background: #0E9F6E; color: #fff; }

header .header_bottom .chat_title { flex: 1; margin: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }
header .header_bottom .chat_header_right { min-width: 24px; display: flex; justify-content: flex-end; }
.chat_mute_btn { font-size: 18px; line-height: 24px; background: none; border: 0; padding: 0; cursor: pointer; }

.chat_wrap { min-height: 100%; }
.chat_empty { padding: 60px 20px; text-align: center; color: #B4BBC9; font-size: 15px; letter-spacing: -0.6px; }
.chat_room_item { padding: 14px 20px; border-bottom: 1px solid #F0F0F0; cursor: pointer; }
.chat_room_item:active { background: #F8F9FF; }
.chat_room_top, .chat_room_bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat_room_name { color: #222; font-size: 15px; font-weight: 600; letter-spacing: -0.6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat_room_time { color: #B4BBC9; font-size: 12px; flex-shrink: 0; }
.chat_room_last { color: #777; font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat_muted { font-size: 12px; }
.chat_unread { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; border-radius: 10px; background: #E5484D; color: #fff; font-size: 12px; font-weight: 700; text-align: center; flex-shrink: 0; box-sizing: border-box; }
.settings_list .chat_unread { margin-right: 6px; }

.chat_room { display: flex; flex-direction: column; min-height: 100%; background: #F4F6FA; }
.chat_more { display: block; margin: 12px auto 0; padding: 6px 14px; border: 1px solid #D6DBE6; border-radius: 16px; background: #fff; color: #555; font-size: 13px; cursor: pointer; }
.chat_messages { flex: 1; padding: 12px 14px 8px; }
.chat_date { text-align: center; color: #8A93A6; font-size: 12px; margin: 12px 0 8px; }
.chat_msg { display: flex; flex-direction: column; margin-bottom: 8px; }
.chat_msg.mine { align-items: flex-end; }
.chat_msg.theirs { align-items: flex-start; }
.chat_sender { color: #555; font-size: 12px; margin: 0 0 3px 4px; }
.chat_bubble_row { display: flex; align-items: flex-end; gap: 4px; max-width: 85%; }
.chat_msg.mine .chat_bubble_row { flex-direction: row-reverse; }
.chat_bubble { padding: 8px 12px; border-radius: 14px; background: #fff; color: #222; font-size: 15px; line-height: 21px; letter-spacing: -0.4px; word-break: break-word; white-space: normal; }
.chat_msg.mine .chat_bubble { background: #4157A5; color: #fff; }
.chat_time { color: #9AA2B1; font-size: 11px; flex-shrink: 0; }
.chat_closed { padding: 12px 20px; text-align: center; color: #8A93A6; font-size: 13px; background: #fff; border-top: 1px solid #EAEAEA; position: sticky; bottom: 0; }
.chat_input { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; background: #fff; border-top: 1px solid #EAEAEA; }
.chat_input textarea { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; border: 1px solid #D6DBE6; border-radius: 20px; font-size: 15px; line-height: 20px; resize: none; box-sizing: border-box; font-family: inherit; }
.chat_input button { height: 40px; padding: 0 16px; border: 0; border-radius: 20px; background: #4157A5; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.chat_input button:disabled { opacity: 0.5; }

/* 홈 화면 채팅 (항상 표시, 새 메시지 있으면 강조) */
.home_chat { margin: 12px 20px 0; padding: 10px 14px; border: 1px solid #E3E7EF; border-radius: 12px; background: #fff; }
.home_chat.has_new { border-color: #CFE8DD; background: #F3FBF7; }
.home_chat_head { display: flex; justify-content: space-between; align-items: center; text-decoration: none; }
.home_chat_head strong { color: #222; font-size: 14px; font-weight: 700; }
.home_chat.has_new .home_chat_head strong { color: #0E7A55; }
.home_chat_new { display: flex; align-items: center; gap: 6px; color: #0E7A55; font-size: 13px; font-weight: 600; }
.home_chat_none { color: #8A93A6; font-size: 12px; }
.home_chat_none::after { content: " ›"; }
.home_chat_item { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; margin-top: 8px; border-top: 1px solid #E2F1EA; text-decoration: none; }
.home_chat_name { color: #222; font-size: 14px; font-weight: 600; flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home_chat_last { color: #666; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat_admin_note { margin: 0; padding: 8px 14px; text-align: center; color: #8A93A6; font-size: 12px; background: #EEF1F6; }

/* 경험담 개인정보 안내 */
.exp_pii_notice { margin: 6px 0 0; color: #B45309; font-size: 12px; line-height: 1.5; }

/* 개인정보 수집·이용 동의 팝업 (js/core/consent.js) — 닫기 버튼 없음, 다른 팝업보다 위 */
.consent_overlay { z-index: 1000; padding: 16px; }
.consent_dialog { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.consent_dialog .consent_content { padding: 16px 18px 12px; overflow-y: auto; text-align: left; }
.consent_intro { margin-bottom: 14px; color: #444; font-size: 14px; line-height: 20px; }
.consent_all { display: flex; align-items: center; gap: 8px; padding: 12px; margin-bottom: 10px; border-radius: 8px; background: #f3f5f8; font-size: 15px; }
.consent_item { padding: 10px 2px; border-bottom: 1px solid #eee; }
.consent_item > label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; color: #333; line-height: 20px; }
.consent_item input[type="checkbox"], .consent_all input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.consent_item details { margin: 6px 0 0 28px; font-size: 13px; color: #666; }
.consent_item summary { cursor: pointer; color: #3a6fd8; }
.consent_table { width: 100%; margin-top: 6px; border-collapse: collapse; }
.consent_table th, .consent_table td { padding: 6px; border: 1px solid #e5e5e5; vertical-align: top; text-align: left; line-height: 18px; word-break: keep-all; }
.consent_table th { width: 72px; background: #fafafa; font-weight: 600; }
.consent_note { margin-top: 12px; color: #888; font-size: 12px; line-height: 18px; }
.consent_policy_link { margin-top: 8px; font-size: 13px; }
.consent_policy_link a { color: #3a6fd8; text-decoration: underline; }
.consent_policy { z-index: 1001; }
.consent_policy_body { font-size: 13px; line-height: 19px; color: #444; }
.consent_policy_body table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.consent_policy_body th, .consent_policy_body td { border: 1px solid #e5e5e5; padding: 5px; text-align: left; }