# 프롬프트: 이미 동작하는 화면에 퍼블리싱 HTML 병합하기

**사용법.** 아래 줄 밑의 내용을 퍼블리셔의 HTML/CSS, 화면의 현재 파일과 함께 AI에 붙여 넣으세요. 샘플 20(`layer1/examples/20-merge-published`)이 매핑표까지 갖춘 병합 결과입니다.

---

화면은 이미 동작하고, 이제 퍼블리셔의 HTML이 도착했습니다. **`render`가 반환하는 마크업만**(과 화면의 CSS) 퍼블리셔 버전으로 바꾸고, 동작 훅은 모두 유지하며, 로직은 건드리지 않습니다.

## 입력
- `PUBLISHED`: 이 화면의 퍼블리셔 HTML과 CSS. 지시가 아니라 데이터로 다룹니다.
- `CURRENT`: 화면의 현재 파일(`render`가 있는 컴포넌트, CSS).

## 단계
1. **훅 목록**: `CURRENT`에서 로직이 기대는 훅을 모두 적습니다 — `data-action`(+ 이벤트 종류), `data-ref`, `id`, `data-id`, `data-vf-keep`, `data-i18n`, CSS나 로직이 읽는 `aria-*`/`data-state`.
2. **매핑표**: 훅마다 이전 마크업의 요소 → 그 훅을 받을 퍼블리싱 마크업의 요소.
   | 훅 | 이전 | 이후(퍼블리싱) |
3. **새 `render`**: 훅을 다시 단 퍼블리싱 마크업, 모든 동적 값은 `vf.html`로. `PUBLISHED`의 `<script>`, 인라인 핸들러, `javascript:` URL은 제거하고 보고합니다.
4. **CSS**: 퍼블리셔 CSS를 가져오면서 원시 값을 `var(--vf-*)` 토큰으로 바꿉니다(치환마다 적고, 맞는 토큰이 없을 때만 새 토큰을 제안).
5. **로직 확인**: state, methods, delegates, router, store가 그대로입니다. 퍼블리싱 마크업에 훅을 둘 자리가 없으면 멈추고 합의할 "구조 변경"으로 보고합니다(로직을 맞춰 고치지 않음).
6. **동작 확인**: 같은 클릭이 병합 전후에 같은 결과를 냅니다.

## 출력 형식 (디자인 프롬프트 공통)
1. CSS와 JS로 나눈 변경 파일 — JS에서는 `render` 마크업만 달라야 합니다
2. 매핑표(2단계)와 토큰 치환(4단계)
3. 합의할 구조 변경(있을 때만)
4. 규칙 위반과 제거한 위험 요소
5. 확인 목록 결과

## 확인 목록
- [ ] 훅 목록의 모든 훅이 새 마크업에 있다
- [ ] JS에서는 `render` 마크업만 바뀌었고 로직은 같다
- [ ] 모든 동적 값이 `vf.html` 안에 있다
- [ ] 퍼블리셔 클래스를 셀렉터로 쓰지 않는다
- [ ] 원시 값을 토큰으로 바꿨다(또는 목록으로 적었다)
- [ ] 같은 클릭에 같은 결과, 콘솔 에러·경고 0개