@charset "UTF-8";
/* ==========================================================================
   게시판 페이지 스타일 (board.css)
   대상: /board/notice, /board/qna (목록형) · /board/gallery (카드형) · 상세 공용
   공통 토큰/클래스(.table--list, .card, .badge, .pagination 등)는 site.css 에 정의됨
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 분류 필터 (공지사항 전용 · 전체/공지/안내/이벤트)
   -------------------------------------------------------------------------- */
.board-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.board-filter__link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: var(--space-1) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.board-filter__link:hover,
.board-filter__link:focus-visible {
    color: var(--color-primary-dark);
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.board-filter__link--active,
.board-filter__link--active:hover,
.board-filter__link--active:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 700;
}

/* 총 건수 안내 문구 */
.board-list__summary {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.board-list__summary strong {
    color: var(--color-primary-dark);
}

/* --------------------------------------------------------------------------
   2. 목록 테이블 (site.css 의 .table--list 확장)
   열: 번호 / 분류(뱃지) / 제목 / 작성자 / 작성일 / 조회
   작성자·조회 열의 모바일 숨김은 site.css 계약(.col-writer/.col-views)이 처리
   -------------------------------------------------------------------------- */
/* 모바일 기본값: 좌우 여백과 부가 열 폭을 줄여 제목이 최대한 넓게 보이도록.
   col-cat 은 가장 긴 뱃지("답변완료" 4글자 + 좌우 패딩/보더 ≈ 66px)가 넘치지 않는 폭이어야 한다.
   (min-width 로만 올리는 모바일 퍼스트 구성 — max-width 와 섞으면 639.5px 같은 소수 폭에서 둘 다 빗나간다) */
.board-list th,
.board-list td {
    padding: var(--space-3) var(--space-1);
}

.board-list .col-no {
    width: 40px;
}

.board-list .col-cat {
    width: 74px;
}

.board-list .col-date {
    width: 74px;
}

.board-list .col-title a {
    font-weight: 500;
}

.board-list .col-title a:hover,
.board-list .col-title a:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

/* 640px 이상: site.css 기본 폭/여백으로 되돌린다 */
@media (min-width: 640px) {
    .board-list th,
    .board-list td {
        padding: var(--space-3);
    }

    .board-list .col-no {
        width: 56px;
    }

    .board-list .col-cat {
        width: 84px;
    }

    .board-list .col-date {
        width: 96px;
    }
}

/* --------------------------------------------------------------------------
   3. 갤러리 카드 그리드 (/board/gallery)
   -------------------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}

.gallery-grid > li {
    min-width: 0;
}

/* a.card 를 그리드 셀 전체로 채운다 */
.gallery-card {
    height: 100%;
}

/* .card__media 의 aspect-ratio: 4/3 · object-fit: cover 는 site.css 에서 상속 */
.gallery-card .card__body {
    padding: var(--space-3);
    gap: var(--space-1);
}

.gallery-card .card__title {
    font-size: var(--font-size-sm);
}

.gallery-card .card__meta {
    font-size: var(--font-size-xs);
}

@media (min-width: 640px) {
    .gallery-grid {
        gap: var(--space-5);
    }

    .gallery-card .card__body {
        padding: var(--space-4);
    }

    .gallery-card .card__title {
        font-size: var(--font-size-base);
    }
}

/* --------------------------------------------------------------------------
   4. 게시글 상세 (/board/{slug}/{id})
   -------------------------------------------------------------------------- */
.board-view {
    border-top: 2px solid var(--color-primary);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.board-view__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-cream);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.board-view__meta-item b {
    font-weight: 600;
    color: var(--color-text);
}

/* 갤러리 등 이미지가 있는 글 */
.board-view__figure {
    padding: var(--space-5) var(--space-4) 0;
    text-align: center;
}

.board-view__figure img {
    border-radius: var(--radius);
}

.board-view__body {
    padding: var(--space-5) var(--space-4) var(--space-6);
}

.board-view__body p:last-child {
    margin-bottom: 0;
}

.board-view__actions {
    margin-top: var(--space-6);
}

@media (min-width: 640px) {
    .board-view__meta {
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-sm);
    }

    .board-view__figure {
        padding: var(--space-6) var(--space-5) 0;
    }

    .board-view__body {
        padding: var(--space-6) var(--space-5) var(--space-8);
    }
}

/* --------------------------------------------------------------------------
   5. 이전글 / 다음글 네비게이션
   -------------------------------------------------------------------------- */
.board-nav {
    margin-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.board-nav__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.board-nav__label {
    flex: 0 0 auto;
    width: 52px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.board-nav__link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}

.board-nav__link:hover,
.board-nav__link:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
}

.board-nav__none {
    flex: 1 1 auto;
    color: var(--color-text-muted);
}

@media (min-width: 640px) {
    .board-nav__label {
        width: 64px;
        font-size: var(--font-size-sm);
    }
}