"""3가지 접근법 비교: 같은 콘텐츠, 다른 생성 방식.

접근 A: Few-Shot 직접 생성 — Claude가 디자인 토큰 안에서 HTML 직접 작성
접근 B: 레이아웃 프리미티브 조합 — 15개 기본 요소를 조합
접근 C: 참조 기반 생성 — ideal_v2를 참조하여 구조 유지하되 콘텐츠만 교체

Kei API 불필요 — 순수 렌더링만.
"""
from __future__ import annotations
import asyncio, json, sys, base64
from pathlib import Path

ROOT = Path(__file__).parent.parent
sys.path.insert(0, str(ROOT))

# ═══════════════════════════════════════
# 공통 디자인 토큰 (3가지 접근 모두 이 토큰만 사용)
# ═══════════════════════════════════════
DESIGN_TOKENS_CSS = """
:root {
    --color-primary: #1e293b;
    --color-accent: #2563eb;
    --color-accent-light: #93c5fd;
    --color-bg: #ffffff;
    --color-bg-subtle: #f8fafc;
    --color-bg-dark: #1e293b;
    --color-bg-dark-deep: #0f172a;
    --color-border: #e2e8f0;
    --color-danger: #dc2626;
    --color-warning: #fbbf24;
    --color-text: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-light: #94a3b8;
    --color-text-on-dark: #e2e8f0;
    --color-text-on-accent: #ffffff;

    --font-title: 28px;
    --font-section: 14px;
    --font-body: 13px;
    --font-small: 11px;
    --font-caption: 10px;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-black: 900;

    --spacing-page: 36px 40px 24px;
    --spacing-section: 16px;
    --spacing-block: 12px;
    --spacing-inner: 10px;
    --spacing-small: 6px;

    --radius: 8px;
    --radius-small: 6px;
    --line-height: 1.6;
}
"""

SLIDE_BASE_CSS = """
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
* { margin: 0; padding: 0; box-sizing: border-box; }
.slide {
    width: 1280px; height: 720px; overflow: hidden;
    background: var(--color-bg);
    font-family: 'Pretendard Variable', sans-serif;
    color: var(--color-text);
    font-size: var(--font-body);
    line-height: var(--line-height);
    word-break: keep-all;
    display: grid;
    grid-template-areas: 'header header' 'body sidebar' 'footer footer';
    grid-template-columns: 65fr 35fr;
    grid-template-rows: auto 1fr auto;
    gap: var(--spacing-section);
    padding: var(--spacing-page);
}
.header {
    grid-area: header;
    font-size: var(--font-title);
    font-weight: var(--weight-black);
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 8px;
}
.body { grid-area: body; display: flex; flex-direction: column; gap: var(--spacing-block); overflow: hidden; }
.sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: var(--spacing-block); border-left: 1px solid var(--color-border); padding-left: 20px; overflow: hidden; }
.footer { grid-area: footer; background: linear-gradient(135deg, #006aff, #00aaff); border-radius: var(--radius); padding: 14px 30px; text-align: center; color: var(--color-text-on-accent); }
.footer-text { font-size: 15px; font-weight: var(--weight-bold); }
.footer-sub { font-size: var(--font-small); opacity: 0.85; margin-top: 2px; }
"""


# ═══════════════════════════════════════
# 접근 A: Few-Shot 직접 생성
# Claude가 디자인 토큰만 보고 자유롭게 HTML 구성
# (여기서는 "Claude가 만들었을 법한" 결과를 시뮬레이션)
# ═══════════════════════════════════════
APPROACH_A_HTML = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>접근 A</title>
<style>{DESIGN_TOKENS_CSS}{SLIDE_BASE_CSS}

/* 접근 A: Claude가 콘텐츠에 맞게 자유 구성 */
.intro-bar {{
    background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-deep));
    border-radius: var(--radius);
    padding: 14px 20px;
    color: var(--color-text-on-dark);
}}
.intro-bar h3 {{
    font-size: var(--font-body);
    font-weight: var(--weight-bold);
    color: var(--color-accent-light);
    margin-bottom: var(--spacing-small);
}}
.intro-bar p {{
    font-size: var(--font-body);
    line-height: 1.7;
}}
.intro-bar strong {{ color: var(--color-warning); }}
.cases-row {{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-inner);
    margin-top: var(--spacing-inner);
}}
.case {{
    background: rgba(255,255,255,0.07);
    border-radius: var(--radius-small);
    padding: 8px 12px;
    border-left: 3px solid var(--color-accent-light);
}}
.case-title {{ font-size: var(--font-small); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: 3px; }}
.case-text {{ font-size: var(--font-small); color: var(--color-text-light); line-height: 1.5; }}

.core-title {{ font-size: var(--font-section); font-weight: var(--weight-black); color: var(--color-accent); text-align: center; margin-bottom: var(--spacing-small); }}

.dx-container {{
    border: 3px solid var(--color-accent);
    border-radius: 14px;
    padding: 14px 16px 12px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}}
.dx-badge {{
    position: absolute; top: -11px; left: 16px;
    background: var(--color-accent); color: white;
    font-size: var(--font-small); font-weight: var(--weight-black);
    padding: 2px 14px; border-radius: var(--radius-small);
}}
.dx-desc {{
    font-size: var(--font-small); color: #1e40af;
    text-align: center; margin-bottom: var(--spacing-inner);
}}
.tech-grid {{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-inner);
    flex: 1;
}}
.tech {{
    background: white; border: 2px solid var(--color-accent-light);
    border-radius: var(--radius); padding: 8px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}}
.tech-circle {{
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    color: white; font-size: 15px; font-weight: var(--weight-black);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}}
.tech b {{ font-size: var(--font-body); color: var(--color-primary); }}
.tech span {{ font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.4; margin-top: 2px; }}

.key-msg {{
    background: #f0f9ff; border: 2px solid #bae6fd;
    border-radius: var(--radius); padding: 8px 14px; text-align: center;
}}
.key-msg p {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: #0c4a6e; }}
.key-msg em {{ color: var(--color-danger); font-style: normal; font-weight: var(--weight-black); }}

.sidebar-label {{
    display: flex; align-items: center; gap: 10px;
    font-size: var(--font-small); font-weight: var(--weight-medium); color: var(--color-text-light);
}}
.sidebar-label::before, .sidebar-label::after {{ content: ''; flex: 1; height: 1px; background: var(--color-border); }}

.def {{
    background: var(--color-bg-subtle); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 10px 12px;
}}
.def-head {{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }}
.def-num {{
    width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent);
    color: white; font-size: var(--font-small); font-weight: var(--weight-black);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}}
.def-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); }}
.def-desc {{ font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.6; }}
.def-src {{ font-size: var(--font-caption); color: var(--color-text-light); font-style: italic; margin-top: 3px; }}
</style></head><body>
<div class="slide">
    <div class="header">건설산업 DX의 올바른 이해</div>
    <div class="body">
        <div class="intro-bar">
            <h3>현실 — 용어의 혼용</h3>
            <p>건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다. DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 3차원 모델 기반의 정보 관리 도구로서 DX의 하위 기술에 해당한다.</p>
            <div class="cases-row">
                <div class="case">
                    <div class="case-title">스마트 건설 활성화 방안 (2022.07)</div>
                    <div class="case-text">추진과제: 건설산업 디지털화<br>실행과제: BIM 전면 도입, BIM 전문인력 양성</div>
                </div>
                <div class="case">
                    <div class="case-title">제7차 건설기술진흥 기본계획 (2023.12)</div>
                    <div class="case-text">추진방향: 디지털 전환을 통한 스마트 건설 확산<br>추진과제: BIM 도입으로 건설산업 디지털화</div>
                </div>
            </div>
        </div>
        <div class="core-title">DX와 핵심기술의 올바른 관계</div>
        <div class="dx-container">
            <div class="dx-badge">DX — 디지털 전환 (상위개념)</div>
            <div class="dx-desc">BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능</div>
            <div class="tech-grid">
                <div class="tech">
                    <div class="tech-circle">G</div>
                    <b>GIS</b>
                    <span>지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</span>
                </div>
                <div class="tech">
                    <div class="tech-circle">B</div>
                    <b>BIM</b>
                    <span>시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구</span>
                </div>
                <div class="tech">
                    <div class="tech-circle">T</div>
                    <b>디지털 트윈</b>
                    <span>현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현</span>
                </div>
            </div>
        </div>
        <div class="key-msg">
            <p><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-label">용어 정의</div>
        <div class="def">
            <div class="def-head"><span class="def-num">1</span><span class="def-title">건설산업</span></div>
            <div class="def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
        </div>
        <div class="def">
            <div class="def-head"><span class="def-num">2</span><span class="def-title">BIM</span></div>
            <div class="def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
            <div class="def-src">건설산업 BIM 기본지침, 국토교통부, 2020</div>
        </div>
        <div class="def">
            <div class="def-head"><span class="def-num">3</span><span class="def-title">DX (디지털 전환)</span></div>
            <div class="def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
            <div class="def-src">IBM Institute for Business Value, 2011</div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
        <div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
    </div>
</div>
</body></html>"""


# ═══════════════════════════════════════
# 접근 B: 레이아웃 프리미티브 조합
# 15개 기본 요소 중 선택하여 조합
# ═══════════════════════════════════════
APPROACH_B_HTML = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>접근 B</title>
<style>{DESIGN_TOKENS_CSS}{SLIDE_BASE_CSS}

/* 접근 B: 프리미티브 조합 — callout + comparison-table + card-row + definition-list */
.prim-callout {{
    background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-deep));
    border-radius: var(--radius); padding: 12px 18px; color: var(--color-text-on-dark);
}}
.prim-callout-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: 4px; }}
.prim-callout-text {{ font-size: var(--font-small); line-height: 1.6; }}
.prim-callout-text strong {{ color: var(--color-warning); }}

.prim-compare {{
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    border-radius: var(--radius); overflow: hidden; margin-top: var(--spacing-small);
}}
.prim-compare-head {{
    font-size: var(--font-small); font-weight: var(--weight-bold);
    padding: 6px 10px; text-align: center;
}}
.prim-compare-head.left {{ background: var(--color-accent); color: white; }}
.prim-compare-head.right {{ background: #475569; color: white; }}
.prim-compare-row {{ display: contents; }}
.prim-compare-cell {{
    font-size: var(--font-caption); padding: 5px 10px;
    background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border);
    line-height: 1.5;
}}
.prim-compare-cell.left {{ color: var(--color-accent); font-weight: var(--weight-medium); }}

.prim-section-title {{
    font-size: var(--font-section); font-weight: var(--weight-black);
    color: var(--color-accent); text-align: center; padding: 4px 0;
}}

.prim-card-row {{
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-inner);
    flex: 1;
}}
.prim-card {{
    background: var(--color-bg-subtle); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 10px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
}}
.prim-card-icon {{
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    color: white; font-size: 15px; font-weight: var(--weight-black);
    display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}}
.prim-card b {{ font-size: var(--font-body); }}
.prim-card span {{ font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.4; margin-top: 2px; }}

.prim-highlight {{
    background: #fef2f2; border: 2px solid #fecaca; border-radius: var(--radius);
    padding: 8px 14px; text-align: center;
}}
.prim-highlight p {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--color-danger); }}

.sidebar-label {{ display: flex; align-items: center; gap: 10px; font-size: var(--font-small); font-weight: var(--weight-medium); color: var(--color-text-light); }}
.sidebar-label::before, .sidebar-label::after {{ content: ''; flex: 1; height: 1px; background: var(--color-border); }}
.prim-deflist {{ display: flex; flex-direction: column; gap: var(--spacing-inner); }}
.prim-def {{
    background: var(--color-bg-subtle); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 10px 12px;
}}
.prim-def-head {{ display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }}
.prim-def-num {{
    width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent);
    color: white; font-size: 10px; font-weight: var(--weight-black);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}}
.prim-def-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); }}
.prim-def-desc {{ font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.5; }}
.prim-def-src {{ font-size: var(--font-caption); color: var(--color-text-light); font-style: italic; margin-top: 2px; }}
</style></head><body>
<div class="slide">
    <div class="header">건설산업 DX의 올바른 이해</div>
    <div class="body">
        <!-- 프리미티브 1: callout (문제 제기) -->
        <div class="prim-callout">
            <div class="prim-callout-title">현실 — 용어의 혼용</div>
            <div class="prim-callout-text">건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다. DX는 상위개념이며 BIM은 하위 기술에 해당한다.</div>
            <!-- 프리미티브 2: compare (사례 비교) -->
            <div class="prim-compare">
                <div class="prim-compare-head left">스마트건설 활성화 방안 (2022.07)</div>
                <div class="prim-compare-head right">제7차 건설기술진흥 기본계획 (2023.12)</div>
                <div class="prim-compare-cell left">추진과제: 건설산업 디지털화</div>
                <div class="prim-compare-cell">추진방향: 디지털 전환을 통한 스마트 건설 확산</div>
                <div class="prim-compare-cell left">실행과제: BIM 전면 도입, 전문인력 양성</div>
                <div class="prim-compare-cell">추진과제: BIM 도입으로 건설산업 디지털화</div>
            </div>
        </div>

        <!-- 프리미티브 3: section-title -->
        <div class="prim-section-title">DX와 핵심기술의 올바른 관계</div>

        <!-- 프리미티브 4: card-row (기술 카드 3열) -->
        <div class="prim-card-row">
            <div class="prim-card">
                <div class="prim-card-icon">G</div>
                <b>GIS</b>
                <span>지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</span>
            </div>
            <div class="prim-card">
                <div class="prim-card-icon">B</div>
                <b>BIM</b>
                <span>시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구</span>
            </div>
            <div class="prim-card">
                <div class="prim-card-icon">T</div>
                <b>디지털 트윈</b>
                <span>현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현</span>
            </div>
        </div>

        <!-- 프리미티브 5: highlight (핵심 메시지) -->
        <div class="prim-highlight">
            <p>BIM ≠ DX — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-label">용어 정의</div>
        <div class="prim-deflist">
            <div class="prim-def">
                <div class="prim-def-head"><span class="prim-def-num">1</span><span class="prim-def-title">건설산업</span></div>
                <div class="prim-def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
            </div>
            <div class="prim-def">
                <div class="prim-def-head"><span class="prim-def-num">2</span><span class="prim-def-title">BIM</span></div>
                <div class="prim-def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
                <div class="prim-def-src">건설산업 BIM 기본지침, 국토교통부, 2020</div>
            </div>
            <div class="prim-def">
                <div class="prim-def-head"><span class="prim-def-num">3</span><span class="prim-def-title">DX (디지털 전환)</span></div>
                <div class="prim-def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
                <div class="prim-def-src">IBM Institute for Business Value, 2011</div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
        <div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
    </div>
</div>
</body></html>"""


# ═══════════════════════════════════════
# 접근 C: 참조 기반 생성
# ideal_v2의 구조를 참조하되, 디자인 토큰으로 스타일 통일
# + 포함관계를 더 명확하게 (DX 큰 원 안에 3개)
# ═══════════════════════════════════════
APPROACH_C_HTML = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>접근 C</title>
<style>{DESIGN_TOKENS_CSS}{SLIDE_BASE_CSS}

/* 접근 C: 참조(ideal_v2) 기반 + 디자인 토큰 통일 */
.ref-problem {{
    background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-deep));
    border-radius: var(--radius); padding: 14px 20px; color: var(--color-text-on-dark);
}}
.ref-problem h3 {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: var(--spacing-small); }}
.ref-problem p {{ font-size: var(--font-body); line-height: 1.7; }}
.ref-problem strong {{ color: var(--color-warning); }}
.ref-cases {{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-inner); margin-top: var(--spacing-inner); }}
.ref-case {{ background: rgba(255,255,255,0.07); border-radius: var(--radius-small); padding: 8px 12px; border-left: 3px solid var(--color-accent-light); }}
.ref-case-title {{ font-size: var(--font-small); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: 3px; }}
.ref-case-text {{ font-size: var(--font-small); color: var(--color-text-light); line-height: 1.5; }}

.ref-core-title {{ font-size: var(--font-section); font-weight: var(--weight-black); color: var(--color-accent); text-align: center; }}

/* 포함관계: SVG 기반 벤 다이어그램 스타일 */
.ref-hierarchy {{
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
}}
.ref-dx-ring {{
    width: 100%; max-width: 600px;
    border: 3px solid var(--color-accent); border-radius: 20px;
    padding: 20px 16px 14px; position: relative;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}}
.ref-dx-tag {{
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--color-accent); color: white;
    font-size: 12px; font-weight: var(--weight-black);
    padding: 3px 20px; border-radius: 12px; white-space: nowrap;
}}
.ref-dx-sub {{
    text-align: center; font-size: var(--font-small); color: #1e40af;
    margin-bottom: var(--spacing-inner);
}}
.ref-techs {{
    display: flex; justify-content: center; gap: 16px;
}}
.ref-tech {{
    width: 130px; text-align: center;
}}
.ref-tech-bubble {{
    width: 50px; height: 50px; border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
    color: white; font-size: 20px; font-weight: var(--weight-black);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 6px; box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}}
.ref-tech b {{ display: block; font-size: var(--font-body); color: var(--color-primary); margin-bottom: 2px; }}
.ref-tech span {{ font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.4; }}

.ref-arrow {{
    text-align: center; font-size: 12px; color: var(--color-accent);
    font-weight: var(--weight-bold); margin: 4px 0;
}}

.ref-msg {{
    background: #f0f9ff; border: 2px solid #bae6fd;
    border-radius: var(--radius); padding: 10px 16px; text-align: center;
    margin-top: var(--spacing-small);
}}
.ref-msg p {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: #0c4a6e; }}
.ref-msg em {{ color: var(--color-danger); font-style: normal; font-weight: var(--weight-black); }}

.sidebar-label {{ display: flex; align-items: center; gap: 10px; font-size: var(--font-small); font-weight: var(--weight-medium); color: var(--color-text-light); }}
.sidebar-label::before, .sidebar-label::after {{ content: ''; flex: 1; height: 1px; background: var(--color-border); }}
.ref-def {{
    background: var(--color-bg-subtle); border: 1px solid var(--color-border);
    border-radius: var(--radius); padding: 10px 12px;
}}
.ref-def-head {{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }}
.ref-def-num {{
    width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent);
    color: white; font-size: var(--font-small); font-weight: var(--weight-black);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}}
.ref-def-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); }}
.ref-def-desc {{ font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.6; }}
.ref-def-src {{ font-size: var(--font-caption); color: var(--color-text-light); font-style: italic; margin-top: 3px; }}
</style></head><body>
<div class="slide">
    <div class="header">건설산업 DX의 올바른 이해</div>
    <div class="body">
        <div class="ref-problem">
            <h3>현실 — 용어의 혼용</h3>
            <p>건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다. DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 하위 기술에 해당한다.</p>
            <div class="ref-cases">
                <div class="ref-case">
                    <div class="ref-case-title">스마트 건설 활성화 방안 (2022.07)</div>
                    <div class="ref-case-text">추진과제: 건설산업 디지털화<br>실행과제: BIM 전면 도입, BIM 전문인력 양성</div>
                </div>
                <div class="ref-case">
                    <div class="ref-case-title">제7차 건설기술진흥 기본계획 (2023.12)</div>
                    <div class="ref-case-text">추진방향: 디지털 전환을 통한 스마트 건설 확산<br>추진과제: BIM 도입으로 건설산업 디지털화</div>
                </div>
            </div>
        </div>

        <div class="ref-core-title">DX와 핵심기술의 올바른 관계</div>
        <div class="ref-hierarchy">
            <div class="ref-dx-ring">
                <div class="ref-dx-tag">DX — 디지털 전환 (상위개념)</div>
                <div class="ref-dx-sub">업무방식과 가치 창출 구조를 근본적으로 전환하는 과정</div>
                <div class="ref-techs">
                    <div class="ref-tech">
                        <div class="ref-tech-bubble">G</div>
                        <b>GIS</b>
                        <span>지리적 데이터를 공간 분석, 위치기반 정보 제공</span>
                    </div>
                    <div class="ref-tech">
                        <div class="ref-tech-bubble">B</div>
                        <b>BIM</b>
                        <span>시설물 생애주기 정보를 3차원 모델로 통합·관리</span>
                    </div>
                    <div class="ref-tech">
                        <div class="ref-tech-bubble">T</div>
                        <b>디지털 트윈</b>
                        <span>현실 객체를 디지털 환경에 동일하게 구현</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="ref-msg">
            <p><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</p>
        </div>
    </div>
    <div class="sidebar">
        <div class="sidebar-label">용어 정의</div>
        <div class="ref-def">
            <div class="ref-def-head"><span class="ref-def-num">1</span><span class="ref-def-title">건설산업</span></div>
            <div class="ref-def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
        </div>
        <div class="ref-def">
            <div class="ref-def-head"><span class="ref-def-num">2</span><span class="ref-def-title">BIM</span></div>
            <div class="ref-def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
            <div class="ref-def-src">건설산업 BIM 기본지침, 국토교통부, 2020</div>
        </div>
        <div class="ref-def">
            <div class="ref-def-head"><span class="ref-def-num">3</span><span class="ref-def-title">DX (디지털 전환)</span></div>
            <div class="ref-def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
            <div class="ref-def-src">IBM Institute for Business Value, 2011</div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
        <div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
    </div>
</div>
</body></html>"""


async def main():
    from src.slide_measurer import measure_rendered_heights, capture_slide_screenshot

    out_dir = ROOT / "data" / "runs" / "3approaches"
    out_dir.mkdir(parents=True, exist_ok=True)

    for name, html in [("A_fewshot", APPROACH_A_HTML), ("B_primitives", APPROACH_B_HTML), ("C_reference", APPROACH_C_HTML)]:
        print(f"\n=== 접근 {name} ===")
        m = await asyncio.to_thread(measure_rendered_heights, html)
        s = await asyncio.to_thread(capture_slide_screenshot, html)

        (out_dir / f"{name}.html").write_text(html, encoding="utf-8")
        if s:
            (out_dir / f"{name}.png").write_bytes(base64.b64decode(s))

        slide = m.get("slide", {})
        print(f"  slide: {slide.get('scrollHeight', 0)}px / 720px {'✅' if not slide.get('overflowed') else '❌'}")

    print(f"\n결과물: {out_dir}")
    print("  A_fewshot.png — 접근 A: Claude가 디자인 토큰 안에서 자유 생성")
    print("  B_primitives.png — 접근 B: 15개 프리미티브 조합")
    print("  C_reference.png — 접근 C: ideal_v2 참조 기반 + 더 큰 포함관계 시각화")


if __name__ == "__main__":
    import logging
    logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s", datefmt="%H:%M:%S")
    logging.getLogger("selenium").setLevel(logging.WARNING)
    logging.getLogger("urllib3").setLevel(logging.WARNING)
    asyncio.run(main())
