<!-- 이미지+텍스트 가로 배치: 좌측 이미지 + 우측 텍스트 -->
<!--
  📋 image-side-text
  ─────────────────
  용도: 이미지에 대한 설명, 제품/시스템 소개, 참고 자료 설명
  슬롯: image_src, image_alt, title, description, bullets[]
  Figma 원본: 2-2_01 하단 이미지+텍스트 영역
-->
<div class="block-img-side">
  <div class="is-image">
    <img src="{{ image_src }}" alt="{{ image_alt | default('') }}">
  </div>
  <div class="is-text">
    {% if title %}<div class="is-title">{{ title }}</div>{% endif %}
    {% if description %}<div class="is-desc">{{ description }}</div>{% endif %}
    {% if bullets %}
    <ul class="is-bullets">
      {% for item in bullets %}
      <li>{{ item }}</li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>
</div>

<style>
.block-img-side {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.is-image {
  flex-shrink: 0;
  width: 320px;
  border-radius: 8px;
  overflow: hidden;
}
.is-image img {
  width: 100%;
  height: auto;
  display: block;
}
.is-text {
  flex: 1;
  padding-top: 4px;
}
.is-title {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1.4;
}
.is-desc {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  word-break: keep-all;
  margin-bottom: 10px;
}
.is-bullets {
  list-style: disc;
  padding-left: 18px;
  font-size: 13px;
  color: #333;
  line-height: 1.7;
}
.is-bullets li {
  margin-bottom: 4px;
}
</style>
