@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);
}

/* 34px 이었다. 게시판 분류(전체·공지·안내·이벤트)는 눌러서 이동하는 것이다. */
.board-filter__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    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);
}

/* 상품문의 목록 머리: [총 N건] ... [문의 남기기].
   건수와 버튼을 같은 줄 양끝에 두면 목록의 첫 줄에 눈이 한 번만 닿는다.
   좁은 화면에서는 버튼이 폭 전체를 쓰게 내린다 — 어르신 손가락 기준이다. */
.board-list__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.board-list__actions .board-list__summary {
    margin-bottom: 0;
}

.board-list__actions .btn {
    flex: 1 1 100%;
}

@media (min-width: 640px) {
    .board-list__actions .btn {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   1-1. 상품문의 남기기 폼

   ★ 받는 값이 제목·내용 둘뿐이라 별도 격자를 두지 않는다. 구매후기 폼과 같은 판단이다.
   -------------------------------------------------------------------------- */
.qna-form__guide {
    margin-bottom: var(--space-5);
}

.qna-form__guide p + p {
    margin-top: var(--space-2);
}

.qna-form__text {
    /* 세로로 늘리는 것만 허용한다. 가로로 늘리면 페이지 격자를 뚫고 나간다. */
    resize: vertical;
    min-height: 12rem;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   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-tint);
    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);
    }
}

/* --------------------------------------------------------------------------
   농원 답변(상품문의 답글)
   원문과 확실히 구분되어야 한다 — 손님이 "이게 답인가" 를 한눈에 알아야 하므로
   왼쪽에 굵은 색 띠를 두고 배경을 깐다.
   -------------------------------------------------------------------------- */
.board-reply {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-primary-light);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.board-reply__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
}

.board-reply__label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.board-reply__meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 평문 + 줄바꿈 보존. HTML 은 해석하지 않는다. */
.board-reply__body {
    white-space: pre-line;
    font-size: var(--font-size-base);
    line-height: 1.9;
    color: var(--color-text);
    word-break: break-word;
}

/* ==========================================================================
   게시판(공지 · 상품문의 · 갤러리) — 목업 테마 (2026-09-24)

   목업 189~228 · 1383~1453 행: 흰 둥근 카드 안의 목록, 상태 알약(답변완료 초록 · 답변대기 호박),
   농원 답변은 호박색 상자. 목업은 목록 안에서 펼쳐 읽지만 여기는 글마다 보기 화면이 있다 — 그 흐름은 그대로 둔다.
   ========================================================================== */

/* 목록: 표 전체를 흰 카드 한 장으로 */
.board-list {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.board-list thead th {
    background: #f3f4f6;
    color: #374151;
    font-weight: 700;
}

.board-list tbody tr {
    transition: background var(--transition);
}

.board-list tbody tr:hover {
    background: var(--color-bg);
}

/* 상태 알약 */
.badge--answered {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;                             /* 6.5:1 */
}

.badge--waiting {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;                             /* 6.4:1 */
}

/* 분류 필터: 알약 */
.board-filter__link {
    border-radius: var(--radius-pill);
}

/* 글 보기: 흰 카드 */
.board-view {
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* 농원 답변: 호박색 상자 */
.board-reply {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg);
}

.board-reply__label {
    color: #92400e;
    font-weight: 800;
}

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