<!-- 관계도 블록: 벤 다이어그램 -->
<div class="block-relationship">
    <div class="venn-container">
        <div class="venn-outer">
            <span class="venn-outer-label">{{ center_label }}</span>
            <span class="venn-outer-sub">{{ center_sub }}</span>
        </div>
        {% for item in items %}
        <div class="venn-inner venn-inner--{{ loop.index }}" style="background: {{ item.color | default('rgba(37, 99, 235, 0.8)') }}">
            <span>{{ item.label }}</span>
        </div>
        {% endfor %}
    </div>
    {% if description %}
    <div class="relationship-desc">
        {{ description }}
    </div>
    {% endif %}
</div>

<style>
.block-relationship {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--spacing-inner);
}
.venn-container {
    position: relative;
    width: 280px;
    height: 280px;
}
.venn-outer {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 3px solid var(--color-accent);
    background: rgba(37, 99, 235, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.venn-outer-label {
    font-size: var(--font-subtitle);
    font-weight: var(--weight-black);
    color: var(--color-accent);
}
.venn-outer-sub {
    font-size: var(--font-caption);
    color: var(--color-text-secondary);
}
.venn-inner {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-caption);
    font-weight: var(--weight-bold);
}
.venn-inner--1 {
    width: 70px; height: 70px;
    top: 30px; left: 30px;
    background: rgba(16, 185, 129, 0.85);
}
.venn-inner--2 {
    width: 80px; height: 80px;
    bottom: 40px; left: 30px;
    background: rgba(59, 130, 246, 0.85);
}
.venn-inner--3 {
    width: 75px; height: 75px;
    top: 60px; right: 25px;
    background: rgba(139, 92, 246, 0.85);
}
.relationship-desc {
    font-size: var(--font-body);
    color: var(--color-text);
    text-align: center;
    max-width: 500px;
    line-height: var(--line-height-ko);
}
</style>
