Vendor templates and prefer local template assets

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>