Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정

포함 내용:
- Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md)
- 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py)
- 블록 템플릿 추가 (cards, emphasis 변형)
- 코드 수정: block_search, content_editor, design_director, slide_measurer
- catalog.yaml 블록 목록 업데이트
- CLAUDE.md, PROGRESS.md, README.md 업데이트

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

templates/blocks/emphasis/comparison-2col--cards-in-container.html

@@ -0,0 +1,97 @@
+<!-- comparison-2col variant: cards-in-container -->
+<!--
+  📋 comparison-2col--cards-in-container
+  ─────────────────
+  용도: 포함 관계 시각화 (A 안에 B, C, D가 포함됨)
+  슬롯: container_label, container_desc, cards[] (각 카드에 letter, label, description)
+  기존 comparison-2col의 색상 계열 활용
+-->
+<div class="block-container-cards">
+  <div class="cc-outer">
+    <div class="cc-badge">{{ container_label }}</div>
+    {% if container_desc %}<div class="cc-desc">{{ container_desc }}</div>{% endif %}
+    <div class="cc-grid" style="--cc-count: {{ cards|length }}">
+      {% for card in cards %}
+      <div class="cc-card">
+        {% if card.letter %}
+        <div class="cc-icon">{{ card.letter }}</div>
+        {% endif %}
+        <div class="cc-label">{{ card.label }}</div>
+        {% if card.description %}<div class="cc-text">{{ card.description }}</div>{% endif %}
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<style>
+.block-container-cards {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.cc-outer {
+  width: 100%;
+  border: 3px solid #2563eb;
+  border-radius: 14px;
+  padding: 16px 14px 12px;
+  background: linear-gradient(180deg, #eff6ff, #dbeafe);
+  position: relative;
+}
+.cc-badge {
+  position: absolute;
+  top: -11px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #2563eb;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 900;
+  padding: 3px 18px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.cc-desc {
+  text-align: center;
+  font-size: 11px;
+  color: #1e40af;
+  margin-bottom: 10px;
+}
+.cc-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--cc-count, 3), 1fr);
+  gap: 10px;
+}
+.cc-card {
+  background: #ffffff;
+  border: 2px solid #93c5fd;
+  border-radius: 8px;
+  padding: 10px;
+  text-align: center;
+}
+.cc-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #93c5fd, #2563eb);
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 6px;
+}
+.cc-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 3px;
+}
+.cc-text {
+  font-size: 10px;
+  color: #64748b;
+  line-height: 1.5;
+}
+</style>

templates/blocks/emphasis/dark-bullet-list--before-after.html

@@ -0,0 +1,65 @@
+<!-- dark-bullet-list variant: before-after -->
+<!--
+  📋 dark-bullet-list--before-after
+  ─────────────────
+  용도: 기존 방식 → 새 방식 전환/변화를 보여줄 때
+  슬롯: title (선택), changes[] (각 항목에 label, before, after)
+  기존 dark-bullet-list의 색상/배경/radius 그대로 사용
+-->
+<div class="block-dark-bullets">
+  {% if title %}<div class="db-title">{{ title }}</div>{% endif %}
+  <div class="db-changes">
+    {% for item in changes %}
+    <div class="db-change">
+      <div class="db-change-label">{{ item.label }}</div>
+      <div class="db-change-before">{{ item.before }}</div>
+      <div class="db-change-after">→ {{ item.after }}</div>
+    </div>
+    {% endfor %}
+  </div>
+</div>
+
+<style>
+/* 기존 dark-bullet-list CSS 재사용 */
+.block-dark-bullets {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border-radius: 8px;
+  padding: 14px 20px;
+  color: #ffffff;
+}
+.db-title {
+  font-size: 13px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #93c5fd;
+}
+/* variant: before-after 2열 구조 */
+.db-changes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 6px;
+}
+.db-change {
+  background: rgba(255,255,255,0.06);
+  border-radius: 6px;
+  padding: 8px 10px;
+  border-left: 3px solid #60a5fa;
+}
+.db-change-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: #93c5fd;
+  margin-bottom: 3px;
+}
+.db-change-before {
+  font-size: 10px;
+  color: #94a3b8;
+  text-decoration: line-through;
+}
+.db-change-after {
+  font-size: 11px;
+  color: #e2e8f0;
+  font-weight: 500;
+  margin-top: 2px;
+}
+</style>