/* 에디터 본문 글꼴 (무료 웹폰트 - 본문을 보여 주는 화면이 모두 이 파일을 불러옴) - 개발 추가, 퍼블 원본에 없음 */
@import url('../../commons/editor-fonts.css');

/* ─────────── 게시판 (공지사항 / 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: 1.4; /* 단위 없이 : 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;
    font-size: 3rem;
    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-style: normal;
    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);
    text-align: center;
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 180%;
    letter-spacing: -0.0297rem;
    word-break: keep-all;
}
.board-empty .btn-page {
    margin-top: var(--spacing-top-lg);
}

.board-empty .btn-page > .btn-base {
    max-width: 10rem;
    width: 100%;
}

/* 태블릿 : 고정 칸을 줄여 제목 칸 공간 확보 (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-top-container .table-util {
        display: contents;
    }
    .table-top-container .search-box {
        flex-basis: 100%;
    }
    .btn-inquiry {
        width: 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: flex-start;
        padding-bottom: var(--padding-5);
        border-bottom: var(--border-1) solid var(--color-border-neutral-subtler);
    }
    .board-table .td {
        display: block;
        width: 100%;
        height: auto;
        padding: var(--padding-2) var(--padding-6);
        border: 0;
        line-height: 140%;
    }
    .board-table .td-title {
        order: -1;
        min-width: 0;
        padding: var(--padding-6);
        font-family: var(--font-family-title);
        font-size: var(--font-size-heading-xsm);
    }
    .board-table .td-btn {
        width: auto;
        padding: var(--padding-3) 0 var(--padding-3) var(--padding-6);
    }
    .board-table .td-btn + .td-btn {
        padding-left: var(--gap-2);
    }
    .board-table .td-num {
        display: none;
    }
    .board-table .td[data-label]::before {
        content: attr(data-label) ': ';
    }

    .board-view-head {
        gap: var(--gap-3);
    }
    .board-view-title {
        line-height: 130%;
    }
    .board-view-body p + p {
        margin-top: var(--number-4);
    }

    .board-view .file-list {
        border-color: var(--color-border-neutral-default);
        border-radius: var(--radius-5);
    }
    .board-view .file-list-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--gap-3);
        padding: var(--padding-6) var(--padding-5);
    }
    .board-view .file_download-btn {
        align-self: flex-end;
    }

    .board-view + .btn-page {
        margin-top: var(--spacing-top-xlg);
    }
}

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

/* 에디터 본문 기본 목록 : 글머리 기본·번호 1. 은 인라인 list-style-type 이 없어 reset.css 의 list-style: none 에 표시가 사라짐 → 브라우저 기본 모양으로 - 개발 추가, 퍼블 원본에 없음 */
.jm-content ul,
.jm-content ol {
    list-style: revert;
}
/* 에디터 본문 아래첨자·위첨자 : reset.css 의 vertical-align: baseline 에 위치가 사라짐 → 브라우저 기본으로 - 개발 추가, 퍼블 원본에 없음 */
.jm-content sub,
.jm-content sup {
    vertical-align: revert;
}
/* 에디터 본문 넘침 : 긴 주소처럼 끊을 곳 없는 글자는 줄바꿈 - 개발 추가, 퍼블 원본에 없음
   줄 간격 : 감싸는 본문 클래스가 없는 화면(싱글페이지·정회원 안내)은 reset.css 의 body line-height: 1 을 물려받아 줄이 붙음
   → 게시판 상세 본문(.board-view-body)·관리자 에디터와 같은 1.4 (단위 없이 : 큰 제목도 글자 크기에 맞춰 줄 간격이 늘어나게) */
.jm-content {
    overflow-wrap: break-word;
    line-height: 1.4;
}
/* 상세 제목·본문·FAQ 넘침 : keep-all 만 있어 띄어쓰기 없는 긴 값(URL 등)이 화면을 가로로 늘림 → 끊을 곳 없는 값만 칸 끝에서 끊음 - 개발 추가, 퍼블 원본에 없음 (2026-11-04)
   1:1 문의 상세 본문은 jm-content 가 없고 제목·본문 모두 사용자가 직접 입력 (anywhere : flex 안 제목도 폭을 넘지 않게) */
.board-view-title,
.board-view-body,
.faq-question,
.faq-answer {
    overflow-wrap: anywhere;
}
@media (max-width: 767px) {
    /* 모바일 : 옛 글(한글 문서 붙여넣기)의 고정 폭 표를 본문 폭에 맞춤. 칸이 많아 그래도 넘치면 본문 상자 안에서만 가로 스크롤 (화면 전체는 밀리지 않게) */
    .jm-content {
        overflow-x: auto;
    }
    .jm-content table {
        width: 100% !important;
        table-layout: auto;
    }
    .jm-content col,
    .jm-content td,
    .jm-content th {
        width: auto !important;
    }
    .jm-content td,
    .jm-content th {
        overflow-wrap: anywhere;
    }
}

/* 상단 고정 글 '공지' 배지 (기획 AWEB_090.030.010.000 ⑧ 리스트형은 번호 자리) - 개발 추가, 퍼블 원본에 없음
   모바일 : 번호 칸은 숨기지만 고정 글은 배지를 제목 위에 보임 (모바일도 동일 적용) */
@media (max-width: 767px) {
    .board-table .td-num.is-fix {
        display: block;
        order: -2;
        padding-bottom: 0;
    }
}
/* 갤러리형은 썸네일 왼쪽 위 (기획 AWEB_090.030.010.000 ⑧) - 게시판 갤러리·대회·행사 갤러리 공통 */
.event-img {
    position: relative;
}
.event-img .badge.is-fix {
    position: absolute;
    top: var(--number-7);
    left: var(--number-7);
    z-index: 1;
}