add: figma_to_html_agent/blocks/ + 변환 도구 docs 갱신

전체 401 files (397 추가 + 4 수정), 14304 insertions.

추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
  각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
  _renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
  (일부 frame)}.
  Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
  partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.

수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
  변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.

Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

figma_to_html_agent/blocks/1171281191/analysis.md

@@ -0,0 +1,60 @@
+# Frame 1171281191 — 주체별 기대효과
+
+## 내용 설명
+
+DX 시행 주체별 기대효과를 3인 페르소나 카드로 제시하는 디자인.
+발주자·시공자·설계자 세 주체 각각의 역할별 목표와 기대 효과를
+동등한 카드 3개로 나란히 배치한다.
+3주체 관점별 효과·역할별 기대효과 나열에 적합.
+시간 순서나 원인-결과·2주체만 비교·4주체 이상에는 부적합.
+
+## 후보 키워드
+
+발주자, 시공자, 설계자, 주체별, 기대효과, 역할, 페르소나, 역량목표, 소통, 협업, 품질향상, 생산성향상
+
+## 정제 Anchor Sets
+
+- **construction_personas**: 발주자, 시공자, 설계자
+- **persona_dimensions**: 주체별, 기대효과, 역할, 페르소나
+- **role_outcomes**: 역량목표, 소통, 협업, 품질향상, 생산성향상
+
+## 구조 매칭 정보
+
+- **family**: cards
+- **layout**: persona-3col
+- **axis**: horizontal
+- **relation_type**: parallel
+- **cardinality**: ideal 3 / min 3 / max 3
+- **slots** (10개, required 10개): title, persona_1_label, persona_1_goal, persona_1_effects, persona_2_label, persona_2_goal, persona_2_effects, persona_3_label, persona_3_goal, persona_3_effects
+- **source title**: 주체별 기대효과
+- **original layout**: persona-3col
+
+## 적합/부적합 기준
+
+### suits
+- 3주체 관점 비교
+- 페르소나별 기대효과
+- 3개 역할별 목표 나열
+
+### not_suits
+- 시간 순서
+- 원인-결과 흐름
+- 2주체만 비교
+- 4주체 이상
+- 단일 주체 심층 설명
+
+## 재구성 허용
+
+- **split**: False
+- **merge**: False
+- **infer_missing_slot**: False
+- **rewrite_label**: True
+- **rewrite_body**: True
+
+## 메타
+
+- schema_version: template-fit-v1 mirror
+- source_of_truth: structure_ontology.yaml + keyword_base.yaml
+- structure_content_original_tagged_by: claude-opus-4-7 (2026-04-21)
+- keyword_base_sync_at: 2026-04-22
+- anchor_sets_cleaned_at: 2026-04-22

figma_to_html_agent/blocks/1171281191/analysis.md.pre_milestone2.bak

@@ -0,0 +1,17 @@
+# Frame 1171281191 — 주체별 기대효과
+
+## 구조
+- **layout**: persona-3col
+- **detail**: 발주자/시공자/설계자 3인 페르소나 카드 — 뱃지(인물 이미지) + 목표 라벨 + 불릿 효과 리스트 (각 7개 내외)
+
+## 내용
+DX 시행 주체별 기대효과 — 발주자·시공자·설계자 각각의 역할별 목표와 기대 효과를 페르소나 카드로 정리.
+
+## 후보 키워드
+발주자, 시공자, 설계자, 주체별, 기대효과, 페르소나, 역할, 역량목표, 소통, 협업, 품질향상, 생산성향상, Claim, 리스크최소화, 민원예방, 오류예방, 행정자동화, 디지털자산관리, 공사Risk, 현장실효성, 현장맞춤형, DX, 건설, 시공, 설계, 품질, 생산성
+
+## 메타
+- source: texts.md + flat.md
+- schema_version: analysis-v1
+- tagged_by: claude-opus-4-7
+- tagged_at: 2026-04-21

figma_to_html_agent/blocks/1171281191/flat.md

@@ -0,0 +1,82 @@
+# Frame 1171281191 — 실측 기록 (flat)
+
+> 원본: 2601 × 1927 px (node 100:132)
+> 패턴: cards-3col-persona (3열 페르소나 카드)
+> Scale: 1280 / 2601 = 0.49213
+
+## 구조
+
+```
+Frame 100:132 (2601 × 1927)
+├── 3 컬럼 배경 (image 2977 ×3, 같은 이미지)
+│   ├── 100:137 (43, 82.3) 833×1845 — col_bg_texture
+│   ├── 100:138 (880, 82.3) 834×1845
+│   └── 100:139 (1718, 82.3) 833×1845
+│
+├── 컬러 오버레이 3개 (각 opacity 0.80)
+│   ├── 100:140 overlay_left (114.01, 180.66) 691×1510 — image 2986
+│   ├── 100:141 overlay_mid (948.01, 180.66) 692×1054 — image 2987
+│   └── 100:142 overlay_right (1783.01, 180.66) 691×1128 — image 2988
+│
+├── 하단 사진 3개 (각 opacity 0.70, radius 49~50px)
+│   ├── 100:143 photo_left (108, 1150.18) 697×701 — image 3574
+│   ├── 100:159 photo_mid (948, 1150.18) 697×701 — image 3571
+│   └── 100:183 photo_right (1781, 1150.18) 697×701 — image 3572
+│
+├── 원형 뱃지 3개
+│   ├── 발주자 (265.38, 0) 396×397
+│   │   ├── 100:153 outer — image 2983
+│   │   ├── 100:154 inner (312.98, 53.88) 301×303 — image 2980
+│   │   └── 100:155 TEXT "발주자\n목표" (464.4, 191.7) 181×130 — 65/50px Bold #285b4a
+│   │
+│   ├── 시공자 (1092.88, 0) 396×397
+│   │   ├── 100:145 outer — image 2984
+│   │   ├── 100:146 inner (1139.46, 51.84) 302×302 — image 2981
+│   │   └── 100:147 TEXT "시공자\n목표" (1291.9, 191.7) 179×130 — 65/50px Bold #445a2f
+│   │
+│   └── 설계자 (1945.7, 0) 396×397
+│       ├── 100:149 outer — image 2985
+│       ├── 100:150 inner (1993.3, 59.98) 301×303 — image 2982
+│       └── 100:151 TEXT "설계자\n목표" (2143.71, 191.7) 179×136 — 65/50px Bold #743002
+│
+├── 불릿 아이콘 (체크박스) — image 3005, 32.4×32.5
+│   ├── 발주자 컬럼: 100:176~182 (7개, left=127.63)
+│   ├── 시공자 컬럼: 100:168~174 (7개, left=961.2)
+│   └── 설계자 컬럼: 100:161~166 (6개, left=1794.78)
+│
+└── 불릿 텍스트 (40px Medium #000, line-height 85px/50px)
+    ├── 100:156 발주자 텍스트 (171.18, 421.58) 643×750
+    ├── 100:157 시공자 텍스트 (1004.79, 417.52) 624×651
+    └── 100:158 설계자 텍스트 (1842.01, 417.52) 665×750
+```
+
+## 이미지 에셋
+
+| hash | 의미 |
+|------|------|
+| 4a17cd1d... | col_bg_texture (3컬럼 BG ×3) |
+| e837f870... | overlay_left |
+| 755384bd... | overlay_mid |
+| 5577732e... | overlay_right |
+| d2c070f2... | photo_left |
+| 2a6a58e7... | photo_mid |
+| 39113493... | photo_right |
+| 77f31997... | badge_outer_owner |
+| e64c967d... | badge_inner_owner |
+| 1550ec75... | badge_outer_builder |
+| 85beaf9d... | badge_inner_builder |
+| 9ac089fa... | badge_outer_designer |
+| 4b534ccf... | badge_inner_designer |
+| 6896d5c2... | checkbox_icon (×20) |
+
+## 색상
+
+| 요소 | 값 |
+|------|------|
+| 발주자 label | #285b4a |
+| 시공자 label | #445a2f |
+| 설계자 label | #743002 |
+| 불릿 텍스트 | #000000, 40px Medium |
+| 오버레이 opacity | 0.80 |
+| 사진 opacity | 0.70 |
+| 사진 radius | 49~50px |

figma_to_html_agent/blocks/1171281191/index.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1280">
+<title>BIM 3역할 목표 카드 (Frame 1171281191)</title>
+<!--
+  Frame: 100:132, 2601×1927 px
+  Scale: 1280 / 2601 = 0.49213
+  패턴: cards-3col-persona
+  MCP: Figma Desktop Dev Mode (2026-04-16)
+  텍스트 노드: 전수 반영
+-->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap" rel="stylesheet">
+<style>
+* { margin:0; padding:0; box-sizing:border-box; }
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  background: #e8ecf0;
+  display: flex; justify-content: center; align-items: center;
+  min-height: 100vh; word-break: keep-all;
+}
+.slide {
+  width: 1280px;
+  background: #fff; position: relative;
+  box-shadow: 0 4px 20px rgba(0,0,0,.15);
+}
+.block { width: 1280px; position: relative; overflow: hidden; }
+.inner {
+  width: 2600.998px; height: 1927.004px;
+  zoom: 0.492129; /* R19 */
+  position: relative;
+}
+
+/* 3 컬럼 배경 */
+.col-bg { position: absolute; top: 82.3px; height: 1844.701px; }
+.col-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.col-bg--left { left: 43px; width: 833px; }
+.col-bg--mid { left: 880px; width: 834px; }
+.col-bg--right { left: 1718px; width: 833px; }
+
+/* 컬러 오버레이 — CSS 단색 (MCP opacity-80) */
+.col-overlay { position: absolute; top: 180.66px; opacity: 0.80; border-radius: 30px; }
+.col-overlay--left { left: 114.01px; width: 691px; height: 1510.487px; background: #d6e7c4; }
+.col-overlay--mid { left: 948.01px; width: 692px; height: 1053.828px; background: #e1efe1; }
+.col-overlay--right { left: 1783.01px; width: 691px; height: 1128.098px; background: #d0c0ad; }
+
+/* 하단 사진 (opacity 0.70, radius 50px) */
+.bottom-photo {
+  position: absolute; top: 1150.18px;
+  width: 697px; height: 700.545px;
+  border-radius: 50px; opacity: 0.70; overflow: hidden;
+}
+.bottom-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bottom-photo--left { left: 108px; border-radius: 49px; }
+.bottom-photo--mid { left: 948px; }
+.bottom-photo--right { left: 1781px; }
+
+/* 뱃지 */
+.badge { position: absolute; top: 0; width: 396.024px; height: 397.468px; }
+.badge img.badge-outer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.badge img.badge-inner { position: absolute; width: 301.829px; height: 302.93px; object-fit: cover; }
+.badge--owner { left: 265.38px; }
+.badge--owner .badge-inner { left: 47.6px; top: 53.88px; width: 300.816px; height: 302.93px; }
+.badge--builder { left: 1092.88px; }
+.badge--builder .badge-inner { left: 46.59px; top: 51.84px; width: 301.829px; height: 301.913px; }
+.badge--designer { left: 1945.7px; }
+.badge--designer .badge-inner { left: 47.6px; top: 59.98px; width: 300.816px; height: 302.93px; }
+
+/* 뱃지 라벨 */
+.badge-label {
+  position: absolute;
+  width: 179.274px; font-weight: 700;
+  text-align: center; letter-spacing: -1.3px;
+  display: flex; flex-direction: column; justify-content: flex-start;
+}
+.badge-label .ln1 { font-size: 65px; line-height: 1; }
+.badge-label .ln2 { font-size: 50px; line-height: 1.2; }
+.badge-label--owner { left: 374.76px; top: 191.7px; height: 130.474px; color: #285b4a; }
+.badge-label--builder { left: 1202.27px; top: 191.7px; height: 130.474px; color: #445a2f; }
+.badge-label--designer { left: 2054.08px; top: 191.7px; width: 179.274px; height: 136.496px; color: #743002; }
+
+/* 불릿 리스트 (R13: marker+text flex pair) */
+.bullet-list {
+  position: absolute;
+  display: flex; flex-direction: column;
+  justify-content: space-between;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 500; font-size: 40px; color: #000;
+}
+.bullet-row { display: flex; align-items: flex-start; --lh: 85px; }
+.bullet-row.compact { --lh: 50px; }
+.bullet-icon {
+  flex: none; width: 32.411px; height: 32.529px;
+  margin-top: calc(var(--lh) / 2 - 16.265px);
+  margin-right: var(--icon-gap, 11px);
+}
+.bullet-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.bullet-text { flex: 1; line-height: var(--lh); white-space: normal; word-break: keep-all; }
+
+.body--owner { left: 127.63px; top: 421.58px; width: 686.97px; height: 720px; --icon-gap: 11.14px; }
+.body--builder { left: 961.20px; top: 417.52px; width: 667.90px; height: 720px; --icon-gap: 11.18px; }
+.body--designer { left: 1794.78px; top: 417.52px; width: 711.93px; height: 720px; --icon-gap: 14.82px; }
+</style>
+</head>
+<body>
+<div class="slide">
+  <div class="block">
+    <div class="inner">
+
+      <!-- 3 컬럼 배경 -->
+      <div class="col-bg col-bg--left"><img src="assets/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
+      <div class="col-bg col-bg--mid"><img src="assets/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
+      <div class="col-bg col-bg--right"><img src="assets/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
+
+      <!-- 컬러 오버레이 — CSS -->
+      <div class="col-overlay col-overlay--left"></div>
+      <div class="col-overlay col-overlay--mid"></div>
+      <div class="col-overlay col-overlay--right"></div>
+
+      <!-- 하단 사진 좌 -->
+      <div class="bottom-photo bottom-photo--left"><img src="assets/d2c070f200af83f563976b6b0f309d38321d204d.png" alt=""></div>
+
+      <!-- 뱃지 3개 -->
+      <div class="badge badge--owner">
+        <img class="badge-outer" src="assets/77f319979c880da34ff3d423fcd97827f636c01e.png" alt="">
+        <img class="badge-inner" src="assets/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png" alt="">
+      </div>
+      <div class="badge badge--builder">
+        <img class="badge-outer" src="assets/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png" alt="">
+        <img class="badge-inner" src="assets/85beaf9dfc17b7ed4620729a086ba22143606517.png" alt="">
+      </div>
+      <div class="badge badge--designer">
+        <img class="badge-outer" src="assets/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png" alt="">
+        <img class="badge-inner" src="assets/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png" alt="">
+      </div>
+
+      <!-- 뱃지 라벨 -->
+      <div class="badge-label badge-label--owner"><span class="ln1">발주자</span><span class="ln2">목표</span></div>
+      <div class="badge-label badge-label--builder"><span class="ln1">시공자</span><span class="ln2">목표</span></div>
+      <div class="badge-label badge-label--designer"><span class="ln1">설계자</span><span class="ln2">목표</span></div>
+
+      <!-- 발주자 불릿 -->
+      <div class="bullet-list body--owner">
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">민원, 재 작업 등의 예방 및 최소화</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">직관화로 품질 향상 및 안정성 제고</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text" style="letter-spacing:-1.5px;">수행공정의 쉬운이해로 관리 편의성 증진</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">실무자와 발주자간의 소통 오류 최소화</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">행정 자동화와 최소화로 생산성 향상</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">건설정보의 통합관리로 활용성 강화</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text" style="letter-spacing:-3.5px;">전 생애주기에 걸친 효율적 디지털 자산관리</span></div>
+      </div>
+
+      <!-- 시공자 불릿 -->
+      <div class="bullet-list body--builder">
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text" style="letter-spacing:-1.5px;">시공 오류예방 및 공사 Risk 최소화</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">시각화로 안전성 제고 및 품질 향상</span></div>
+        <div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">중간태, 완성태 측량을 통한<br>시‧공간적 관리 편리성 향상</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">건설 관계자들 간의 의사소통 강화</span></div>
+        <div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">Model을 활용한 시공상세도 등의<br>관련도서 작성 용이</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">System 구축을 통한 행정 간소화</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">기술개발을 통한 생산성 향상</span></div>
+      </div>
+
+      <!-- 설계자 불릿 -->
+      <div class="bullet-list body--designer">
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">직관적 시각화로 원활한 소통</span></div>
+        <div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">3D 모델 활용으로 오류 최소화 및<br>Claim 예방</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">발주자와의 상호 신뢰 증진</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">정보물 생산으로 부가가치 창출</span></div>
+        <div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">고부가가치 창출산업으로 전환</span></div>
+        <div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">프로젝트 정보의 일관성 유지 및<br>관리를 통한 오류 최소화</span></div>
+      </div>
+
+      <!-- 하단 사진 중/우 -->
+      <div class="bottom-photo bottom-photo--mid"><img src="assets/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" alt=""></div>
+      <div class="bottom-photo bottom-photo--right"><img src="assets/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" alt=""></div>
+
+    </div>
+  </div>
+</div>
+</body>
+</html>

figma_to_html_agent/blocks/1171281191/texts.md

@@ -0,0 +1,49 @@
+# Frame 1171281191 — 텍스트 목록 (TF-IDF 매칭용)
+
+> 원본: 2601 × 1927 px (node 100:132)
+> 패턴: cards-3col-persona (3열 페르소나 카드)
+> MCP 전수 추출: 23개 텍스트 노드
+
+## 뱃지 라벨
+
+### 발주자
+- 발주자
+- 목표
+
+### 시공자
+- 시공자
+- 목표
+
+### 설계자
+- 설계자
+- 목표
+
+## 발주자 불릿 (7개)
+- 민원, 재 작업 등의 예방 및 최소화
+- 직관화로 품질 향상 및 안정성 제고
+- 수행공정의 쉬운이해로 관리 편의성 증진
+- 실무자와 발주자간의 소통 오류 최소화
+- 행정 자동화와 최소화로 생산성 향상
+- 건설정보의 통합관리로 활용성 강화
+- 전 생애주기에 걸친 효율적 디지털 자산관리
+
+## 시공자 불릿 (7개)
+- 시공 오류예방 및 공사 Risk 최소화
+- 시각화로 안전성 제고 및 품질 향상
+- 중간태, 완성태 측량을 통한
+- 시‧공간적 관리 편리성 향상
+- 건설 관계자들 간의 의사소통 강화
+- Model을 활용한 시공상세도 등의
+- 관련도서 작성 용이
+- System 구축을 통한 행정 간소화
+- 기술개발을 통한 생산성 향상
+
+## 설계자 불릿 (6개)
+- 직관적 시각화로 원활한 소통
+- 3D 모델 활용으로 오류 최소화 및
+- Claim 예방
+- 발주자와의 상호 신뢰 증진
+- 정보물 생산으로 부가가치 창출
+- 고부가가치 창출산업으로 전환
+- 프로젝트 정보의 일관성 유지 및
+- 관리를 통한 오류 최소화