@import url('reset.css');

/* ========= Toast UI Editor 콘텐츠 스타일 복원 */
.toastui-editor-contents strong,
.toastui-editor-contents b {
   font-weight: 700 !important;
}
.toastui-editor-contents em,
.toastui-editor-contents i {
   font-style: italic;
}
.toastui-editor-contents h1 {
   font-size: 2em;
   font-weight: 700;
   margin: 0.67em 0;
}
.toastui-editor-contents h2 {
   font-size: 1.5em;
   font-weight: 700;
   margin: 0.83em 0;
}
.toastui-editor-contents h3 {
   font-size: 1.17em;
   font-weight: 700;
   margin: 1em 0;
}
.toastui-editor-contents p {
   margin: 0.5em 0;
   line-height: 1.6;
}
.toastui-editor-contents ul {
   list-style: disc;
   padding-left: 1.5em;
   margin: 0.5em 0;
}
.toastui-editor-contents ol {
   list-style: decimal;
   padding-left: 1.5em;
   margin: 0.5em 0;
}
.toastui-editor-contents blockquote {
   border-left: 4px solid #ddd;
   padding-left: 16px;
   color: #666;
   margin: 0.5em 0;
}

/* ========= common */
.wrap {
   position: relative;
   width: 100%;
}

.container {
   position: relative;
   width: 100%;
   padding-top: 80px;
   background: #F0F2F5;
}

.inner {
   position: relative;
   max-width: 940px;
   padding: 0 20px;
   margin: 0 auto;
   padding-top: 48px;
   padding-bottom: 90px;
}

.con_wrap {
   width: 100%;
   background: #FFFFFF;
   border-radius: 10px;
   margin-bottom: 24px;
}

.admin_warp {
   position: relative;
   width: 100%;
   min-width: 1080px;
   display: flex;
   background: #fff;
   color: #333;
   letter-spacing: -0.64px;
}

.gnb_warp {
   width: 317px;
   height: 100vh;
   padding: 40px;
}

.contents {
   width: 100%;
   padding: 40px 40px 94px 40px;
}

.contents_warp {
   position: relative;
   width: calc(100% - 317px);
   border-left: 1px solid #ddd;
}

footer {
   margin-left: 318px;
   position: absolute;
   bottom: 0;
   left: 0;
   width: calc(100% - 318px);
   padding: 20px 30px;
   background: #eceef6;
   color: #999;
   font-size: 16px;
   font-weight: 500;
}

/* ========= 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='password'],
input[type='email'] {
   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,
input[type='email']:focus {
   border: 1px solid #3B3F47;
}

.select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   width: 100%;
   padding: 15px 20px;
   border-radius: 5px;
   border: 1px solid #EEE;
   background: url(../images/icon_arrow_down.svg) no-repeat right 20px top 21px;
   color: #333;
   font-size: 16px;
   font-weight: 500;
   line-height: 18px;
   letter-spacing: -0.64px;
}

/* ========= table style */
.tb_01 {
   width: 100%;
}

.tb_01 tr th {
   height: 48px;
   padding: 15px;
   color: #4157A5;
   text-align: center;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.64px;
   background: #ECEEF6;
}

.tb_01 tr th:first-child {
   border-radius: 5px 0 0 5px;
}

.tb_01 tr th:last-child {
   border-radius: 0 5px 5px 0;
}

.tb_01 tr td {
   height: 48px;
   padding: 15px;
   color: #333;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: -0.64px;
}

.tb_01 tbody tr:hover {
   background: #F9F9F9;
}

/* ========= content style */

/* title */
.title_content {
   color: #000;
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -1.2px;
}

.contents h2 {
   margin-bottom: 30px;
}

/* pagination */
.pagination_area {
   width: 100%;
   display: flex;
}

.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
}

.pagination button {
   width: 48px;
   height: 48px;
}

.pagination .btn_first {
   background: url(../images/icon_arrow_first.svg)no-repeat center;
}

.pagination .btn_prev {
   background: url(../images/icon_arrow_prev.svg)no-repeat center;
}

.pagination .btn_next {
   background: url(../images/icon_arrow_right.svg)no-repeat center;
}

.pagination .btn_last {
   background: url(../images/icon_arrow_last.svg)no-repeat center;
}

.pagination .numbering {
   display: flex;
   align-items: center;
}

.pagination .numbering li a {
   display: block;
   width: 48px;
   height: 48px;
   padding: 16px;
   border-radius: 10px;
   color: #333;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: -0.64px;
   vertical-align: middle;
}

.pagination .numbering li a:hover {
   background: #F9F9F9;
}

.pagination .numbering li a.active {
   background: #ECEEF6;
   color: #4157A5;
}

/* datepicker */
input[type='text'].datepicker-here {
   padding: 15px 20px;
   border-radius: 5px;
   border: 1px solid #EEE;
   background: url(../images/icon_date.svg) no-repeat right 20px top 18px;
   color: #333;
   font-size: 16px;
   font-weight: 500;
   font-family: 'pretendard', '맑은고딕', Arial, Dotum, sans-serif;
   line-height: 18px;
   letter-spacing: -0.64px;
   width: 200px;
}

.date_gap {
   padding: 0 12px;
}

/* ========= 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: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_admin {
   width: 180px;
   height: 48px;
   text-align: center;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.64px;
   border-radius: 10px;
}

.btn_admin.blue {
   background: #4157A5;
   border: 1px solid #4157A5;
   color: #fff;
}

.btn_admin.white {
   border: 1px solid #4157A5;
   background: #FFF;
   color: #4157A5;
}

/* ========= 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.active {
   display: flex;
}

.modal_dialog {
   width: 90%;
   max-width: 315px;
   background: #fff;
   border-radius: 14px;
}

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

/* 로그인 토스트 팝업 */
.login_toast_modal {
   width: 90%;
   position: absolute;
   bottom: 46px;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 200px;
   background: rgba(0, 0, 0, 0.60);
   display: flex;
   padding: 16px 26px;
   justify-content: space-between;
   align-items: center;
   gap: 17px;
}

.login_toast_modal span {
   color: #FFF;
   font-size: 15px;
   font-weight: 400;
   line-height: 18px;
   /* 120% */
   letter-spacing: -0.15px;
}

/* ========= 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;
}

/* ========= badge */
.badge_new {
   height: 17px;
   vertical-align: middle;
   padding: 3px 5px;
   margin-right: 4px;
   display: inline-block;
   border-radius: 3px;
   background: #4157A5;
   color: #FFF;
   font-size: 10px;
   font-weight: 700;
}


/* ========= size */
.size_16 {
   width: 16px;
   height: 16px;
}

.size_24 {
   width: 24px;
   height: 24px;
}


/* ========= 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;
}

/* ========= gnb */
.gnb_warp .logo_area {
   margin-bottom: 40px;
}

.gnb_warp .logo_area img {
   width: 217px;
}

.gnb_warp .gnb li a {
   display: inline-block;
   width: 100%;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: -0.64px;
   padding: 14px 20px;
}

.gnb_warp .gnb .home a {
   color: #4157A5;
   font-weight: 700;
}

.gnb_warp .gnb .home.on a {
   border-radius: 10px;
   background: rgba(65, 87, 165, .1);
   color: #4157A5;
   font-weight: 700;
}

.gnb_warp .gnb li:has(.depth2)>a {
   background: url(../images/icon_arrow_up.svg) no-repeat right 20px center;
}

.gnb_warp .gnb li:has(.depth2)>a.active {
   background: url(../images/icon_arrow_down.svg) no-repeat right 20px center;
}

.gnb_warp .gnb li .depth2 {
   display: none;
   padding-left: 20px;
}

.gnb_warp .gnb li:has(a.active) .depth2 {
   display: block;
}

.gnb_warp .gnb li .depth2 li a {
   padding: 14px 20px;
   color: #999;
}

.gnb_warp .gnb li .depth2 li.on a {
   border-radius: 10px;
   background: rgba(65, 87, 165, .1);
   color: #4157A5;
   font-weight: 700;
}

/* 모바일 메뉴 토글 버튼 (데스크톱에서 숨김) */
.mobile_menu_toggle {
   display: none;
}

/* info_dropdown */
.info_dropdown {
   position: absolute;
   top: 40px;
   right: 40px;
   display: inline-block;
   z-index: 1200;
}

.info_dropdown::after {
   content: '';
   position: relative;
}

.info_dropdown button {
   display: flex;
   align-items: center;
}

.info_dropdown button img {
   width: 40px;
   height: 40px;
   margin-right: 10px;
}

.info_dropdown button span {
   color: #000;
   font-size: 16px;
   font-weight: 600;
   padding-right: 16px;
   background: url(../images/icon_arrow_down.svg)no-repeat right center;
}

.info_dropdown ul {
   display: none;
   position: absolute;
   bottom: -119px;
   right: 0;
   padding: 15px 20px;
   border-radius: 10px;
   background: #FFF;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.info_dropdown ul.active {
   display: block;
}

.info_dropdown ul li {
   text-align: center;
}

.info_dropdown ul li+li {
   margin-top: 15px;
}

.info_dropdown ul li a {
   color: #333;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
}

.info_dropdown ul .logout a {
   color: #FA6464;
}

/* ========= main */
#main {
   min-width: 1300px;
}

#main .contents .volunteers_status {
   margin-bottom: 40px;
}

#main .contents .volunteers_status h2 .status_date {
   padding-left: 10px;
   color: #AAA;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.64px;
}

#main .contents .volunteers_status .vs_list {
   display: flex;
}

#main .contents .volunteers_status .vs_list li {
   width: 237px;
   border-radius: 10px;
   background: rgba(65, 87, 165, .1);
   text-align: center;
   padding: 40px;
}

#main .contents .volunteers_status .vs_list li+li {
   margin-left: 20px;
}

#main .contents .volunteers_status .vs_list li p {
   margin-bottom: 4px;
}

#main .contents .volunteers_status .vs_list li span {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -1.2px;
}

#main .contents .volunteers_status .vs_list li:first-child {
   background: #4157A5;
   color: #fff;
}

#main .contents .content_area {
   padding: 30px;
   border-radius: 10px;
   border: 1px solid #DDD;
}

#main .contents .vs_con_area {
   display: flex;
}

#main .volunteer_reporting {
   margin-right: 20px;
}

#main .volunteer_reporting .content_area {
   height: 368px;
}

#main .volunteer_reporting .content_area .main_tab {
   margin-bottom: 20px;
}

#main .volunteer_reporting .content_area .main_tab button {
   position: relative;
   margin-right: 23px;
   color: #AAA;
   font-size: 16px;
   font-weight: 500;
}

#main .volunteer_reporting .content_area .main_tab button::after {
   content: '';
   position: absolute;
   left: -14px;
   top: 50%;
   display: block;
   width: 3px;
   height: 3px;
   background: #ddd;
}

#main .volunteer_reporting .content_area .main_tab button:first-child::after {
   display: none;
}

#main .volunteer_reporting .content_area .main_tab button.active {
   color: #333;
   font-weight: 700;
}

#main .volunteer_reporting .content_area .tab_content {
   display: none;
}

#main .volunteer_reporting .content_area .tab_content ul li {
   width: 437px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   border-bottom: 1px solid #eee;
}

#main .volunteer_reporting .content_area .tab_content ul li:last-child {
   border-bottom: 0;
   padding-bottom: 0;
}

#main .volunteer_reporting .content_area .tab_content ul li .reporting_title {
   font-weight: 700;
}

#main .main_notice {
   width: calc(100% - 515px);
}

#main .main_notice h2 {
   display: flex;
   justify-content: space-between;
}

#main .main_notice h2 button {
   color: #4157A5;
   font-size: 16px;
   font-weight: 700;
}

#main .main_notice .content_area {
   height: 368px;
}

#main .main_notice ul li {
   border-bottom: 1px solid #eee;
}

#main .main_notice ul li:last-child {
   border-bottom: 0;
}

#main .main_notice ul li a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   width: 100%;
}

#main .main_notice ul li:first-child a {
   padding-top: 0;
}

#main .main_notice ul li:last-child a {
   padding-bottom: 0;
}

#main .main_notice ul li a p {
   color: #AAA;
   margin: 0;
}

#main .main_notice ul li a .notice_title {
   flex: 1;
   font-weight: 700;
   margin: 0;
   padding-right: 15px;
   color: #333;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

#main .main_notice ul li a .notice_date {
   white-space: nowrap;
   color: #AAA;
   font-size: 14px;
   margin: 0;
}

/* ========= search area */
.search_area {
   width: 100%;
   border-radius: 10px;
   border: 1px solid #DDD;
   padding: 30px;
   margin-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px 30px;
}

.search_area.with_btn {
   justify-content: space-between;
}

.search_area input[type=text] {
   width: 200px;
   border-radius: 5px;
   padding: 15px 20px;
}

.search_area .btn_admin {
   width: 85px;
   border-radius: 5px;
}

.form_group_box {
   display: flex;
   align-items: center;
   gap: 20px 30px;
}

.search_area .form_group label {
   color: #333;
   font-size: 16px;
   font-weight: 700;
   letter-spacing: -0.64px;
   margin-right: 15px;
}

.search_area .form_group .select {
   width: 200px;
}

.form_group.sc_group {
   display: flex;
   align-items: center;
}

.form_group.sc_group .sc_text {
   display: flex;
   align-items: center;
   border-radius: 5px;
   border: 1px solid #EEE;
   padding: 15px 20px;
   height: 50px;
   min-width: 486px;
}

.form_group.sc_group .sc_text input[type=text] {
   border: none;
   padding: 0;
   width: 100%;
}

.form_group.sc_group .sc_text button {
   margin-left: 10px;
}


/* ========= table_area */
.table_area {
   width: 100%;
   border-radius: 10px;
   border: 1px solid #DDD;
   padding: 30px;
   margin-bottom: 30px;
   min-height: 679px;
}

.table_area.min_h_none {
   min-height: auto;
}


/* ========================================================================
   RESPONSIVE DESIGN - Media Queries
   ======================================================================== */

/* ========= Tablet & Small Desktop (1080px ~ 1299px) ========= */
@media screen and (max-width: 1299px) {

   /* 메인 최소 너비 조정 */
   #main {
      min-width: 1080px;
   }

   /* 대시보드 통계 카드 조정 */
   #main .contents .volunteers_status .vs_list li {
      width: calc((100% - 80px) / 5);
      padding: 30px 20px;
   }

   /* 대시보드 콘텐츠 영역 조정 */
   #main .main_notice {
      width: calc(100% - 477px);
   }

   #main .volunteer_reporting .content_area .tab_content ul li {
      width: 400px;
   }
}

/* ========= Tablet (768px ~ 1079px) ========= */
@media screen and (max-width: 1079px) {

   /* 최소 너비 제거 및 유동적 레이아웃 */
   .admin_warp {
      min-width: auto;
   }

   #main {
      min-width: auto;
   }

   /* GNB 축소 */
   .gnb_warp {
      width: 240px;
      padding: 30px 20px;
   }

   .gnb_warp .logo_area img {
      width: 180px;
   }

   /* 콘텐츠 영역 조정 */
   .contents_warp {
      width: calc(100% - 240px);
   }

   .contents {
      padding: 30px 20px 70px 20px;
   }

   /* Footer 조정 */
   footer {
      margin-left: 241px;
      width: calc(100% - 241px);
      padding: 15px 20px;
      font-size: 14px;
   }

   /* info_dropdown 위치 조정 */
   .info_dropdown {
      top: 30px;
      right: 20px;
   }

   /* 타이틀 크기 조정 */
   .title_content {
      font-size: 24px;
   }

   /* 대시보드 통계 카드 2줄로 배치 */
   #main .contents .volunteers_status .vs_list {
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px 20px;
   }

   #main .contents .volunteers_status .vs_list li {
      width: 30%;
      min-width: 220px;
      max-width: 260px;
      padding: 25px 15px;
      margin: 0 !important;
   }

   /* 대시보드 콘텐츠 영역 세로 배치 */
   #main .contents .vs_con_area {
      flex-direction: column;
   }

   #main .volunteer_reporting,
   #main .main_notice {
      width: 100%;
      margin-right: 0;
      margin-bottom: 20px;
   }

   #main .volunteer_reporting .content_area .tab_content ul li {
      width: 100%;
   }

   /* 검색 영역 조정 */
   .search_area {
      padding: 20px;
      gap: 15px 20px;
   }

   .search_area input[type=text],
   .search_area .form_group .select {
      width: 180px;
   }

   .form_group.sc_group .sc_text {
      min-width: auto;
      width: 100%;
   }

   /* 테이블 영역 조정 */
   .table_area {
      padding: 20px;
   }

   /* 테이블 가로 스크롤 */
   .tb_01 {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
   }

   /* 버튼 크기 조정 */
   .btn_admin {
      width: 150px;
      font-size: 15px;
   }
}

/* ========= Mobile (< 768px) ========= */
@media screen and (max-width: 767px) {

   /* 레이아웃을 세로 배치로 전환 */
   .admin_warp {
      flex-direction: column;
      min-width: auto;
   }

   #main {
      min-width: auto;
   }

   /* GNB를 상단 헤더로 변경 */
   .gnb_warp {
      width: 100%;
      height: auto;
      padding: 15px 20px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background: #fff;
      border-bottom: 1px solid #ddd;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   }

   .gnb_warp .logo_area {
      margin-bottom: 0;
   }

   .gnb_warp .logo_area img {
      width: 120px;
   }

   /* 모바일 메뉴 토글 버튼 */
   .mobile_menu_toggle {
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      width: 30px;
      height: 30px;
      background: transparent;
      cursor: pointer;
      border: none;
      z-index: 1001;
      padding: 0;
   }

   /* 햄버거 아이콘 (CSS로 그리기) */
   .mobile_menu_toggle::before,
   .mobile_menu_toggle::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 2px;
      background: #333;
      left: 3px;
      transition: all 0.3s ease;
   }

   .mobile_menu_toggle::before {
      top: 8px;
      box-shadow: 0 8px 0 #333;
   }

   .mobile_menu_toggle::after {
      bottom: 8px;
   }

   /* 메뉴 열렸을 때 X 아이콘으로 변경 */
   .mobile_menu_toggle.active::before {
      top: 14px;
      transform: rotate(45deg);
      box-shadow: none;
   }

   .mobile_menu_toggle.active::after {
      bottom: 14px;
      transform: rotate(-45deg);
   }

   /* 모바일 GNB 메뉴 (기본 숨김) */
   .gnb_warp .gnb {
      display: none;
      position: fixed;
      top: 70px;
      left: 0;
      width: 100%;
      height: calc(100vh - 70px);
      background: #fff;
      overflow-y: auto;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   }

   .gnb_warp .gnb.active {
      display: block;
   }

   /* 콘텐츠 영역 전체 너비 */
   .contents_warp {
      width: 100%;
      margin-top: 70px;
      border-left: none;
   }

   .contents {
      padding: 20px 15px 60px 15px;
   }

   /* Footer 조정 */
   footer {
      margin-left: 0;
      width: 100%;
      padding: 15px;
      font-size: 12px;
      position: relative;
   }

   /* info_dropdown 조정 */
   .info_dropdown {
      position: fixed;
      top: 15px;
      right: 60px;
      z-index: 1200;
      background: #fff;
      padding: 6px 10px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
   }

   .info_dropdown button {
      gap: 6px;
   }

   .info_dropdown button img {
      width: 30px;
      height: 30px;
      margin-right: 5px;
   }

   .info_dropdown button span {
      font-size: 14px;
      padding-right: 10px;
   }

   .info_dropdown ul {
      top: 46px;
      right: 0;
      bottom: auto;
   }

   /* 타이틀 크기 조정 */
   .title_content {
      font-size: 20px;
      letter-spacing: -0.8px;
   }

   .contents h2 {
      margin-bottom: 12px;
   }

   /* 대시보드 통계 카드 1줄에 1개 */
   #main .contents .volunteers_status {
      margin-bottom: 30px;
   }

   #main .contents .volunteers_status h2 .status_date {
      display: block;
      padding-left: 0;
      margin-top: 5px;
      font-size: 14px;
   }

   #main .contents .volunteers_status .vs_list {
      flex-direction: column;
      align-items: center;
      gap: 5px;
   }

   #main .contents .volunteers_status .vs_list li {
      width: 100%;
      padding: 18px;
      margin-left: 0 !important;
      margin-top: 0 !important;
   }

   #main .contents .volunteers_status .vs_list li+li {
      margin-top: 5px;
   }

   #main .contents .volunteers_status .vs_list li p {
      font-size: 14px;
   }

   #main .contents .volunteers_status .vs_list li span {
      font-size: 24px;
   }

   /* 봉사자 현황 타이틀/새로고침 버튼 정렬 (모바일) */
   #main .contents .volunteers_status h2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
   }

   #main .contents .volunteers_status h2 button#refreshStatsBtn {
      margin-left: 0;
      padding: 6px 10px;
      font-size: 13px;
   }

   /* 대시보드 콘텐츠 영역 */
   #main .volunteer_reporting .content_area,
   #main .main_notice .content_area {
      height: auto;
      min-height: 250px;
   }

   #main .volunteer_reporting .content_area .main_tab button {
      font-size: 14px;
      margin-right: 15px;
   }

   #main .main_notice h2 button {
      font-size: 14px;
   }

   /* 검색 영역 조정 */
   .search_area {
      padding: 15px;
      gap: 10px;
   }

   .search_area.with_btn {
      flex-direction: column;
      align-items: stretch;
   }

   .search_area input[type=text],
   .search_area .form_group .select {
      width: 100%;
   }

   .search_area .form_group {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
   }

   .search_area .form_group label {
      margin-right: 0;
      margin-bottom: 8px;
   }

   .form_group_box {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      gap: 10px;
   }

   .form_group.sc_group .sc_text {
      min-width: auto;
      width: 100%;
      padding: 12px 15px;
   }

   .search_area .btn_admin {
      width: 100%;
      margin-top: 10px;
   }

   /* 테이블 영역 조정 */
   .table_area {
      padding: 15px;
      margin-bottom: 20px;
      min-height: auto;
   }

   /* 테이블 가로 스크롤 */
   .tb_01 {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .tb_01 tr th,
   .tb_01 tr td {
      font-size: 14px;
      padding: 10px 8px;
      white-space: nowrap;
   }

   /* 버튼 조정 */
   .btn_admin {
      width: 100%;
      height: 44px;
      font-size: 15px;
   }

   .btn_block {
      flex-direction: column;
      gap: 10px;
   }

   .btn_block .btn_admin {
      width: 100%;
   }

   /* Pagination 조정 */
   .pagination button {
      width: 36px;
      height: 36px;
   }

   .pagination .numbering li a {
      width: 36px;
      height: 36px;
      padding: 10px;
      font-size: 14px;
   }

   /* 모달 조정 */
   .modal_dialog {
      max-width: 90%;
   }

   /* 로그인 페이지 조정 */
   .login_warp {
      padding: 0 20px;
   }

   .login_con {
      max-width: 100%;
   }

   /* Datepicker 조정 */
   input[type='text'].datepicker-here {
      width: 100%;
   }

   .date_gap {
      padding: 0 8px;
   }
}

/* ========= Small Mobile (< 480px) ========= */
@media screen and (max-width: 479px) {

   /* 타이틀 크기 추가 조정 */
   .title_content {
      font-size: 18px;
   }

   /* GNB 로고 크기 조정 */
   .gnb_warp .logo_area img {
      width: 100px;
   }

   /* 통계 카드 padding 축소 */
   #main .contents .volunteers_status .vs_list li {
      padding: 15px;
   }

   #main .contents .volunteers_status .vs_list li span {
      font-size: 20px;
   }

   /* 테이블 폰트 크기 축소 */
   .tb_01 tr th,
   .tb_01 tr td {
      font-size: 12px;
      padding: 8px 5px;
   }

   /* 검색 영역 padding 축소 */
   .search_area {
      padding: 12px;
   }

   .table_area {
      padding: 12px;
   }

   /* 콘텐츠 padding 축소 */
   .contents {
      padding: 15px 10px 50px 10px;
   }

   /* Pagination 더 작게 */
   .pagination button {
      width: 32px;
      height: 32px;
   }

   .pagination .numbering li a {
      width: 32px;
      height: 32px;
      padding: 8px;
      font-size: 12px;
   }
}


/* ========= Volunteer Detail Page Styles */

/* Detail Area Layout */
.detail_area {
   display: flex;
   gap: 20px;
   margin-bottom: 40px;
   background: #fff;
   border-radius: 10px;
   border: 1px solid #DDD;
   padding: 30px;
}

.detail_area .left_area {
   width: 240px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.detail_area .photo_box {
   width: 100%;
   background: #ECEEF6;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 16px;
   gap: 12px;
   box-sizing: border-box;
   color: #4157A5;
   font-weight: 700;
}

.detail_area .photo_box .photo_preview {
   width: 160px;
   height: 160px;
   border-radius: 6px;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.detail_area .photo_box .photo_preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.detail_area .photo_box .photo_preview span {
   color: #aaa;
   font-size: 13px;
   font-weight: 400;
}

.detail_area .photo_box .photo_btn_group {
   display: flex;
   gap: 8px;
}

.detail_area .memo_box {
   width: 100%;
   min-height: 120px;
   background: #ECEEF6;
   border-radius: 10px;
   display: flex;
   flex-direction: column;
   padding: 12px;
   color: #4157A5;
   font-weight: 700;
   box-sizing: border-box;
}

.detail_area .memo_box textarea {
   flex: 1;
   margin-top: 8px;
   font-weight: 400;
   color: #333;
}

.detail_area .right_area {
   flex-grow: 1;
}

/* Form Grid */
.form_grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px 20px;
}

.form_row {
   display: flex;
   align-items: center;
}

.form_row.split {
   gap: 20px;
}

.form_row.split .form_field {
   flex: 1;
   display: flex;
   align-items: center;
}

.form_row.split .form_field .form_label {
   margin-right: 10px;
}

.form_label {
   width: 120px;
   height: 50px;
   background: #ECEEF6;
   color: #4157A5;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 5px;
   margin-right: 10px;
   font-size: 14px;
}

.form_value {
   flex-grow: 1;
}

.form_value input[type="text"],
.form_value input[type="email"],
.form_value .select {
   height: 50px;
}

.radio_group {
   display: flex;
   align-items: center;
   gap: 20px;
   height: 50px;
}

.radio_group label {
   display: flex;
   align-items: center;
   gap: 5px;
   cursor: pointer;
}

/* Custom Radio Control (Vue.js 스타일) */
.custom-control {
   position: relative;
   display: inline-block;
   padding-left: 1.75rem;
   margin-right: 1.5rem;
   min-height: 1.5rem;
}

.custom-control-input {
   position: absolute;
   left: 0;
   z-index: -1;
   width: 1.25rem;
   height: 1.25rem;
   opacity: 0;
   margin: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
   border-color: #4157A5;
   background-color: #4157A5;
}

.custom-control-input:checked ~ .custom-control-label::after {
   opacity: 1;
}

.custom-control-input:focus ~ .custom-control-label::before {
   box-shadow: 0 0 0 0.2rem rgba(65, 87, 165, 0.25);
}

.custom-control-input:active ~ .custom-control-label::before {
   background-color: #6c7fb8;
   border-color: #6c7fb8;
}

.custom-control-input:disabled ~ .custom-control-label {
   color: #6c757d;
   cursor: not-allowed;
}

.custom-control-input:disabled ~ .custom-control-label::before {
   background-color: #e9ecef;
   border-color: #adb5bd;
}

.custom-control-label {
   position: relative;
   margin-bottom: 0;
   cursor: pointer;
   display: inline-block;
   padding-left: 0;
   font-size: 16px;
   font-weight: 500;
   color: #333;
   vertical-align: middle;
   line-height: 1.5;
}

.custom-control-label::before {
   position: absolute;
   top: 0;
   left: -1.75rem;
   display: block;
   width: 1.25rem;
   height: 1.25rem;
   pointer-events: none;
   content: "";
   background-color: #fff;
   border: 2px solid #adb5bd;
   border-radius: 50%;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-control-label::after {
   position: absolute;
   top: 0.375rem;
   left: -1.375rem;
   display: block;
   width: 0.5rem;
   height: 0.5rem;
   content: "";
   background: #fff;
   border-radius: 50%;
   opacity: 0;
   transition: opacity 0.15s ease-in-out;
}

.custom-radio .custom-control-label::before {
   border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
   opacity: 1;
   background-color: #fff;
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
   background-color: rgba(65, 87, 165, 0.5);
   border-color: rgba(65, 87, 165, 0.5);
}

/* Buttons */
.btn_area_bottom {
   display: flex;
   justify-content: space-between;
   margin-bottom: 40px;
}

.btn_area_bottom .right {
   display: flex;
   gap: 10px;
}

.btn_admin.red {
   background: #FA6464;
   border: 1px solid #FA6464;
   color: #fff;
}

.btn_admin.small {
   height: 50px;
   font-size: 14px;
   width: 100%;
}

.divider {
   height: 1px;
   background: #eee;
   margin: 40px 0;
}

/* Schedule Section */
.schedule_section {
   background: #fff;
   border-radius: 10px;
   border: 1px solid #DDD;
   padding: 30px;
   margin-bottom: 20px;
}

.schedule_section h3 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 20px;
}

.time_grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px 20px;
}

.time_slot {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #FAFBFC;
   border-radius: 5px;
   padding: 5px;
}

.time_slot.empty {
   background: transparent;
}

.time_header {
   padding: 10px 20px;
   border-radius: 5px;
   font-weight: 700;
   font-size: 14px;
   width: 140px;
   text-align: center;
}

.time_header.blue {
   background: #E8ECF5;
   color: #4157A5;
}

.time_count {
   color: #666;
   font-size: 14px;
   width: 50px;
}

.time_status {
   flex-grow: 1;
}

.time_status .select.small {
   height: 40px;
   padding: 0 10px;
   font-size: 14px;
   background-position: right 10px center;
}

/* Schedule Footer */
.schedule_footer {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 20px;
}

.date_picker_area {
   display: flex;
   align-items: center;
   gap: 10px;
}

.date_picker_area span {
   font-weight: 700;
}

.date_picker_area input {
   width: 150px;
   height: 48px;
}

/* ========= Responsive Design for Volunteer Detail Page ========= */

/* Tablet (768px ~ 1024px) */
@media (max-width: 1024px) {
   .admin_warp {
      min-width: unset;
   }

   .gnb_warp {
      width: 250px;
      padding: 30px 20px;
   }

   .contents_warp {
      width: calc(100% - 250px);
   }

   .contents {
      padding: 30px 20px 80px 20px;
   }

   footer {
      margin-left: 251px;
      width: calc(100% - 251px);
      padding: 15px 20px;
      font-size: 14px;
   }

   /* Detail Area */
   .detail_area {
      flex-direction: column;
   }

   .detail_area .left_area {
      width: 100%;
      max-width: 400px;
      margin: 0 auto 30px;
   }

   .detail_area .right_area {
      width: 100%;
   }

   .form_grid {
      grid-template-columns: 1fr !important;
   }

   /* Time Grid */
   .time_grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
   .admin_warp {
      flex-direction: column;
   }

   .gnb_warp {
      width: 100%;
      height: auto;
      padding: 20px;
      border-bottom: 1px solid #ddd;
   }

   .contents_warp {
      width: 100%;
      border-left: none;
   }

   .contents {
      padding: 20px 15px 60px 15px;
   }

   footer {
      margin-left: 0;
      width: 100%;
      padding: 12px 15px;
      font-size: 12px;
   }

   /* Title */
   .title_content {
      font-size: 20px;
   }

   /* Search Area */
   .search_area {
      flex-direction: column;
   }

   .search_area .form_group {
      width: 100%;
   }

   /* Detail Area */
   .detail_area .left_area {
      max-width: none;
   }

   .photo_box, .memo_box {
      min-height: 180px;
   }

   /* Form */
   .form_row {
      flex-direction: column;
      gap: 8px;
   }

   .form_label {
      width: 100%;
      padding: 0;
   }

   .form_value {
      width: 100%;
   }

   /* Buttons */
   .btn_area_bottom {
      flex-direction: column;
      gap: 10px;
   }

   .btn_area_bottom .left,
   .btn_area_bottom .right {
      width: 100%;
   }

   .btn_area_bottom .right {
      flex-direction: column;
   }

   .btn_admin {
      width: 100%;
      font-size: 14px;
      height: 48px;
   }

   /* Time Grid */
   .time_grid {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .time_slot {
      flex-wrap: wrap;
   }

   .time_header {
      width: 100px;
      padding: 8px 15px;
      font-size: 12px;
   }

   .time_count {
      width: 45px;
      font-size: 12px;
   }

   .time_status {
      width: 100%;
      margin-top: 5px;
   }

   /* Schedule Footer */
   .schedule_footer {
      flex-direction: column;
      gap: 15px;
   }

   .date_picker_area {
      width: 100%;
      flex-direction: column;
      align-items: flex-start;
   }

   .date_picker_area input {
      width: 100%;
   }

   .schedule_footer .btn_admin {
      width: 100%;
   }
}