/*
Theme Name: Fukuoka Catholic Youth Hub
Description: 후쿠오카 교구 청년부 7개 게시판 허브 (독자 규격)
Author: Woncheol Jeong
Version: 1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

body { 
    font-family: 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
    /* ... 기존 설정 유지 ... */
}

:root {
    --primary-color: #1a4b75;
    --text-main: #333;
    --text-muted: #666;
    --bg-light: #f4f7f6;
    --card-bg: #fff;
    --border-color: #e2e8f0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background: var(--bg-light); color: var(--text-main); line-height: 1.6; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* 작고 간결한 헤더 */
.site-header { background: var(--primary-color); padding: 10px 0; }
.header-inner { max-width: 1080px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; }
.btn-home, .btn-external { font-size: 0.9rem; font-weight: bold; padding: 6px 12px; border-radius: 4px; transition: 0.2s; }
.btn-home { color: #fff; display: flex; align-items: center; gap: 5px; }
.btn-home:hover { background: rgba(255,255,255,0.1); }
.btn-external { background: #fff; color: var(--primary-color); }
.btn-external:hover { background: #f0f0f0; }

/* 메인 그리드 레이아웃 */
.dashboard-container { max-width: 1080px; margin: 2rem auto; padding: 0 1rem; }
.board-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

/* 공통 카드 스타일 */
.board-card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border-color); padding: 1.5rem; }
.board-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary-color); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.board-head h2 { font-size: 1.1rem; color: var(--primary-color); }
.more-btn { font-size: 0.85rem; color: var(--text-muted); font-weight: bold; }
.more-btn:hover { color: var(--primary-color); }

/* 1. 교구 공지 (2열 전체 차지) */
.full-width-notice { grid-column: span 2; }
.notice-list { display: flex; flex-direction: column; gap: 1rem; }
.notice-item { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--border-color); }
.notice-item:last-child { border-bottom: none; padding-bottom: 0; }
.notice-text { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.notice-title { font-size: 1.15rem; margin-bottom: 0.3rem; font-weight: bold; }
.notice-title:hover { color: var(--primary-color); }
.notice-summary { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.notice-date { font-size: 0.8rem; color: #999; }
.notice-thumb { width: 160px; height: 110px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #eee; }
.notice-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 2. 일반 보고 게시판 (타이틀만 5개) */
.report-list li { border-bottom: 1px solid #f0f0f0; }
.report-list li:last-child { border-bottom: none; }
.report-link { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; font-size: 0.95rem; }
.report-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 1rem; }
.report-link:hover .report-title { color: var(--primary-color); font-weight: 500; }
.report-date { font-size: 0.8rem; color: #aaa; flex-shrink: 0; }

.no-content { font-size: 0.9rem; color: #999; text-align: center; padding: 1rem 0; }

/* 상세 및 목록 페이지 공통 */
.sub-container { max-width: 800px; margin: 2rem auto; padding: 0 1rem; background: #fff; padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); }

/* 푸터 */
.site-footer { text-align: center; padding: 1.5rem 0; font-size: 0.85rem; color: #888; margin-top: 2rem; }

/* 모바일 대응 (768px 이하 화면) */
@media (max-width: 768px) {
    /* 1. 헤더: 세로 정렬로 변경하여 글자 깨짐 방지 */
    .header-inner { 
        flex-direction: column; 
        gap: 12px; 
        padding: 5px 15px; 
    }
    .btn-home { 
        font-size: 1.05rem; 
        text-align: center; 
        justify-content: center; 
        line-height: 1.4;
    }
    .btn-external { 
        width: 100%; 
        text-align: center; 
        padding: 10px; 
        font-size: 0.95rem;
    }

    /* 2. 게시판 레이아웃: 1열 전환 */
    .board-grid { grid-template-columns: 1fr; }
    .full-width-notice { grid-column: span 1; }

    /* 3. 공지사항 게시글: 여백 확보 및 확실한 점선 구분선 추가 */
    .notice-item { 
        flex-direction: column-reverse; 
        gap: 1rem; 
        padding-bottom: 1.8rem; /* 점선 위쪽 여백 */
        margin-bottom: 1.8rem;  /* 점선 아래쪽 여백 (다음 글과의 간격) */
        border-bottom: 2px dashed #a0aec0; /* 기존보다 더 굵고 진한 점선 */
    }
    .notice-item:last-child { 
        border-bottom: none; 
        padding-bottom: 0; 
        margin-bottom: 0;
    }
    .notice-thumb { width: 100%; height: 200px; }
}

/* 페이지네이션 (숫자형) */
.custom-pagination { margin-top: 2.5rem; text-align: center; }
.custom-pagination .nav-links { display: inline-flex; gap: 0.5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.custom-pagination .page-numbers { display: inline-block; padding: 8px 16px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-main); font-weight: bold; transition: 0.2s; }
.custom-pagination .page-numbers:hover { background: var(--border-color); }
.custom-pagination .page-numbers.current { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.custom-pagination .page-numbers.dots { background: transparent; border: none; padding: 8px; }

/* 게시판 헤더 (타이틀 클릭형) */
.board-head { border-bottom: 2px solid var(--primary-color); padding-bottom: 0.5rem; margin-bottom: 1rem; }
.board-head h2 { font-size: 1.1rem; }
.board-head h2 a { color: var(--primary-color); display: block; transition: opacity 0.2s; }
.board-head h2 a:hover { opacity: 0.7; } /* 마우스 올렸을 때 살짝 투명해지는 효과 */