/* ─────────── 게시판 (공지사항 / 1:1 문의 / 자주 묻는 질문) ─────────── */

/* 목록 상단 (총 건수 · 정렬 · 검색 · 필터) */
.table-top-container {
    padding-bottom: var(--spacing-bottom-md);
}
.table-top-container .util-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-4);
    padding-bottom: var(--padding-5);
    border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
}
.table-top-container .list-info {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    gap: var(--gap-4);
}
.table-top-container .total {
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-md);
    color: var(--color-font-neutral-default);
    font-weight: var(--font-weight-regular);
    line-height: 100%;
    letter-spacing: -0.0234rem;
}
.table-top-container .total b {
    font-weight: var(--font-weight-bold);
}
.table-top-container .color-primary {
    color: var(--color-font-theme-primary);
}
.table-top-container .table-util {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--gap-4);
}
.table-top-container .filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--gap-2);
    padding-top: var(--padding-5);
}
.filter-row .refresh-btn {
    height: var(--form-height-sm);
    padding: 0;
    margin-right: var(--gap-2);
}

/* 검색 (관리자 search-box 와 동일) */
.search-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-2);
    width: 20rem;
    max-width: 100%;
    height: var(--form-height-md);
    padding: 0 var(--form-padding-sm);
    border-radius: var(--form-radius-md);
    border: var(--border-1) solid var(--color-input-border);
    background: var(--color-input-surface);
}
.search-box:focus-within {
    border-color: var(--color-input-border-active);
}
.search-box .input {
    height: 100%;
    padding: 0 var(--padding-2);
    border: 0;
    background: transparent;
}
.search-box .input:focus-visible {
    border: 0;
    outline: none;
}
.search-box .search-btn {
    position: static;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-button-primary-surface);
    border-radius: var(--form-radius-md);
    background: var(--color-button-secondary-surface);
    transform: none;
}

/* 목록 테이블
 * - .board-table-wrap > table.board-table
 * - 칸 너비 : th.w80 / w120 / w160 / w200
 */
.board-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-top: var(--border-1) solid var(--color-border-neutral-default);
}
.board-table .th {
    height: 2.25rem;
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-2xsm);
    color: var(--color-font-neutral-default);
    font-weight: var(--font-weight-regular);
    text-align: left;
    line-height: 140%;
    letter-spacing: -0.0203rem;
    padding: var(--padding-3) var(--padding-5);
    border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
    background: var(--color-surface-neutral-gray);
}
.board-table .th.w80 {
    width: 5rem;
}
.board-table .th.w120 {
    width: 7.5rem;
}
.board-table .th.w160 {
    width: 10rem;
}
.board-table .th.w200 {
    width: 12.5rem;
}
.board-table .td {
    height: 3.5rem;
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-md);
    color: var(--color-font-neutral-default);
    font-weight: var(--font-weight-regular);
    line-height: 150%;
    letter-spacing: -0.0266rem;
    vertical-align: middle;
    padding: var(--padding-6) var(--padding-5);
    border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
}
.board-table .board-link {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
}
.board-table .board-link:hover {
    color: var(--color-font-neutral-strong);
    text-decoration: underline;
}
.board-table .status {
    justify-content: flex-start;
}

/* 상세 카드
 * - .board-view > .board-view-head(.badge + .board-view-title + .board-view-meta) + .board-view-body + .file-list
 */
.board-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xsm);
    padding: var(--form-padding-xlg);
    border: var(--border-1) solid var(--color-border-neutral-subtle);
    border-radius: var(--card-radius-lg);
    background: var(--color-surface-neutral-default);
}
.board-view + .btn-page {
    margin-top: var(--spacing-xsm);
}
.board-view-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-5);
    padding-bottom: var(--form-padding-lg);
    border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
}
.board-view-title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-display-sm);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0375rem;
    word-break: keep-all;
}
.board-view > .status {
    align-self: flex-start;
}

/* 메타 + 우측 버튼 (삭제 / 수정) */
.board-view-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-3);
    width: 100%;
}
.board-view-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-3);
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-md);
    color: var(--color-font-neutral-subtle);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 100%;
    letter-spacing: -0.0266rem;
}
.board-view-meta .dot {
    width: 0.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    margin: var(--number-5);
    border-radius: var(--number-max);
    background: var(--color-element-neutral-subtle);
}
.board-view-util {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
}

/* 답변 상태 + 안내 문구 */
.board-view-state {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-3);
}
.board-view-note {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-sm);
    color: var(--color-font-neutral-subtle);
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0234rem;
}
.board-view-note .ico {
    font-size: var(--icon-3);
}

/* 본문 */
.board-view-body {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-xlg);
    color: var(--color-font-neutral-default);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 140%;
    letter-spacing: -0.0313rem;
    word-break: keep-all;
}
.board-view-body p + p {
    margin-top: var(--gap-7);
}

/* 첨부파일 : 카드 안에서는 가로 꽉 채움 */
.board-view .file-list,
.board-view .file-list-item {
    max-width: none;
}
.board-view .file-list {
    max-height: none;
}

/* 관리자 답변 */
.board-answer {
    display: flex;
    flex-direction: column;
    gap: var(--gap-5);
    padding: var(--padding-7) var(--padding-8);
    border-radius: var(--radius-4);
    background: var(--color-surface-neutral-gray);
}
.board-answer-title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-xsm);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0266rem;
}
.board-answer .file-list {
    background: var(--color-surface-neutral-default);
}
.board-answer-date {
    font-family: var(--font-family-body);
    font-size: var(--font-size-label-md);
    color: var(--color-font-neutral-subtler);
    line-height: 100%;
    letter-spacing: -0.0266rem;
}

/* 자주 묻는 질문 : 분류 탭(.chip-list) + 아코디언(details) */
.faq-tab {
    gap: var(--gap-3);
    padding-bottom: var(--padding-6);
}
.faq-list {
    border-top: var(--border-1) solid var(--color-border-neutral-default);
}
.faq-item {
    border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-3);
    align-self: stretch;
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-sm);
    color: var(--color-font-neutral-strong);
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    padding: var(--padding-8) var(--form-padding-lg);
    word-break: keep-all;
    list-style: none;
    cursor: pointer;
}
.faq-question::-webkit-details-marker {
    display: none;
}
.faq-question .ico {
    flex-shrink: 0;
    font-size: var(--icon-4);
    color: var(--color-icon-neutral-default);
    transition: var(--transition-fast);
}
.faq-item[open] .faq-question .ico {
    transform: rotate(180deg);
}
.faq-answer {
    font-family: var(--font-family-body);
    font-size: var(--font-size-heading-sm);
    color: var(--color-font-neutral-default);
    line-height: 170%;
    letter-spacing: -0.0234rem;
    word-break: keep-all;
    padding: var(--padding-8) var(--form-padding-lg);
    background: var(--color-surface-neutral-gray);
}
.faq-answer p + p {
    margin-top: var(--gap-7);
}

/* 데이터 없음 / 회원 전용 안내 */
.board-empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-3);
    min-height: 32.375rem;
    padding: var(--spacing-md) 0;
    text-align: center;
}
.board-empty-ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--icon-5);
    color: var(--color-font-neutral-static-inverse);
    margin-bottom: var(--gap-5);
    border-radius: var(--radius-2);
    background: var(--color-element-theme-primary-subtle, var(--color-button-secondary-surface));
}
.board-empty-title {
    font-family: var(--font-family-title);
    font-size: var(--font-size-heading-md);
    color: var(--color-font-neutral-strong);
    font-weight: var(--font-weight-bold);
    line-height: 140%;
    letter-spacing: -0.0375rem;
}
.board-empty-desc {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body-lg);
    color: var(--color-font-neutral-subtle);
    line-height: 140%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
}
.board-empty .btn-page {
    margin-top: var(--spacing-top-lg);
}

/* 태블릿 : 고정 칸을 줄여 제목 칸 공간 확보 (table-layout: fixed 라 셀 min-width 는 적용 안 됨) */
@media (max-width: 1023px) {
    .board-table .th.w160,
    .board-table .th.w200 {
        width: 7.5rem;
    }
    .board-table .th.w80 {
        width: 4rem;
    }
}

/* 모바일 : 테이블 → 카드형 목록 */
@media (max-width: 767px) {
    /* table-util 래퍼를 풀어 정렬 버튼은 총 건수 옆, 검색창은 다음 줄 전체로 */
    .table-top-container .table-util {
        display: contents;
    }
    .table-top-container .search-box {
        flex-basis: 100%;
    }

    .board-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .board-table,
    .board-table tbody {
        display: block;
    }
    .board-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--gap-2) var(--gap-4);
        padding: var(--padding-5) var(--padding-2);
        border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
    }
    .board-table .td {
        height: auto;
        padding: 0;
        border: 0;
        font-size: var(--font-size-label-sm);
        color: var(--color-font-neutral-subtle);
    }
    /* 제목은 한 줄 전체 */
    .board-table .td-title {
        flex-basis: 100%;
        min-width: 0; /* flex 항목 기본값(min-width: auto) 때문에 긴 제목이 말줄임 없이 넘치는 것 방지 */
        font-size: var(--font-size-body-md);
        color: var(--color-font-neutral-strong);
    }
    /* 번호 칸은 숨김 */
    .board-table .td-num {
        display: none;
    }
    .board-table .td[data-label]::before {
        content: attr(data-label) ' ';
    }

    .board-view {
        padding: var(--card-padding-sm);
    }
}

/* 가운데 정렬 칸 (공지사항 목록 첨부파일 아이콘) - 개발 추가, 퍼블 원본에 없음 */
.board-table .th.is-center,
.board-table .td.is-center {
    text-align: center;
}