<!-- 프로세스 블록: 가로 단계 흐름 -->
<div class="block-process">
    {% for step in steps %}
    <div class="process-step">
        <div class="process-number">{{ step.number | default(loop.index) }}</div>
        <div class="process-title">{{ step.title }}</div>
        {% if step.description %}<div class="process-desc">{{ step.description }}</div>{% endif %}
    </div>
    {% if not loop.last %}
    <div class="process-arrow">→</div>
    {% endif %}
    {% endfor %}
</div>

<style>
.block-process {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-small);
    height: 100%;
}
.process-step {
    flex: 1;
    text-align: center;
    padding: var(--spacing-inner);
    background: var(--color-bg-subtle);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
}
.process-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    font-size: var(--font-body);
    margin: 0 auto var(--spacing-small);
}
.process-title {
    font-size: var(--font-body);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin-bottom: 4px;
}
.process-desc {
    font-size: var(--font-caption);
    color: var(--color-text-secondary);
    line-height: var(--line-height-ko);
}
.process-arrow {
    font-size: 1.5rem;
    color: var(--color-accent);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
}
</style>
