@charset "utf-8";
/* ----------------------------------------------
CUSTOME.CSS
* writer : uxcamp
* version : 1.0.0
* last update : 2025.06.20
* purpose : 테마 커스텀 스타일
* license : © 2025 uxcamp. All rights reserved.
------------------------------------------------*/

/* 탭 전체 컨테이너 */
.sh-tab-container { margin-bottom: 30px; clear: both; }

/* 탭 메뉴 스타일 */
.sh-tab-menu { display: flex !important; list-style: none !important; padding: 0 !important; margin: 0 0 -2px 0 !important; }
.sh-tab-menu li { 
	flex: 1; text-align: center; padding: 15px; cursor: pointer; background: #f8f9fa; 
	border: 1px solid #dee2e6; 
	border-bottom: 2px solid #520026; /* 하단 라인 색상 변경 */
	font-weight: bold; color: #666; transition: 0.3s;
}

/* 활성화된 탭 스타일 (#520026 적용) */
.sh-tab-menu li.active { 
	background: #520026 !important; 
	color: #fff !important; 
	border-bottom: 2px solid #520026 !important; 
}

/* 탭 내용 영역 */
.sh-tab-panel { 
	display: none; padding: 40px 20px; border: 1px solid #dee2e6; border-top: none; 
	background: #fff; line-height: 1.8; min-height: 300px; 
}
.sh-tab-panel.active { display: block !important; }

/* 테마의 리스트 점(bullet) 강제 제거 */
.sh-tab-menu li:before { display: none !important; content: none !important; }

/* 내용관리용 커스텀 탭 스타일 */
.history-tabs { display: flex; list-style: none; padding: 0; margin: 0 0 -1px 0; border-bottom: 2px solid #ddd; }
.history-tabs li { 
    flex: 1; text-align: center; padding: 15px; cursor: pointer; background: #f4f4f4; 
    border: 1px solid #ddd; border-bottom: none; font-weight: bold; color: #666;
}
.history-tabs li.active { background: #fff; color: #007bff; border-bottom: 2px solid #fff; position: relative; z-index: 5; }

.history-panel { display: none; padding: 30px; border: 1px solid #ddd; border-top: none; background: #fff; }
.history-panel.active { display: block; }

/* 탭 메뉴 전체 스타일 */
.history-tab-box { margin: 30px 0; }
.history-tab-btns { display: flex; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.history-tab-btns li { 
    flex: 1; text-align: center; padding: 15px; cursor: pointer; background: #f8f9fa; 
    border: 1px solid #dee2e6; border-bottom: 2px solid #007bff; font-weight: bold; color: #666;
}
.history-tab-btns li.active { background: #007bff; color: #fff; border-bottom: 2px solid #007bff; }

/* 탭 내용 영역 */
.history-tab-panel { display: none; padding: 30px; border: 1px solid #dee2e6; border-top: none; background: #fff; line-height: 1.8; }
.history-tab-panel.active { display: block !important; }

/* 탭 클릭 기능을 위한 핵심 CSS */
.tab_content_box { display: none; }
input[name="tab_item"]:checked + label + .tab_content_box { display: block !important; }

/* 탭 버튼 스타일 강제 고정 */
input[name="tab_item"] { display: none; }
.tab_label { 
    display: inline-block; width: 49%; padding: 15px 0; text-align: center; 
    background: #f8f9fa; color: #666; font-weight: bold; cursor: pointer; 
    border: 1px solid #ddd; border-bottom: 3px solid #007bff; 
}
input[name="tab_item"]:checked + .tab_label { 
    background: #007bff !important; color: #fff !important; 
}

/* 타임라인 전체 컨테이너 */
.timeline-container { position: relative; padding: 20px 0; }

/* 수직 점선 가이드 */
.timeline-line { 
    position: absolute; left: 95px; top: 0; bottom: 0; 
    border-left: 1px dotted #ccc; z-index: 1; 
}

/* 연도 섹션 */
.timeline-year-block { position: relative; margin-bottom: 50px; z-index: 2; }

/* 연도 박스 (#520026 적용) */
.timeline-year-label { 
    display: inline-block; background: #520026; color: #fff; 
    padding: 5px 15px; font-weight: bold; font-size: 18px; 
    border-radius: 3px; margin-bottom: 20px;
}

/* 개별 이벤트 로우 */
.timeline-event { display: flex; align-items: flex-start; margin-bottom: 25px; position: relative; }

/* 날짜 스타일 */
.timeline-date { 
    width: 80px; text-align: right; font-style: italic; 
    color: #b5739d; font-weight: 500; font-size: 15px; 
}

/* 중앙 포인트 점 */
.timeline-dot { 
    width: 10px; height: 10px; background: #fff; 
    border: 2px solid #b5739d; border-radius: 50%; 
    margin: 5px 15px 0 15px; z-index: 3;
}

/* 연혁 내용 */
.timeline-desc { flex: 1; color: #444; font-size: 15px; line-height: 1.6; }

/* 하단 요약 문구 (회색) */
.timeline-summary { 
    padding-left: 110px; color: #888; font-size: 14px; margin-top: -10px; 
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .timeline-line { left: 75px; }
    .timeline-date { width: 60px; font-size: 13px; }
    .timeline-summary { padding-left: 90px; }
}

/* [신내동성당] 왼쪽 메뉴 활성화 스타일 */
.category ul li a.active-now {
    color: #520026 !important; /* 글자색: 성당 자주색 */
    font-weight: bold !important;
    background-color: #fdf2f5 !important; /* 배경색: 연한 자주빛 회색 */
    border-left: 5px solid #520026 !important; /* 왼쪽 강조선 */
    padding-left: 15px !important; /* 선 두께만큼 여백 */
    display: block;
    transition: all 0.2s ease-in-out;
}

/* 마우스 올렸을 때도 동일한 느낌 유지 (선택사항) */
.category ul li a:hover {
    color: #520026 !important;
    background-color: #fdf2f5 !important;
}

/* --- [CSS 추가] 기존 스타일 하단에 붙여넣으세요 --- */

/* 1. 타임라인 전체 컨테이너 유연화 */
.timeline-wrap { position: relative; padding: 10px 0; overflow: hidden; }
.timeline-wrap::before { 
    content: ""; position: absolute; left: 85px; top: 0; bottom: 0; 
    border-left: 1px dotted #ccc; z-index: 1; 
}

/* 2. 항목 배치 (고정 px 제거 후 Flexbox 사용) */
.event-item { display: flex; position: relative; margin-bottom: 20px; align-items: flex-start; }
.event-date { width: 70px; flex-shrink: 0; text-align: right; color: #b5739d; font-size: 14px; }
.event-dot { width: 10px; height: 10px; background: #fff; border: 2px solid #b5739d; border-radius: 50%; margin: 6px 15px 0 15px; position: relative; z-index: 3; flex-shrink: 0; }
.event-desc { flex: 1; color: #333; font-size: 15px; line-height: 1.6; word-break: keep-all; }

/* 3. [핵심] 모바일 대응 미디어 쿼리 */
@media (max-width: 768px) {
    .timeline-wrap::before { left: 65px; } /* 점선을 왼쪽으로 밀기 */
    .event-date { width: 55px; font-size: 12px; } /* 날짜 너비 줄이기 */
    .event-dot { margin: 6px 10px 0 10px; } /* 점 간격 좁히기 */
    .event-desc { font-size: 14px; } /* 글자 크기 조정 */
    .event-summary { padding-left: 85px; font-size: 12px; }
}

/* 주보성인 컨테이너 */
.saint-container { padding: 20px 0; line-height: 1.8; color: #444; }

/* 상단 타이틀 구역 */
.saint-header { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.saint-subtitle { color: #bbb; font-size: 16px; margin-bottom: 5px; }
.saint-title { color: #520026; font-size: 32px; font-weight: bold; }
.saint-title span { color: #aaa; font-size: 18px; font-weight: normal; margin-left: 10px; }

/* 이미지 박스 (그림자 효과) */
.saint-img-box { 
    float: right; margin: 0 0 20px 30px; padding: 5px; 
    background: #fff; border: 1px solid #ddd; 
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1); 
}
.saint-img-box img { display: block; width: 220px; height: auto; }

/* 본문 텍스트 */
.saint-content p { margin-bottom: 20px; text-align: justify; word-break: keep-all; }

/* 모바일 대응 (768px 이하) */
@media (max-width: 768px) {
    .saint-title { font-size: 24px; }
    .saint-img-box { float: none; margin: 0 auto 20px; text-align: center; }
    .saint-img-box img { width: 100%; max-width: 300px; }
}

/* 메인 하단 정보 섹션 */
.main-bottom-info { padding: 60px 0; background: #fdfdfd; border-top: 1px solid #eee; }
.info-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; padding: 0 20px; }
.info-box { flex: 1; }
.info-title { color: #520026; font-size: 24px; font-weight: bold; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #520026; display: inline-block; }

/* 지도 스타일 */
.map-wrapper { border: 1px solid #ddd; background: #eee; border-radius: 8px; overflow: hidden; }

/* 미사 시간표 스타일 */
.mass-table { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid #520026; }
.mass-table th { background: #f8f9fa; color: #520026; padding: 12px; border: 1px solid #ddd; font-weight: bold; }
.mass-table td { padding: 12px; border: 1px solid #ddd; text-align: center; font-size: 15px; }
.mass-table .day-cell { background: #fdf2f5; font-weight: bold; color: #520026; }
.mass-notice { margin-top: 15px; font-size: 14px; color: #666; font-style: italic; }

/* 반응형 (모바일 대응) */
@media (max-width: 991px) {
    .info-container { flex-direction: column; }
    .info-box { width: 100%; }
    .info-title { font-size: 20px; }
}

/* 하단 정보 구역 전체 */
.main-bottom-info { padding: 60px 0; background: #fff; border-top: 1px solid #eee; }
.info-container { max-width: 1200px; margin: 0 auto; display: flex; gap: 30px; padding: 0 20px; }
.info-box { flex: 1; }
.info-title { color: #520026; font-size: 22px; font-weight: bold; margin-bottom: 20px; border-left: 5px solid #520026; padding-left: 15px; }

/* 표 스타일 (이미지 구조 재현) */
.mass-table-v2 { width: 100%; border-collapse: collapse; border: 2px solid #333; table-layout: fixed; }
.mass-table-v2 th, .mass-table-v2 td { border: 1px solid #333; padding: 12px 8px; font-size: 14px; vertical-align: middle; line-height: 1.6; }

/* 왼쪽 큰 카테고리 (주일미사 등) */
.category-cell { background: #fff; color: #000; font-weight: bold; width: 80px; text-align: center; font-size: 16px; letter-spacing: -1px; }

/* 시간 정보 셀 */
.time-cell { background: #fff; color: #000; text-align: left; padding-left: 15px !important; font-family: 'pretendard', sans-serif; }
.highlight-text { font-weight: bold; }

/* 오른쪽 상세 카테고리 (고해성사 등) */
.sub-category { background: #fff; color: #000; font-weight: bold; width: 100px; text-align: center; }

/* 오른쪽 상세 내용 셀 */
.detail-cell { background: #fff; color: #000; text-align: left; padding-left: 10px !important; }

/* 반응형 설정 */
@media (max-width: 1024px) {
    .info-container { flex-direction: column; }
    .mass-table-v2 { table-layout: auto; }
}

/* 사목교서 전체 컨테이너 */
.sh-pastoral { padding: 40px 20px; line-height: 1.9; color: #333; font-family: 'Malgun Gothic', sans-serif; }

/* 메인 타이틀 */
.sh-pastoral h2 { font-size: 28px; font-weight: bold; color: #333; margin-bottom: 25px; border-left: 6px solid #520026; padding-left: 15px; }

/* 도입부 서술형 */
.sh-pastoral .intro-text { margin-bottom: 50px; text-align: justify; color: #555; word-break: keep-all; }
.sh-pastoral .intro-text p { margin-bottom: 15px; }

/* 세부지침 섹션 제목 */
.sh-pastoral h3 { color: #520026; font-size: 22px; font-weight: bold; margin-bottom: 25px; border-bottom: 2px solid #520026; display: inline-block; padding-bottom: 5px; }

/* 소제목 (가정/본당 공동체 실천 사항) */
.sh-pastoral h4 { font-size: 18px; font-weight: bold; color: #d81b60; margin: 30px 0 15px 0; }

/* 리스트 스타일 (숫자형: 1, 2, 3...) */
.sh-pastoral .num-list { list-style: none; padding-left: 0; margin-bottom: 40px; }
.sh-pastoral .num-list > li { margin-bottom: 12px; padding-left: 30px; position: relative; }
.sh-pastoral .num-list > li::before { content: counter(item) "."; counter-increment: item; position: absolute; left: 0; font-weight: bold; color: #520026; }
.sh-pastoral .num-list { counter-reset: item; }

/* 리스트 스타일 (한글형: 가, 나, 다...) */
.sh-pastoral .kr-list { list-style: none; padding-left: 0; }
.sh-pastoral .kr-list > li { margin-bottom: 20px; padding-left: 30px; position: relative; }
.sh-pastoral .kr-list > li .list-title { font-weight: bold; color: #333; display: block; margin-bottom: 5px; }
.sh-pastoral .kr-list > li::before { position: absolute; left: 0; font-weight: bold; color: #520026; }
.sh-pastoral .kr-list > li:nth-child(1)::before { content: "가."; }
.sh-pastoral .kr-list > li:nth-child(2)::before { content: "나."; }
.sh-pastoral .kr-list > li:nth-child(3)::before { content: "다."; }
.sh-pastoral .kr-list > li:nth-child(4)::before { content: "라."; }
.sh-pastoral .kr-list > li:nth-child(5)::before { content: "마."; }
.sh-pastoral .kr-list > li:nth-child(6)::before { content: "바."; }
.sh-pastoral .kr-list > li:nth-child(7)::before { content: "사."; }

/* 모바일 대응 */
@media (max-width: 768px) {
    .sh-pastoral h2 { font-size: 22px; }
    .sh-pastoral h3 { font-size: 19px; }
    .sh-pastoral { padding: 20px 10px; }
}

/* 아코디언 컨테이너 */
.pastoral-accordion { border-top: 2px solid #520026; margin: 30px 0; }

/* 개별 아코디언 아이템 */
.accordion-item { border-bottom: 1px solid #ddd; }

/* 아코디언 헤더 (클릭 버튼) */
.accordion-header {
    width: 100%; padding: 20px; text-align: left; background: #fff;
    border: none; outline: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    transition: background 0.3s;
}

.accordion-header:hover { background: #fdf2f5; }

.accordion-header h3 { 
    margin: 0; font-size: 18px; color: #520026; font-weight: bold; 
}

/* 화살표 아이콘 */
.icon-arrow {
    display: inline-block; width: 12px; height: 12px;
    border-right: 2px solid #520026; border-bottom: 2px solid #520026;
    transform: rotate(45deg); transition: transform 0.3s;
}

/* 활성화 상태 (열렸을 때) */
.accordion-item.active .accordion-header { background: #fdf2f5; }
.accordion-item.active .icon-arrow { transform: rotate(-135deg); }

/* 아코디언 본문 내용 (평소엔 숨김) */
.accordion-body {
    max-height: 0; overflow: hidden; background: #fff;
    transition: max-height 0.4s ease-out;
}

.accordion-content { padding: 25px; line-height: 1.9; color: #444; }

@media (max-width: 768px) {
    .accordion-header h3 { font-size: 16px; }
    .accordion-content { padding: 20px 15px; font-size: 14px; }
}