<section id="version-history-tab" class="tab-content"
    style="padding: 20px; overflow-y: auto; height: 100%; position: relative; color: #333;">
    <div class="glass-card"
        style="max-width: 1200px; margin: 0 auto; padding: 30px; background: rgba(255, 255, 255, 0.95);">
        <h1
            style="color: #2b6cb0; border-bottom: 2px solid #3182ce; padding-bottom: 10px; margin-bottom: 30px; font-size: 2.2rem; display: flex; align-items: center; gap: 10px;">
            <span>🚀</span> 업데이트 내역 (Ver History)
        </h1>

        {% set section_config = {
            'added': {
                'bg_color': 'rgba(229, 62, 62, 0.05)',
                'border_color': '#e53e3e',
                'title_color': '#c53030',
                'icon': '✨',
                'title': '신규 기능 추가 (Added)'
            },
            'modified': {
                'bg_color': 'rgba(49, 130, 206, 0.05)',
                'border_color': '#3182ce',
                'title_color': '#2b6cb0',
                'icon': '⚡',
                'title': '기능 개선 및 버그 수정 (Modified & Fixed)'
            }
        } %}
        <div class="timeline" style="position: relative; padding-left: 30px; border-left: 3px solid #e2e8f0;">

            {% for version in version_history %}
            <!-- Version {{ version.version }} -->
            <div class="timeline-item" style="position: relative; margin-bottom: {% if loop.last %}20px{% else %}40px{% endif %};">
                <div
                    style="position: absolute; left: -38px; top: 0; width: 14px; height: 14px; background: {{ version.get('dot_color', '#e53e3e') }}; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px {{ version.get('dot_color', '#e53e3e') }};">
                </div>
                <h2
                    style="font-size: 1.7rem; color: {% if loop.last %}#4a5568{% else %}#1a202c{% endif %}; margin-bottom: 15px; display: flex; align-items: baseline; gap: 10px;">
                    {{ version.version }} <span style="font-size: 1.1rem; color: {% if loop.last %}#a0aec0{% else %}#718096{% endif %}; font-weight: normal;">({{ version.date | safe }})</span>
                </h2>
                
                {% for section in version.sections %}
                {% set config = section_config[section['type']] %}
                <div
                    style="background: {{ config.bg_color }}; border-radius: 8px; padding: 15px; {% if not loop.last %}margin-bottom: 10px; {% endif %}border-left: 4px solid {{ config.border_color }};">
                    <h4
                        style="font-size: 1.3rem; color: {{ config.title_color }}; margin-bottom: 10px; display: flex; align-items: center;">
                        <span style="font-size: 1.4rem; margin-right: 8px;">{{ config.icon }}</span> {{ config.title }}
                    </h4>
                    <ul style="padding-left: 24px; font-size: 1.15rem; color: #2d3748; line-height: 1.7;">
                        {% for item in section['items'] %}
                        <li>{{ item }}</li>
                        {% endfor %}
                    </ul>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>
</section>