@charset "utf-8";
/* ==================================================================
 * books 스킨 — 목록/상세 공통 보정
 *  - .books__* / .bview__* 본 디자인은 content.css 에서 로드(스킨 템플릿이 link)
 *  - 여기서는 게시판 래퍼 정렬 + 연도(카테고리) 탭 스타일만 보정
 * ================================================================== */

/* 컨테이너 가운데 정렬 (sub_board.css .board-list margin:0 / border-top 상쇄) */
.board-list.skin-books {
    width: 100%;
    max-width: var(--container, 1480px);
    margin-inline: auto;
    padding: 10px var(--gutter, 24px) 0;
    border-top: 0;
    list-style: none;
}

/* 연도 필터 = 카테고리 탭 → 도서 필터 알약 디자인 */
.skin-books .board-cats {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 26px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--c-line, #E2E8ED);
}
.skin-books .cat-tab {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 14.5px; font-weight: 600;
    color: var(--c-sub, #6C7885);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--c-line, #E2E8ED);
    transition: color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.skin-books .cat-tab:hover { color: var(--c-primary, #0E4C63); box-shadow: inset 0 0 0 1px var(--c-accent, #1fc9ff); }
.skin-books .cat-tab.active {
    color: #fff;
    background: var(--c-primary, #0E4C63);
    box-shadow: inset 0 0 0 1px var(--c-primary, #0E4C63);
}
.skin-books .cat-tab small { opacity: .7; margin-left: 2px; font-weight: 400; }

/* 목록엔 검색바 사용 안 함(도서 목록) */
.skin-books .board-search { display: none; }

/* ==================================================================
 * 공통 위젯 (페이지네이션 / 글쓰기 버튼) — news 스킨과 동일한 지역과 인재 디자인
 *   list_common.php 가 출력하지만 books 스킨 CSS 만 로드되므로 여기서 정의
 * ================================================================== */
.board-list.skin-books .board-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-top: 44px;
}
/* 페이지네이션만 없을 때(도서 목록) 글쓰기 버튼 우측 정렬 */
.board-list.skin-books .board-actions:not(:has(.pagination)) { justify-content: flex-end; }

.board-list.skin-books .pagination {
    display: flex; align-items: center; gap: 4px;
    margin-inline: auto;
}
.board-list.skin-books .pagination a,
.board-list.skin-books .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 10px;
    border: 1px solid var(--c-line, #E2E8ED);
    border-radius: 10px;
    color: var(--c-body, #3D4954);
    font-size: 15px; text-decoration: none;
    transition: all .2s var(--ease);
}
.board-list.skin-books .pagination a:hover { border-color: var(--c-accent); color: var(--c-primary); }
.board-list.skin-books .pagination .current {
    background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 700;
}

/* 글쓰기 버튼 */
.board-list.skin-books .btn-write {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 28px;
    border-radius: 999px;
    background: var(--c-primary); color: #fff;
    font-size: 15px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    box-shadow: var(--shadow-sm);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.board-list.skin-books .btn-write:hover { background: var(--c-primary-dark); transform: translateY(-2px); }