/* Board Content - 게시글 본문 렌더 규칙 (상세 화면 · 편집 화면 공용) */ /* * ── 이 파일이 존재하는 이유 ───────────────────────────────────────────────── * 게시글 본문이 "제목·목록·인용을 어떻게 그리는가" 는 **규칙 한 벌**이어야 한다. * 관리자가 편집 화면에서 본 모습과 독자가 상세 화면에서 보는 모습이 다르면, * 관리자는 자기가 무엇을 발행했는지 알 수 없다. * * 이 파일이 생기기 전의 실측 상태: * · common.css:16~21 의 전역 리셋이 h1~h6 · p · ul · ol · li · blockquote · pre · * code 의 margin/padding/border 를 0, font-size 를 100% 로 만든다. * · common.css:23 `ol, ul {list-style: none}` 가 글머리 기호·번호를 지운다. * · common.css:26 `a {color:#1c1c1c; text-decoration:none}` 가 본문 링크의 밑줄을 지운다. * · 그런데 상세 화면 `.bv-content` 에 걸린 규칙은 board-view.css 의 **셋뿐**이다 — * 60행(컨테이너 타이포) · 68행(img) · 138행(모바일 font-size). * h1~h6 · p · ul · ol · li · blockquote · hr · a · code · pre 규칙은 0건. * ⇒ 관리자가 에디터로 넣은 제목·목록·인용이 독자 화면에서는 전부 평문으로 납작하게 * 나오고 글머리 기호도 사라진다. * · 그 사이 편집 화면만 `board-write.css` 의 §4-2 가 리셋을 되돌려 두어, 두 화면이 * 서로 다르게 보였다. **그 §4-2 를 이 파일로 옮긴 것**이 여기다. * * ── 규칙을 두 벌로 복사하지 말 것 ─────────────────────────────────────────── * 아래 모든 규칙은 두 컨텍스트를 **한 선택자에** 묶는다: * .bv-content h3, .wr_editable h3 { … } * 한쪽에만 있는 본문 규칙을 새로 만들면 이 파일이 없애려던 문제가 그대로 돌아온다. * 편집 전용 표현(atom 노드 커서 · 포커스 · ProseMirror 상태 클래스)만 board-write.css 에 * 남아 있다 — 그것들은 "본문이 어떻게 보이는가" 가 아니라 "편집 중이라는 신호" 다. * * ── 선택자는 추측이 아니라 컴포넌트 실측이다 ──────────────────────────────── * · `.bv-content` — BoardView.tsx:245 · 249 의
. * 잠금이면 245행(가림막), 아니면 249행(본문 innerHTML)이며 **두 갈래 모두 같은 * 클래스**라 선택자가 하나로 족하다. * · `.wr_editable` — PostEditor.tsx:211 editorProps.attributes.class. * 실제 DOM class 는 `tiptap ProseMirror wr_editable` 이지만, 이 앱이 직접 지은 이름은 * `wr_editable` 하나뿐이라 그것만 쓴다(근거는 board-write.css 머리말 "전제 3"). * ⚠️ `.wr_editor`(EditorContent 의 className)는 편집 본체가 아니라 **부모 래퍼**에 * 붙는다 — 본문 규칙을 거기에 걸면 안 된다. * · `#bo_w` 로 감싸지 않았다. board-write.css 는 레거시 write.css 와 캐스케이드를 * 맞추려고 전부 `#bo_w` 스코프지만, 이 파일의 짝은 `.bv-content`(상세 화면, `#bo_w` * 바깥)다. 한쪽만 id 를 붙이면 두 컨텍스트의 명시도가 갈라져 "한쪽에서만 먹는 규칙" * 이 다시 생긴다. 그래서 양쪽 다 클래스 하나로 맞췄다(전부 0,1,1). * * ── 왜 px 이 아니라 em 인가 ───────────────────────────────────────────────── * 두 컨텍스트의 **본문 기준 크기가 다르고, 각각 근거가 있다.** * 상세: 15px / 1.8 / #333 (board-view.css:61~63) 모바일 14px (board-view.css:138) * 편집: 16px / 1.7 / #161718 (write.css:39) 모바일 15px (board-write.css §6) * 편집 영역은 "입력창" 이기도 해서 같은 폼의 제목·분류 입력창(write.css:19 · 29 = 16px)과 * 어긋나면 그쪽이 더 어색하다. 그래서 **본문 크기 자체는 통일하지 않는다.** * 대신 이 파일의 모든 크기·여백을 em(= 그 요소가 속한 컨텍스트의 기준 크기 배수)으로 * 적어, 규칙은 한 벌이면서 각 컨텍스트의 기준을 존중하게 했다. * 아래 주석의 `(상세 …px / 편집 …px)` 는 그 배수의 실제 계산값이다. * ⚠️ 테두리 두께(1px · 4px)와 radius 만 px 로 남겼다 — 선 굵기·모서리는 글자 크기를 * 따라갈 이유가 없고, em 으로 적으면 컨텍스트마다 소수점 두께가 되어 흐릿해진다. * * ── 색을 지정하지 않는 곳이 있는 이유 ─────────────────────────────────────── * 제목·문단·목록에는 color 를 주지 않는다. 컨테이너 색(#333 / #161718)을 그대로 * 물려받아야 각 컨텍스트의 기준색이 유지된다. 여기서 한 값으로 고정하면 두 화면 중 * 한쪽은 반드시 자기 기준색과 어긋난다. 의도적으로 흐리게 두는 인용(blockquote)만 * 예외로 색을 지정한다. * * ── 다루는 태그의 범위 ────────────────────────────────────────────────────── * `web/src/lib/board/sanitize.ts` 의 `ALLOWED_TAGS`(210~223행)에 있는 태그만 다룬다. * 거기 없는 태그는 저장 시 사라지므로 규칙을 써 봐야 죽은 규칙이다. * 그 허용목록 **36개를 이 파일과 1:1 로 대조**한 결과(2026-08-20)가 아래다. 세 칸의 * 합이 36 이고, **규칙도 근거도 없이 남은 태그는 0개**다. * · 이 파일이 그린다 (28) — p · h1~h6 · ul · ol · li · blockquote · hr · a · * strong · b · em · i · u · s · del · sub · sup · code · pre · * table · th · td · caption * · 다른 파일이 이미 같은 값으로 그린다 (1) — img * (board-view.css:68~73 · board-write.css §4-1. 여기에 또 쓰면 규칙이 두 벌이 된다.) * · 규칙을 **일부러 두지 않았다** (7) — div · span · br · thead · tbody · tfoot · tr. * 각각의 근거는 §11 에 적어 두었다. * 🔴 `ALLOWED_TAGS` 에 태그를 더하는 날에는 이 세 칸 중 하나에 반드시 자리를 잡아 줄 것. * "정제기는 통과시키는데 스타일이 없는 태그" 는 화면에서만 드러나고 코드에서는 * 보이지 않는다 — 이 대조표가 그것을 막는 장치다. * * ⚠️ 이 대조표는 **태그**의 것이다. 2026-08-20 에 더해진 §13~§17(에디터 서식 클래스 * `bc-*`)은 같은 태그 위에 얹히는 **다른 층**이라 위 36개 계산을 바꾸지 않는다. * 그 절들의 전제와 클래스명 정본은 §12 다음의 큰 머리말에 적어 두었다. * * ── 로드 순서 (이 파일은 를 스스로 걸지 않는다) ────────────────────── * **레거시 CSS 전부와 board-view.css / board-write.css 보다 뒤**에 실려야 한다. * 아래 규칙 상당수가 common.css 의 전역 리셋을 되돌리는 것이고, 되돌리는 선언 중 * 명시도가 같아지는 자리는 순서로만 결정된다. * 상세 화면: (레이아웃의 레거시 CSS) → board-view.css → **board-content.css** * 편집 화면: board.page.css → write.css → board-write.css → **board-content.css** * * ── 값의 출처 표기 규약 ───────────────────────────────────────────────────── * board-write.css 와 같다. 값마다 `파일:행` 으로 근거를 달고, 근거가 없는 값은 `신규` * 라고 적는다. board-write.css §4-2 에서 옮겨 온 값은 `§4-2 이관` 이라고 적고 원래 * 근거를 함께 남겼다. * ⚠️ common.css 행번호: 이 파일도 board-write.css 도 **실측 행번호**를 쓴다. 예전에는 * board-write.css 의 common.css 참조가 한 줄씩 밀려 있었고(머리말 `20~31`, 본문의 * `:23`(details) · `:24`(ol,ul) · `:29 · 31`(button/input 글꼴) · `:30`(button 리셋)), * 이 파일이 그 사실을 여기에 적어 두는 것으로 대신했다. 2026-08-20 에 board-write.css * 쪽을 실측값으로 맞췄으므로 이제 두 파일의 표기가 같다. 실측값은 다음과 같다: * 16~20행 리셋 선택자 · 21행 그 선언(margin/padding/border 0, font-size 100%) * 22행 `article…details…{display:block; overflow:hidden}` * 23행 `ol, ul {list-style: none}` * 24행 `table {border-collapse: collapse; border-spacing: 0}` * 26행 `a {color:#1c1c1c; text-decoration:none}` * 28행 `button, label {font-family:…}` · 29행 `button {border:none; outline:none}` * 30행 `input {font-family:…}` * (앱 코드 쪽 참조 `edit/page.tsx:66` 의 `common.css:23` = `ol, ul {list-style:none}` 은 * 처음부터 실측값이라 손대지 않았다.) */ /* ══════════════════════════════════════════════════════════════════════════ * 1. 문단 — p * * `.case-ba-label` 은 제외한다. 전후사진 블록의 라벨이고 style.css:4371~4375 가 이미 * 그린다(margin-bottom:10px). 그 선택자는 명시도 (0,1,0) 이라 이 규칙 (0,1,1) 에 그냥 * 지고, 그러면 라벨과 사진 사이 간격이 바뀐다 — 그래서 매칭 자체를 피한다. * 🔴 전후사진 블록(.case-before-after / .case-ba-item / .case-ba-arrow)에는 이 파일이 * 아무 규칙도 주지 않는다. style.css:4352~4387 이 상세·편집 양쪽에서 그대로 걸린다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content p:not(.case-ba-label), .wr_editable p:not(.case-ba-label) { margin: 0 0 0.8em; /* §4-2 이관(12px, 신규) → 0.8em (상세 12px / 편집 12.8px) */ } /* 목록·인용 안의 마지막 문단까지 아래 여백을 주면 상자 밑이 비어 보인다. */ .bv-content li > p:last-child, .bv-content blockquote > p:last-child, .wr_editable li > p:last-child, .wr_editable blockquote > p:last-child { margin-bottom: 0; /* §4-2 이관(신규) */ } /* * 치료사례 잠금 가림막의 안내 문구(BoardView.tsx:246 → CaseLockNotice.tsx:68)는 본문이 * 아니라 UI 다. board-view.css:166~173 이 `margin:0` 으로 그리는데 그 선택자는 (0,1,1), * 위 문단 규칙은 `:not()` 때문에 (0,2,1) 이라 그냥 두면 이 파일이 이겨서 가림막 문구가 * 아래로 밀린다(.case-lock-overlay 는 gap:18px 짜리 flex column 이다). * 값은 board-view.css:172 그대로 되돌려 준다. 편집 화면에는 이 마크업이 없다. */ .bv-content .case-lock-overlay p { margin: 0; /* board-view.css:172 */ } /* ══════════════════════════════════════════════════════════════════════════ * 2. 제목 — h1 ~ h6 * * 툴바 버튼은 h3(제목) · h4(소제목) 둘뿐이다(PostEditor.tsx:531 · 537). 글 제목이 *

(board-view.css:33)라서 본문은 그 아래 단계부터 쓴다. * 그런데 h1 · h2 · h5 · h6 도 **실제로 저장될 수 있다**: StarterKit 의 Heading 은 * `levels: [1,2,3,4,5,6]` 기본값으로 켜져 있고(@tiptap/extension-heading dist/index.js:7), * PostEditor.tsx:195 는 heading 옵션을 건드리지 않는다. 즉 마크다운 입력(`# `~`###### `)과 * 단축키(Mod-Alt-1~6)로 여섯 단계 전부가 들어오고, 정제기 허용목록에도 h1~h6 이 전부 * 있다(sanitize.ts:213). 규칙이 없으면 리셋(common.css:21) 때문에 "본문 크기 굵은 글씨" * 로만 보인다 — 그래서 여섯 단계를 모두 그린다. * * 크기 상한: h1 이라도 글 제목 `.bv-title`(22px, board-view.css:34)을 넘지 않게 잡았다. * 상세 기준 15px × 1.45 = 21.75px. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content h1, .wr_editable h1, .bv-content h2, .wr_editable h2, .bv-content h3, .wr_editable h3, .bv-content h4, .wr_editable h4, .bv-content h5, .wr_editable h5, .bv-content h6, .wr_editable h6 { /* em 여백은 **그 제목 자신의** font-size 기준이다. h3 로 계산하면 편집에서 위 24px / 아래 10px — §4-2 의 px 값과 같은 자리에 떨어진다. */ margin: 1.2em 0 0.5em; /* §4-2 이관(h3 의 24px/10px; 아래 10px = style.css:4375) */ font-weight: 700; /* board-view.css:35 */ } /* 상자 안쪽 padding(편집 20px = write.css:38)과 겹쳐 위가 뜨는 것을 막는다. */ .bv-content h1:first-child, .wr_editable h1:first-child, .bv-content h2:first-child, .wr_editable h2:first-child, .bv-content h3:first-child, .wr_editable h3:first-child, .bv-content h4:first-child, .wr_editable h4:first-child, .bv-content h5:first-child, .wr_editable h5:first-child, .bv-content h6:first-child, .wr_editable h6:first-child { margin-top: 0; /* §4-2 이관(신규) */ } /* h1~h3 은 글 제목과 같은 조판을 쓴다. */ .bv-content h1, .wr_editable h1, .bv-content h2, .wr_editable h2, .bv-content h3, .wr_editable h3 { line-height: 1.45; /* board-view.css:37 */ letter-spacing: -0.02em; /* board-view.css:38 */ } .bv-content h4, .wr_editable h4, .bv-content h5, .wr_editable h5, .bv-content h6, .wr_editable h6 { line-height: 1.5; /* §4-2 이관(h4, 신규) */ } .bv-content h1, .wr_editable h1 { font-size: 1.45em; } /* 신규 — 상한: .bv-title 22px(board-view.css:34) 미만 (상세 21.75px / 편집 23.2px) */ .bv-content h2, .wr_editable h2 { font-size: 1.35em; } /* 신규 (상세 20.25px / 편집 21.6px) */ .bv-content h3, .wr_editable h3 { font-size: 1.25em; } /* §4-2 이관(편집 20px) → 1.25em (상세 18.75px / 편집 20px) */ .bv-content h4, .wr_editable h4 { font-size: 1.1em; } /* §4-2 이관(편집 17px)을 배수로 반올림 (상세 16.5px / 편집 17.6px) */ .bv-content h5, .wr_editable h5 { font-size: 1em; } /* 신규 — 본문 크기 + 굵기만 (상세 15px / 편집 16px) */ .bv-content h6, .wr_editable h6 { font-size: 0.95em; } /* 신규 (상세 14.25px / 편집 15.2px) */ /* ══════════════════════════════════════════════════════════════════════════ * 3. 목록 — ul · ol · li * * common.css:23 `ol, ul {list-style: none}` 를 되돌리지 않으면 글머리 기호도 번호도 * 없이 문단이 들여쓰기만 된 채 나온다. 명시도가 (0,0,1) 대 (0,1,1) 이라 이 규칙이 * 이기지만, 머리말의 로드 순서는 그대로 지킬 것. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content ul, .wr_editable ul, .bv-content ol, .wr_editable ol { margin: 0 0 0.8em; /* §4-2 이관(12px) — 문단과 같은 간격 */ padding-left: 1.4em; /* §4-2 이관(22px, 신규) → 1.4em (상세 21px / 편집 22.4px) */ } .bv-content ul, .wr_editable ul { list-style: disc; } /* §4-2 이관 — common.css:23 되돌림 */ .bv-content ol, .wr_editable ol { list-style: decimal; } /* §4-2 이관 — common.css:23 되돌림 */ .bv-content li, .wr_editable li { margin-bottom: 0.25em; /* §4-2 이관(4px, 신규) → 0.25em (상세 3.75px / 편집 4px) */ } /* 중첩 목록은 부모 li 의 여백 안에 들어가므로 자기 아래 여백을 또 주지 않는다. */ .bv-content li > ul, .wr_editable li > ul, .bv-content li > ol, .wr_editable li > ol { margin-bottom: 0; /* §4-2 이관 */ } /* ══════════════════════════════════════════════════════════════════════════ * 4. 인용 — blockquote * * 저장소에 이미 있는 안내상자 관용(style.css:4391~4397 `#mb_register .find-notice` — * 연한 배경 + 굵은 왼쪽 띠)을 그대로 빌렸다. 새 조형을 만들지 않는다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content blockquote, .wr_editable blockquote { margin: 1em 0; /* §4-2 이관(16px, 신규) → 1em (상세 15px / 편집 16px) */ padding: 0.75em 1.15em; /* §4-2 이관(12px 18px; style.css:4393 의 16/18 에서 위아래 축소) */ background: #f4f7fc; /* style.css:4394 */ border-left: 4px solid #DFE0E2; /* 굵기 4px = style.css:4396, 색 = write.css:37 */ border-radius: 0 10px 10px 0; /* write.css:37 */ color: #555; /* write.css:13 — 본문보다 한 톤 흐리게(의도적 고정색) */ } /* ══════════════════════════════════════════════════════════════════════════ * 5. 구분선 — hr * * 상세 화면 제목 아래 구분선 `.bv-divider`(board-view.css:53~57)와 같은 선을 쓴다. * 리셋(common.css:21)이 border:0 을 걸어 두어, 되살리지 않으면 hr 이 아예 보이지 않는다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content hr, .wr_editable hr { border: none; /* board-view.css:54 */ border-top: 1px solid #e0e6f0; /* board-view.css:55 */ margin: 1.6em 0; /* §4-2 이관(24px) → 1.6em (상세 24px / 편집 25.6px) */ } /* ══════════════════════════════════════════════════════════════════════════ * 6. 링크 — a * * common.css:26 `a {color:#1c1c1c; text-decoration:none}` 때문에 되살리지 않으면 본문 * 링크가 평문과 전혀 구분되지 않는다. 색·밑줄은 이 저장소가 이미 쓰는 본문 링크 표현 * (board-view.css:82 `.bv-links li a`)을 그대로 따른다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content a, .wr_editable a { color: #1d2c58; /* board-view.css:82 */ text-decoration: underline; /* board-view.css:82 */ } /* ══════════════════════════════════════════════════════════════════════════ * 7. 인라인 강조 — strong · b · em · i · u · s · del * * 리셋(common.css:16~21)은 이 일곱의 font-size 만 100% 로 만들 뿐 굵기·기울기·밑줄까지 * 지우지는 않는다 — 지금도 브라우저 기본값으로 표시된다. 그럼에도 명시하는 이유는 * strong · em · u · s 가 툴바의 상시 버튼(PostEditor.tsx §툴바: Bold/Italic/Underline/ * Strike)이라 "브라우저 기본값에 기대는 표현" 으로 두면 리셋이 한 줄 늘어나는 날 조용히 * 사라지기 때문이다. 값은 브라우저 기본값과 같아 지금 화면은 달라지지 않는다. * * b · i · del 은 툴바에도 Tiptap 에도 없다. **레거시 WYSIWYG 잔재**를 위해 정제기 * 허용목록에만 들어 있는 태그다(sanitize.ts:203~208 의 근거 (3), 목록은 `:216`). * 짝이 되는 태그(strong · em · s)와 **같은 값**을 준다 — 옛 글에서 `` 와 `` * 이 다르게 보이면 관리자는 마크업을 보지 않고는 원인을 알 수 없다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content strong, .wr_editable strong { font-weight: 700; } /* board-view.css:35 (저장소의 굵기 값) */ .bv-content b, .wr_editable b { font-weight: 700; } /* 위 strong 과 같은 값 — 레거시 잔재용 */ .bv-content em, .wr_editable em { font-style: italic; } /* 신규 — 브라우저 기본값과 동일 */ .bv-content i, .wr_editable i { font-style: italic; } /* 위 em 과 같은 값 — 레거시 잔재용 */ .bv-content u, .wr_editable u { text-decoration: underline; } /* 신규 — 브라우저 기본값과 동일 */ .bv-content s, .wr_editable s { text-decoration: line-through; } /* 신규 — 브라우저 기본값과 동일 */ .bv-content del, .wr_editable del { text-decoration: line-through; } /* 위 s 와 같은 값 — 레거시 잔재용 */ /* ══════════════════════════════════════════════════════════════════════════ * 8. 코드 — code · pre * * 툴바 버튼은 없지만 StarterKit 의 Code/CodeBlock 이 켜져 있어 단축키·마크다운으로 * 들어올 수 있고, 정제기도 통과시킨다(sanitize.ts:214). 배경은 §4 인용과 같은 * style.css:4394 를 쓴다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content code, .wr_editable code { padding: 0.12em 0.35em; /* §4-2 이관(2px 6px, 신규) → em (상세 1.8/5.25px / 편집 1.9/5.6px) */ background: #f4f7fc; /* style.css:4394 */ border-radius: 3px; /* write.css:14 */ font-size: 0.92em; /* §4-2 이관(신규) */ } .bv-content pre, .wr_editable pre { margin: 1em 0; /* §4-2 이관(16px) → 1em (상세 15px / 편집 16px) */ padding: 0.875em 1.15em; /* §4-2 이관(14px 18px = write.css:41 의 14px + style.css:4393 의 18px) */ background: #f4f7fc; /* style.css:4394 */ border-radius: 10px; /* write.css:37 */ overflow-x: auto; /* §4-2 이관 */ /* * 편집 화면에서는 @tiptap/core 가 에 직접 넣는 `.ProseMirror pre * {white-space: pre-wrap}`(dist/index.js 6558~6560) 때문에 코드가 이미 줄바꿈된다. * 상세 화면의 pre 는 브라우저 기본값 `white-space: pre` 라 긴 줄이 가로로만 넘친다 — * 즉 이 한 줄이 없으면 같은 글이 두 화면에서 다르게 접힌다. 편집 쪽은 값이 같아 * 변화가 없고, 상세 쪽만 편집 화면에 맞춰진다. */ white-space: pre-wrap; /* @tiptap/core dist/index.js:6559 */ } /* 코드블록 안의 code 는 자기 배경·여백을 갖지 않는다(상자가 이중으로 보인다). */ .bv-content pre code, .wr_editable pre code { padding: 0; /* §4-2 이관 */ background: none; /* §4-2 이관 */ border-radius: 0; /* §4-2 이관 */ } /* ══════════════════════════════════════════════════════════════════════════ * 9. 위아래 첨자 — sub · sup * * 이 둘은 **리셋에 정면으로 걸린다.** common.css:17 의 선택자 목록에 `sub, sup` 이 * 들어 있어서 21행의 `font-size: 100%` 가 브라우저 기본값(`font-size: smaller`)을 * 덮어쓴다. 그 결과 첨자가 본문과 **똑같은 크기**로 나오고, 위아래로만 어긋난 글자가 * 되어 "H2O" 의 2 와 "x²" 의 2 를 구분할 수 없다. §7 과 달리 이건 명시하지 않으면 * 실제로 지금 깨져 있는 자리다. * * 세로 위치(`vertical-align`)는 리셋이 건드리지 않아 살아 있지만 여기서도 적는다 — * §7 과 같은 이유(기본값에 기대면 리셋 한 줄에 조용히 사라진다). * * `line-height: 0` 이 핵심이다. 첨자는 자기 줄상자를 위아래로 밀어내므로, 이것이 * 없으면 첨자가 든 줄만 행간이 벌어져 문단이 들쭉날쭉해진다(본문 행간은 상세 1.8 / * 편집 1.7). 첨자는 자기 글자를 그릴 뿐 줄 높이를 정하지 않는다는 뜻이다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content sub, .wr_editable sub, .bv-content sup, .wr_editable sup { font-size: 0.75em; /* 신규 — 브라우저 기본값 `smaller`(≈0.83em)를 배수로 못박음 (상세 11.25px / 편집 12px) */ line-height: 0; /* 신규 — 첨자가 줄 높이를 밀지 않게 */ } .bv-content sup, .wr_editable sup { vertical-align: super; } /* 신규 — 브라우저 기본값과 동일 */ .bv-content sub, .wr_editable sub { vertical-align: sub; } /* 신규 — 브라우저 기본값과 동일 */ /* ══════════════════════════════════════════════════════════════════════════ * 10. 표 — table · th · td · caption * * 정제기는 표 계열 8개를 통째로 통과시키고(sanitize.ts:222) 병합 속성까지 살린다 * (`colspan`·`rowspan`·`scope`, `:249~250`). 그런데 common.css 가 표에 거는 것은 * · 리셋 16~21행 — margin · padding · **border** 를 0, font-size 를 100% 로 * · 24행 — `table {border-collapse: collapse; border-spacing: 0}` * 둘뿐이라, 규칙이 없으면 표는 **선이 하나도 없는 글자 뭉치**로 나온다. 칸이 어디서 * 갈리는지 독자가 알 수 없고, `border-collapse` 만 걸려 있어 간격조차 없다. * * 새 조형을 만들지 않고 저장소에 이미 있는 표 관용(style.css:4255~4262 * `.agree_content table` — 회원가입 약관 표)을 그대로 빌렸다. §4 인용이 * `#mb_register .find-notice` 를 빌린 것과 같은 방식이다. * ⚠️ 그 관용에서 `font-size: 13px`(style.css:4255) 하나만 빼 왔다. 13px 는 약관 전문을 * 작게 넣으려는 값이지 표의 조형이 아니고, 본문 표까지 줄이면 두 컨텍스트의 기준 * 크기(15px/16px)를 존중하려던 이 파일의 전제가 깨진다. 표는 본문 크기를 물려받는다. * ⚠️ thead · tbody · tfoot · tr 에는 규칙을 두지 않았다 — 근거는 §11. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content table, .wr_editable table { width: 100%; /* style.css:4255 */ margin: 1em 0; /* §4 인용 · §8 pre 와 같은 블록 간격 (상세 15px / 편집 16px) */ border-collapse: collapse; /* common.css:24 · style.css:4255 와 같은 값 — 명시 */ } .bv-content th, .wr_editable th, .bv-content td, .wr_editable td { padding: 0.55em 0.65em; /* style.css:4258 의 8px 10px 를 배수로 (상세 8.25/9.75px / 편집 8.8/10.4px) */ border: 1px solid #e0e0e0; /* style.css:4259 — 리셋(common.css:21)의 border:0 되돌림 */ text-align: center; /* style.css:4260 */ } .bv-content th, .wr_editable th { background: #f0f4fb; /* style.css:4262 */ font-weight: 600; /* style.css:4262 */ } /* 은 약관 표에 없어 빌릴 값이 없다. 인용(§4)의 "본문보다 한 톤 흐리게" 를 따른다. */ .bv-content caption, .wr_editable caption { margin-bottom: 0.4em; /* 신규 (상세 6px / 편집 6.4px) */ font-weight: 600; /* style.css:4262 (표 머리와 같은 굵기) */ color: #555; /* write.css:13 — §4 인용과 같은 흐린 색(의도적 고정색) */ } /* ══════════════════════════════════════════════════════════════════════════ * 11. 규칙을 **일부러 두지 않은** 태그 — div · span · br · thead · tbody · tfoot · tr * * 허용목록(§머리말 "다루는 태그의 범위")에 있으면서 이 파일이 비워 둔 자리다. 규칙이 * 아니라 **근거**를 남긴다 — 근거가 없으면 다음 사람이 이 일곱 개를 "빠뜨린 구멍" 으로 * 보고 채워 넣게 되고, 그 중 셋은 채워 넣는 순간 화면이 깨진다. * * · `div` — 🔴 규칙을 주면 안 된다. 본문에서
가 실제로 쓰이는 자리는 치료사례 * 전후사진 블록(`.case-before-after` · `.case-ba-item` · `.case-ba-arrow`, 운영 본문 * wr_id 11~14)뿐이고 그것은 style.css:4352~4387 이 그린다. 여기서 `div` 에 여백·크기를 * 주면 그 세 겹에 **전부** 얹혀 전후사진 레이아웃이 어긋난다(§1 의 🔴 와 같은 이유). * · `span` — class 를 걸 자리를 여는 인라인 후크일 뿐 자기 표현이 없다. 리셋의 * `font-size:100%` 도 인라인 요소의 기본값과 같아서 되돌릴 것이 없다. 표현은 그 span * 에 붙은 클래스가 정한다(정제기가 `class` 를 살리는 이유, sanitize.ts:228~235). * ⤷ 2026-08-20: **그 클래스가 실제로 생겼다** — 글씨 크기 §14, 글자색·형광펜 §15. * 맨 `span`(클래스 없는 것)에는 지금도 규칙이 없고, 앞으로도 두지 않는다. * · `br` — 강제 개행. 렌더 결과는 컨테이너의 line-height(상세 1.8 = board-view.css:62 / * 편집 1.7 = write.css:39)로만 정해진다. 스타일을 걸 표면 자체가 없다. * · `thead` · `tbody` · `tfoot` · `tr` — 표의 구획·행 묶음. §10 은 선을 **셀(th·td)** 한 * 층에만 그리고 배경도 th 에만 준다. 같은 선을 행·구획에도 걸면 `border-collapse: * collapse` 의 병합 규칙이 어느 선을 살릴지 정하게 되어, 같은 표 안에서도 자리마다 * 굵기·색이 달라 보인다. 선은 한 층에만 그린다. * ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ * 12. 반응형 — @media 블록이 없는 이유 * * 이 파일에는 미디어쿼리가 하나도 없다. **필요가 없어서**다. * * 두 컨텍스트의 브레이크포인트는 이미 같은 768px 이고(board-view.css:134 * `@media (max-width: 768px)`, board-write.css §6 `@media (max-width: 768px)`, * 전후사진이 세로로 접히는 style.css:4383 도 같은 값), 그 안에서 각자 **기준 크기만** * 줄인다: * .bv-content 15px → 14px (board-view.css:138) * .wr_editable 16px → 15px (board-write.css §6) * 이 파일의 모든 값이 그 기준 크기의 em 배수라, 기준이 줄면 제목·여백·목록 들여쓰기가 * 전부 같은 비율로 함께 줄어든다. 여기에 px 로 된 모바일 예외를 또 만들면 데스크톱과 * 모바일에서 서로 다른 비율이 되어, 방금 없앤 문제(규칙 두 벌)가 축만 바꿔 되살아난다. * 🔴 그래서 이 파일에 @media 를 추가하기 전에는, 정말 "비율" 이 달라져야 하는 것인지 * (= 기준 크기 변화만으로는 안 되는지) 먼저 확인할 것. * ══════════════════════════════════════════════════════════════════════════ */ /* ██████████████████████████████████████████████████████████████████████████ * §13 ~ §17. 에디터 서식 클래스 (`bc-*`) — 2026-08-20 추가 * * ── 🔴 왜 클래스인가 (이 다섯 절 전체의 전제) ────────────────────────────── * 정제기(`web/src/lib/board/sanitize.ts`)의 `ALLOWED_ATTRIBUTES` 에 **`style` 이 없다.** * 그래서 정렬·크기·색·형광펜·사진 크기를 인라인 스타일로 구현하면 편집 중에는 멀쩡히 * 보이다가 **저장하는 순간 서식만 통째로 사라진다.** 반대로 `class` 는 `'*': ['class']` * 로 전 태그에 열려 있다. 즉 아래 규칙들이 그리는 클래스가 **이 앱에서 본문 서식이 * 존재할 수 있는 유일한 형태**다. * * ── 클래스명의 정본은 앱 코드에 있다 ─────────────────────────────────────── * web/src/components/board/editor/format-classes.ts * 이 파일은 그 목록을 **손으로 옮겨 적은 것**이다(CSS 가 TS 를 import 할 수 없다). * 🔴 클래스명을 바꾸면 세 곳을 함께 고칠 것: 위 TS · 이 CSS · `sanitize.test.mjs`. * 하나만 고치면 "에디터에서는 눌리는데 화면에 아무 변화가 없다"(이 파일을 빠뜨림) 또는 * "테스트는 초록인데 실제로는 사라진다"(테스트를 빠뜨림)가 된다. * * ── 접두 `bc-` (= board content) ─────────────────────────────────────────── * 기존 관례와 충돌하지 않는 새 이름이다. `case-ba-*` 는 전후사진 블록의 레거시 정본 * (style.css:4352~4387)이고 `wr_*` 는 편집 화면 UI(board-write.css)라 본문에 저장되지 * 않는다. `bc-` 는 **저장되는 본문 안에만** 나타난다. * * ── 위 §1~§12 와의 관계 ──────────────────────────────────────────────────── * §1~§10 이 **태그**를 그렸다면 여기는 **클래스**를 그린다. 두 층은 직교한다 — * `

` 는 §1 의 문단 여백과 §13 의 정렬을 함께 받는다. * 그래서 §머리말의 "허용 태그 36개 1:1 대조표" 는 이 절들 때문에 바뀌지 않는다. * 다만 §11 이 "span 은 클래스를 걸 자리를 여는 인라인 후크일 뿐" 이라고 적어 둔 그 * 자리를 §14·§15 가 실제로 쓴다(맨 `span` 에는 여전히 규칙이 없다). * * ── @media 를 쓰지 않는다 ────────────────────────────────────────────────── * §12 의 원칙 그대로다. 아래 크기·간격은 전부 `em`/`%` 라 기준 글자 크기와 본문 폭이 * 줄면 함께 줄어든다. §17 의 2단 사진이 모바일에서도 **가로로 나란히** 남는 것은 * 그 절에 적은 대로 의도한 동작이다(전후사진 블록이 세로로 접히는 것과 다르다). * ██████████████████████████████████████████████████████████████████████████ */ /* ══════════════════════════════════════════════════════════════════════════ * 13. 정렬 — .bc-align-left / -center / -right * * 붙는 자리는 문단 · 제목 · 이미지 셋이다(format-classes.ts `TEXT_ALIGN_TYPES`). * 글자는 `text-align` 으로 끝나지만 **이미지는 그렇지 않다** — 본문 이미지는 * `display:block; margin:0 auto`(board-view.css:71~72 · board-write.css §4-1)라 부모의 * text-align 이 아니라 자기 좌우 margin 이 위치를 정한다. 그래서 아래 두 벌이 필요하다. * * 🔴 **이미지 규칙에만 `#bo_w` 가 붙어 있다.** 이 파일에서 유일한 id 선택자이고, 실측으로 * 밝혀진 필요다(2026-08-20, Playwright): 편집 화면의 기본 이미지 규칙은 * `#bo_w .wr_editable img { margin:0 auto }`(board-write.css §4-1)이라 명시도가 (1,1,1) * 이다. **id 하나는 클래스를 아무리 겹쳐도 이기지 못하므로**(`.wr_editable img.bc-align-right` * 는 (0,2,1)) `#bo_w` 없이 적으면 편집 화면에서만 정렬이 먹지 않는다 — 관리자가 오른쪽으로 * 맞춘 사진이 편집 중에는 가운데로 보이고 저장 후 상세 화면에서만 오른쪽으로 간다. 이 * 파일이 없애려는 문제("두 화면이 다르게 보인다")가 정확히 그 모양으로 되살아난다. * 상세 화면 쪽(`.bv-content img`, (0,1,1))은 클래스만으로 충분해 그대로 둔다. * ⚠️ 글자 정렬에는 `#bo_w` 를 붙이지 않는다 — 경쟁하는 id 규칙이 없다(§1~§10 이 전부 * 클래스 선택자로 잘 걸린다). 필요 없는 곳에 id 를 뿌리면 다음 사람이 이 파일 전체를 * id 로 감싸게 된다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content .bc-align-left, .wr_editable .bc-align-left { text-align: left; } /* 신규 */ .bv-content .bc-align-center, .wr_editable .bc-align-center { text-align: center; } /* 신규 */ .bv-content .bc-align-right, .wr_editable .bc-align-right { text-align: right; } /* 신규 */ /* 이미지는 좌우 margin 이 위치를 정한다. `margin:0 auto`(board-view.css:72 · board-write.css §4-1)를 덮는다. `#bo_w` 가 붙은 이유는 위 🔴 문단. */ .bv-content img.bc-align-left, #bo_w .wr_editable img.bc-align-left { margin-left: 0; margin-right: auto; } .bv-content img.bc-align-center, #bo_w .wr_editable img.bc-align-center { margin-left: auto; margin-right: auto; /* board-view.css:72 와 같은 값 — 명시 */ } .bv-content img.bc-align-right, #bo_w .wr_editable img.bc-align-right { margin-left: auto; margin-right: 0; } /* ══════════════════════════════════════════════════════════════════════════ * 14. 글씨 크기 — .bc-size-small / -large (인라인 ) * * 🔴 **자유 픽셀 입력이 없다.** 관리자가 숫자를 직접 적을 수 있으면 (1) 같은 "크게" 가 * 글마다 다른 크기가 되고 (2) px 로 박힌 글자가 모바일에서 폭을 넘긴다. 프리셋 두 개 * (+ 해제)뿐이고 값은 `em` 이라 상세 15px / 편집 16px / 모바일 14~15px 어디서나 같은 * 비율이다. * * 배수의 근거: 작게 0.85em 은 저장소가 이미 쓰는 "한 단계 작은 글자"(board-view.css:138 * 의 15→14px = 0.93, write.css:41 의 13px/15px = 0.87)의 자리이고, 크게 1.3em 은 * 본문(15px)과 h3(1.25em)의 사이가 아니라 **살짝 위**여서 제목과 헷갈리지 않는다. * ⚠️ 제목(h1~h6)과는 다른 층이다 — 크기만 바꾸고 굵기·여백은 건드리지 않는다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content .bc-size-small, .wr_editable .bc-size-small { font-size: 0.85em; /* 신규 (상세 12.75px / 편집 13.6px) */ } .bv-content .bc-size-large, .wr_editable .bc-size-large { font-size: 1.3em; /* 신규 (상세 19.5px / 편집 20.8px) */ } /* ══════════════════════════════════════════════════════════════════════════ * 15. 글자색 · 형광펜 — .bc-color-* / .bc-mark-* (인라인 ) * * 🔴 임의 색상 팔레트가 아니다. 여덟 값 **전부 이 저장소가 이미 쓰는 색**이고, 새로 지은 * 색은 하나도 없다. 근거는 값마다 달아 두었다. * * 형광펜에 좌우 여백과 라운드를 조금 주는 것은 글자가 색 띠에 딱 붙지 않게 하기 위한 * 것이다. 위아래 여백은 주지 않는다 — 인라인 요소의 세로 padding 은 줄 높이를 밀지 않고 * **윗줄을 덮는다**(line-height 1.7~1.8 안에서 겹친다). * ══════════════════════════════════════════════════════════════════════════ */ .bv-content .bc-color-navy, .wr_editable .bc-color-navy { color: #1d2c58; } /* board-view.css:82 (본문 링크색) · style.css:4374 */ .bv-content .bc-color-blue, .wr_editable .bc-color-blue { color: #000277; } /* write.css:15 (이 앱의 강조색) */ .bv-content .bc-color-red, .wr_editable .bc-color-red { color: #d13f4a; } /* board.css:298 (.btn_admin — 저장소의 유일한 경고색) */ .bv-content .bc-color-gray, .wr_editable .bc-color-gray { color: #555; } /* write.css:13 (본문보다 한 톤 흐리게) */ .bv-content .bc-mark-yellow, .wr_editable .bc-mark-yellow, .bv-content .bc-mark-sky, .wr_editable .bc-mark-sky, .bv-content .bc-mark-mint, .wr_editable .bc-mark-mint, .bv-content .bc-mark-violet, .wr_editable .bc-mark-violet { padding: 0 0.15em; /* 신규 — 좌우만. 세로 padding 은 윗줄을 덮는다 */ border-radius: 3px; /* write.css:14 */ } .bv-content .bc-mark-yellow, .wr_editable .bc-mark-yellow { background: #FFF8B8; } /* style.css:809 (메인 추천카드 2번) */ .bv-content .bc-mark-sky, .wr_editable .bc-mark-sky { background: #D8EAFF; } /* style.css:805 (1번) */ .bv-content .bc-mark-mint, .wr_editable .bc-mark-mint { background: #D0F7FA; } /* style.css:813 (3번) */ .bv-content .bc-mark-violet, .wr_editable .bc-mark-violet { background: #E4E7FF; } /* style.css:817 (4번) */ /* ══════════════════════════════════════════════════════════════════════════ * 16. 본문 사진 크기 — .bc-img-narrow / -half / -wide * * 기본(클래스 없음)은 `max-width:100%`(board-view.css:69) = 본문 폭 가득이다. 아래 셋은 * 그보다 **좁게** 보여 주는 프리셋이고, 값이 `%` 라 본문 폭이 줄면 함께 줄어든다. * `width` 를 px 로 두지 않은 이유는 sized-image.ts 머리말에 있다(모바일에서 비율이 깨지고, * 글마다 숫자가 제각각이 된다). * * ⚠️ `margin` 을 여기서 건드리지 않는다. 가운데/왼쪽/오른쪽은 §13 의 몫이고, 두 축을 한 * 규칙에 섞으면 "작게 = 항상 가운데" 같은 숨은 결합이 생긴다. * ⚠️ 전후사진(`.case-ba-item img`)과 2단 사진(`.bc-duo img`)에는 이 클래스가 붙지 않는다 — * 그 안의 `` 는 Tiptap 의 image 노드가 아니라 atom 블록이 찍어 낸 것이다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content img.bc-img-narrow, .wr_editable img.bc-img-narrow { width: 40%; } /* 신규 */ .bv-content img.bc-img-half, .wr_editable img.bc-img-half { width: 60%; } /* 신규 */ .bv-content img.bc-img-wide, .wr_editable img.bc-img-wide { width: 80%; } /* 신규 */ /* ══════════════════════════════════════════════════════════════════════════ * 17. 사진 2장 나란히 — .bc-duo / .bc-duo-item * * 전후사진 블록(`.case-before-after`, style.css:4352~4387)과 **다른 블록**이다. 라벨도 * 화살표도 없고 의료법 게이트 대상도 아니다(`web/src/components/board/editor/photo-duo.ts`). * 조형만 그쪽에서 빌려 왔다 — 사진 라운드 10px(style.css:4368), flex 가로 배치. * * 🔴 **모바일에서도 세로로 접지 않는다.** 전후사진이 768px 이하에서 접히는 것은 * (style.css:4383) 라벨·화살표가 들어가 폭이 모자라기 때문이고, 그 블록의 비교 대상은 * "전 → 후" 라 세로로 쌓여도 뜻이 유지된다. 이쪽은 관리자가 **일부러 나란히 놓은** 두 * 장이라 접는 순간 그 의도가 사라진다. 375px 화면에서도 한 장이 ~165px 로 알아볼 수 있고, * 무엇보다 이 파일의 @media 금지(§12)를 지킬 수 있다. * · gap 이 `em` 인 것도 같은 이유다 — 기준 글자 크기가 줄면 간격도 함께 줄어든다. * · `min-width: 0` 은 flex 아이템의 기본 `min-width:auto` 때문에 사진이 컨테이너를 밀어 * 넘치는 것을 막는다. 이 한 줄이 없으면 좁은 화면에서 오른쪽 사진이 잘린다. * ══════════════════════════════════════════════════════════════════════════ */ .bv-content .bc-duo, .wr_editable .bc-duo { display: flex; align-items: flex-start; gap: 1.2em; /* style.css:4356 의 20px 를 배수로 (상세 18px / 편집 19.2px) */ margin: 1em 0; /* §4 인용 · §8 pre 와 같은 블록 간격 */ } .bv-content .bc-duo-item, .wr_editable .bc-duo-item { flex: 1 1 0; /* style.css:4361 의 `flex:1` — 두 칸이 같은 폭 */ min-width: 0; /* 신규 — flex 아이템 기본 min-width:auto 무력화 */ } /* * §16 의 `width` 프리셋도, `margin:0 auto`(board-view.css:72) 도 여기서는 의미가 없다. * 사진은 자기 칸을 가득 채운다 — 전후사진 블록의 `.case-ba-item img`(style.css:4366~4370) * 와 같은 처리다. * `#bo_w` 가 붙은 이유는 §13 의 🔴 문단과 같다(편집 화면의 기본 img 규칙이 id 로 감싸여 * 있다). 지금은 칸 폭 = 사진 폭이라 `auto` 가 0 으로 계산돼 겉보기 차이가 없지만, 그건 * 우연이다 — 규칙이 지도록 두면 §16 처럼 폭이 달라지는 변경 하나에 편집 화면만 어긋난다. */ .bv-content .bc-duo img, #bo_w .wr_editable .bc-duo img { display: block; /* style.css:4369 */ width: 100%; /* style.css:4367 */ margin: 0; /* board-view.css:72 의 `0 auto` 를 되돌림 */ border-radius: 10px; /* style.css:4368 */ }