feat(cafe24): 문법 강조 편집기 + 소스 자동 정리, 목록 550px

1) 검색 입력란이 거대했던 버그

.cf24-filters 가 세로 flex 인데 .cf24-search 에 flex:0 1 320px 을 줬다. 세로
방향에서는 flex-basis 가 '높이'로 적용돼 입력란이 320px 짜리 상자가 됐다.
height:32px 로 한 줄에 고정했고, 그만큼 목록이 더 보인다.

2) 목록 550px

요청대로 왼쪽을 550px 로 넓혔다. 남은 폭(약 290px)이 상품명 몫이라 대부분 한 줄에
들어가고, 수정일도 월-일 시:분까지 보여준다. 컬럼은 번호·상품명·진열·판매·수정 5개
그대로다.

3) 문법 강조 편집기

색칠된 <pre> 위에 투명한 <textarea> 를 겹치는 방식으로 직접 구현했다. 외부
라이브러리를 쓰지 않는 이유는 자체 호스팅 원칙이다(CDN 의존 금지). 태그·속성이름·
속성값·주석·기호를 색으로 구분하고 Tab 은 들여쓰기로 쓴다.

두 층의 글자가 어긋나지 않으려면 폰트·줄높이·padding·줄바꿈 규칙이 완전히 같아야
한다. 특히 높이는 <pre> 의 scrollHeight 를 기준으로 textarea 에 지정한다 —
textarea 의 scrollHeight 를 쓰면 두 줄쯤 더 잡혀 어긋난다(실측 830 vs 792,
브라우저에서 확인 후 수정). 20만 자를 넘으면 강조를 끈다.

4) 소스 정리(포맷)와 저장 반영

store.format_html 을 추가했다. 화면 표시와 저장에 같은 함수를 쓰므로 화면에서 본
정리된 소스가 그대로 카페24에 저장된다.

렌더링을 바꾸지 않는 것을 최우선으로 했다. HTML 에서 공백은 의미가 있어서 인라인
요소 사이에 줄바꿈을 넣으면 화면에 공백이 생긴다 — 이미지 사이가 벌어지는 고전적인
사고다. 그래서 블록 요소 경계에서만 줄을 나누고 img·br·span·a 는 블록 목록에서
일부러 뺐다. <style>·<script>·<pre>·<textarea> 안쪽은 한 글자도 건드리지 않는다.
내용이 한 줄뿐인 짧은 블록은 다시 한 줄로 합친다.

멱등성을 테스트로 고정했다. 처음 구현은 <style> 안 빈 줄이 실행마다 한 줄씩 늘어나
멱등이 깨졌고(테스트가 잡음), 앞뒤 빈 줄을 버리도록 고쳤다. 편집하지 않고 다시
적용해도 저장값이 계속 달라지면 버전 이력이 의미를 잃는다.

닫는 태그가 빠진 HTML 이 흔하므로 들여쓰기 상한(12)을 뒀고, 어떤 이유로든 실패하면
원본을 그대로 돌려준다.

검증: 유닛테스트 41개 통과(신규 8개 — 블록 분리·인라인 보존(이미지 붙음)·style
원문 보존·멱등·짧은 블록 합치기·깨진 HTML 내성·속성값 미변경·정리+인코딩 왕복).
브라우저 실측: 검색란 32px, 목록 550px/편집기 750px, 오버레이 두 층 높이 일치
(편집 전 792=792, 20줄 추가 후 1175=1175), 토큰 색상 적용, 가로 스크롤 없음.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/CAFE24_MODULE.md

@@ -91,15 +91,20 @@ cafe24_oauth_tokens 저장
 ### 2-1. 상품관리 화면 구성 (2분할)
 
 ```
-┌─ 360px ─────────┬────────────── 남은 폭 전부 ──────────────┐
-│ 검색 / 진열·판매 │ 선택한 상품 이름·상태                     │
-│ 필터(중복 선택)  │ PC 상세설명 HTML 편집(칸이 남은 높이 차지) │
-│ ── 목록 ──       │ [메모] [복사] [카페24에 적용]             │
-│ 번호 상품명 진열 │ ▸ 모바일 HTML(읽기 전용, 분리 상품만)     │
-│ 판매 수정        │ ▸ 버전 이력                               │
-└─────────────────┴───────────────────────────────────────────┘
+┌─ 550px ───────────────────┬───────── 남은 폭 전부 ─────────┐
+│ 상품명 검색(한 줄)         │ 상품 이름 · 번호 · 진열/판매    │
+│ ☐진열중 ☐판매중            │ PC 상세설명 HTML 편집기         │
+│ ── 목록(전체, 스크롤) ──   │  (문법 강조 · 남은 높이 전부)   │
+│ 번호 상품명 진열 판매 수정 │ [메모] [복사] [카페24에 적용]   │
+│ (제목행 클릭 = 정렬)       │ ▸ 모바일 HTML(분리 상품만)      │
+│                            │ ▸ 버전 이력                     │
+└───────────────────────────┴─────────────────────────────────┘
 ```
 
+- 검색 입력란은 **한 줄 높이로 고정**한다(`height: 32px`). `.cf24-filters` 가 세로
+  flex 이므로 `flex-basis` 를 주면 그 값이 **높이**로 적용돼 입력란이 거대해진다.
+  실제로 그 사고가 있었다 — flex 방향을 항상 확인할 것.
+
 - **왼쪽은 전체 목록**(페이지 없음). `list_all_products` 로 페이지를 넘겨가며 전부
   받는다(1회 100개, 상한 1000개). 필터를 한 페이지에만 적용하면 다음 페이지의
   해당 상품이 빠지기 때문이다.
@@ -156,10 +161,40 @@ cafe24_oauth_tokens 저장
 
 ---
 
+### 2-2. 편집기 (문법 강조 · 소스 정리)
+
+**문법 강조** — 색칠된 `<pre>` 위에 **투명한 `<textarea>`** 를 정확히 겹쳐 놓는
+방식이다. 외부 라이브러리를 쓰지 않는다(자체 호스팅 원칙).
+
+- 두 층의 **폰트·글자크기·줄높이·padding·`white-space`·`overflow-wrap`·`tab-size`
+  가 완전히 같아야** 글자가 어긋나지 않는다. `cafe24.css` 의
+  `.cf24-code-hl, .cf24-code-input` 규칙을 항상 함께 수정할 것.
+- 높이는 **`<pre>` 의 `scrollHeight` 를 기준**으로 textarea 에 지정한다.
+  textarea 의 `scrollHeight` 를 쓰면 브라우저가 한두 줄 더 잡아 두 층이 어긋난다
+  (실측 830 vs 792). 스크롤은 바깥 `.cf24-code` 가 담당한다.
+- 20만 자를 넘으면 강조를 끄고 평문으로 보여준다(타이핑마다 재색칠하면 느려짐).
+- 색: 태그 초록 / 속성이름 갈색 / 속성값 남색 / 주석 회색 기울임 / 기호 회색.
+
+**소스 정리** — `store.format_html()`. 화면에 보여줄 때와 저장할 때 **같은 함수**를
+쓰므로, 화면에서 본 소스가 그대로 카페24에 저장된다.
+
+- 줄을 나누는 것은 **블록 요소 경계에서만** 한다. HTML 에서 공백은 의미가 있어서
+  인라인 요소 사이에 줄바꿈을 넣으면 화면에 공백이 생긴다(이미지 사이가 벌어지는
+  고전적인 사고). `img`·`br`·`span`·`a` 는 블록 목록에서 **의도적으로 제외**했다.
+- `<style>`·`<script>`·`<pre>`·`<textarea>` 안쪽은 한 글자도 건드리지 않는다.
+- 내용이 한 줄뿐인 짧은 블록은 다시 한 줄로 합친다(`<td>1</td>`).
+- **멱등**이다 — 편집하지 않고 다시 적용해도 저장값이 계속 바뀌지 않는다(테스트로 고정).
+- 닫는 태그가 빠진 HTML 이 흔하므로 들여쓰기 깊이에 상한(12)을 둔다. 어떤 이유로든
+  실패하면 **원본을 그대로** 돌려준다(정리보다 안 깨지는 게 중요).
+
+---
+
 ## 3-2. 편집·적용 규칙 (`POST /products/{no}/apply`)
 
 이 순서를 절대 바꾸지 않는다.
 
+0. 제출된 HTML 을 `encode_html_urls` → `format_html` 순으로 다듬는다(화면에서 본
+   정리된 소스가 그대로 저장된다).
 1. **카페24에서 현재 HTML 을 다시 읽는다.** 로컬 DB 의 마지막 버전을 "지금
    올라간 값"으로 가정하지 않는다(카페24 관리자에서 직접 고쳤을 수 있다).
 2. 그 값으로 **BACKUP revision** 을 남긴다. 유일한 복구 수단이다.
@@ -249,7 +284,7 @@ DB·네트워크 없이 암호화 왕복, 토큰 만료/자동갱신, 상태 노
 | --- | --- | --- |
 | 1 | 공통 Integration · cafe24_db · OAuth 연결 화면 | ✅ 완료 |
 | 2 | 상품 목록·검색·현재 HTML 조회 | ✅ 완료 |
-| 3 | 편집기 · 미리보기 · Diff · 초안 | ◐ 편집기(textarea)만 완료. 미리보기·Diff·초안 예정 |
+| 3 | 편집기 · 미리보기 · Diff · 초안 | ◐ 문법 강조 편집기 + 소스 정리 완료. 미리보기·Diff·초안 예정 |
 | 4 | 즉시 적용 · BACKUP · Revision · 감사로그 | ✅ 완료 |
 | 5 | 예약 DB · Worker(compose 서비스) · 예약관리 화면 | 예정 |
 | 6 | 자동 종료/복원 · 롤백 | 예정 |