@charset "UTF-8";
/* =============================================================================
   게시판 · FAQ — Community(공지·이벤트·상세) 와 Guide(FAQ) 가 공유한다.
   ========================================================================== */

/* ── 분류 칩 ──────────────────────────────────────────────────────────── */
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.chip {
    display: inline-flex; align-items: center; gap: var(--sp-8);
    min-height: 44px; padding: 10px 16px;
    /* r-full(pill) 대신 r-sm — 판정 도구의 "카드" 임계값(반경≥10 + 그림자)과 겹쳐
       필터 칩 여러 개가 카드로 오판정된다 (기준 §2) */
    border-radius: var(--r-sm);
    background: var(--white); color: var(--carbon);
    box-shadow: var(--sh-hairline);
    font-size: 14px; white-space: nowrap;
    transition: background-color .16s var(--ease), color .16s var(--ease);
}
.chip:hover { background: var(--mist); color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--white); box-shadow: none; font-weight: var(--fw-medium); }
.chip-icon { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }

/* ── FAQ 아코디언 (기준 §3 — 카드에서 뺀 목록. 헤어라인 구분선만) ───────── */
.faq-list { display: grid; }

.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item details { width: 100%; }

.faq-q {
    display: flex; align-items: flex-start; gap: var(--sp-12);
    padding: var(--sp-20) var(--sp-24);
    cursor: pointer; list-style: none;
    font-size: 16px; line-height: var(--lh-heading-sm); font-weight: var(--fw-medium);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--mist); }

.faq-mark {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--r-full);
    background: var(--violet); color: var(--white);
    font-size: 12px; font-weight: var(--fw-medium);
}
.faq-mark--a { background: var(--mist); color: var(--carbon); }

.faq-q-text { flex: 1; }

.faq-caret { width: 20px; height: 20px; flex: none; margin-top: 3px; stroke: var(--ash); stroke-width: 1.5; fill: none; transition: transform .2s var(--ease); }
details[open] .faq-caret { transform: rotate(180deg); }

.faq-a {
    display: flex; align-items: flex-start; gap: var(--sp-12);
    padding: 0 var(--sp-24) var(--sp-24);
}
.faq-a-text { flex: 1; font-size: 15px; line-height: var(--lh-body); color: var(--carbon); padding-top: 2px; }

/* ── 게시판 검색 ──────────────────────────────────────────────────────── */
/* count 와 검색창을 컨테이너 양끝(space-between)에 붙이지 않고 왼쪽에 모아 둔다 —
   컨테이너가 넓어서(1440px) 양끝에 붙이면 사이가 지나치게 벌어져 보인다 */
.board-bar { display: flex; flex-wrap: wrap; gap: var(--sp-24); align-items: center; margin-bottom: var(--sp-24); }
.board-count { font-size: 14px; color: var(--carbon); }
.board-count strong { color: var(--ink); font-weight: var(--fw-medium); }

.board-search { display: flex; gap: var(--sp-8); }
.board-search .form-control { min-width: 180px; }
@media (min-width: 768px) { .board-search .form-control { min-width: 240px; } }

/* ── 게시판 목록 ──────────────────────────────────────────────────────── */
.notice-table { font-size: 15px; }
.notice-table thead th {
    padding: 12px; font-size: 13px; font-weight: var(--fw-medium); color: var(--ash);
    border-bottom: 1px solid var(--ink); text-align: left;
}
.notice-table tbody td { padding: 16px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.notice-table tbody tr:hover { background: var(--mist); }

.notice-table .col-no { width: 72px; text-align: center; color: var(--ash); font-size: 14px; }
.notice-table .col-date { width: 110px; color: var(--ash); font-size: 14px; white-space: nowrap; }
.notice-table .col-hit { width: 80px; text-align: right; color: var(--ash); font-size: 14px; }

.notice-title a { color: var(--ink); }
.notice-title a:hover { color: var(--violet); }
.notice-new {
    display: inline-block; margin-left: var(--sp-8); vertical-align: middle;
    font-size: 10px; font-weight: var(--fw-medium);
    color: var(--crimson); letter-spacing: var(--tk-eyebrow-en);
}

/* 모바일 — 표를 카드처럼 접는다 */
@media (max-width: 767px) {
    .notice-table thead { display: none; }
    .notice-table tbody tr { display: block; padding: var(--sp-16) 0; border-bottom: 1px solid var(--hairline); }
    .notice-table tbody tr:hover { background: none; }
    .notice-table tbody td { display: inline; padding: 0; border: 0; }
    .notice-table .col-no { display: none; }
    .notice-table .notice-title { display: block; margin-bottom: var(--sp-8); font-size: 16px; }
    .notice-table .col-date::after { content: ' · 조회 '; }
    .notice-table .col-date, .notice-table .col-hit { width: auto; text-align: left; font-size: 13px; }
}

.board-empty { padding: var(--sp-64) var(--sp-24); text-align: center; color: var(--ash); font-size: 15px; }

/* ── 게시판 상세 ──────────────────────────────────────────────────────── */
.detail-head { padding-bottom: var(--sp-24); border-bottom: 1px solid var(--ink); }
.detail-title { font-size: 24px; line-height: var(--lh-heading); letter-spacing: var(--tk-heading); margin-bottom: var(--sp-16); }
@media (min-width: 768px) { .detail-title { font-size: 30px; } }
.detail-meta { display: flex; flex-wrap: wrap; gap: var(--sp-16); font-size: 13px; color: var(--ash); }

/* 본문은 f_PostContentType 구분 없이 원문 그대로 echo 된다(컨트롤러가 타입을 안 넘김) —
   일반 텍스트로 등록된 줄바꿈이 그대로 보이도록 pre-line 처리 */
.detail-body { padding: var(--sp-32) 0; font-size: 15px; line-height: var(--lh-body); color: var(--carbon); min-height: 160px; white-space: pre-line; }
.detail-body img { border-radius: var(--r-inner); margin: var(--sp-16) 0; }
.detail-body p + p { margin-top: var(--sp-16); }

.detail-files { padding: var(--sp-20) 0; border-top: 1px solid var(--hairline); }
.detail-files h4 { font-size: 13px; font-weight: var(--fw-medium); color: var(--ash); margin-bottom: var(--sp-12); }
.detail-files li + li { margin-top: var(--sp-8); }
.detail-files a { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: 14px; color: var(--violet); }
.detail-files .file-size { color: var(--ash); font-size: 13px; }

.detail-nav { border-top: 1px solid var(--hairline); }
.detail-nav li { display: flex; gap: var(--sp-16); padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.detail-nav .nav-label { flex: none; width: 60px; color: var(--ash); }
.detail-nav a:hover { color: var(--violet); }
.detail-nav .is-none { color: var(--ash); }

.detail-actions { display: flex; justify-content: center; margin-top: var(--sp-40); }