/* ==========================================================================
   교회 홈페이지 고유 디자인 시스템 (바이브 코딩용)
   ========================================================================== */

:root {
    /* 메인 및 장년부 컬러 */
    --church-primary: #1a365d;       /* 은혜롭고 차분한 깊은 네이비 */
    --church-primary-light: #2b6cb0; /* 밝은 블루 */
    
    /* 씨앗 청소년부 컬러 */
    --color-seed-youth: #2f855a;     /* 파릇파릇한 씨앗의 딥 그린 */
    --color-seed-light: #48bb78;     /* 연두색 포인트 */
    
    /* 틔움 청년부 컬러 */
    --color-tium-young: #c05621;     /* 에너지가 틔어나는 오렌지 브라운 */
    --color-tium-light: #ed8936;     /* 활기찬 오렌지 포인트 */

    /* 공통 폰트 및 중립 색상 */
    --church-dark: #2d3748;          /* 본문 글자색 (짙은 회색) */
    --church-bg-light: #f7fafc;      /* 부드러운 배경색 */
}

/* 엘리멘터 및 일반 페이지에서 부드러운 스크롤 이동을 가능하게 하는 속성 */
html {
    scroll-behavior: smooth;
}

/* Feed Them Social 유튜브 플레이어 주변 디자인 정돈 */
.fts-jalbum-wrapper, .feed-them-social-stream {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: #ffffff;
    padding: 20px;
    margin-top: 15px;
}

/* ==========================================================================
   [헤더] 고정형(Sticky) 및 디자인 커스텀
   ========================================================================== */
.main-header-bar {
    background-color: #ffffff !important;
    border-bottom: 2px solid var(--church-bg-light);
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 메뉴 글자 스타일 */
.main-navigation a {
    color: var(--church-dark) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: color 0.3s ease;
    padding: 10px 15px !important;
}

/* 메뉴 호버(마우스 올렸을 때) 및 활성화 색상 */
.main-navigation a:hover,
.main-navigation .current-menu-item a {
    color: var(--church-primary) !important;
}

/* ==========================================================================
   [푸터] 교회 정보 및 하단 바 디자인
   ========================================================================== */
.site-footer {
    background-color: var(--church-primary) !important;
    color: #ffffff !important;
    padding: 40px 20px 20px 20px !important;
    font-size: 14px;
    line-height: 1.8;
}

.site-footer a {
    color: #edf2f7 !important;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-tium-light) !important;
}

/* 푸터 하단 저작권 표시 영역 */
.ast-footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
    opacity: 0.8;
}

/* ==========================================================================
   [메인 페이지] 각 섹션 공통 타이틀 및 간격 정의
   ========================================================================== */

/* 섹션 간 여백을 여유롭게 주어 차분한 느낌을 만듭니다 */
#intro, #timetable, #adult, #contact {
    padding: 80px 0 !important;
    background-color: #ffffff;
}

/* 짝수 번째 섹션은 연한 회색 배경을 깔아 시각적 리듬감을 줍니다 */
#timetable, #contact {
    background-color: var(--church-bg-light) !important;
}

/* 각 섹션의 대표 제목 스타일 (예: 교회 소개, 예배 안내 등) */
.church-section-title {
    text-align: center;
    color: var(--church-primary);
    font-size: 32px !important;
    font-weight: 700 !important;
    margin-bottom: 40px !important;
    position: relative;
    letter-spacing: -0.5px;
}

/* 제목 아래에 은은한 포인트 언더라인 선 긋기 */
.church-section-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background-color: var(--church-primary-light);
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

/* ==========================================================================
   [예배 안내] 모바일 최적화 반응형 타임테이블 디자인
   ========================================================================== */

/* 모바일 화면에서 표가 터치 스크롤 되도록 감싸주는 박스 */
.church-timetable-container {
    width: 90%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* 테이블 기본 스타일 */
.church-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    text-align: left;
    min-width: 500px; /* 모바일에서 표가 너무 찌그러지는 것을 방지 */
}

/* 표 머리글 (헤더) - 교회 메인 네이비 컬러 사용 */
.church-table th {
    background-color: var(--church-primary);
    color: #ffffff !important;
    font-weight: 600;
    padding: 16px 20px;
    font-size: 16px;
    letter-spacing: -0.5px;
}

/* 표 본문 셀 스타일 */
.church-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    color: var(--church-dark);
    font-size: 15px;
}

/* 가장 중요한 2부 예배 줄 배경색 강조 처리 */
.church-table tr.highlight-row {
    background-color: #f7fafc;
    font-weight: 600;
}

.church-table tr.highlight-row td:first-child {
    color: var(--church-primary-light);
}

/* 마우스를 올렸을 때 한 줄씩 반응하는 효과 */
.church-table tbody tr:hover {
    background-color: #edf2f7;
    transition: background-color 0.2s ease;
}

/* 모바일 전용 미세 조정 */
@media (max-width: 767px) {
    .church-table th, .church-table td {
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ==========================================================================
   [헤더] 드롭다운(Sub-menu) 세련된 디자인 다듬기
   ========================================================================== */
.main-header-bar .sub-menu {
    background-color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    border-top: 3px solid var(--church-primary) !important; /* 상단에 포인트 라인 */
    padding: 10px 0 !important;
}

/* 하위 메뉴 글자 스타일 */
.main-header-bar .sub-menu a {
    font-size: 14px !important;
    padding: 12px 20px !important;
    font-weight: 500 !important;
    color: var(--church-dark) !important;
}

/* 하위 메뉴 마우스 올렸을 때 */
.main-header-bar .sub-menu a:hover {
    background-color: var(--church-bg-light) !important;
    color: var(--church-primary) !important;
}

/* ==========================================================================
   [스크롤 인터랙션] 부드러운 화면 전환 효과
   ========================================================================== */
html {
    scroll-behavior: smooth; /* 메뉴 클릭 시 부드러운 스크롤 이동 */
}

/* 엘리멘터 애니메이션이 발동하기 전 미세한 시간차를 주어 자연스럽게 연출 */
.animated {
    animation-delay: 0.2s;
    animation-fill-mode: both;
}