/*
 * 커뮤니티 8개 화면(공지·Q&A·FAQ·뉴스의 목록/상세, Q&A 작성) 공용.
 *
 * roadmap/list.jsp + roadmap/detail.jsp 가 roadmap.css 한 벌을 같이 쓰는 것과 같은 이유로
 * 한 파일로 묶는다 — 8개 화면이 사실상 레이아웃 3종(목록, 상세 기사, 작성 폼)뿐이라
 * 화면마다 쪼개면 대부분 빈 파일이 된다. 탭·목록 줄·아코디언·답변 스레드처럼 진짜
 * 재사용되는 조각은 theme/components.css 23) 절에 있고, 이 파일은 커뮤니티만의 배치
 * 보정(탭 줄 옆 액션 버튼)만 담는다.
 */

/* 탭 줄 + 우측 액션을 한 줄에 둔다(멘토링 목록 전용, mentoring-list.jsp). Q&A 목록은
   2026-08-15 QA38 재지적으로 액션이 탭 줄이 아니라 "전체 N건" 줄로 옮겨가 더 이상 이 클래스를
   쓰지 않는다(.result-bar + .community-toolbar__actions 참고, 아래). 탭 자체의 모양은
   theme/components.css 23-1) 이 정본이다. */
.community-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mili-space-4);
    margin-bottom: var(--mili-space-5);
}

/* 탭이 남는 폭을 먹고 버튼은 오른쪽 끝에 붙는다. 탭의 아래 여백은 이 줄이 대신 갖는다. */
.community-toolbar .tab-line {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.community-toolbar__action {
    flex: 0 0 auto;
}

/* QA38(2026-08-15) — Q&A 목록 "전체 N건" 줄(.result-bar) 오른쪽의 최신순+질문하기 묶음.
   .community-toolbar__actions/__sort 는 2026-09-10 마이페이지(작성한 게시글)에도 필요해져
   theme/components.css 5-4)절(.result-bar 바로 아래)로 옮겼다 — 정본은 그쪽. */

/* 2026-08-15 QA20 재지적 — 시안(node 1679:21591) 실측 borderRadius 8. .mypage-panel(각진+
   rgba(fg,0.02) 옅은 배경)은 다른 11개 화면(마이페이지·멘토링·온보딩 등)이 함께 쓰는 공용
   클래스라 그대로 두고, Q&A 작성 폼에만 이 클래스를 얹어 시안처럼 뚜렷한 카드(표면색·테두리·
   둥근 모서리)로 보정한다. 반경은 8(시안 실측)보다 기존 카드 계열(.badge-card 등)과 결을
   맞춘 --mili-radius-card(12px)를 쓴다 — 새 값을 만들지 않고 가장 가까운 "카드" 칸에 배정. */
.qna-form__panel {
    border-radius: var(--mili-radius-card);
    border-color: var(--mili-border);
    /* 2026-08-26 Figma(node 2224:92666) 실측 — 카드는 테두리만 있고 배경이 없다(투명).
       예전엔 카드가 --mili-surface-raised(#1E2227)로 입력창(--mili-surface #15181C)보다 밝아
       위계가 시안과 뒤집혀 있었다. 시안은 카드가 페이지 배경(#0e1013)이고 입력창이 그보다
       한 단계 밝다. */
    background: transparent;
}

/* 수정 화면(qna-edit.jsp)은 이 카드를 세 장 쓴다 — 본문 폼 / 기존 첨부 / 첨부 추가+버튼.
   폼 카드에 아래 여백이 없어 기존 첨부 블록이 바로 붙어 있었다(실측 0px). 인접한 카드끼리만
   간격을 주고, 아래 블록이 이미 갖고 있는 mb-3(16px)과 같은 값이라 형제 margin 이 collapse 되어
   세 장의 간격이 16px 로 고르게 맞는다. 작성 화면은 카드가 한 장뿐이라 영향이 없다. */
.qna-form__panel + .qna-form__panel {
    margin-top: var(--mili-space-4);
}

/* ----- 질문 작성 폼의 입력 요소 -----
   시안 Text Input/Text Area 실측: 배경 #15181c(= --mili-surface), 반경 5px(= --mili-radius-button),
   안쪽 여백 12px, **테두리 없음**. 카드가 투명해지면서 입력창이 페이지 배경보다 밝아
   선 없이도 면이 드러난다. .form-control 은 부트스트랩 공용이라 이 카드 안으로만 가둔다. */
.qna-form__panel .form-control {
    padding: var(--mili-space-3);
    border: 0;
    border-radius: var(--mili-radius-button);
    background: var(--mili-surface);
}

/* 라이트에서만 면 토큰을 바꾸는 이유 — 라이트의 --mili-surface 는 #FFFFFF 로 페이지 배경과
   같은 값이라, 테두리를 뺀 채 그대로 두면 입력창이 배경에 묻힌다. 다크 위계("배경보다 한 단계
   밝다")를 라이트에서는 한 단계 눌러 뒤집는다 — Q&A 댓글 블록·멘토링 제출결과와 같은 처리. */
.mili-light .qna-form__panel .form-control,
.mili-light .qna-form__panel .mili-editor,
.mili-light .qna-form__panel .qna-form__attach-filename {
    background: var(--mili-surface-interactive);
}

/* 본문 에디터도 같은 입력창이다 — 테두리를 없애고 반경만 맞춘다(툴바가 자체 배경을 가져
   모서리 밖으로 새므로 잘라낸다). */
.qna-form__panel .mili-editor {
    border: 0;
    border-radius: var(--mili-radius-button);
    overflow: hidden;
}

/* 첨부 파일명 표시 칸 — 시안에서도 같은 Text Input 모양이다(테두리 없음). */
.qna-form__panel .qna-form__attach-filename {
    border: 0;
}

/* 2026-08-28 Figma(node 2963:71564, "모바일 질문(게시글) 등록") 실측 — 이 화면의 실제 모바일
   시안이 처음 나왔다. 데스크톱(위 규칙, node 1679:21591/2224:92666 실측)과 값이 갈리는 지점만
   모바일 폭에서 덮어쓴다. */
@media (max-width: 767px) {
    /* 카드 안쪽 여백 30px(실측) — 공용 .mypage-panel 기본값(20px)보다 크다. */
    .qna-form__panel {
        padding: 30px;
    }

    /* 데스크톱은 테두리 없음이지만 모바일 시안은 입력창에 1px 테두리가 있다. */
    .qna-form__panel .form-control,
    .qna-form__panel .mili-editor,
    .qna-form__panel .qna-form__attach-filename {
        border: 1px solid var(--mili-neutral-750);
    }

    /* 본문 글자 크기 — 데스크톱은 Bootstrap 기본값(16px, 시안과도 어긋나 있으나 이번 범위 밖)을
       그대로 쓰지만, 모바일만 실측값(Body/B3, 14px)로 낮춘다(2026-08-28 사용자 확인). */
    .qna-form__panel .form-control,
    .qna-form__panel .qna-form__attach-filename {
        font-size: var(--mili-body-b3-size);
        line-height: var(--mili-body-b3-line);
    }
}

/* 2026-08-15 재지적(node 1700:6510) — "댓글 N" 제목·목록·작성 폼이 시안에서는 카드 하나 안에
   다 들어 있다(제목이 박스 밖에 떠 있고 목록엔 박스가 없던 이전 구조가 문제였다). .post-detail·
   .qna-reply 와 같은 표면·테두리·반경 토큰으로 큰 패널 하나를 만들고, 그 안에 제목·목록·작성
   폼을 전부 담는다. */
.qna-comments-panel {
    padding: 1.5rem;
    margin-bottom: var(--mili-space-6);
    border: 1px solid var(--mili-border);
    border-radius: var(--mili-radius-card);
    /* 2026-08-26 Figma(node 2224:92612) 실측 — 패널 자체는 테두리만 있고 배경이 없다(투명).
       예전엔 패널과 댓글 블록이 둘 다 --mili-surface-raised 라 같은 색이 겹쳐 블록 경계가
       화면에서 사라져 있었다(다크 #1E2227 위 #1E2227, 라이트 #FFFFFF 위 #FFFFFF). */
    background: transparent;
}

/* 댓글 블록 — 시안 실측 배경 #15181c(= --mili-surface), 안쪽 여백 20px, 반경 12px,
   그리고 **테두리 없음**. 블록은 배경색만으로 구분한다(2026-08-26 사용자 확인). */
.qna-comments-panel .qna-reply {
    padding: var(--mili-space-5);
    border: 0;
    background: var(--mili-surface);
}

/* 라이트에서만 토큰을 갈아 끼우는 이유 — 라이트의 --mili-surface 는 #FFFFFF 로 페이지 배경
   (--mili-app-bg)과 **완전히 같은 값**이라, 테두리를 뺀 채 그대로 쓰면 블록이 배경에 묻혀
   통째로 사라진다. 다크 시안의 위계는 "페이지(#0e1013)보다 블록이 한 단계 밝다" 이므로,
   라이트에서는 그 위계를 뒤집어 한 단계 눌린 면(--mili-surface-interactive #F1F3F5)을 쓴다.
   새 hex 를 만들지 않고 기존 토큰에 배정한 것이다. */
.mili-light .qna-comments-panel .qna-reply {
    background: var(--mili-surface-interactive);
}

/* 댓글 입력 에디터 — 시안 Text Input 실측 반경 5px(= --mili-radius-button).
   공용 .mili-editor 는 각진(--mili-radius-none) 것이 정본이라 이 화면에서만 둥글린다.
   툴바가 자체 배경(--mili-panel-sunken)을 가져 모서리 밖으로 삐져나오므로 잘라낸다 —
   mili-editor.js 에 컨테이너 밖으로 띄우는 팝업이 없어 안전하다(확인함). */
.qna-comments-panel__form .mili-editor,
.mentoring-reply-form .mili-editor {
    border-radius: var(--mili-radius-button);
    overflow: hidden;
}

/* 멘토링 "보내기" — 색은 표준 .btn.default(theme/figma-classes.css)가 맡는다. 여기 남는 건
   오른쪽 배치뿐이다: 버튼이 폼의 직계 자식이라 별도 줄 컨테이너가 없어 auto 마진으로 밀어낸다.
   표준 .btn 이 inline-flex 라 그대로면 auto 마진이 안 먹으므로 블록 레벨 flex 로 바꾸고
   fit-content 로 내용 폭을 유지한다(가운데 정렬은 .btn 의 justify-content 가 계속 맡는다). */
.mentoring-reply-form .btn.default {
    display: flex;
    width: fit-content;
    margin-left: auto;
}

.qna-comments-panel__title {
    display: flex;
    align-items: center;
    gap: var(--mili-space-2);
    margin: 0 0 var(--mili-space-3);
    /* 2026-08-26 Figma(node 2224:92612) 실측 Body/B1/Semibold = 18px / 600 / line-height 1.4.
       h2 라 전역 규칙에서 32px·700 을 물려받고 있었다(reference.css 의 h1~h6 { font-weight:700 }
       + 부트스트랩 h2 크기). 페이지 제목이 아니라 패널 안 구획 제목이라 여기서 크기를 정한다
       — CLAUDE.md 의 "제목 크기 재정의 금지"는 .page-hero/.page-header/.mypage-head 규칙이다. */
    font-size: var(--mili-font-size-t5);
    font-weight: var(--mili-font-weight-semibold);
    line-height: var(--mili-line-height-t5);
}

.qna-comments-panel__count {
    color: var(--mili-fg-faint);
    font-weight: var(--mili-font-weight-regular);
}

/* 작성 폼은 패널에 속한 한 구획이라 자체 테두리를 갖지 않는다 — 위 목록과는 구분선으로만 나눈다. */
.qna-comments-panel__form {
    padding-top: var(--mili-space-4);
    border-top: 1px solid var(--mili-border);
}

/* 2026-08-15 재지적 — "등록 버튼도 오른쪽"(시안 실측). 버튼은 기본적으로 왼쪽에 붙는 인라인
   요소라 flex 컨테이너로 감싸 오른쪽 끝에 놓는다. */
.qna-comments-panel__submit-row {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--mili-space-3);
}

/* 모바일 댓글 입력 — Figma(8qAqeXw50F8GKDGkeW0Pua, node 2963:70324, 390px) 실측.
   PC 는 그대로 두고(라벨 위 + Tiptap 툴바 + 세로 폼 + 등록 버튼 별도 줄) 모바일만
   "댓글을 남겨보세요" 플레이스홀더의 단일 라인 입력 + 등록 버튼 한 줄 배치로 바꾼다.
   Tiptap 인스턴스 자체는 그대로 유지한다(기능 변경 없음) — 툴바만 시각적으로 숨기고
   편집면 높이를 줄여 입력 필드처럼 보이게 한다. */
@media (max-width: 767px) {
    .qna-comments-panel__form {
        display: flex;
        align-items: stretch;
        gap: var(--mili-space-2);
        padding-top: var(--mili-space-3);
        border-top: 0;
    }

    /* 라벨은 시안에 안 보이지만(플레이스홀더로 대체) 접근성 때문에 지우지 않고 시각적으로만 숨긴다. */
    .qna-comments-panel__form .form-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .qna-comments-panel__form .mili-editor {
        flex: 1 1 auto;
        min-width: 0;
        /* 시안 실측 테두리 neutral/750 — 원시 팔레트 값(다크·라이트 동일값, primitives.css). */
        border-color: var(--mili-neutral-750);
    }

    .qna-comments-panel__form .mili-editor__toolbar {
        display: none;
    }

    .qna-comments-panel__form .mili-editor__body {
        min-height: 2.75rem;
    }

    .qna-comments-panel__form .mili-editor__surface p.is-editor-empty:first-child::before {
        /* 시안 실측 플레이스홀더 색 neutral/600 — 원시 팔레트 값. */
        color: var(--mili-neutral-600);
    }

    .qna-comments-panel__form .qna-comments-panel__submit-row {
        margin-top: 0;
        flex: 0 0 auto;
    }

    /* 버튼 높이를 입력창(2.75rem)과 맞춘다 — 값을 새로 정하지 않고 부모 stretch 에 맡긴다. */
    .qna-comments-panel__form .qna-comments-panel__submit-row .btn {
        height: auto;
    }
}

/* 2026-08-13 QA20 재지적 — 취소·등록 버튼은 하단 중앙, 둥근 버튼으로.
   2026-08-20 QA20 재지적(node 1679:21760 실측) — 버튼 폭은 min-width 로 늘리지 않고 텍스트에
   맞춘다(시안은 70px 안팎으로 딱 맞음). base .btn 이 이미 시안과 같은 패딩·반경 토큰을 쓰므로
   여기서는 가운데 정렬·간격만 잡는다. */
.qna-form__actions {
    display: flex;
    justify-content: center;
    gap: var(--mili-space-3);
    margin-top: var(--mili-space-6);
}

/* 2026-08-28 Figma(node 2963:71564) 모바일 실측 — 취소·등록 글자 크기 14px(Body/B3).
   공용 .btn.medium 은 12px(caption) 라 이 화면 모바일에서만 덮어쓴다. */
@media (max-width: 767px) {
    .qna-form__actions .btn {
        font-size: var(--mili-body-b3-size);
        line-height: var(--mili-body-b3-line);
    }
}

/* 2026-08-20 QA20 재지적(node 1679:21752 실측) — 첨부파일은 "파일 선택하기" 버튼과 "선택한
   파일 없음" 필드가 서로 떨어진 두 상자다(::file-selector-button 은 버튼이 필드 테두리 안에
   붙어 있어 시안과 다르다는 재지적을 받았다). input 은 숨기고 label(.btn)·span 두 요소를
   실제로 분리해 배치한다(qna-form.jsp, qna-form.js). 버튼은 시안의 "버튼 공통에 맞추기"
   지적대로 기존 .btn.medium.neutral 을 그대로 쓴다(2026-08-26 클래스명 정리, 값은 그대로). */
.qna-form__attach-field {
    display: flex;
    align-items: center;
    gap: var(--mili-space-3);
}

/* 2026-08-26 — 첨부가 "한 줄에 한 장" 행 구조가 되면서 행 사이 간격이 필요해졌다
   (마크업·이유는 qna-form.jsp 주석 참조). */
.qna-form__attach-list {
    display: flex;
    flex-direction: column;
    gap: var(--mili-space-2);
}

/* 행별 취소(×). 파일명 칸이 남는 폭을 먹으므로 이 버튼은 줄어들지 않게 고정한다. */
/* 반경은 표준 `.btn`(theme/figma-classes.css) 이 --mili-radius-button 으로 이미 갖고 있어
   2026-08-27 버튼 표준 일괄적용 2단계에서 여기 있던 중복 선언 2벌을 걷어냈다. */
.qna-form__attach-remove {
    flex: 0 0 auto;
}

.qna-form__attach-add {
    margin-top: var(--mili-space-2);
}

/* 모바일에서는 [파일 선택하기][파일명][×] 세 칸이 한 줄에 다 들어가지만 파일명이 "선택한 파…"
   수준까지 눌려 읽히지 않는다(390px 실측) — 버튼은 단독 줄, 파일명+삭제(×)는 같은 줄로 묶어
   아랫줄에 둔다(2026-08-28 재지적 — 삭제 버튼이 파일명과 짝을 이루도록 맨 오른쪽에 오게).
   2026-08-28 Figma(node 2963:71564) 실측 — 시안은 취소(×)·추가 버튼이 없는 "한 줄" 구조
   ([파일 선택하기][파일명] 뿐)이지만, 다중 첨부(최대 5장)·행별 취소 기능은 사용자 확인
   (2026-08-28)에 따라 그대로 두고 배치·크기만 시안에 맞춘다. 경계는 공용 계층이 쓰는 ≤767 을
   그대로 쓴다(새 브레이크포인트를 만들지 않는다). */
@media (max-width: 767px) {
    .qna-form__attach-field {
        flex-wrap: wrap;
    }

    .qna-form__attach-btn {
        order: 1;
        /* flex-basis:100% 로 줄바꿈시켜 버튼을 단독 줄에 둔다(아래 필드는 자동으로 다음 줄). */
        flex-basis: 100%;
        /* 데스크톱은 .btn.large(52px, node 2224:92665 실측)지만 모바일 시안은 36px
           (.btn.medium 과 같은 높이)로 더 작다. */
        height: 36px;
        padding: 8px 12px;
        font-size: var(--mili-body-b3-size);
        line-height: var(--mili-body-b3-line);
    }

    /* 파일명(flex: 1 1 auto, 공용 규칙)이 남는 폭을 다 먹고, 줄어들지 않는 삭제 버튼이 그
       뒤에 남아 자연스럽게 줄 맨 오른쪽에 붙는다 — margin-left:auto 불필요. */
    .qna-form__attach-filename {
        order: 2;
        /* 버튼과 같은 높이로 맞춘다 — 데스크톱이 .btn.large(52px)와 짝맞춘 것과 같은 원칙
           (아래 .qna-form__attach-filename 규칙 주석 참조), 모바일은 버튼이 36px 이니 그에 맞춘다. */
        min-height: 36px;
    }

    .qna-form__attach-remove {
        order: 3;
    }
}

.qna-form__attach-btn {
    flex-shrink: 0;
}

/* 2026-08-27 — 버튼을 표준 클래스(theme/figma-classes.css)로 옮기면서 높이가 어긋났다.
   "파일 선택하기" 버튼과 이 칸은 같은 높이여야 한다(시안 node 2224:92665 는 둘 다 52px 였다).
   2026-08-28 사용자 지시 — 첨부 행을 중간 사이즈로 낮춘다. 버튼을 .btn.large(52px) 에서
   .btn.medium 으로 바꿨으므로 이 칸도 그 높이·안쪽여백·글자크기(36px / 8px 12px / caption)를
   그대로 따라간다 — 높이 토큰이 없어 표준과 같은 리터럴을 쓰고 근거를 남긴다. */
.qna-form__attach-filename {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    font-size: var(--mili-caption-size);
    line-height: var(--mili-caption-line);
    border: 1px solid var(--mili-border);
    border-radius: var(--mili-radius-button);
    background: var(--mili-surface);
    color: var(--mili-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 숨긴 input 에 키보드 포커스가 오면(Tab) 옆 버튼에 아웃라인을 대신 보여준다 — visually-hidden
   이어도 접근성은 유지해야 하므로 포커스 표시만 label 로 이전한다. */
.qna-form__attach-field input[type="file"]:focus-visible + .qna-form__attach-btn {
    outline: 2px solid var(--mili-primary-border);
    outline-offset: 2px;
}

/* 멘토링 요청/리뷰 화면의 "연결된 문제" 미리보기 카드(mentoring-form.jsp, mentoring-review.jsp).
   post-detail 카드와 같은 결이되 별도 눈에 띄는 라벨(eyebrow)이 필요해 클래스를 따로 둔다.
   2026-08-13 정정: 원래 var(--mili-surface-2, rgba(255,255,255,.04)) 였는데
   --mili-surface-2 는 어디에도 정의돼 있지 않아 항상 리터럴 폴백으로 떨어졌다 — 스코프가
   없어 라이트에서도 다크 전용 흰색 오버레이가 그대로 나왔다. 실제 존재하는 표면 토큰으로 교체. */
.mentoring-context {
    /* 2026-08-26 — 테두리 대신 배경색만으로 구분한다(댓글 블록·문제 스냅샷과 같은 방침).
       반경도 리터럴 0.75rem 대신 같은 값의 카드 토큰으로 바꿨다. */
    background: var(--mili-surface-raised);
    border: 0;
    border-radius: var(--mili-radius-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: var(--mili-space-6);
}

/* 라이트에서만 면 토큰을 갈아 끼우는 이유 — 라이트의 --mili-surface-raised 는 #FFFFFF 로
   페이지 배경(--mili-app-bg)과 같은 값이라, 테두리를 뺀 채 그대로 두면 블록이 배경에 묻힌다.
   다크 위계("페이지보다 한 단계 밝다")를 라이트에서는 한 단계 눌러 뒤집는다 — Q&A 댓글 블록과
   같은 처리다. */
.mili-light .mentoring-context {
    background: var(--mili-surface-interactive);
}

/* 제출 결과 안의 빈 상태 박스("…아직 지원하지 않습니다") — 바깥 블록과 같은 방침으로 선을 없앤다.
   .empty-state 의 배경 --mili-surface 가 두 테마 모두 바깥 .mentoring-context 와 다른 값이라
   면만으로 구분된다(다크 #15181C 안 #1E2227, 라이트 #FFFFFF 안 #F1F3F5).
   .empty-state 는 공용 컴포넌트라 이 블록 안으로만 가둔다. */
.mentoring-context .empty-state {
    border: 0;
}

/* 2026-08-27 Figma(node 2224:92613) 실측 — "제출 결과"는 아래 "댓글 N"과 **같은 컴포넌트**다
   (아이콘 + Body/B1/Semibold 18px/600, 라벨 높이 25). 예전엔 0.8rem(12.8px)/400 에 아래 여백이
   4px 뿐이라 같은 성격의 섹션 제목인데도 훨씬 작고 본문에 붙어 있었다.
   아래 여백 20px 도 시안 실측값이다(라벨 끝 25 → 다음 프레임 시작 45). */
.mentoring-context__eyebrow {
    font-size: var(--mili-font-size-t5);
    font-weight: var(--mili-font-weight-semibold);
    line-height: var(--mili-line-height-t5);
    color: var(--mili-text-muted, rgba(255, 255, 255, 0.6));
    margin-bottom: var(--mili-space-5);
}

.mentoring-context__title {
    margin-bottom: var(--mili-space-3);
}

.mentoring-context__body {
    color: var(--mili-text-muted, rgba(255, 255, 255, 0.8));
}

/* 멘토 리뷰 화면의 읽기전용 코드 뷰어(mentoring-review.jsp). pbl/work.css 의 에디터를 그대로
   가져다 쓰지 않는다 — 이 화면은 편집이 아니라 읽기전용 열람만 하므로 실행 버튼·줄번호 같은
   상호작용 구조 없이 단순 textarea 하나면 충분하다.
   2026-09-14 QA12 확대 적용(사용자 결정, 갤러리 상세 node 3911:86121 반영분을 이 화면에도 적용) —
   showcase/detail.css 와 같은 방식으로 font-family 맨 앞에 JetBrains Mono 를 추가한다(기존
   --mili-font-mono 폴백 체인은 그대로 유지). 웹폰트는 이 selector 를 렌더하는 화면
   (mentoring-problem.jsp, mentoring-detail.jsp)의 <head>에서만 CDN 으로 싣는다. */
.mentoring-code__meta {
    display: flex;
    gap: var(--mili-space-2);
    margin-bottom: var(--mili-space-3);
}

.mentoring-code__area {
    width: 100%;
    min-height: 24rem;
    font-family: "JetBrains Mono", var(--mili-font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
    font-size: 0.875rem;
    line-height: 1.5;
    background: var(--mili-surface-raised);
    border: 1px solid var(--mili-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--mili-radius-filter);
    color: inherit;
    padding: 1rem;
    resize: vertical;
}	
/* QA25(2026-08-12): "답변 N건" 타이틀이 .widget-card__title 을 재사용하는데(margin:0), 그
   컴포넌트는 원래 .widget-card__header 안에서 패딩을 받는 전제라 여기서는 바로 아래 답변
   카드/빈 상태와 간격이 0이 된다. 글 상세에서만 12px 을 보정한다.

   2026-08-26 — 인접 형제(+)에서 일반 형제(~)로 넓혔다. 멘토링 상세는 문제 카드(.post-detail)와
   "대화 N건" 제목 사이에 "제출 결과"(.mentoring-context)가 끼어 있어 + 로는 안 걸렸고, 그 결과
   제목이 바로 아래 대화 목록에 붙어 있었다(실측 간격 0px). 같은 형태를 쓰는 갤러리 상세는
   .showcase-detail__replies 로 한 겹 감싸 부모가 달라 여기 걸리지 않는다. */
.post-detail ~ .widget-card__title {
    margin-bottom: var(--mili-space-3);
}

/* 대화/댓글이 하나도 없을 때 자리를 대신하는 빈 상태 블록. .mentoring-chat 은 margin-block 1.5rem
   을 갖고 있어 아래 "메시지 보내기" 폼과 떨어지지만, .empty-state 는 margin 이 0 이라 폼에 그대로
   붙는다(실측 간격 1px) — 목록이 있을 때와 같은 리듬으로 맞춘다. */
.widget-card__title + .empty-state {
    margin-bottom: var(--mili-space-6);
}

/* 멘토링 "문제 확인" 화면(mentoring-problem.jsp)의 본문 2열 grid — 좌(문제)|핸들|우(제출 결과).
   pbl/work.css 의 .work-body 는 3열(좌|중앙|우) 전용이라 그 트랙 구성이 맞지 않아 별도로 둔다.
   .work-aside/.work-stage/.split-handle(work.css) 자체는 그대로 재사용한다.

   --split-a / --split-b 는 split-pane.js 가 드래그에 맞춰 퍼센트로 인라인에 넣고
   localStorage(miliai.split.mentoring-problem)에 남긴다. 여기 적힌 21rem/1fr 은 아직
   조절하지 않은 상태의 기본값이다. 마지막 트랙의 minmax(0, …) 은 퍼센트 두 개와 핸들 폭(6px)이
   합해 100% 를 살짝 넘는 만큼을 흡수한다(work.css .work-body 와 같은 이유). */
.mentoring-problem__body {
    display: grid;
    grid-template-columns: var(--split-a, 21rem) auto minmax(0, var(--split-b, 1fr));
    min-height: 0;
    overflow: hidden;
}

/* 문제 본문과 미션 안내 사이의 경계선. 이 화면은 탭이 없어 두 프래그먼트가 이어 붙으므로
   여백만으로는 갈라지지 않는다(2026-09-02 — 문제 풀이 화면의 좌측 패널이 탭으로 갈리면서
   그쪽에 있던 .work-brief__split 이 없어졌다. 여기서만 필요해 이 파일에 둔다). */
.mentoring-problem__split {
    margin: 1.75rem 1.125rem 0;
    border: 0;
    border-top: 1px solid var(--mili-line);
    opacity: 1;   /* Bootstrap Reboot 의 hr 은 opacity .25 라 다크에서 거의 안 보인다 */
}

/* 트랙 자리를 못박는다 — 자동 배치에 맡기면 핸들이 열 사이가 아닌 자리로 밀려날 수 있다. */
.mentoring-problem__body > .work-aside--problem { grid-column: 1; }
.mentoring-problem__body > .split-handle        { grid-column: 2; }
.mentoring-problem__body > .work-stage          { grid-column: 3; }

@media (max-width: 992px) {
    /* 세로로 쌓이면 조절할 경계가 없다. .split-handle 의 기본값이 display:none 이지만
       work.css 는 992px "이상"에서 되살리므로, 992px 정확히 겹치는 지점을 위해 여기서 다시 끈다. */
    .mentoring-problem__body {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        overflow: auto;
    }

    .mentoring-problem__body > .split-handle {
        display: none;
    }
}

/* 멘토링 상세화면(mentoring-detail.jsp)의 채팅형 대화 — 학습자(질문자) 글은 좌측, 멘토 글은
   우측에 말풍선으로 놓인다(2026-08-13 결정). _work-support.jsp 의 .work-chat__msg 느낌을
   참고하되, 좌우로 갈라야 해서 그 클래스를 그대로 쓰지 않고 새로 둔다. */
/* 좌우 여백 30%(2026-08-13) — 이전엔 좌우 여백이 없어 학습자/멘토 말풍선이 각각 컬럼 절반씩을
   차지해 채팅이라기보다 좌우로 쪼갠 두 단처럼 보였다. */
.mentoring-chat {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block: 1.5rem;
    /* 트랙을 좁히면(예전 margin-inline:30%) 말풍선이 트랙을 꽉 채워
       align-self 좌우 정렬이 눈에 보이지 않는다 — 트랙은 넓게 두고
       말풍선 폭만 제한해 좌우 대비가 살아나게 한다. */
    /* 위아래 카드와 좌우 끝을 맞춘다 — 트랙 자체는 본문 폭을 그대로 쓴다. */
    margin-inline: 0;
    width: 100%;
    /* ul 기본 목록 들여쓰기(padding-inline-start: 40px)를 없앤다 — 안 그러면 좌측 말풍선 앞에 여백이 남는다. */
    padding: 0;
    list-style: none;
}

.mentoring-chat__msg {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    /* 좌우 말풍선이 가운데에서 겹쳐 보이도록 폭을 넉넉히 준다(50% 초과 = 오버랩). */
    max-width: 92%;
    padding: 0.75rem 1rem;
    border-radius: var(--mili-radius-card);
    border: 1px solid var(--mili-border, rgba(255, 255, 255, 0.1));
}

/* 학습자(원글 작성자) — 좌측, 멘토와 구분되는 은은한 배경. */
.mentoring-chat__msg--learner {
    align-self: flex-start;
    background: var(--mili-surface-2, rgba(255, 255, 255, 0.04));
    border-top-left-radius: 0.25rem;
}

/* 멘토 — 우측, 브랜드색을 살짝 섞어 학습자 글과 한눈에 구분되게 한다. */
.mentoring-chat__msg--mentor {
    align-self: flex-end;
    background: var(--mili-brand-soft, rgba(99, 102, 241, 0.12));
    border-color: var(--mili-brand-border, rgba(99, 102, 241, 0.35));
    border-top-right-radius: 0.25rem;
}

.mentoring-chat__msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--mili-caption-size);
    color: var(--mili-text-muted, rgba(255, 255, 255, 0.6));
}

.mentoring-chat__msg--mentor .mentoring-chat__msg-meta {
    flex-direction: row-reverse;
}

.mentoring-chat__msg-body {
    font-size: var(--mili-body-b3-size);
    line-height: 1.6;
    color: var(--mili-body, inherit);
}

.mentoring-chat__msg-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

.mentoring-chat__msg--mentor .mentoring-chat__msg-actions {
    justify-content: flex-end;
}

/* 갤러리(동료검토) 상세 전용 스타일은 뷰 경로 미러링 규칙에 맞춰 css/showcase/detail.css로
   옮겼다(2026-08-14, PBL학습/06.갤러리.md §13 후속 — "문단 사이가 너무 넓다" 개선과 함께). */

/* ----- 게시판 상세 카드 머리(.post-detail--board) -----
   2026-08-26 Figma node 2224:92610(공지·Q&A·멘토링 상세) 실측 —
     · 제목 왼쪽에 목록으로 돌아가는 chevron-left(19px)가 붙는다.
     · 제목+메타 묶음이 본문과 1px 선으로 나뉘고, 선 위 여백이 12px 다(border #2b2e33 ≒ --mili-border).
   .post-detail 은 갤러리 상세(showcase/detail.jsp)와 공용이라 변형 클래스 안에 가둔다 —
   그쪽은 시안이 따로여서 같이 바뀌면 안 된다. */
.post-detail--board .post-detail__title {
    display: flex;
    align-items: center;
    gap: var(--mili-space-2);
}

/* chevron 은 제목 글자(24px)를 그대로 따라가지 않는다 — 시안 실측 19px.
   ⚠️ 2026-09-14 QA(node 3736:236449 "공통" 카드, 하단 블록 1번 — "목록으로" 뒤로가기
   링크는 공지/QNA/뉴스/멘토링 상세가 공유하는 .post-detail__back 이다) — 색을 inherit/
   브랜드 그린에서 Sky 계열로 바꾼다. 기본 Dark=Sky/500·Light=Sky/600, 호버 Dark=Sky/300·
   Light=Sky/700(호버시 밑줄 없음 — 원래도 없었다, 그대로 유지). */
.post-detail--board .post-detail__back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mili-sky-500);
    text-decoration: none;
    font-size: 1.1875rem;
    line-height: 1;
}

.mili-light .post-detail--board .post-detail__back {
    color: var(--mili-sky-600);
}

.post-detail--board .post-detail__back:hover,
.post-detail--board .post-detail__back:focus-visible {
    color: var(--mili-sky-300);
    text-decoration: none;
}

.mili-light .post-detail--board .post-detail__back:hover,
.mili-light .post-detail--board .post-detail__back:focus-visible {
    color: var(--mili-sky-700);
}

/* 본문까지의 간격(20px)은 .post-detail__meta 가 이미 갖는 margin-bottom 이 맡는다 —
   여기서는 선과 선 위 여백만 더한다. */
.post-detail--board .post-detail__meta {
    padding-bottom: var(--mili-space-3);
    border-bottom: 1px solid var(--mili-border);
}

/* ----- 모바일 텍스트 크기 재측정(.post-detail--board) -----
   2026-08-28 Figma(node 2963:69316 "커뮤니티_공지사항", 390px) 실측 — 공지·Q&A·멘토링 상세의
   모바일 시안을 이번에 처음 확인했다. 데스크톱(위 2224:92610 실측)은 그대로 두고 ≤767px 에서만
   덮어쓴다(사용자 지시 "PC는 그대로, 모바일만 변경"). */
@media (max-width: 767.98px) {
    /* 20px/28px(1.4) 는 t6 font-size/line-height 페어와 정확히 일치(1.25rem/1.75rem) — 새 리터럴
       대신 그대로 쓴다. */
    .post-detail--board .post-detail__title {
        font-size: var(--mili-font-size-t6);
        font-weight: var(--mili-font-weight-bold);
        line-height: var(--mili-line-height-t6);
    }

    /* font-size 13px 는 t2(0.8125rem)와 정확히 일치하지만, line-height 는 t2 페어(18px·1.38배)가
       시안 실측(16.9px·1.3배)과 달라 토큰이 없다 — line-height 만 리터럴로 남긴다. */
    .post-detail--board .post-detail__meta {
        font-size: var(--mili-font-size-t2);
        line-height: 1.3;
    }

    /* 14px/18.2px(1.3) 는 이 파일이 이미 쓰는 --mili-body-b3-size/-line 과 정확히 같은 값이다. */
    .post-detail--board .post-detail__body {
        font-size: var(--mili-body-b3-size);
        line-height: var(--mili-body-b3-line);
    }

    /* 메타·본문 색 — 시안 실측 Neutral/550(#bfc0c2, 다크·라이트 동일값 원시 팔레트,
       primitives.css). 공용 --mili-fg-faint(#737373)·--mili-body(#ADB5BD)보다 밝다.
       라이트 프레임은 시안에 없어 미검증 — 이 저장소가 이미 쓰는 관행(다크 Neutral/550 ↔
       라이트 Neutral/800, pbl/project-detail.css .detail-cta__wish 참고)을 따라 라이트는
       Neutral/800 으로 뒤집는다(AI 판단, 재확인 필요). */
    .post-detail--board .post-detail__meta,
    .post-detail--board .post-detail__body {
        color: var(--mili-neutral-550);
    }

    .mili-light .post-detail--board .post-detail__meta,
    .mili-light .post-detail--board .post-detail__body {
        color: var(--mili-neutral-800);
    }
}

/* ----- 모바일 게시판 전환 탭(.community-board-tabs) -----
   2026-08-28 Figma(node 2963:69316) 실측 — 데스크톱은 사이드바 서브메뉴로 게시판을 바꾸지만
   (위 .post-detail--board 주석, 2026-08-26 결정), 모바일은 사이드바가 드로어로 접혀 있어 전환
   수단이 없다. 시안은 마스트헤드 아래 밑줄 탭(공지사항/Q&A/FAQ/멘토링)을 모바일에서만 되살린다
   (2026-08-28 사용자 확인). 탭 자체 모양은 새로 만들지 않고 기존 Type1 탭(.tab-line/
   .tab-line__link, theme/figma-classes.css)을 그대로 재사용한다 — 여기서는 ≤767px 노출만 담당.
   마크업은 community/_board-tabs.jsp(각 상세 JSP가 include). */
.community-board-tabs {
    display: none;
}

@media (max-width: 767.98px) {
    .community-board-tabs {
        display: flex;
    }
}

/* ----- 멘토링 원조글 = 문제 스냅샷(.post-detail__body--snapshot) -----
   MentoringService#buildProblemSnapshotHtml 이 저장해 둔 "프로젝트 → 미션 → 문제" 맥락 <dl>.
   본문 HTML 은 저장 필터(Safelist.basic())가 class 를 통째로 떨구므로 요소 선택자로 건다 —
   .post-detail__body--snapshot 은 JSP 가 감싸는 컨테이너에만 붙어 살아남는다. dl 은 이 스냅샷
   말고 다른 게시판 본문에 나올 일이 없지만, 그래도 변형 클래스 안에 가둬 둔다. */
.post-detail__body--snapshot dl {
    /* .post-detail__body 의 white-space: pre-wrap 을 끈다 — Jsoup.clean(prettyPrint) 이 태그
       사이에 넣는 개행이 그대로 빈 줄이 되고, grid 에서는 익명 그리드 아이템까지 만든다. */
    white-space: normal;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.375rem 0.875rem;
    margin: 0 0 var(--mili-space-5);
    padding: var(--mili-space-4);
    /* 2026-08-26 — 테두리 대신 배경색만으로 구분한다. --mili-panel-sunken 은 두 테마 모두
       바깥 카드(.post-detail 의 --mili-surface)보다 한 단계 어두워 선이 없어도 면이 드러난다
       (다크 #0E1013 < #15181C, 라이트 #F1F3F5 < #FFFFFF). */
    border: 0;
    border-radius: var(--mili-radius-card);
    background: var(--mili-panel-sunken);
}

/* 라벨 열 — "프로젝트 / 미션 2/5 / 문제 3/4". 순번이 붙어 폭이 제각각이라 줄바꿈만 막는다. */
.post-detail__body--snapshot dt {
    font-size: var(--mili-font-size-t2);
    font-weight: 700;
    color: var(--mili-text-muted);
    white-space: nowrap;
}

.post-detail__body--snapshot dd {
    margin: 0;
    min-width: 0;
    font-weight: 600;
    color: var(--mili-ink);
}

/* 좁은 폭에서는 라벨을 값 위로 올린다 — 긴 문제 제목이 좁은 열에 갇혀 세로로 흐르는 걸 막는다. */
@media (max-width: 30rem) {
    .post-detail__body--snapshot dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .post-detail__body--snapshot dd:not(:last-child) {
        margin-bottom: 0.5rem;
    }
}