/* ============================================================
   2026 리뉴얼 서브페이지 CSS - 고급 디자인
   각 구역별 한줄 스타일 / 독립적 강한 제어
   ============================================================ */

/* === 서브 배너 === */
.sub_page .sub_page_banner { background: linear-gradient(135deg, #6B3FA0 0%, #8B5FC0 50%, #a87ed4 100%); padding: 60px 0; position: relative; overflow: hidden; }
.sub_page .sub_page_banner::before { content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px; background: rgba(255,255,255,0.06); border-radius: 50%; }
.sub_page .sub_page_banner::after { content: ''; position: absolute; bottom: -30%; left: -5%; width: 300px; height: 300px; background: rgba(255,255,255,0.04); border-radius: 50%; }
.sub_page .sub_page_banner .sub_page_wrap { max-width: 1280px; padding: 0 20px; margin: 0 auto; position: relative; z-index: 1; }
.sub_page .sub_page_banner .h50 { font-size: 34px !important; color: #fff !important; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.sub_page .sub_page_banner .breadcrumb { margin: 0; background: none; }
.sub_page .sub_page_banner .breadcrumb-item { color: rgba(255,255,255,0.7) !important; font-size: 15px; }
.sub_page .sub_page_banner .breadcrumb-item::before { color: rgba(255,255,255,0.4) !important; }
.sub_page .sub_page_banner .breadcrumb-item:last-child { color: #fff !important; font-weight: 600; }
.sub_page .sub_page_banner .breadcrumb-item a { color: rgba(255,255,255,0.7) !important; }
.sub_page .sub_page_banner .breadcrumb-item a:hover { color: #fff !important; }

/* === 콘텐츠 영역 === */
.sub_page .content_wrap { background: #fff; min-height: calc(100vh - 280px); }
.sub_page .content_wrap section.sec { padding: 60px 0 70px; }
.sub_page .content_wrap section.sec .sec_wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* === 섹션 타이틀 (.tit) === */
.sub_page .tit { font-size: 28px !important; font-weight: 800 !important; color: #222 !important; position: relative; padding-left: 18px; }
.sub_page .tit::before { content: ''; position: absolute; left: 0; top: 4px; width: 5px; height: 28px; background: #6B3FA0; border-radius: 3px; }

/* === 본문 텍스트 === */
.sub_page .h17 { font-size: 17px !important; line-height: 1.9 !important; color: #444 !important; }
.sub_page .h20 { font-size: 18px !important; }
.sub_page .h30 { font-size: 24px !important; line-height: 1.6 !important; }

/* === 인사말 페이지 === */
.sub_page.about .message_img { position: relative; padding-top: 50%; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.sub_page.about .message_img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* === 연혁 페이지 === */
.sub_page.history .history_tab a { font-weight: 500; color: #999; font-size: 17px; padding: 10px 24px; border-radius: 24px; transition: 0.3s; display: inline-block; }
.sub_page.history .history_tab a.active { font-weight: 700; color: #fff; background: #6B3FA0; box-shadow: 0 3px 12px rgba(107,63,160,0.3); }
.sub_page.history .history_tab a:hover:not(.active) { color: #6B3FA0; background: #f3eefb; }
.sub_page.history .history_box { padding: 40px 0 50px; border-left: 3px solid #ece6f3; margin-left: 20px; }
.sub_page.history .his_contents .his_li { position: relative; padding: 12px 0 12px 40px; }
.sub_page.history .his_contents .his_li::before { content: ''; position: absolute; left: -8px; top: 18px; width: 13px; height: 13px; background: #6B3FA0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d5cce0; }
.sub_page.history .his_contents .his_li span.his_date { position: absolute; left: 40px; font-weight: 700; color: #6B3FA0; font-size: 16px; }
.sub_page.history .his_contents .his_li .his_txt { padding-left: 150px; font-size: 16px; color: #555; line-height: 1.7; }

/* === 자립생활 이란 === */
.sub_page.living_1 .sec_1 .img_box { padding-top: 35%; border-radius: 12px; overflow: hidden; position: relative; }
.sub_page.living_1 .sec_1 .img_box img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

/* === 활동지원/장애인활동 === */
.sub_page.salaries .table { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.sub_page.salaries .table thead th { background: #6B3FA0; color: #fff; font-weight: 600; font-size: 15px; padding: 14px 12px; border: none; }
.sub_page.salaries .table td { padding: 13px 12px; font-size: 15px; border-color: #f0f0f0; vertical-align: middle; }
.sub_page.salaries .table tbody tr:hover { background: #f8f5fd; }

/* === 오시는길 === */
.sub_page.location #daumRoughmapContainer1667462302451 { width: 100% !important; border-radius: 12px; overflow: hidden; }

/* === 아이콘 === */
.sub_page .man_icons { text-align: center; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: #f3eefb; border-radius: 50%; color: #6B3FA0; font-size: 20px; }

/* === 제공규정 === */
.sub_page .provision_info { margin-top: 3rem; margin-bottom: 3rem; border: 1px solid #e5e5e5; border-left: 4px solid #6B3FA0; padding: 24px 28px; border-radius: 8px; background: #faf9fc; }

/* ============================================================
   게시판 공통 - 리스트
   ============================================================ */

/* === 게시판 테이블 리스트 === */
.sub_page .bd_def_list .table { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,0.05); width: 100%; }
.sub_page .bd_def_list .table thead tr { background: #6B3FA0; }
.sub_page .bd_def_list .table thead th { color: #fff; font-weight: 600; font-size: 15px; padding: 15px 12px; border: none; text-align: center; white-space: nowrap; }
.sub_page .bd_def_list .table tbody tr { transition: 0.2s; border-bottom: 1px solid #f0f0f0; }
.sub_page .bd_def_list .table tbody tr:hover { background: #f8f5fd; }
.sub_page .bd_def_list .table tbody td { padding: 14px 12px; font-size: 15px; color: #444; border: none; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.sub_page .bd_def_list .table tbody td a { color: #333; font-weight: 500; transition: 0.2s; }
.sub_page .bd_def_list .table tbody td a:hover { color: #6B3FA0; }
.sub_page .bd_def_list .table tbody td:first-child { color: #999; font-size: 14px; }

/* === 검색영역 === */
.sub_page .bd_def_list .form-select { border-radius: 8px; border-color: #d5cce0; font-size: 15px; padding: 8px 12px; }
.sub_page .bd_def_list .form-control { border-radius: 8px; border-color: #d5cce0; font-size: 15px; padding: 8px 14px; }
.sub_page .bd_def_list .btn-primary { background: #6B3FA0; border-color: #6B3FA0; border-radius: 8px; padding: 8px 20px; font-weight: 600; }
.sub_page .bd_def_list .btn-primary:hover { background: #5a3188; }

/* === 갤러리 리스트 === */
.sub_page .bd_gallery .bd_items { margin-bottom: 30px; }
.sub_page .bd_gallery .bd_items .card { border: 1px solid #e8e8e8; border-radius: 14px; overflow: hidden; transition: 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sub_page .bd_gallery .bd_items .card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.12); transform: translateY(-4px); }
.sub_page .bd_gallery .bd_items .img_box { padding-top: 65%; position: relative; overflow: hidden; background: #f4f4f4; }
.sub_page .bd_gallery .bd_items .img_box > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.sub_page .bd_gallery .bd_items .card:hover .img_box > img { transform: scale(1.05); }
.sub_page .bd_gallery .bd_items .card-body { padding: 20px; }
.sub_page .bd_gallery .bd_items .card-body label { color: #999; font-size: 13px; }
.sub_page .bd_gallery .bd_items .card-body .h18 { font-size: 17px !important; font-weight: 700; line-height: 1.5; }
.sub_page .bd_gallery .bd_items .card-body .h18 a { color: #222; }
.sub_page .bd_gallery .bd_items .card-body .h18 a:hover { color: #6B3FA0; }
.sub_page .bd_gallery .bd_items .card-body .nav { font-size: 13px; }
.sub_page .bd_gallery .bd_items .card-body .nav a { color: #888; }

/* ============================================================
   게시판 공통 - 상세보기
   ============================================================ */
.sub_page.bd_view .card { border: none !important; border-radius: 16px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.07) !important; overflow: hidden; }
.sub_page.bd_view .card-header { background: #faf9fc !important; padding: 28px 32px !important; border-bottom: 2px solid #ece6f3 !important; }
.sub_page.bd_view .card-header .h21 { font-size: 22px !important; font-weight: 800 !important; color: #222 !important; line-height: 1.5; }
.sub_page.bd_view .card-header small { font-size: 14px; color: #888; }
.sub_page.bd_view .card-body { padding: 32px !important; font-size: 16px; line-height: 1.9; color: #444; }
.sub_page.bd_view .card-body img { max-width: 100%; height: auto; border-radius: 8px; }
.sub_page.bd_view .btn-danger { background: #6B3FA0 !important; border-color: #6B3FA0 !important; border-radius: 8px; padding: 8px 24px; font-weight: 600; }
.sub_page.bd_view .btn-danger:hover { background: #5a3188 !important; }
.sub_page.bd_view .btn-warning { background: #6B3FA0 !important; border-color: #6B3FA0 !important; border-radius: 6px; }
.sub_page.bd_view .btn-warning a { color: #fff !important; font-size: 13px !important; }
.sub_page.bd_view .rounded-circle { background: #f3eefb !important; border-color: #d5cce0 !important; }

/* ============================================================
   페이징
   ============================================================ */
.sub_page .paging_box { text-align: center; padding: 10px 0; }
.sub_page .paging_box a, .sub_page .paging_box span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; margin: 0 3px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: #666; border: 1px solid #e5e5e5; text-decoration: none; transition: 0.2s; }
.sub_page .paging_box a:hover { border-color: #6B3FA0; color: #6B3FA0; background: #f8f5fd; }
.sub_page .paging_box .active, .sub_page .paging_box span.now { background: #6B3FA0; color: #fff; border-color: #6B3FA0; font-weight: 700; }

/* ============================================================
   모바일 반응형
   ============================================================ */
@media(max-width:991px) {
    .sub_page .sub_page_banner { padding: 45px 0; }
    .sub_page .sub_page_banner .h50 { font-size: 28px !important; }
    .sub_page .content_wrap section.sec { padding: 45px 0 55px; }
    .sub_page .tit { font-size: 24px !important; }
    .sub_page.history .his_contents .his_li .his_txt { padding-left: 120px; }
}

@media(max-width:767px) {
    .sub_page .sub_page_banner { padding: 35px 0; }
    .sub_page .sub_page_banner .sub_page_wrap { flex-direction: column !important; text-align: center; }
    .sub_page .sub_page_banner .h50 { font-size: 24px !important; padding-bottom: 10px !important; }
    .sub_page .sub_page_banner .breadcrumb { justify-content: center !important; }
    .sub_page .sub_page_banner .breadcrumb-item { font-size: 13px; }
    .sub_page .content_wrap section.sec { padding: 35px 0 40px; }
    .sub_page .content_wrap section.sec .sec_wrap { padding: 0 15px; }
    .sub_page .tit { font-size: 21px !important; padding-left: 14px; }
    .sub_page .tit::before { height: 22px; }
    .sub_page .h17 { font-size: 15px !important; }
    .sub_page .h30 { font-size: 20px !important; }
    .sub_page.history .his_contents .his_li .his_txt { padding-left: 0; padding-top: 28px; }
    .sub_page.history .his_contents .his_li span.his_date { position: relative; left: 0; display: block; margin-bottom: 4px; }
    .sub_page.history .history_box { margin-left: 10px; }
    .sub_page .bd_def_list .table .t-none { display: none; }
    .sub_page .bd_def_list .table .mo_text { max-width: 200px; }
    .sub_page .bd_def_list .table thead th { font-size: 13px; padding: 12px 8px; }
    .sub_page .bd_def_list .table tbody td { font-size: 14px; padding: 12px 8px; }
    .sub_page .bd_gallery .bd_items { margin-bottom: 20px; }
    .sub_page .bd_gallery .bd_items .card-body { padding: 15px; }
    .sub_page.bd_view .card-header { padding: 20px !important; }
    .sub_page.bd_view .card-header .h21 { font-size: 19px !important; }
    .sub_page.bd_view .card-body { padding: 20px !important; font-size: 15px; }
    .sub_page .provision_info { padding: 18px 16px; }
}