<!-- Before/After 이미지: 좌측 Before + 우측 After + 화살표 -->
<!--
  📋 image-before-after
  ─────────────────
  용도: 변화 전후 비교, 공정 전후, 디지털 전환 전후
  슬롯: before_src, before_label, after_src, after_label, caption (선택)
-->
<div class="block-ba">
  <div class="ba-item">
    <div class="ba-label ba-before">{{ before_label | default('Before') }}</div>
    <img src="{{ before_src }}" alt="before">
  </div>
  <div class="ba-arrow">→</div>
  <div class="ba-item">
    <div class="ba-label ba-after">{{ after_label | default('After') }}</div>
    <img src="{{ after_src }}" alt="after">
  </div>
</div>
{% if caption %}<div class="ba-caption">{{ caption }}</div>{% endif %}

<style>
.block-ba {
  display: flex;
  gap: 12px;
  align-items: center;
}
.ba-item {
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.ba-label {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}
.ba-before { background: #6b7280; }
.ba-after { background: #2563eb; }
.ba-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.ba-arrow {
  font-size: 2rem;
  color: #2563eb;
  font-weight: 900;
  flex-shrink: 0;
}
.ba-caption {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin-top: 8px;
}
</style>
