/* =========================================================
   events.css - 이벤트 & 공지사항 스타일 (PC/Mobile 통합)
   ========================================================= */

/* 1. [공통 & PC] 게시판 컨테이너 */
.board-container {
    max-width: 1000px;
    /* ★ [수정됨] 상단 여백을 140px -> 100px로 줄여서 위쪽 빈 공간을 줄임 */
    margin: 100px auto 60px auto;
    padding: 0 20px;
    min-height: 600px; /* 내용이 없어도 최소 높이 확보 */
}

.board-container h1 {
    font-size: 32px;
    text-align: center;
    /* 제목 아래 여백도 살짝 줄여서 더 짜임새 있게 */
    margin-bottom: 30px;
    color: #222;
    font-weight: 800;
}

/* 2. 게시판 테이블 스타일 */
.board-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    border-top: 2px solid #333;
}

/* 테이블 헤더(th) & 내용(td) 공통 */
.board-table th, .board-table td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    color: #555;
}

/* 테이블 헤더(th) */
.board-table th {
    background-color: #f9f9f9;
    font-weight: 700;
    color: #333;
}

/* 제목(title) 스타일 */
.board-table .title {
    text-align: left;
    padding-left: 20px;
}
.board-table .title a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.2s;
    display: block; /* 링크 클릭 영역 확대 */

    /* 긴 제목 말줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px; /* PC에서 제목 너무 길어짐 방지 */
}
.board-table .title a:hover {
    color: #e67e22;
    text-decoration: underline;
}

/* [PC] 각 열의 너비 지정 */
.col-num { width: 80px; }
.col-title { width: auto; } /* 제목은 남는 공간 다 차지 */
.col-author { width: 100px; }
.col-date { width: 120px; }
.col-views { width: 80px; }


/* 3. 페이지 번호(pagination) */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.pagination a {
    color: #777;
    text-decoration: none;
    padding: 8px 14px;
    margin: 0 5px;
    border: 1px solid #eee;
    border-radius: 4px;
    transition: all 0.2s;
    font-size: 14px;
}
.pagination a.active {
    background-color: #e67e22;
    color: white;
    border-color: #e67e22;
    font-weight: bold;
}
.pagination a:hover:not(.active) {
    background-color: #f5f5f5;
    border-color: #ddd;
}


/* ==============================================
   [모바일 전용 오버라이드] 짤림 현상 완벽 해결
   ============================================== */
@media (max-width: 768px) {

    /* 1. 컨테이너: 헤더 높이만큼 띄우고 좌우 여백 확보 */
    .board-container {
        margin: 80px auto 40px auto !important; /* 모바일 헤더 피해서 내림 */
        padding: 0 15px !important;
        width: 100%;
        overflow: hidden; /* 가로 스크롤바 생기는 것 방지 */
    }

    .board-container h1 {
        font-size: 22px; /* 제목 크기 줄임 */
        margin-bottom: 20px;
    }

    /* 2. 테이블 레이아웃 강제 고정 (화면 밖으로 안 나가게) */
    .board-table {
        table-layout: fixed !important;
        width: 100% !important;
        font-size: 13px !important;
    }

    .board-table th, .board-table td {
        padding: 12px 5px !important; /* 여백을 줄여서 공간 확보 */
    }

    /* ★ [핵심] 모바일에서 불필요한 열 과감하게 숨기기 */
    /* 번호(1), 작성자(3), 조회수(5) -> 숨김 */
    /* 제목(2), 날짜(4) -> 보임 */

    .col-num, .col-author, .col-views { display: none !important; }

    .board-table th:nth-child(1), .board-table td:nth-child(1), /* 번호 */
    .board-table th:nth-child(3), .board-table td:nth-child(3), /* 작성자 */
    .board-table th:nth-child(5), .board-table td:nth-child(5) { /* 조회수 */
        display: none !important;
    }

    /* 3. 남은 열(제목, 날짜) 너비 재분배 */
    .col-title { width: 70% !important; } /* 제목에 공간 많이 */
    .col-date { width: 30% !important; }  /* 날짜에 나머지 */

    /* 제목 스타일 수정 */
    .board-table .title {
        padding-left: 5px !important;
    }
    .board-table .title a {
        max-width: 100%; /* 너비 제한 해제 */
    }

    /* 날짜 폰트 줄임 */
    .board-table td:nth-child(4) {
        font-size: 11px;
        color: #888;
    }
}


/* =========================================================
   [PC 화면 정리] 모바일 전용 요소(사이드바, 하단바) 숨기기
   ========================================================= */
.mobile-sidebar,
.bottom-nav,
#mobileSidebar {
    display: none !important;
}