/* =========================================================
   pages/free-board.css — 자유게시판 목록 전용
   (안내박스·버튼·페이지번호는 components.css 의 --compact / -sm / --soft 변형 사용)
   ========================================================= */

/* 서브헤더 아래 본문 시작 여백 */
:root { --content-top: 60px; }

/* ---------- 상단: 총 건수 / 검색 / 글쓰기 ---------- */
.board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.board-top__count { font-size: 0.95rem; color: var(--color-text-sub); }
.board-top__count strong { color: var(--color-primary); }
.board-top__controls { display: flex; gap: 10px; align-items: center; }
.board-top__search { display: flex; gap: 5px; }
.board-top__field { padding: 8px 12px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); font-size: 0.9rem; outline: none; }
.board-top__field--keyword:focus { border-color: var(--color-primary); }

/* ---------- 목록 표 ---------- */
.board-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--color-primary); text-align: center; }
.board-table__col--no { width: 8%; }
.board-table__col--author { width: 12%; }
.board-table__col--date { width: 15%; }
.board-table__col--views { width: 10%; }

.board-table__head { background: var(--color-gray-50); padding: 15px 10px; font-weight: 700; color: var(--color-text); border-bottom: 1px solid var(--color-border-input); }
.board-table__cell { padding: 15px 10px; border-bottom: 1px solid var(--color-border); color: var(--color-text-sub); font-size: 0.95rem; }
.board-table__title { text-align: left; padding-left: 20px; }
.board-table__link { color: #222; font-weight: 600; transition: color 0.2s; }
.board-table__link:hover { color: var(--color-primary); text-decoration: underline; }
.board-table__empty { padding: 50px 0; color: var(--color-text-faint); }
.board-table__comments { margin-left: 4px; color: var(--color-danger); font-size: 0.85rem; font-weight: 700; }

/* 공지 (관리자가 고정한 글) — 맨 위, 연한 배경 */
.board-table__row--pinned { background: #fff8f8; }
.board-table__row--pinned .board-table__link { font-weight: 800; }
.board-table__pin { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-alert); color: #fff; font-size: 0.78rem; font-weight: 800; }
.board-table__pin-icon { margin-right: 4px; }

/* ---------- 모바일: 표 → 카드형 목록 ---------- */
@media screen and (max-width: 768px) {
    .content-wrap { padding: 0 5px 15px; }

    .board-top { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 5px; }
    .board-top__controls { width: 100%; flex-direction: column; gap: 10px; }
    .board-top__search { width: 100%; }
    .board-top__field { flex: 1; min-width: 0; padding: 10px; }
    .board-top__field--keyword { flex: 3; }
    .board-top .btn--search-sm { flex: 0 0 auto; min-width: 60px; padding: 10px 12px; white-space: nowrap; }
    .board-top .btn--write-sm { width: 100%; text-align: center; margin-top: 0; }

    /* 표를 블록으로 풀어서 한 줄씩 쌓기 */
    .board-table, .board-table tbody, .board-table__row, .board-table__cell { display: block; width: 100%; }
    .board-table thead { display: none; }
    .board-table { text-align: left; }
    .board-table__row { padding: 16px 5px; border-bottom: 1px solid var(--color-border); position: relative; text-align: left; }
    .board-table__row--pinned { padding-left: 8px; }
    .board-table__cell { padding: 0; border: none; text-align: left; }
    .board-table__no { display: none; }

    .board-table__title { font-size: 1.05rem; margin-bottom: 8px; padding-right: 30px; white-space: normal; line-height: 1.4; }
    .board-table .badge--round { position: absolute; top: 18px; right: 5px; margin: 0; }  /* N 뱃지 오른쪽 위 */

    /* 작성자 | 등록일 | 조회 를 한 줄로 */
    .board-table__author, .board-table__date, .board-table__views { display: inline-block; width: auto; font-size: 0.85rem; color: var(--color-text-faint); }
    .board-table__author::after, .board-table__date::after { content: '|'; margin: 0 6px; color: var(--color-border-light); }
    .board-table__views::before { content: '조회 '; }
}