/* 자료실 공통 */
.archive-section { width: 100% !important; margin: 0 auto; flex-direction: column; display: flex;}
.archive-header { text-align: center; margin-bottom: 40px; }
.archive-title { font-size: 28px; font-weight: 700; color: #333; margin-bottom: 10px; }
.archive-desc { color: #888; font-size: 15px; }

/* 내부 리스트도 화면 전체를 쓰도록 설정 */
.board-container {
    width: 100%;
}

/* 리스트 스타일 */
.board-list-wrap { border-top: 2px solid #333; border-bottom: 1px solid #ddd; }
.board-header, .board-item { 
    display: flex; 
    align-items: center; 
    padding: 15px 0; 
    border-bottom: 1px solid #eee;
}
.board-header { background: #f9f9f9; font-weight: 600; text-align: center; font-size: 14px; }
/* .board-item { transition: background 0.2s; } */
.board-item:hover { background: #fcfcfc; }

/* 컬럼 너비 조절 */
/* .col-subject { flex: 1; padding-left: 20px; text-align: left; }
.col-writer { width: 120px; text-align: center; color: #666; font-size: 14px; }
.col-date { width: 120px; text-align: center; color: #888; font-size: 14px; } */

/* .item-link { text-decoration: none; color: #333; transition: color 0.2s; } */
/* .item-link:hover { color: #007bff; text-decoration: underline; } */

/* 1. 페이지네이션 '1'을 화면 정중앙에 배치 */
.archive-footer {
    width: 100%;
    display: flex;
    justify-content: center; /* 자식 요소들을 중앙으로 모음 */
    align-items: center;
    position: relative;      /* 검색폼 배치를 위한 기준 */
    margin-top: 40px;
    padding: 20px 0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 검색폼을 오른쪽 끝으로 보내기 (전체 흐름은 중앙 유지하면서) */
.search-form {
    position: absolute;      /* 부모(.archive-footer) 기준 절대 위치 */
    right: 0;                /* 오른쪽 끝에 붙임 */
    display: flex;
    gap: 5px;
}

/* 2. 제목 말줄임표(...) 처리 */
.board-item {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #eee;
}

.col-subject {
    flex: 1;                 /* 남는 공간을 다 차지하되 */
    min-width: 0;            /* flex 박스 안에서 텍스트가 넘칠 때 필요 */
    padding: 15px 20px;
    width: 600px;
    white-space: nowrap;     /* 줄바꿈 금지 */
    overflow: hidden;        /* 넘치는 부분 숨김 */
    text-overflow: ellipsis; /* 넘치는 부분에 '...' 표시 */
    text-align: left;
}

.item-link {
    display: inline-block;
    max-width: 100%;         /* 부모 너비를 넘지 않게 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* 작성자와 날짜는 너비 고정 */
.col-writer, .col-date {
    width: 120px;
    text-align: center;
    flex-shrink: 0;          /* 너비가 줄어들지 않도록 고정 */
}

.pagination a { 
    display: inline-block; 
    width: 35px; 
    height: 35px; 
    line-height: 35px; 
    text-align: center; 
    border: 1px solid #ddd; 
    text-decoration: none; 
    color: #333; 
}
.pagination a.active { background: #333; color: #fff; border-color: #333; }

/* 검색바 스타일 */
/* .search-form { display: flex; gap: 5px; float: right;} */
.search-select { padding: 8px; border: 1px solid #ddd; outline: none; }
.search-input { padding: 8px 15px; border: 1px solid #ddd; min-width: 200px; outline: none; }
.search-btn { padding: 8px 20px; background: #666; color: #fff; border: none; cursor: pointer; }
.search-btn:hover { background: #333; }

/* --- 자료실 모바일 반응형 (768px 이하) --- */
@media screen and (max-width: 768px) {
    /* 1. 헤더 간소화 */
    .archive-title { font-size: 24px; } /* 조금 더 키움 */
    .archive-desc { font-size: 14px; }
    .board-list-wrap { width: 100%;}

    /* 2. 게시판 헤더 숨기기 (유지) */
    .board-header { display: none; }

    /* 3. 리스트 항목 카드화 */
    .board-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 15px; /* 여백을 넓혀 터치하기 편하게 */
    }

    /* 4. 제목 스타일 (크기 키우고 가독성 향상) */
    .col-subject {
        width: 100% !important;
        padding: 0 0 10px 0 !important;
        font-size: 18px; /* 16px에서 18px로 상향 */
        line-height: 1.4;
        font-weight: 700; /* 굵게 변경 */
        color: #111;
        white-space: normal;
        word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 */
    }

    .item-link {
        display: block;
        max-width: 100%;
        color: inherit;
        text-decoration: none;
    }

    /* 5. 작성자와 날짜 */
    .col-writer, .col-date {
        display: inline-block;
        width: auto;
        font-size: 13px;
        color: #777;
    }

    /* 6. 푸터 및 검색창 (잘림 방지 핵심) */
    .archive-footer {
        flex-direction: column;
        gap: 25px;
        position: static;
        padding: 30px 10px;
    }

    .search-form {
        position: static;
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* 요소가 넘치면 다음줄로 */
        justify-content: center;
        gap: 5px;
    }

    .search-select {
        flex: 0 0 30%; /* 선택창 너비 고정 */
        min-width: 80px;
        height: 45px; /* 높이 키움 */
    }

    .search-input {
        flex: 1; /* 남은 공간 모두 차지 */
        min-width: 0 !important; /* 잘림 방지를 위해 min-width 해제 */
        height: 45px;
        font-size: 14px;
    }

    .search-btn {
        flex: 0 0 60px; /* 버튼 너비 고정 */
        height: 45px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* 초소형 기기 (480px 이하) */
@media screen and (max-width: 480px) {
    .archive-title { font-size: 20px; }
    
    .col-subject {
        font-size: 17px; /* 아주 작은 화면에선 소폭 축소 */
    }

    .search-form {
        flex-direction: column; /* 검색창 요소들을 한 줄씩 배치 */
        align-items: stretch;
    }
    .board-list-wrap { border-top: 2px solid #333; border-bottom: 1px solid #ddd; }

    .search-select, .search-input, .search-btn {
        width: 100% !important; /* 가로로 꽉 차게 */
        flex: none;
    }
}