가 없는 경우)를 위해 `white-space: pre-wrap`을 쓰는데, 갤러리 * 본문은 항상 RichText.html()이 만든 정식
/
HTML이다(PblLearnViewService 확인) — pre-wrap
* 이 필요 없다. 게다가 h2~h4·p·blockquote·details·pre 가 각자 위아래 대칭 margin을 가지면 서로
* 다른 태그 사이에서는 CSS 마진 병합이 기대만큼 되지 않아 그대로 더해진다(문단 사이가 두 배로
* 벌어져 보인 이유). 아래는 "아래쪽에만 margin, 첫/마지막은 0"으로 통일해 이 문제를 없앤다.
*/
.showcase-detail .post-detail__body {
white-space: normal;
}
/* 최외곽 Article 은 박스가 아니다 — 배경·테두리·반경·안쪽여백을 전부 없앤 순수 컨테이너다.
공용 .post-detail(theme/components.css)은 공지·뉴스·QNA 상세와 함께 쓰는 카드라 이 화면에서만 덮는다.
2026-09-02 시안 픽셀 실측으로 확정(figma-showcase-detail.png, node 3167:56920):
· 평가가이드 카드 안쪽 #15181c
· Article 좌측 여백 3곳(상·중·하) #0e1013 ← 페이지 배경 = 배경도 테두리도 없다
· 프로젝트설명 카드 안쪽 #15181c
· 평가가이드·프로젝트설명·미션 카드의 좌측 끝이 모두 같은 x(본문열 시작) = 안쪽 여백도 0
처음엔 get_metadata 의 자식 오프셋 31 을 "30px 여백 + 1px 테두리"로 역산해 카드로 봤는데,
그 31 은 중첩 오토레이아웃의 상대 좌표라 렌더 결과에서는 상쇄된다. 실측이 정본이다.
따라서 제목·메타·평가가이드·AI평가·본문 카드들이 모두 본문열 폭에 그대로 붙는다. */
.showcase-detail .post-detail {
padding: 0;
border: 0;
border-radius: var(--mili-radius-none);
background: transparent;
box-shadow: none;
}
.showcase-detail .post-detail__body > :is(h2, h3, p, ul, ol, blockquote, details, pre),
.showcase-detail .post-detail__body details > :is(h4, p, ul, ol, blockquote, pre, div),
.showcase-detail .post-detail__body details > div > :is(h4, p, ul, ol, blockquote, pre) {
margin: 0 0 0.75rem;
}
.showcase-detail .post-detail__body > :is(h2, h3, p, ul, ol, blockquote, details, pre):last-child,
.showcase-detail .post-detail__body details > :is(h4, p, ul, ol, blockquote, pre, div):last-child,
.showcase-detail .post-detail__body details > div > :is(h4, p, ul, ol, blockquote, pre):last-child {
margin-bottom: 0;
}
/* ============================================================
평가가이드 · AI 종합평가 — 시안 카드 규격 그대로.
`.pbl-brief__guide`는 pbl/brief.css·pbl/learn.css 에만 정의돼 있고 이 화면은 그 CSS를 안
불러오므로, 다른 화면 CSS를 통째로 끌어오는 대신 이 화면 전용으로 재현한다.
2026-09-02 — 예전 summary 는 #6366f1(인디고) 그라디언트·테두리·그림자를 리터럴로 쓰고 있었다.
우리 팔레트에 없는 색이라 라이트 모드에서 근거 없는 보라가 떠 있었고 시안에도 없다 — 시안대로
장식 없는 제목줄(아이콘 + 18px SemiBold)로 정리한다.
============================================================ */
.showcase-detail .pbl-brief__guide {
display: block;
margin: 0 0 var(--mili-space-6);
padding: var(--sc-card-pad);
border: 1px solid var(--mili-border);
border-radius: var(--mili-radius-card);
background: var(--mili-surface);
box-shadow: var(--mili-shadow-sm);
}
.showcase-detail .pbl-brief__guide > summary {
display: flex;
align-items: center;
gap: var(--mili-space-2);
/* 시안 실측 Body/B1/Semibold(18px / 600 / 140%). 페이지 제목이 아니라 카드 안 구획
제목이라 여기서 크기를 정한다 — CLAUDE.md 의 "제목 크기 재정의 금지"는
.page-hero/.page-header/.mypage-head 규칙이다. */
font-size: var(--mili-body-b1-size);
line-height: var(--mili-body-b1-line);
font-weight: var(--mili-font-weight-semibold);
color: var(--mili-fg);
cursor: pointer;
}
.showcase-detail .pbl-brief__guide > summary:hover {
color: var(--mili-primary-500);
}
.showcase-detail .pbl-brief__guide-body {
/* 시안은 제목과 본문 사이에 구분선을 두지 않는다 — 여백으로만 나눈다. */
padding: var(--mili-space-3) 0 0;
}
/* 제목 위계 역전 수정(2026-08-15, 화면 스크린샷 확인) — 페이지 제목(.post-detail__title, 부트스트랩
유틸리티 클래스 h4 ≈ 1.5rem/--mili-font-size-t7)보다 본문 안 제목(h2 프로젝트 제목, 브라우저 기본
2rem)이 더 크게 보여 위계가 뒤집혀 있었다. 본문 제목은 페이지 제목보다 한 단계 작아야 한다 —
h2(프로젝트 제목) < 페이지 제목, h4(문제 제목) < h2 순으로 다시 맞춘다. */
.showcase-detail .post-detail__body h2 {
font-size: var(--mili-font-size-t6);
font-weight: 700;
}
.showcase-detail .post-detail__body h4 {
font-size: var(--mili-font-size-t5);
font-weight: 700;
}
/* 프로젝트 설명(본문 최상위 blockquote) — 시안(node 3167:56965)은 미션 카드와 같은 카드다.
GalleryService#buildContentHtml 구조상 최상위 blockquote 는 "프로젝트 설명" 하나뿐이다.
아래 "한 블록으로 잇기" 규칙이 걸리지 않는 경우(제목 없이 설명만 있는 등)의 기본값으로 남긴다. */
.showcase-detail .post-detail__body > blockquote {
padding: var(--sc-card-pad);
border: 1px solid var(--mili-border);
border-radius: var(--mili-radius-card);
background: var(--mili-surface);
box-shadow: var(--mili-shadow-sm);
color: var(--mili-body);
}
/* ── 프로젝트 제목(h2) + "프로젝트 설명" 라벨(p) + 설명 본문(blockquote) 을 카드 하나로 잇는다
(2026-09-02 사용자 지시).
셋은 GalleryService#buildContentHtml 이 내보내는
…
평면 형제라 감쌀 컨테이너가 없다. 생성기에 래퍼를 넣어도 본문 HTML 은 작성 시점에 tb_board_post.content 로 이미 저장돼 있어 기존 글은 안 바뀐다 — 그래서 위/가운데/아래 세 조각으로 테두리를 나눠 이어 붙이는 방식을 쓴다. 설명이 비면 p·blockquote 가 아예 안 나오므로(appendLabeledBlockquoteHtml 은 richTextHtml 이 있을 때만 출력) h2 가 윗변만 있는 열린 상자로 남지 않도록 :has() 로 셋이 다 있을 때만 건다. :has() 는 이 저장소가 이미 25곳에서 쓰는 선택자다(home.css·mypage/dashboard.css 등). ⚠ 시안과 다른 점: 시안(node 3167:56962/56965)은 h2 가 카드 밖이고 "프로젝트 설명" 라벨 자체가 없다(설명 본문만 카드). 사용자 지시로 의도적으로 이탈한 것이다. */ .showcase-detail .post-detail__body > h2:has(+ p + blockquote) { margin: 0; padding: 18px var(--mili-space-6) var(--mili-space-3); border: 1px solid var(--mili-border); border-bottom: 0; border-radius: var(--mili-radius-card) var(--mili-radius-card) 0 0; background: var(--mili-surface); } .showcase-detail .post-detail__body > h2 + p:has(+ blockquote) { margin: 0; padding: 0 var(--mili-space-6) var(--mili-space-1); border-left: 1px solid var(--mili-border); border-right: 1px solid var(--mili-border); background: var(--mili-surface); } .showcase-detail .post-detail__body > h2 + p + blockquote { margin: 0 0 0.75rem; padding: 0 var(--mili-space-6) 18px; border: 1px solid var(--mili-border); border-top: 0; border-radius: 0 0 var(--mili-radius-card) var(--mili-radius-card); background: var(--mili-surface); /* 그림자는 아래 조각에만 준다 — 세 조각에 다 주면 이음매마다 그림자 선이 생긴다. --mili-shadow-sm 은 0 1px 2px(아래로만 떨어짐)이라 카드 밑그림자 역할을 그대로 한다. */ box-shadow: var(--mili-shadow-sm); color: var(--mili-body); } /* 미션 설명 / 문제 지시문(details 안쪽 blockquote) — 시안(node 3167:56976)은 배경·반경 없이 1px 좌측선 + 왼쪽 여백 12px 뿐이다. 예전엔 3px 선 + 배경 + 오른쪽만 둥근 모서리였다. 미션 설명은 시안 실측대로 브랜드 라임(Primary/500), 문제 지시문은 그 안에서 한 번 더 구분돼야 해 기존 결정(2026-08-17 "미션=브랜드색 / 문제=파랑")대로 정보색을 유지한다. */ .showcase-detail .post-detail__body details blockquote { padding: 0 0 0 var(--mili-space-3); border: 0; border-left: 1px solid var(--mili-primary-500); border-radius: var(--mili-radius-none); background: transparent; color: var(--mili-body); } .showcase-detail .post-detail__body details > div > blockquote { border-left-color: var(--mili-status-info); } /* "제출 답안" 코드박스(§13.2) — 코딩/퀴즈/단답/장문/수행 설명이 문제유형과 무관하게 이 한 가지 스타일로 통일된다(GalleryService#renderAnswer 계열). 시안 실측(node 3167:56982) 배경 #1c1f23 = Neutral/850, 반경 5px = --mili-radius-button, 안쪽 여백 12px. 2026-09-11 QA12(node 3911:86121) — "모든 IDE 폰트: JetBrains Mono". 웹폰트는 detail.jsp 에서 CDN 으로 싣는다 — 로딩 전(또는 실패 시)에는 그 뒤 폴백(기존 시스템 모노스페이스 스택)으로 자연히 대체된다. */ .showcase-detail .post-detail__body pre { background: var(--mili-neutral-850); color: var(--mili-neutral-50); font-family: "JetBrains Mono", var(--mili-font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace); padding: var(--mili-space-3); border-radius: var(--mili-radius-button); overflow-x: auto; line-height: var(--mili-line-body, 1.6); white-space: pre-wrap; /* 코드/원문 내부의 줄바꿈·들여쓰기는 그대로 보여줘야 한다 */ } .showcase-detail .post-detail__body pre code { background: transparent; padding: 0; } /* 미션 블록(details) — 시안(node 3167:56990)은 미션 하나가 카드 하나다. 예전의 "좌측 강조색 띠 + 미션 사이 가로선" 조합을 대체한다(카드 경계가 그 역할을 대신한다). 미션 사이 간격은 시안 실측 10px 이라 위 공용 margin 규칙(0.75rem)을 덮는다. */ .showcase-detail .post-detail__body > details { padding: var(--sc-card-pad); border: 1px solid var(--mili-border); border-radius: var(--mili-radius-card); background: var(--mili-surface); box-shadow: var(--mili-shadow-sm); } .showcase-detail .post-detail__body > details + details { margin-top: 10px; } .showcase-detail .post-detail__body > details:not(:last-child) { margin-bottom: 0; } .showcase-detail .post-detail__body details > summary { display: flex; align-items: center; /* 시안 실측 아이콘 20px(x=0) + 텍스트 x=24 → 사이 간격 4px. */ gap: var(--mili-space-1); cursor: pointer; /* 시안 실측 Body/B1/Semibold(18px / 600 / 140%) + 흰색. */ font-size: var(--mili-body-b1-size); line-height: var(--mili-body-b1-line); font-weight: var(--mili-font-weight-semibold); color: var(--mili-fg); /* 아래 ::before 로 시안 chevron 을 직접 그리므로 브라우저 기본 삼각형 마커를 끈다. display:flex 만으로도 크롬은 마커를 숨기지만 사파리는 ::-webkit-details-marker 가 따로 필요하다. */ list-style: none; } .showcase-detail .post-detail__body details > summary::-webkit-details-marker { display: none; } /* 접힘/펼침 표시 — 시안(node 3167:56992 chevron-down / 3167:56973 chevron-up)은 기본 삼각형(▶)이 아니라 얇은 chevron 이고, 닫히면 ⌄ · 열리면 ⌃ 다. 화면 전역에서 쓰는 Bootstrap Icons 글리프를 그대로 쓴다(bootstrap-icons.min.css 실측: .bi-chevron-down "\f282" / .bi-chevron-up "\f286"). 본문 HTML 은 BoardService#sanitize 를 거쳐 를 넣을 수 없으므로(안전목록에 없다) 마크업이 아니라 CSS 로 그린다. 2026-09-14 QA(node 3931:115816, "아이콘 박스 크기 20x20") — 예전엔 font-size 20px 만 있어 글리프 자체의 자간·자연폭에 따라 박스가 정확히 20×20 이 아니었다. width/height 를 못박고 가운데 정렬해 아이콘 박스 자체를 20×20 으로 고정한다. */ .showcase-detail .post-detail__body details > summary::before { content: "\f282"; display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--mili-space-5); height: var(--mili-space-5); font-family: bootstrap-icons; font-size: var(--mili-space-5); font-weight: var(--mili-font-weight-regular); line-height: 1; } .showcase-detail .post-detail__body details[open] > summary::before { content: "\f286"; } .showcase-detail .post-detail__body details[open] > summary { margin-bottom: var(--mili-space-3); } /* 문제 단위 래퍼(GalleryService#appendProblem 이 문제 하나를로 감싼 것) — 시안(node 3167:56978)은 이 자리에 좌측 라인을 두지 않는다. 미션이 카드가 되면서 문제 묶음은 카드 안에서 이미 구분되기 때문이다. 예전의 3px --mili-info 좌측 라인을 걷어낸다. */ .showcase-detail .post-detail__body details > div { padding: 0; border-left: 0; } /* 문제 제목(h4) 앞 문제유형 아이콘은 이번 범위에 넣지 않는다(§14 오픈 이슈 — HTML에 문제유형이 텍스트로만 있어 CSS 만으로는 아이콘을 고를 수 없다). */ /* ============================================================ AI 종합평가(tb_team.ai_review_comment) 평가가이드(.pbl-brief__guide) 톤을 그대로 쓰고, 본문만 평문 줄바꿈을 살린다 — AI 응답은 마크다운이 아니라 평문이다(07.AI평가.md §8.6). ============================================================ */ .showcase-detail .showcase-detail__ai-review-body { white-space: pre-wrap; overflow-wrap: anywhere; /* line-height 는 여기서 정하지 않는다 — JSP 에서 붙인 .mili-rich(theme/components.css, 1.7)가 평가가이드 본문과 같은 값을 준다. 예전엔 여기 1.75 를 따로 박아 두 블록이 어긋나 있었다. */ } /* ── 본문 3블록 타이포 통일(2026-09-02 사용자 지시) — 기준은 ① 평가가이드 본문. 반영 전 실측(computed style): ① 평가가이드 본문 16px / 400 / 27.2px(1.7) / rgb(173,181,189) --mili-body ② AI 종합평가 본문 16px / 400 / 28px(1.75) / rgb(248,249,250) --mili-fg ← .mili-rich 누락 ③ 프로젝트 설명 본문 15px / 400 / 25.5px(1.7) / rgb(173,181,189) ← 아래 15px 이 원인 ②는 JSP 에서 .mili-rich 를 붙여 색·줄간격을 공용 정의에 맡겼고, ③은 공용 .post-detail__body 의 0.9375rem(15px, 공지·뉴스·QNA 와 함께 쓰는 게시판 본문 크기)이 원인이라 이 화면에서만 16px 로 올린다. 셋 다 크기를 명시해 기준값이 다시 어긋나지 않게 한다. (시안 본문도 16px 이라 이 방향이 시안에도 가깝다. 다만 시안 본문색은 Neutral/500 #dcdcdc 로 우리 --mili-body(#adb5bd)보다 밝다 — 색은 사용자 지시대로 ① 기준을 따른다.) */ .showcase-detail .pbl-brief__guide-body, .showcase-detail .post-detail__body { font-size: var(--mili-body-b2-size); } /* 위에서 본문을 15px→16px 로 올리면 크기를 따로 안 정한(제출 응답)도 같이 커진다 — 시안 실측(node 3167:56983)은 14px 이므로 여기서 못박는다. */ .showcase-detail .post-detail__body pre { font-size: var(--mili-body-b3-size); } /* ============================================================ 댓글 패널 — 예전 근거는 node 3167:57034(안쪽 여백 30px)였으나, 2026-09-11 QA 재실측(node 3931:115809, "QA 필요 항목" — 라이브 화면 devtools 캡처로 현재 30px 확인) 결과 목표값은 20px 로 정정됐다. 테두리(1px)만 있고 배경은 없는 카드는 그대로다. ============================================================ */ .showcase-comments { display: flex; flex-direction: column; /* 제목·작성 블록은 고정하고 목록만 스크롤시키기 위해 열 높이를 여기서 제한한다. (예전엔 .showcase-detail__replies 가 통째로 스크롤돼 작성 블록이 밑으로 흘렀다) */ max-height: calc(100vh - var(--mili-navbar-height) - 2rem); padding: var(--mili-space-5); border: 1px solid var(--mili-border); border-radius: var(--mili-radius-card); background: transparent; } .showcase-comments__title { display: flex; align-items: center; gap: var(--mili-space-2); flex: none; margin: 0 0 var(--mili-space-5); /* 시안 실측 Body/B1(18px). h2 라 전역 규칙에서 더 큰 값을 물려받고 있어 여기서 정한다 — 패널 안 구획 제목이라 CLAUDE.md 의 페이지 제목 규칙 대상이 아니다. */ font-size: var(--mili-body-b1-size); line-height: var(--mili-body-b1-line); font-weight: var(--mili-font-weight-semibold); color: var(--mili-fg); } /* 시안 실측 rgba(248,249,250,0.6) — --mili-fg-rgb 가 그 값이다(라이트는 자동으로 뒤집힌다). */ .showcase-comments__count { color: rgba(var(--mili-fg-rgb), 0.6); font-weight: var(--mili-font-weight-regular); } /* 작성 블록 — 시안은 목록 아래지만 2026-09-02 사용자 요청으로 목록 위에 고정한다. flex: none 이라 아래 목록이 아무리 길어도 이 블록은 줄지 않고 항상 보인다. */ .showcase-comments__form { flex: none; margin: 0 0 var(--mili-space-5); padding-bottom: var(--mili-space-5); border-bottom: 1px solid var(--mili-border); } .showcase-comments__form .form-label { display: block; margin-bottom: var(--mili-space-2); font-size: var(--mili-caption-size); color: var(--mili-fg-muted); } /* 입력 필드 — 시안 실측(node 3167:57090) 배경 rgba(255,255,255,.04) · 테두리 1px rgba(255,255,255,.1) · 반경 5px. 흰색 리터럴 대신 --mili-fg-rgb(다크 248,249,250 / 라이트 30,34,39)로 옮겨 라이트에서도 성립하게 한다(다크 기준 근사, 알파는 시안 그대로). */ .showcase-comments__form :is(.form-control, .form-select), .showcase-detail .qna-reply__edit-form .form-control { padding: var(--mili-space-3); border: 1px solid rgba(var(--mili-fg-rgb), 0.1); border-radius: var(--mili-radius-button); background: rgba(var(--mili-fg-rgb), 0.04); } .showcase-comments__form .form-control::placeholder { color: var(--mili-fg-faint); } .showcase-comments__note { margin: var(--mili-space-2) 0 0; font-size: var(--mili-caption-size); color: var(--mili-fg-muted); } /* 등록/저장 버튼은 오른쪽 끝(시안 실측) — 버튼 색은 공용 .btn.default(theme/figma-classes.css, 다크 흰 판 + 검정 글자)가 시안과 정확히 같아 그대로 쓴다. */ .showcase-comments__submit-row { display: flex; justify-content: flex-end; gap: var(--mili-space-2); margin-top: var(--mili-space-3); } .showcase-comments__signin { font-size: var(--mili-body-b3-size); color: var(--mili-fg-muted); } /* 목록만 스크롤한다 — min-height:0 이 없으면 flex 아이템이 내용 높이만큼 부풀어 스크롤이 생기지 않는다. .qna-replies 자체(세로 나열)는 theme/components.css 공용 규칙을 그대로 쓴다. */ .showcase-comments .qna-replies { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* 항목 사이 간격 — 시안 실측 5px. */ gap: 5px; } .showcase-comments .empty-state { flex: none; } /* 댓글 한 건 — 시안(node 3167:57042) 배경 rgba(248,249,250,.02) · 테두리 없음 · 안쪽 여백 14px/16px. 반경은 시안 12px 이지만 카드 토큰(16px)을 그대로 쓴다. .qna-reply 는 QNA 상세와 공용 컴포넌트라 이 화면 스코프에서만 덮는다. */ .showcase-detail .qna-reply { padding: 14px var(--mili-space-4); border: 0; border-radius: var(--mili-radius-card); background: rgba(var(--mili-fg-rgb), 0.02); } /* 라이트에서 rgba(30,34,39,.02)는 흰 배경 위에서 거의 사라진다 — QNA 댓글이 같은 상황에서 쓰는 해법(community.css, 2026-08-26 사용자 확인)을 그대로 따라 한 단계 눌린 면을 쓴다. 새 hex 를 만들지 않고 기존 토큰에 배정한 것이다. */ .mili-light .showcase-detail .qna-reply { background: var(--mili-surface-interactive); } /* 작성자·작성시각 — 시안 실측 12px / Neutral/700(#66686c, 다크·라이트 동일값). */ .showcase-detail .qna-reply__meta { margin-bottom: 0; font-size: var(--mili-caption-size); color: var(--mili-neutral-700); } .showcase-detail .qna-reply__body { margin: var(--mili-space-1) 0 0; font-size: var(--mili-body-b3-size); color: var(--mili-ink); /* 공백 없는 긴 URL 등이 섞인 댓글이 좁은 열에서 가로 스크롤을 내지 않게. */ overflow-wrap: anywhere; } /* 좋아요·싫어요(좌) / 수정·삭제(우) — 시안 실측 윗여백 8px, 버튼 사이 4px. 버튼 자체는 공용 .btn.small(28px · 5px 반경 · Caption/Semibold)이 시안과 정확히 같다. */ .showcase-detail .qna-reply__toolbar { margin-top: var(--mili-space-2); } .showcase-detail :is(.qna-reply__reactions, .qna-reply__actions) { gap: var(--mili-space-1); } .showcase-detail .qna-reply__edit-form { margin-top: var(--mili-space-2); } /* 1단으로 되돌아가는 폭에서는 댓글 목록 높이 제한을 풀어 페이지와 함께 스크롤시킨다. */ @media (max-width: 992px) { .showcase-comments { max-height: none; } .showcase-comments .qna-replies { overflow-y: visible; } }