/* ===========================================================================
   게시판 (공지사항 등) 목록 / 상세
   시안 35:713 기준. 시안 폰트는 Pretendard/Poppins 지만 사이트 공통인
   Noto Sans KR / Montserrat 로 맞춘다(게시판만 다른 폰트를 쓸 이유가 없다).
   =========================================================================== */

.board {
    padding: 100px 0 120px;
}

.board__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--c-brown);
}

/* 상세 페이지의 말머리 */
.board__eyebrow {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--c-brown);
}

.board__body {
    margin-top: 70px;
}

.board__total {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1;
    color: #9c9c9c;
}

/* 제목 아래 안내 문구 (지식 백과) */
.board__head {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.board__lead {
    font-size: 20px;
    line-height: 1.7;
    letter-spacing: -0.8px;
    text-align: center;
    color: var(--c-body);
}

/* 카테고리 탭 — 시안 38:1510 ------------------------------------------------- */
.faq-tabs {
    margin-top: 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.faq-tabs__item {
    min-width: 100px;
    width: 120px;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent;

    font-size: 16px;
    line-height: 1;
    color: #595959;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.faq-tabs__item:hover {
    color: var(--c-brown-mid);
}

.faq-tabs__item.is-active {
    border-bottom-color: #553b26;
    font-weight: 500;
    color: #553b26;
}

/* 카테고리 탭이 있으면 목록 위 여백은 탭이 맡는다 */
.faq-tabs + .board__body {
    margin-top: 70px;
}

/* 아코디언 — 시안 38:1536 (행 62 / 카테고리 180 / 화살표 62) -------------------
   <details> 라 JS 없이 열리고, 답변 HTML 이 처음부터 문서에 들어 있어 크롤러도 읽는다.
   ---------------------------------------------------------------------------- */
.faq {
    border-bottom: 1px solid #e4e4e4;
}

.faq-list > li:first-child .faq {
    border-top: 1px solid #e4e4e4;
}

.faq__q {
    display: flex;
    align-items: center;
    min-height: 62px;
    cursor: pointer;
    list-style: none;          /* 기본 삼각형 마커 제거 */
}

.faq__q::-webkit-details-marker {
    display: none;
}

.faq__q:hover .faq__title {
    color: var(--c-brown-mid);
}

.faq__cat {
    flex: 0 0 180px;
    padding: 0 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #553b26;
}

.faq__title {
    flex: 1;
    min-width: 0;
    padding: 12px 10px;
    font-size: 18px;
    line-height: 1.5;
    color: #595959;
    transition: color 0.2s ease;
}

.faq__arrow {
    flex: 0 0 62px;
    text-align: center;
    font-size: 24px;
    color: #595959;
    transition: transform 0.3s ease;
}

.faq[open] .faq__arrow {
    transform: rotate(180deg);
}

.faq[open] .faq__title {
    font-weight: 500;
    color: var(--c-text);
}

/* 답변 — 질문 텍스트와 같은 지점에서 시작 */
.faq__a {
    padding: 8px 72px 32px 190px;
    background-color: #fbfaf9;
}

.faq-list__empty {
    padding: 100px 0;
    text-align: center;
    color: #9c9c9c;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

/* 목록 표 ------------------------------------------------------------------- */
.board-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 18px;
    color: #595959;
}

/* reset-css 가 td/th 까지 vertical-align: baseline 으로 깔아버려서
   height 를 준 셀의 글자가 위에 붙는다. 표 기본값으로 되돌린다. */
.board-table th,
.board-table td {
    height: 62px;
    padding: 0 8px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #e4e4e4;
}

.board-table thead th {
    border-top: 1px solid #e4e4e4;
    font-weight: 400;
}

/* 제목만 좌측 정렬 + 한 줄 말줄임 (시안: 셀 안쪽 10px)
   td 를 붙여 위 `.board-table td { text-align: center }` 보다 특이도를 높인다.
   클래스만 쓰면 (0,1,0) 이라 (0,1,1) 인 가운데 정렬에 밀려 제목이 가운데로 간다. */
.board-table td.board-table__subject {
    padding: 0 10px;
    text-align: left;
}

.board-table__subject a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.board-table__subject a:hover {
    color: var(--c-brown-mid);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 상단고정 글은 번호 자리에 '공지' */
.board-table .is-pinned .board-table__no {
    font-weight: 500;
    color: var(--c-brown-mid);
}

.board-table .is-pinned .board-table__subject a {
    font-weight: 500;
    color: var(--c-text);
}

.board-table__empty {
    height: 180px;
    color: #9c9c9c;
}

/* 카드 목록 (의료진 칼럼 등) — 시안 28:512 ------------------------------------
   1170 / 3열 / gap 48 => 카드 358. 이미지 230 + 본문 290 = 520
   ---------------------------------------------------------------------------- */
.card-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.card {
    border-radius: 12px;
    overflow: hidden;
}

.card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card__thumb {
    display: block;
    width: 100%;
    height: 230px;
    object-fit: cover;
    background-color: #f3efec;
    transition: transform 0.4s ease;
}

/* 썸네일도 본문 이미지도 없는 글. 시안의 분홍 자리표시자 대신 브랜드 톤 단색 */
.card__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3efec;
}

.card__thumb--empty::after {
    content: 'NO IMAGE';
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: #c8bdb3;
}

.card__link:hover .card__thumb {
    transform: scale(1.04);
}

.card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 290px;
    padding: 32px;
    background-color: #f8f8f8;
}

/* 제목/본문은 줄 수를 고정해 카드 높이를 맞춘다 */
.card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    font-size: 22px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.4px;
    color: #000;
}

.card__excerpt {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: -0.8px;
    color: #535353;
}

.card__date {
    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    color: #9c9c9c;
}

.card__link:hover .card__title {
    color: var(--c-brown-mid);
}

.card-list__empty {
    grid-column: 1 / -1;
    padding: 100px 0;
    text-align: center;
    color: #9c9c9c;
}

/* 치료사례 카드 — 시안 33:68 -------------------------------------------------
   1170 / 2열 / gap 48 => 카드 561. 이미지 274, 본문은 제목+날짜만이라 높이 고정 없음
   ---------------------------------------------------------------------------- */
.card-list--case {
    grid-template-columns: repeat(2, 1fr);
}

.card-list--case .card__thumb {
    height: 274px;
}

.card-list--case .card__body {
    height: auto;
}

/* 배지를 얹을 기준 박스 — 썸네일은 hover 시 scale 되지만 배지는 제자리에 있어야 한다 */
.card__media {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 시안 33:214 — 밑바닥 74px 그라데이션이 배지 가독성을 받친다 */
.card__media::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 74px;
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.card__lock {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 80px;
    background-color: rgba(0, 0, 0, 0.5);

    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.36px;
    white-space: nowrap;
    color: #fff;
}

.card__lock .xi-lock {
    font-size: 20px;
}

/* reset 의 [hidden]{display:none} 과 위 display:flex 가 특이도 동점이라 뒤에 온 flex 가 이긴다.
   로그인 시 main.js 가 hidden 을 걸어도 안 사라지므로 여기서 못을 박는다. */
.card__lock[hidden] {
    display: none;
}

/* 페이지네이션 --------------------------------------------------------------- */
.pager {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.pager__item {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;

    font-family: 'Montserrat', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #999;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.pager__item:hover {
    background-color: #f3f0ed;
    color: var(--c-brown-mid);
}

.pager__item.is-current {
    font-weight: 600;
    color: #212529;
}

/* 빵부스러기 (상세) --------------------------------------------------------- */
.board__crumb {
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #9c9c9c;
}

.board__crumb > * + *::before {
    content: '/';
    margin-right: 8px;
    color: #d5d5d5;
}

.board__crumb a:hover {
    color: var(--c-brown-mid);
}

.board__crumb span {
    max-width: 40%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #595959;
}

/* 상세 --------------------------------------------------------------------- */
.post {
    margin-top: 70px;
    border-top: 1px solid #e4e4e4;
}

.post__head {
    padding: 28px 10px;
    border-bottom: 1px solid #e4e4e4;
}

.post__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--c-text);
}

.post__meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    font-size: 16px;
    color: #9c9c9c;
}

.post__meta dt {
    display: inline;
}

.post__meta dt::after {
    content: '';
    display: inline-block;
    width: 6px;
}

.post__meta dd {
    display: inline;
    margin: 0 12px 0 0;
    color: #595959;
}

/* 본문 껍데기만 여기서 잡고, 안쪽 서식은 editor-content.css 가 담당한다 */
.post__body {
    min-height: 240px;
    padding: 36px 10px;
    border-bottom: 1px solid #e4e4e4;
}

.post__file {
    padding: 16px 10px;
    border-bottom: 1px solid #e4e4e4;
    font-size: 16px;
    color: #9c9c9c;
}

.post__back {
    margin-top: 40px;
    text-align: center;
}

.post__back a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 52px;
    padding: 0 24px;
    border-radius: 4px;
    background-color: var(--c-brown-mid);
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    transition: background-color 0.2s ease;
}

.post__back a:hover {
    background-color: var(--c-brown-dark);
}

/* 반응형 — 좁아지면 작성자/조회수를 접는다 --------------------------------- */
@media (max-width: 1230px) {
    .card-list {
        gap: 30px;
    }

    .card__body {
        height: 260px;
        padding: 24px;
        gap: 12px;
    }

    .card__title {
        font-size: 19px;
    }

    .card__excerpt {
        font-size: 17px;
        letter-spacing: -0.5px;
    }

    .card__date {
        font-size: 16px;
    }
}

@media (max-width: 900px) {
    .faq__cat {
        flex-basis: 110px;
        font-size: 15px;
    }

    .faq__title {
        font-size: 16px;
    }

    .faq__arrow {
        flex-basis: 44px;
        font-size: 20px;
    }

    .faq__a {
        padding: 8px 44px 28px 120px;
    }

    .card-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .board-table {
        table-layout: auto;
        font-size: 16px;
    }

    .board-table col {
        width: auto !important;
    }

    .board-table th:nth-child(3),
    .board-table td:nth-child(3),
    .board-table th:nth-child(5),
    .board-table td:nth-child(5) {
        display: none;
    }
}

@media (max-width: 768px) {
    .board {
        padding: 60px 0 70px;
    }

    .board__title,
    .board__eyebrow {
        font-size: 28px;
    }

    .board__body,
    .post {
        margin-top: 35px;
    }

    /* 표를 그대로 두면 5칸이 모바일 폭에 안 들어간다. 행을 격자로 바꿔
       왼쪽에 번호, 오른쪽에 제목/작성일을 위아래로 쌓는다.
       작성자·조회수는 위 900 블록에서 이미 숨겨져 있다(특이도가 높아 아래 display 에 안 밀린다). */
    .board-table,
    .board-table tbody,
    .board-table tr,
    .board-table td {
        display: block;
    }

    /* 열 이름이 화면에 안 보이니 헤더 행은 접는다. caption 이 표 설명을 대신한다 */
    .board-table thead {
        display: none;
    }

    .board-table tr {
        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-areas:
            'no subject'
            'no date';
        align-items: center;
        gap: 8px 4px;
        padding: 14px 0;
        border-bottom: 1px solid #e4e4e4;
    }

    .board-table tbody tr:first-child {
        border-top: 1px solid #e4e4e4;
    }

    .board-table td {
        height: auto;
        padding: 0;
        border-bottom: 0;
    }

    .board-table__no {
        grid-area: no;
        font-size: 14px;
    }

    /* 데스크톱 좌우 10px 를 걷어내야 아래 작성일과 글머리가 맞는다.
       그 규칙이 td 를 달고 있으니 여기도 똑같이 달아야 이긴다. */
    .board-table td.board-table__subject {
        grid-area: subject;
        /* 격자 아이템 기본값(min-width:auto)이면 긴 제목이 번호 칸을 밀어낸다 */
        min-width: 0;
        padding: 0;
        font-size: 17px;
    }

    /* 작성일 — 표에서는 네 번째 칸이다 */
    .board-table td:nth-child(4) {
        grid-area: date;
        text-align: left;
        font-size: 13px;
        color: #9c9c9c;
    }

    .board-table__empty {
        grid-column: 1 / -1;
        height: auto;
        padding: 60px 0;
    }

    .board__head {
        gap: 14px;
    }

    .board__lead {
        font-size: 15px;
        letter-spacing: -0.5px;
    }

    .faq-tabs {
        margin-top: 35px;
    }

    .faq-tabs + .board__body {
        margin-top: 35px;
    }

    .faq-tabs__item {
        min-width: 0;
        width: auto;
        height: 36px;
        padding: 0 14px;
        font-size: 15px;
    }

    /* 좁은 화면에서는 카테고리를 질문 위로 올린다 */
    .faq__q {
        flex-wrap: wrap;
        padding: 14px 0;
    }

    .faq__cat {
        flex: 0 0 auto;
        order: -1;
        width: 100%;
        padding: 0 0 4px;
        text-align: left;
        font-size: 13px;
    }

    .faq__title {
        flex: 1;
        padding: 0;
    }

    .faq__arrow {
        flex: 0 0 32px;
    }

    .faq__a {
        padding: 12px 0 24px;
    }

    /* 모바일은 카드가 아니라 목록 행이다 — 작은 썸네일 왼쪽, 글 오른쪽.
       칼럼(.card__thumb 가 바로 자식)과 치료사례(.card__media 로 한 겹 감쌈) 둘 다 걸린다. */
    .card-list,
    .card-list--case {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card__link {
        flex-direction: row;
        align-items: stretch;
    }

    /* 높이를 못 박으면 제목이 두 줄인 행에서 이미지 아래가 비어 보인다.
       행 높이에 맞춰 늘리고 object-fit 이 잘라내게 둔다. */
    .card__media,
    .card__link > .card__thumb {
        flex: 0 0 110px;
        align-self: stretch;
        width: 110px;
        height: auto;
        min-height: 110px;
    }

    /* .card__media 는 늘어난 뒤에도 높이가 % 로 안 내려온다. 통째로 깔아버린다(치료사례) */
    .card-list--case .card__thumb {
        position: absolute;
        inset: 0;
        width: 100%;
        height: auto;
    }

    .card__thumb--empty::after {
        font-size: 11px;
        letter-spacing: 1px;
    }

    /* 110px 폭에 문구가 안 들어간다. 자물쇠만 남겨 잠금 표시는 유지한다 */
    .card__lock {
        left: auto;
        right: 6px;
        bottom: 6px;
        transform: none;
        padding: 4px;
        gap: 0;
    }

    .card__lock-text {
        display: none;
    }

    .card__lock .xi-lock {
        display: block;
        font-size: 14px;
    }

    .card__media::after {
        height: 40px;
    }

    .card__body {
        justify-content: center;
        /* flex 아이템 기본값(min-width:auto)이면 긴 제목이 행을 밀어낸다 */
        min-width: 0;
        height: auto;
        min-height: 110px;
        gap: 6px;
        padding: 12px 14px;
    }

    .card__title {
        font-size: 16px;
        line-height: 1.4;
    }

    /* 행 높이가 썸네일(110px)을 넘지 않게 본문은 두 줄까지 */
    .card__excerpt {
        flex: none;
        -webkit-line-clamp: 2;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: -0.3px;
    }

    .card__date {
        font-size: 13px;
    }

    .pager {
        margin-top: 35px;
    }

    .post__title {
        font-size: 20px;
    }

    .post__meta,
    .post__file {
        font-size: 14px;
    }

    .post__body {
        min-height: 160px;
        padding: 24px 6px;
    }
}