<!-- 번호 꼭지 헤더: 번호 원형 + 제목 + 구분선 + 설명 -->
<!--
  📋 topic-numbered
  ─────────────────
  용도: 순서가 있는 꼭지 시작, 단계별 섹션 헤더
  슬롯: number, title, description (선택), color (선택)
  topic-left-right와 다른 점: 좌우 배치가 아닌 번호+세로 배치
-->
<div class="block-topic-num">
  <div class="tn-header">
    <div class="tn-number" style="background: {{ color | default('#2563eb') }}">{{ number }}</div>
    <div class="tn-title">{{ title }}</div>
  </div>
  <div class="tn-divider" style="background: {{ color | default('#2563eb') }}"></div>
  {% if description %}<div class="tn-desc">{{ description }}</div>{% endif %}
</div>

<style>
.block-topic-num {
  padding: 8px 0;
}
.tn-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tn-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
}
.tn-title {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
}
.tn-divider {
  height: 2px;
  margin: 8px 0 10px;
  border-radius: 1px;
  opacity: 0.3;
}
.tn-desc {
  font-size: 15px;
  color: #475569;
  line-height: 1.7;
  white-space: pre-line;
  word-break: keep-all;
}
</style>
