LPA가이드 통합 슬라이드 (1

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>왜 잠재프로파일분석이 필요한가</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet"/>
<style>
        body {
            font-family: 'Noto Sans KR', sans-serif;
            background-color: #f4f6f9;
            margin: 0;
            padding: 0;
            width: 1280px;
            height: 720px;
            overflow: hidden;
        }
        .slide-container {
            width: 1280px;
            height: 720px;
            background-color: white;
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .header-bar {
            height: 12px;
            background-color: #2c3e50; /* Dark Navy */
            width: 100%;
        }
        .content-wrapper {
            flex: 1;
            padding: 60px 80px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .section-tag {
            background-color: #e2e8f0;
            color: #2c3e50;
            padding: 6px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 14px;
            display: inline-block;
            margin-bottom: 24px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .main-title {
            font-size: 48px;
            font-weight: 900;
            color: #1a202c;
            line-height: 1.2;
            margin-bottom: 40px;
            position: relative;
        }
        .main-title::after {
            content: '';
            position: absolute;
            bottom: -16px;
            left: 0;
            width: 80px;
            height: 6px;
            background-color: #3182ce; /* Accent Blue */
        }
        .bullet-point {
            display: flex;
            align-items: flex-start;
            margin-bottom: 24px;
            font-size: 24px;
            color: #4a5568;
            line-height: 1.5;
        }
        .bullet-icon {
            color: #3182ce;
            margin-right: 20px;
            margin-top: 8px;
            font-size: 20px;
        }
        .key-message-box {
            background-color: #ebf8ff;
            border-left: 8px solid #3182ce;
            padding: 30px;
            margin-top: auto;
            border-radius: 0 8px 8px 0;
        }
        .key-message-title {
            color: #2b6cb0;
            font-weight: 800;
            font-size: 18px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }
        .key-message-text {
            color: #2d3748;
            font-size: 26px;
            font-weight: 700;
            line-height: 1.4;
        }
        .page-number {
            position: absolute;
            bottom: 30px;
            right: 40px;
            color: #a0aec0;
            font-size: 14px;
            font-weight: 500;
        }
        .logo-placeholder {
            position: absolute;
            top: 40px;
            right: 40px;
            font-size: 24px;
            color: #cbd5e0;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div>
<div class="flex items-center justify-between">
<span class="section-tag">도입</span>
</div>
<h1 class="main-title">
                    왜 잠재프로파일분석(LPA)이 필요한가
                </h1>
<div class="mt-8">
<div class="bullet-point">
<i class="fas fa-chart-bar bullet-icon"></i>
<p>개인 간 이질성이 큰 심리·행동 자료에서 평균 중심 분석의 한계를 보완함</p>
</div>
<div class="bullet-point">
<i class="fas fa-layer-group bullet-icon"></i>
<p>동일한 평균이라도 서로 다른 구성형(Profile)이 공존할 수 있음을 모델링함</p>
</div>
<div class="bullet-point">
<i class="fas fa-bullseye bullet-icon"></i>
<p>맞춤형 개입·정책 설계를 위해 구체적인 하위집단을 식별할 필요가 있음</p>
</div>
<div class="bullet-point">
<i class="fas fa-wave-square bullet-icon"></i>
<p>변수 간 관계의 비선형·비균질 패턴을 효과적으로 드러낼 수 있음</p>
</div>
<div class="bullet-point">
<i class="fas fa-project-diagram bullet-icon"></i>
<p>실증 데이터와 이론을 연결하는 집단 수준의 해석을 가능하게 함</p>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-title">
<i class="fas fa-lightbulb mr-2"></i> 핵심 정리
                </div>
<p class="key-message-text">
                    잠재프로파일분석은 집단 내 숨은 이질성을 드러내어<br/>
                    실질적 해석과 개입을 가능하게 하는 강력한 도구이다.
                </p>
</div>
</div>
<div class="page-number">01</div>
</div>

const width = rect.width;
        const height = rect.height;

// Draw Axes
        ctx.beginPath();
        ctx.moveTo(40, height - 40);
        ctx.lineTo(width - 20, height - 40); // X axis
        ctx.moveTo(40, height - 40);
        ctx.lineTo(40, 20); // Y axis
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();

// Labels
        ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('지표 A', width - 50, height - 20);
        ctx.fillText('지표 B', 10, 30);

// Function to draw ellipse
        function drawEllipse(x, y, radiusX, radiusY, rotation, color, label) {
            ctx.beginPath();
            ctx.ellipse(x, y, radiusX, radiusY, rotation, 0, 2 * Math.PI);
            ctx.fillStyle = color + '20'; // transparent fill
            ctx.fill();
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.stroke();
            
            ctx.fillStyle = color;
            ctx.font = 'bold 14px Noto Sans KR';
            ctx.fillText(label, x - 20, y - radiusY - 10);
        }

// Function to draw points
        function drawPoints(centerX, centerY, count, color, spreadX, spreadY) {
            ctx.fillStyle = color;
            for (let i = 0; i < count; i++) {
                // Random points within a rough ellipse shape
                const angle = Math.random() * 2 * Math.PI;
                const r = Math.sqrt(Math.random());
                const x = centerX + r * spreadX * Math.cos(angle) + (Math.random() - 0.5) * 10;
                const y = centerY + r * spreadY * Math.sin(angle) + (Math.random() - 0.5) * 10;
                
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.fill();
            }
        }

// Profile 1 (Low-Low)
        const p1X = width * 0.35;
        const p1Y = height * 0.65;
        drawEllipse(p1X, p1Y, 60, 40, Math.PI / 6, '#3182ce', '프로파일 1'); // Blue
        drawPoints(p1X, p1Y, 40, '#3182ce', 50, 30);

// Profile 2 (High-High)
        const p2X = width * 0.7;
        const p2Y = height * 0.35;
        drawEllipse(p2X, p2Y, 70, 50, -Math.PI / 6, '#e53e3e', '프로파일 2'); // Red
        drawPoints(p2X, p2Y, 50, '#e53e3e', 60, 40);

// Overall Distribution Curve (Simulated)
        ctx.beginPath();
        ctx.moveTo(40, height - 40);
        // Bezier curve to represent total distribution if projected
        // Just decoration to imply mixture
        
    </script>

const width = rect.width;
        const height = rect.height;

// Background Data Points (Scatter plot)
        const points = [];
        const numPoints = 150;
        
        // Generate correlated data points
        for(let i=0; i<numPoints; i++) {
            let x = Math.random() * (width - 80) + 40;
            // Positive correlation with noise
            let y = height - (x * 0.5 + Math.random() * 100 + 50); 
            // Adjust to keep in bounds
            y = Math.max(40, Math.min(height-40, y));
            points.push({x, y});
        }

// Draw Points
        ctx.fillStyle = '#cbd5e0';
        points.forEach(p => {
            ctx.beginPath();
            ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
            ctx.fill();
        });

// 1. Variable-Centered View (Regression Line)
        ctx.beginPath();
        ctx.moveTo(40, height - 80);
        ctx.lineTo(width - 40, 80);
        ctx.strokeStyle = '#e53e3e'; // Red
        ctx.lineWidth = 4;
        ctx.setLineDash([10, 5]);
        ctx.stroke();
        ctx.setLineDash([]);

// Label for Variable-Centered
        ctx.save();
        ctx.translate(width/2 - 20, height/2 - 20);
        ctx.rotate(-Math.PI / 6);
        ctx.fillStyle = '#c53030';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('변인 중심 (전체 경향)', 0, -10);
        ctx.restore();

// 2. Person-Centered View (Subgroups)
        // Group 1 (Lower Left)
        ctx.beginPath();
        ctx.ellipse(width * 0.3, height * 0.75, 70, 50, -Math.PI / 6, 0, Math.PI * 2);
        ctx.strokeStyle = '#3182ce'; // Blue
        ctx.lineWidth = 3;
        ctx.stroke();
        ctx.fillStyle = 'rgba(49, 130, 206, 0.1)';
        ctx.fill();

// Group 2 (Upper Right)
        ctx.beginPath();
        ctx.ellipse(width * 0.75, height * 0.25, 80, 60, -Math.PI / 6, 0, Math.PI * 2);
        ctx.strokeStyle = '#3182ce'; // Blue
        ctx.lineWidth = 3;
        ctx.stroke();
        ctx.fillStyle = 'rgba(49, 130, 206, 0.1)';
        ctx.fill();

// Label for Person-Centered
        ctx.fillStyle = '#2c5282';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('사람 중심 (하위집단)', width * 0.2, height * 0.85);
        ctx.fillText('사람 중심 (하위집단)', width * 0.65, height * 0.15);

// Legend box
        const legX = width - 180;
        const legY = height - 60;
        
        ctx.fillStyle = 'white';
        ctx.shadowColor = 'rgba(0,0,0,0.1)';
        ctx.shadowBlur = 4;
        ctx.fillRect(legX, legY, 160, 50);
        ctx.shadowBlur = 0;
        
        // Legend items
        ctx.beginPath();
        ctx.moveTo(legX + 15, legY + 15);
        ctx.lineTo(legX + 45, legY + 15);
        ctx.strokeStyle = '#e53e3e';
        ctx.lineWidth = 3;
        ctx.setLineDash([4, 2]);
        ctx.stroke();
        ctx.setLineDash([]);
        
        ctx.beginPath();
        ctx.ellipse(legX + 30, legY + 35, 10, 6, 0, 0, Math.PI*2);
        ctx.strokeStyle = '#3182ce';
        ctx.stroke();

ctx.fillStyle = '#4a5568';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('변인 중심 접근', legX + 55, legY + 18);
        ctx.fillText('사람 중심 접근', legX + 55, legY + 39);

</script>

.key-message-box {
            background-color: #ebf8ff;
            border-left: 6px solid #3182ce;
            padding: 15px 25px;
            border-radius: 0 6px 6px 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .key-message-label {
            color: #2b6cb0;
            font-weight: 800;
            font-size: 16px;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .key-message-text {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
        }
        .page-number {
            position: absolute;
            bottom: 25px;
            right: 35px;
            color: #cbd5e0;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div class="top-section">
<span class="section-tag">개념적 기초</span>
<h1 class="main-title">형태 차이(Shape)와 수준 차이(Level) 구분</h1>
</div>
<div class="main-content">

<div class="comparison-col">
<div class="col-header header-level">
<i class="fas fa-layer-group"></i> 수준 차이 (Level Effect)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="levelChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-minus feature-icon" style="color:#718096"></i>
<p><strong>정의:</strong> 모든 지표가 전반적으로 높거나 낮은 양적 차이</p>
</li>
<li class="feature-item">
<i class="fas fa-minus feature-icon" style="color:#718096"></i>
<p><strong>특징:</strong> 프로파일 선들이 서로 평행하게 나타남</p>
</li>
<li class="feature-item">
<i class="fas fa-minus feature-icon" style="color:#718096"></i>
<p><strong>주의:</strong> 단순 수준 차이만으로는 별도 집단으로 분류하는 실익이 적을 수 있음 (과도한 분리 경계)</p>
</li>
</ul>
</div>
</div>

<div class="comparison-col">
<div class="col-header header-shape">
<i class="fas fa-shapes"></i> 형태 차이 (Shape Effect)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="shapeChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#3182ce"></i>
<p><strong>정의:</strong> 지표 간의 상대적 패턴 구성이 다른 질적 차이</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#3182ce"></i>
<p><strong>특징:</strong> 프로파일 선들이 서로 교차하거나 기울기가 다름</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#3182ce"></i>
<p><strong>가치:</strong> 이론적 함의가 크며, LPA 분석의 주된 목적임. 맞춤형 개입의 근거가 됨</p>
</li>
</ul>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-label">
<i class="fas fa-lightbulb mr-2"></i> 핵심 정리
                </div>
<p class="key-message-text">
                    추가 집단의 가치 판단은 <strong>'형태 차이'</strong>를 우선 기준으로 삼아야 하며,<br/>
                    단순한 '수준 차이'만 있는 경우 파서머니(Parsimony) 원칙에 따라 신중히 접근해야 한다.
                </p>
</div>
</div>
<div class="page-number">06</div>
</div>
<script>
        // Common Chart Options
        const commonOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: { family: "'Noto Sans KR', sans-serif", size: 12 },
                        boxWidth: 10
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 10,
                    grid: { color: '#f0f0f0' },
                    ticks: { display: false } // Hide Y axis labels for cleaner look
                },
                x: {
                    grid: { display: false },
                    ticks: { font: { family: "'Noto Sans KR', sans-serif" } }
                }
            },
            elements: {
                line: { tension: 0.3 }
            }
        };

// Level Chart
        const ctxLevel = document.getElementById('levelChart').getContext('2d');
        new Chart(ctxLevel, {
            type: 'line',
            data: {
                labels: ['지표 A', '지표 B', '지표 C', '지표 D'],
                datasets: [
                    {
                        label: '고수준 집단',
                        data: [8, 8.5, 8, 8.2],
                        borderColor: '#2d3748',
                        backgroundColor: '#2d3748',
                        borderWidth: 2,
                        pointRadius: 3
                    },
                    {
                        label: '중수준 집단',
                        data: [5, 5.5, 5, 5.2],
                        borderColor: '#718096',
                        backgroundColor: '#718096',
                        borderWidth: 2,
                        pointRadius: 3,
                        borderDash: [5, 5]
                    },
                    {
                        label: '저수준 집단',
                        data: [2, 2.5, 2, 2.2],
                        borderColor: '#cbd5e0',
                        backgroundColor: '#cbd5e0',
                        borderWidth: 2,
                        pointRadius: 3
                    }
                ]
            },
            options: commonOptions
        });

// Shape Chart
        const ctxShape = document.getElementById('shapeChart').getContext('2d');
        new Chart(ctxShape, {
            type: 'line',
            data: {
                labels: ['지표 A', '지표 B', '지표 C', '지표 D'],
                datasets: [
                    {
                        label: '유형 1 (M자형)',
                        data: [3, 8, 3, 8],
                        borderColor: '#3182ce',
                        backgroundColor: '#3182ce',
                        borderWidth: 2,
                        pointRadius: 3
                    },
                    {
                        label: '유형 2 (W자형)',
                        data: [7, 2, 7, 2],
                        borderColor: '#e53e3e',
                        backgroundColor: '#e53e3e',
                        borderWidth: 2,
                        pointRadius: 3
                    },
                    {
                        label: '유형 3 (우상향)',
                        data: [2, 4, 6, 8],
                        borderColor: '#38a169',
                        backgroundColor: '#38a169',
                        borderWidth: 2,
                        pointRadius: 3,
                        borderDash: [5, 5]
                    }
                ]
            },
            options: commonOptions
        });
    </script>

const w = rect.width;
        const h = rect.height;
        const centerX = w / 2;
        const centerY = h / 2;

// Venn Diagram Parameters
        const radius = 80;
        const offset = 50;
        
        // Colors
        const color1 = 'rgba(49, 130, 206, 0.2)'; // Blue
        const border1 = '#3182ce';
        const color2 = 'rgba(56, 161, 105, 0.2)'; // Green
        const border2 = '#38a169';
        const color3 = 'rgba(128, 90, 213, 0.2)'; // Purple
        const border3 = '#805ad5';

// Draw Circles
        // Top
        ctx.beginPath();
        ctx.arc(centerX, centerY - offset + 10, radius, 0, Math.PI * 2);
        ctx.fillStyle = color1;
        ctx.fill();
        ctx.strokeStyle = border1;
        ctx.lineWidth = 2;
        ctx.stroke();

// Bottom Left
        ctx.beginPath();
        ctx.arc(centerX - offset, centerY + 30, radius, 0, Math.PI * 2);
        ctx.fillStyle = color2;
        ctx.fill();
        ctx.strokeStyle = border2;
        ctx.lineWidth = 2;
        ctx.stroke();

// Bottom Right
        ctx.beginPath();
        ctx.arc(centerX + offset, centerY + 30, radius, 0, Math.PI * 2);
        ctx.fillStyle = color3;
        ctx.fill();
        ctx.strokeStyle = border3;
        ctx.lineWidth = 2;
        ctx.stroke();

// Labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.font = 'bold 15px Noto Sans KR';
        
        // Top Label
        ctx.fillStyle = '#2c5282'; // Darker Blue
        ctx.fillText('이론적 근거', centerX, centerY - offset - 40);
        
        // Left Label
        ctx.fillStyle = '#276749'; // Darker Green
        ctx.fillText('통계적 적합도', centerX - offset - 50, centerY + 80);
        
        // Right Label
        ctx.fillStyle = '#553c9a'; // Darker Purple
        ctx.fillText('내용 타당성', centerX + offset + 50, centerY + 80);

// Center Text (Intersection)
        ctx.fillStyle = '#2d3748';
        ctx.font = '800 14px Noto Sans KR';
        ctx.fillText('최적 모형', centerX, centerY + 15);
        ctx.font = '500 12px Noto Sans KR';
        ctx.fillText('(정당화)', centerX, centerY + 32);

</script>

const w = rect.width;
        const h = rect.height;
        const cx = w / 2;
        const cy = h / 2;

// Draw Helper Grid
        ctx.strokeStyle = '#e2e8f0';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(cx, 20);
        ctx.lineTo(cx, h - 40);
        ctx.moveTo(20, cy);
        ctx.lineTo(w - 20, cy);
        ctx.stroke();

// Helper function to draw distribution shapes (ellipses)
        function drawProfileShape(x, y, rx, ry, rotation, color, label, subLabel) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotation);
            
            // Draw fill
            ctx.beginPath();
            ctx.ellipse(0, 0, rx, ry, 0, 0, 2 * Math.PI);
            ctx.fillStyle = color + '20'; // transparent
            ctx.fill();
            
            // Draw stroke
            ctx.lineWidth = 2;
            ctx.strokeStyle = color;
            ctx.stroke();
            
            // Draw center point
            ctx.beginPath();
            ctx.arc(0, 0, 3, 0, 2 * Math.PI);
            ctx.fillStyle = color;
            ctx.fill();

ctx.restore();

// Draw Label
            ctx.fillStyle = '#2d3748';
            ctx.font = 'bold 13px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.fillText(label, x, y + ry + 20);
            
            ctx.fillStyle = '#718096';
            ctx.font = '11px Noto Sans KR';
            ctx.fillText(subLabel, x, y + ry + 35);
        }

// 1. Equal Variance & Independence (Top Left)
        // Two profiles with SAME size circles
        const q1x = w * 0.25;
        const q1y = h * 0.25;
        drawProfileShape(q1x - 30, q1y - 10, 25, 25, 0, '#3182ce', '', '');
        drawProfileShape(q1x + 30, q1y + 10, 25, 25, 0, '#e53e3e', '등분산 제약', '동일한 크기/형태');

// 2. Varying Variance & Independence (Top Right)
        // Two profiles with DIFFERENT size circles
        const q2x = w * 0.75;
        const q2y = h * 0.25;
        drawProfileShape(q2x - 30, q2y - 10, 20, 20, 0, '#3182ce', '', '');
        drawProfileShape(q2x + 30, q2y + 10, 35, 35, 0, '#e53e3e', '이분산 허용', '서로 다른 크기');

// 3. Covariance (Bottom)
        // Two profiles with rotation (correlation)
        const q3x = w * 0.5;
        const q3y = h * 0.75;
        drawProfileShape(q3x - 50, q3y, 40, 20, -Math.PI/6, '#3182ce', '', '');
        drawProfileShape(q3x + 50, q3y, 40, 20, -Math.PI/6, '#e53e3e', '공분산 허용', '지표 간 상관 (회전)');

// Arrows to show increasing complexity
        ctx.strokeStyle = '#a0aec0';
        ctx.fillStyle = '#a0aec0';
        ctx.lineWidth = 1.5;
        
        // Arrow from 1 to 2
        ctx.beginPath();
        ctx.moveTo(w * 0.4, h * 0.25);
        ctx.lineTo(w * 0.6, h * 0.25);
        ctx.stroke();
        // Arrow head
        ctx.beginPath();
        ctx.moveTo(w * 0.6, h * 0.25);
        ctx.lineTo(w * 0.58, h * 0.23);
        ctx.lineTo(w * 0.58, h * 0.27);
        ctx.fill();

// Arrow from 1 to 3
        ctx.beginPath();
        ctx.moveTo(w * 0.25, h * 0.45);
        ctx.lineTo(w * 0.4, h * 0.65);
        ctx.stroke();
         // Arrow head
         ctx.beginPath();
         ctx.moveTo(w * 0.4, h * 0.65);
         ctx.lineTo(w * 0.38, h * 0.62);
         ctx.lineTo(w * 0.37, h * 0.64);
         ctx.fill();

// Complexity Labels
        ctx.fillStyle = '#4a5568';
        ctx.font = 'bold 12px Noto Sans KR';
        ctx.fillText('복잡성 증가', w * 0.5, h * 0.22);

</script>

const width = rect.width;
        const height = rect.height;
        const padding = 40;

// Colors
        const colorMain = '#cbd5e0'; // Gray for combined
        const colorA = '#3182ce';    // Blue for group A
        const colorB = '#e53e3e';    // Red for group B

// Helper: Gaussian function
        function gaussian(x, mean, sigma) {
            const a = 1 / (sigma * Math.sqrt(2 * Math.PI));
            const exponent = -((x - mean) ** 2) / (2 * sigma ** 2);
            return a * Math.exp(exponent);
        }

// Draw Axes
        ctx.beginPath();
        ctx.moveTo(padding, height - padding);
        ctx.lineTo(width - padding, height - padding); // X
        ctx.moveTo(padding, height - padding);
        ctx.lineTo(padding, padding); // Y
        ctx.strokeStyle = '#a0aec0';
        ctx.lineWidth = 2;
        ctx.stroke();

// Labels
        ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('주요 변인 수준 (Level)', width / 2, height - 10);
        ctx.save();
        ctx.translate(15, height / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('빈도 (Frequency)', 0, 0);
        ctx.restore();

// Data Generation for Visualization
        const points = 200;
        const xStart = 0;
        const xEnd = 100;
        const step = (xEnd - xStart) / points;

// Parameters
        const mean1 = 30, sigma1 = 10, amp1 = 8000;
        const mean2 = 70, sigma2 = 12, amp2 = 6000;

// Draw Subgroup 1 (Blue)
        ctx.beginPath();
        ctx.strokeStyle = colorA;
        ctx.lineWidth = 3;
        for (let i = 0; i <= points; i++) {
            const xVal = xStart + i * step;
            const yVal = gaussian(xVal, mean1, sigma1) * amp1;
            const xCanvas = padding + (xVal / 100) * (width - 2 * padding);
            const yCanvas = height - padding - yVal;
            if (i === 0) ctx.moveTo(xCanvas, yCanvas);
            else ctx.lineTo(xCanvas, yCanvas);
        }
        ctx.stroke();
        // Fill area
        ctx.fillStyle = colorA + '20'; // transparent
        ctx.lineTo(padding + (width - 2 * padding), height - padding);
        ctx.lineTo(padding, height - padding);
        ctx.fill();

// Draw Subgroup 2 (Red)
        ctx.beginPath();
        ctx.strokeStyle = colorB;
        ctx.lineWidth = 3;
        for (let i = 0; i <= points; i++) {
            const xVal = xStart + i * step;
            const yVal = gaussian(xVal, mean2, sigma2) * amp2;
            const xCanvas = padding + (xVal / 100) * (width - 2 * padding);
            const yCanvas = height - padding - yVal;
            if (i === 0) ctx.moveTo(xCanvas, yCanvas);
            else ctx.lineTo(xCanvas, yCanvas);
        }
        ctx.stroke();
        // Fill area
        ctx.fillStyle = colorB + '20'; // transparent
        ctx.lineTo(padding + (width - 2 * padding), height - padding);
        ctx.lineTo(padding, height - padding);
        ctx.fill();

// Draw Combined (Gray Dashed) - "The Illusion of Average"
        ctx.beginPath();
        ctx.strokeStyle = colorMain;
        ctx.lineWidth = 2;
        ctx.setLineDash([5, 5]);
        for (let i = 0; i <= points; i++) {
            const xVal = xStart + i * step;
            const yVal1 = gaussian(xVal, mean1, sigma1) * amp1;
            const yVal2 = gaussian(xVal, mean2, sigma2) * amp2;
            const yTotal = yVal1 + yVal2;
            
            const xCanvas = padding + (xVal / 100) * (width - 2 * padding);
            const yCanvas = height - padding - yTotal;
            if (i === 0) ctx.moveTo(xCanvas, yCanvas);
            else ctx.lineTo(xCanvas, yCanvas);
        }
        ctx.stroke();
        ctx.setLineDash([]);

// Annotations
        ctx.fillStyle = colorA;
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('잠재집단 A', width * 0.25, height * 0.4);

ctx.fillStyle = colorB;
        ctx.fillText('잠재집단 B', width * 0.75, height * 0.5);

ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('전체 분포 (단일 평균 가정 시)', width * 0.5, height * 0.25);
        
        // Arrow pointing to the dip
        ctx.beginPath();
        ctx.moveTo(width * 0.5, height * 0.28);
        ctx.lineTo(width * 0.5, height * 0.6);
        ctx.strokeStyle = '#718096';
        ctx.lineWidth = 1;
        ctx.stroke();
        
    </script>

/* Conceptual Diagram Styles */
        .flow-box {
            background-color: white;
            border: 2px solid;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 14px;
            color: #2d3748;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            z-index: 10;
        }
        .arrow-down {
            color: #cbd5e0;
            font-size: 20px;
            margin: 0 10px;
        }
        .diagram-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }
        .d-exp .flow-box { border-color: #ed8936; color: #c05621; }
        .d-conf .flow-box { border-color: #3182ce; color: #2b6cb0; }
        .d-arrow { color: #a0aec0; font-size: 24px; }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div class="top-section">
<span class="section-tag">연구문제 설정</span>
<h1 class="main-title">탐색적 접근 vs. 확인적 접근</h1>
</div>
<div class="main-content">

<div class="comparison-col">
<div class="col-header header-exploratory">
<i class="fas fa-search"></i> 탐색적 LPA (Exploratory)
                </div>
<div class="col-body">
<div class="diagram-container d-exp">
<div class="diagram-content">
<div class="flow-box">데이터 (Data)</div>
<i class="fas fa-arrow-down d-arrow"></i>
<div class="flow-box">프로파일 수 & 형태 추정</div>
</div>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-lightbulb feature-icon"></i>
<p><strong>목표:</strong> 데이터로부터 잠재된 집단 구조를 <strong>'발견'</strong>함</p>
</li>
<li class="feature-item">
<i class="fas fa-lightbulb feature-icon"></i>
<p><strong>절차:</strong> 사전 가정 없이 다양한 모델을 비교하여 최적해 도출</p>
</li>
<li class="feature-item">
<i class="fas fa-lightbulb feature-icon"></i>
<p><strong>요구사항:</strong> 도출된 결과는 반드시 후속 연구에서 <strong>재현(Replication)</strong>되어야 함</p>
</li>
</ul>
</div>
</div>

<div class="comparison-col">
<div class="col-header header-confirmatory">
<i class="fas fa-clipboard-check"></i> 확인적 LPA (Confirmatory)
                </div>
<div class="col-body">
<div class="diagram-container d-conf">
<div class="diagram-content">
<div class="flow-box">이론 (Theory)</div>
<i class="fas fa-arrow-down d-arrow"></i>
<div class="flow-box">특정 프로파일 구조 검증</div>
</div>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check-circle feature-icon"></i>
<p><strong>목표:</strong> 사전 이론이나 선행연구의 가설을 <strong>'검증'</strong>함</p>
</li>
<li class="feature-item">
<i class="fas fa-check-circle feature-icon"></i>
<p><strong>절차:</strong> 집단 수와 형태를 미리 규정하고 데이터와의 적합도 평가</p>
</li>
<li class="feature-item">
<i class="fas fa-check-circle feature-icon"></i>
<p><strong>요구사항:</strong> 비교 모형 설정과 이론적 근거에 기반한 <strong>엄격한 기준</strong> 적용</p>
</li>
</ul>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-label">
<i class="fas fa-info-circle mr-2"></i> 핵심 정리
            </div>
<p class="key-message-text">
                탐색적 접근은 <strong>새로운 유형의 발견</strong>을, 확인적 접근은 <strong>이론의 검증</strong>을 목적으로 하며,<br/>
                연구의 성숙도와 단계에 따라 전략적으로 선택해야 한다.
            </p>
</div>
</div>
<div class="page-number">10</div>
</div>

const w = rect.width;
        const h = rect.height;
        const centerX = w / 2;
        const centerY = h / 2 + 10;
        const radius = 90;

// Draw Triangle
        const angle1 = -Math.PI / 2; // Top
        const angle2 = angle1 + (2 * Math.PI / 3); // Bottom Right
        const angle3 = angle2 + (2 * Math.PI / 3); // Bottom Left

// Fill background triangle
        ctx.beginPath();
        ctx.moveTo(p1.x, p1.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.lineTo(p3.x, p3.y);
        ctx.closePath();
        ctx.fillStyle = '#ebf8ff';
        ctx.fill();
        ctx.strokeStyle = '#90cdf4';
        ctx.lineWidth = 2;
        ctx.stroke();

// Connect center
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(p1.x, p1.y);
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(p2.x, p2.y);
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(p3.x, p3.y);
        ctx.strokeStyle = '#bee3f8';
        ctx.lineWidth = 1;
        ctx.setLineDash([5, 5]);
        ctx.stroke();
        ctx.setLineDash([]);

// Draw Circles at vertices
        function drawVertex(x, y, color, icon, label, labelYOffset) {
            // Circle
            ctx.beginPath();
            ctx.arc(x, y, 35, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.strokeStyle = color;
            ctx.lineWidth = 3;
            ctx.stroke();

// Label
            ctx.fillStyle = '#2d3748';
            ctx.font = 'bold 14px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.fillText(label, x, y + labelYOffset);
            
            // Icon (simplified as colored dot for now, or text)
            ctx.fillStyle = color;
            ctx.font = '900 16px "Font Awesome 5 Free"';
            ctx.fillText(icon, x, y + 5);
        }

// Top: Theoretical Relevance
        drawVertex(p1.x, p1.y, '#3182ce', '\uf02d', '이론적 정당성', -45); // Book icon

// Bottom Right: Statistical Parsimony
        drawVertex(p2.x, p2.y, '#38a169', '\uf201', '통계적 간명성', 55); // Chart icon

// Bottom Left: Measurement Quality
        drawVertex(p3.x, p3.y, '#e53e3e', '\uf54b', '측정 품질', 55); // Ruler/Quality icon

// Center: Optimal Indicators
        ctx.beginPath();
        ctx.arc(centerX, centerY, 45, 0, Math.PI * 2);
        ctx.fillStyle = '#2c3e50';
        ctx.fill();
        
        ctx.fillStyle = 'white';
        ctx.font = 'bold 13px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('최적 지표', centerX, centerY - 2);
        ctx.fillText('세트', centerX, centerY + 14);

</script>

const width = rect.width;
        const height = rect.height;
        const centerX = width / 2;
        const centerY = height / 2;

// Function to draw arrow
        function drawArrow(fromX, fromY, toX, toY, color) {
            const headlen = 10;
            const angle = Math.atan2(toY - fromY, toX - fromX);
            
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.stroke();

ctx.beginPath();
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.fillStyle = color;
            ctx.fill();
        }

// Function to draw box
        function drawBox(x, y, w, h, text, color, bgColor) {
            ctx.fillStyle = bgColor;
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            
            // Rounded rect
            const r = 8;
            ctx.beginPath();
            ctx.moveTo(x + r, y);
            ctx.lineTo(x + w - r, y);
            ctx.quadraticCurveTo(x + w, y, x + w, y + r);
            ctx.lineTo(x + w, y + h - r);
            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
            ctx.lineTo(x + r, y + h);
            ctx.quadraticCurveTo(x, y + h, x, y + h - r);
            ctx.lineTo(x, y + r);
            ctx.quadraticCurveTo(x, y, x + r, y);
            ctx.fill();
            ctx.stroke();

ctx.fillStyle = color;
            ctx.font = 'bold 14px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(text, x + w/2, y + h/2);
        }

// Draw Latent Profile (Center) - Ellipse
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, 60, 40, 0, 0, 2 * Math.PI);
        ctx.fillStyle = '#ebf8ff';
        ctx.fill();
        ctx.strokeStyle = '#3182ce';
        ctx.lineWidth = 3;
        ctx.stroke();
        
        ctx.fillStyle = '#2c5282';
        ctx.font = 'bold 15px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('잠재 프로파일', centerX, centerY - 8);
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('(LPA)', centerX, centerY + 10);

// Draw Predictors (Left)
        drawBox(30, centerY - 25, 100, 50, '예측변수', '#4a5568', '#f7fafc');
        drawArrow(135, centerY, centerX - 65, centerY, '#4a5568');

// Draw Outcomes (Right)
        drawBox(width - 130, centerY - 25, 100, 50, '결과변수', '#4a5568', '#f7fafc');
        drawArrow(centerX + 65, centerY, width - 135, centerY, '#4a5568');

// Draw Covariates (Bottom)
        drawBox(centerX - 50, height - 60, 100, 40, '공변량', '#718096', '#edf2f7');
        // Arrow from Covariates to Latent Profile (dashed)
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(centerX, height - 65);
        ctx.lineTo(centerX, centerY + 45);
        ctx.strokeStyle = '#718096';
        ctx.stroke();
        ctx.setLineDash([]);
        // Arrow head
        ctx.beginPath();
        ctx.moveTo(centerX, centerY + 45);
        ctx.lineTo(centerX - 5, centerY + 55);
        ctx.lineTo(centerX + 5, centerY + 55);
        ctx.fillStyle = '#718096';
        ctx.fill();

// Draw Indicators (Top)
        ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('관측지표 (Indicators)', centerX, 40);
        
        // Small boxes for indicators
        for(let i = -2; i <= 2; i++) {
            const ix = centerX + i * 35;
            const iy = 60;
            ctx.fillStyle = 'white';
            ctx.strokeStyle = '#cbd5e0';
            ctx.fillRect(ix - 12, iy - 12, 24, 24);
            ctx.strokeRect(ix - 12, iy - 12, 24, 24);
            
            // Arrows from Latent Profile to Indicators
            drawArrow(centerX, centerY - 45, ix, iy + 15, '#cbd5e0');
        }

</script>

const w = rect.width;
        const h = rect.height;
        const cx = w / 2;
        const cy = h / 2 - 20;

// Colors
        const primaryColor = '#3182ce';
        const secondaryColor = '#e2e8f0';
        const accentColor = '#2c3e50';

// Draw Central Node (Transparency)
        ctx.beginPath();
        ctx.arc(cx, cy, 50, 0, Math.PI * 2);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.lineWidth = 3;
        ctx.strokeStyle = primaryColor;
        ctx.stroke();

// Icon in center (Simulated with simple shapes)
        // Document icon
        ctx.fillStyle = primaryColor;
        ctx.beginPath();
        ctx.rect(cx - 15, cy - 20, 30, 40);
        ctx.fill();
        ctx.fillStyle = 'white';
        ctx.fillRect(cx - 10, cy - 12, 20, 2);
        ctx.fillRect(cx - 10, cy - 5, 20, 2);
        ctx.fillRect(cx - 10, cy + 2, 14, 2);

ctx.fillStyle = accentColor;
        ctx.font = 'bold 13px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('투명성', cx, cy + 65);

// Nodes
        const nodes = [
            { label: '전처리 명시', angle: -Math.PI / 2 },
            { label: '모든 모형 공개', angle: -Math.PI / 10 },
            { label: '코드 공유', angle: Math.PI * 3 / 10 },
            { label: '대안 해석', angle: Math.PI * 7 / 10 },
            { label: '이론 근거', angle: Math.PI * 11 / 10 }
        ];

const radius = 100;

nodes.forEach(node => {
            const nx = cx + Math.cos(node.angle) * radius;
            const ny = cy + Math.sin(node.angle) * radius;

// Line connecting to center
            ctx.beginPath();
            ctx.moveTo(cx, cy);
            ctx.lineTo(nx, ny);
            ctx.strokeStyle = '#cbd5e0';
            ctx.lineWidth = 2;
            ctx.stroke();

// Node Circle
            ctx.beginPath();
            ctx.arc(nx, ny, 35, 0, Math.PI * 2);
            ctx.fillStyle = '#f7fafc';
            ctx.fill();
            ctx.strokeStyle = accentColor;
            ctx.lineWidth = 2;
            ctx.stroke();

// Label
            ctx.fillStyle = accentColor;
            ctx.font = 'bold 12px Noto Sans KR';
            
            // Handle multi-line text if needed, here short enough
            const words = node.label.split(' ');
            if(words.length > 1) {
                ctx.fillText(words[0], nx, ny - 5);
                ctx.fillText(words[1], nx, ny + 12);
            } else {
                ctx.fillText(node.label, nx, ny + 4);
            }
        });

// Decorative outer ring segments
        ctx.beginPath();
        ctx.arc(cx, cy, radius + 50, 0, Math.PI * 2);
        ctx.strokeStyle = '#e2e8f0';
        ctx.lineWidth = 1;
        ctx.setLineDash([10, 10]);
        // ctx.stroke(); // Optional: remove or keep for style
        ctx.setLineDash([]);

</script>

const width = rect.width;
        const height = rect.height;
        const padding = { top: 40, right: 40, bottom: 40, left: 60 };
        const chartWidth = width - padding.left - padding.right;
        const chartHeight = height - padding.top - padding.bottom;

// Draw Axes
        ctx.beginPath();
        ctx.moveTo(padding.left, height - padding.bottom);
        ctx.lineTo(width - padding.right, height - padding.bottom); // X axis
        ctx.moveTo(padding.left, height - padding.bottom);
        ctx.lineTo(padding.left, padding.top); // Y axis
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();

// Axis Labels
        ctx.fillStyle = '#718096';
        ctx.font = 'bold 12px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('소집단 비율 (%)', width / 2 + 10, height - 10);
        
        ctx.save();
        ctx.translate(20, height / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.textAlign = 'center';
        ctx.fillText('통계적 검정력 (Power)', 0, 0);
        ctx.restore();

// X Axis Ticks (5%, 10%, 15%, 20%, 25%)
        const xSteps = 5;
        for(let i=1; i<=xSteps; i++) {
            const x = padding.left + (chartWidth / xSteps) * i;
            ctx.beginPath();
            ctx.moveTo(x, height - padding.bottom);
            ctx.lineTo(x, height - padding.bottom + 5);
            ctx.strokeStyle = '#cbd5e0';
            ctx.stroke();
            
            ctx.fillStyle = '#718096';
            ctx.font = '11px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.fillText(`${i*5}%`, x, height - padding.bottom + 18);
        }

// Y Axis Ticks (0.2, 0.4, 0.6, 0.8, 1.0)
        const ySteps = 5;
        for(let i=1; i<=ySteps; i++) {
            const y = height - padding.bottom - (chartHeight / ySteps) * i;
            ctx.beginPath();
            ctx.moveTo(padding.left, y);
            ctx.lineTo(padding.left - 5, y);
            ctx.strokeStyle = '#cbd5e0';
            ctx.stroke();

// Grid lines
            ctx.beginPath();
            ctx.moveTo(padding.left, y);
            ctx.lineTo(width - padding.right, y);
            ctx.strokeStyle = '#f1f5f9';
            ctx.stroke();

ctx.fillStyle = '#718096';
            ctx.font = '11px Noto Sans KR';
            ctx.textAlign = 'right';
            ctx.fillText((i*0.2).toFixed(1), padding.left - 10, y + 4);
        }

// Draw Curves Function
        function drawCurve(points, color, label) {
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            // Smooth curve
            for (let i = 1; i < points.length - 2; i++) {
                const xc = (points[i].x + points[i + 1].x) / 2;
                const yc = (points[i].y + points[i + 1].y) / 2;
                ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
            }
            // For the last 2 points
            ctx.quadraticCurveTo(
                points[points.length - 2].x,
                points[points.length - 2].y,
                points[points.length - 1].x,
                points[points.length - 1].y
            );
            
            ctx.strokeStyle = color;
            ctx.lineWidth = 3;
            ctx.stroke();

// Legend
            const lastPoint = points[points.length - 1];
            ctx.fillStyle = color;
            ctx.font = 'bold 12px Noto Sans KR';
            ctx.textAlign = 'left';
            ctx.fillText(label, lastPoint.x - 60, lastPoint.y - 10);
        }

// Data for High Entropy (Good separation)
        // Starts low but rises quickly
        const pointsHigh = [];
        for(let i=0; i<=5; i++) {
            const ratio = i/5; 
            const x = padding.left + (chartWidth * ratio);
            // Function: Power rises quickly with prevalence
            const power = 0.3 + 0.65 * (1 - Math.exp(-3 * ratio)); 
            const y = height - padding.bottom - (chartHeight * power);
            pointsHigh.push({x, y});
        }
        // Adjust start point
        pointsHigh[0] = {x: padding.left, y: height - padding.bottom - (chartHeight * 0.1)}; // 0% prevalence ~ 0 power visually (but graph starts at 5%)
        // Let's make points starting from 5% (i=1 in loop logic adjusted)
        const dataHigh = [
            {x: padding.left, y: height - padding.bottom - chartHeight * 0.2}, // 0% placeholder
            {x: padding.left + chartWidth * 0.2, y: height - padding.bottom - chartHeight * 0.6}, // 5%
            {x: padding.left + chartWidth * 0.4, y: height - padding.bottom - chartHeight * 0.8}, // 10%
            {x: padding.left + chartWidth * 0.6, y: height - padding.bottom - chartHeight * 0.9}, // 15%
            {x: padding.left + chartWidth * 0.8, y: height - padding.bottom - chartHeight * 0.95}, // 20%
            {x: padding.left + chartWidth * 1.0, y: height - padding.bottom - chartHeight * 0.98}  // 25%
        ];

// Data for Low Entropy (Poor separation)
        // Rises slowly
        const dataLow = [
            {x: padding.left, y: height - padding.bottom - chartHeight * 0.1},
            {x: padding.left + chartWidth * 0.2, y: height - padding.bottom - chartHeight * 0.25}, // 5%
            {x: padding.left + chartWidth * 0.4, y: height - padding.bottom - chartHeight * 0.4}, // 10%
            {x: padding.left + chartWidth * 0.6, y: height - padding.bottom - chartHeight * 0.55}, // 15%
            {x: padding.left + chartWidth * 0.8, y: height - padding.bottom - chartHeight * 0.65}, // 20%
            {x: padding.left + chartWidth * 1.0, y: height - padding.bottom - chartHeight * 0.72}  // 25%
        ];

drawCurve(dataHigh, '#3182ce', '높은 분류 품질');
        drawCurve(dataLow, '#e53e3e', '낮은 분류 품질');

// Draw points for clarity
        dataHigh.forEach(p => {
            if(p.x > padding.left) {
                ctx.beginPath();
                ctx.arc(p.x, p.y, 4, 0, Math.PI*2);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.strokeStyle = '#3182ce';
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        });

dataLow.forEach(p => {
             if(p.x > padding.left) {
                ctx.beginPath();
                ctx.arc(p.x, p.y, 4, 0, Math.PI*2);
                ctx.fillStyle = 'white';
                ctx.fill();
                ctx.strokeStyle = '#e53e3e';
                ctx.lineWidth = 2;
                ctx.stroke();
             }
        });

</script>

const width = rect.width;
        const height = rect.height;

// Function to draw normal distribution curve
        function drawNormalCurve(ctx, mean, stdDev, startX, endX, scaleY, offsetY, color) {
            ctx.beginPath();
            let first = true;
            for (let x = startX; x <= endX; x += 2) {
                const z = (x - mean) / stdDev;
                const y = Math.exp(-0.5 * z * z) * scaleY;
                if (first) {
                    ctx.moveTo(x, offsetY - y);
                    first = false;
                } else {
                    ctx.lineTo(x, offsetY - y);
                }
            }
            ctx.strokeStyle = color;
            ctx.lineWidth = 3;
            ctx.stroke();
            
            // Fill area
            ctx.lineTo(endX, offsetY);
            ctx.lineTo(startX, offsetY);
            ctx.fillStyle = color + '20'; // transparent
            ctx.fill();
        }

// Function to draw skewed distribution (Ceiling Effect)
        function drawCeilingCurve(ctx, startX, endX, scaleY, offsetY, color) {
            ctx.beginPath();
            ctx.moveTo(startX, offsetY);
            
            // Simulate skewed distribution pushing against the ceiling
            const range = endX - startX;
            for (let i = 0; i <= 100; i++) {
                const t = i / 100; // 0 to 1
                const x = startX + t * range;
                
                // Exponential growth to simulate clustering at the end
                let yVal = Math.pow(t, 3) * scaleY; 
                
                // Cap it abruptly to simulate ceiling
                if (t > 0.95) yVal = scaleY * 0.9 + (Math.random() * 10);
                
                ctx.lineTo(x, offsetY - yVal);
            }
            ctx.lineTo(endX, offsetY); // Drop to axis
            ctx.strokeStyle = color;
            ctx.lineWidth = 3;
            ctx.stroke();

ctx.lineTo(endX, offsetY);
            ctx.lineTo(startX, offsetY);
            ctx.fillStyle = color + '20';
            ctx.fill();
        }

const margin = 40;
        const chartWidth = width - 2 * margin;
        const chartHeight = (height - 60) / 2; // Two charts stacked
        
        // Top Chart: Ideal Distribution
        const topBaseY = chartHeight + 10;
        
        // Axis
        ctx.beginPath();
        ctx.moveTo(margin, topBaseY);
        ctx.lineTo(width - margin, topBaseY);
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();

// Label
        ctx.fillStyle = '#2d3748';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('이상적인 지표 (정규분포)', margin, topBaseY - chartHeight + 20);

drawNormalCurve(ctx, margin + chartWidth/2, chartWidth/6, margin, width - margin, chartHeight * 0.8, topBaseY, '#3182ce');

// Bottom Chart: Ceiling Effect
        const bottomBaseY = height - 30;
        
        // Axis
        ctx.beginPath();
        ctx.moveTo(margin, bottomBaseY);
        ctx.lineTo(width - margin, bottomBaseY);
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();

// Label
        ctx.fillStyle = '#2d3748';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('품질이 낮은 지표 (천장 효과)', margin, bottomBaseY - chartHeight + 20);

drawCeilingCurve(ctx, margin, width - margin, chartHeight * 0.8, bottomBaseY, '#e53e3e');

// Annotations
        ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('낮음', margin + 20, bottomBaseY + 15);
        ctx.fillText('높음', width - margin - 20, bottomBaseY + 15);
        
        ctx.fillText('충분한 변별력', margin + chartWidth/2, topBaseY + 15);

</script>

const width = rect.width;
        const height = rect.height;

// Configuration
        const centerX = width / 2;
        const centerY = height / 2;
        const boxWidth = 100;
        const boxHeight = 60;
        const radius = 55;

// Function to draw text inside shapes
        function drawText(text, x, y, color = '#2d3748', font = 'bold 13px Noto Sans KR') {
            ctx.fillStyle = color;
            ctx.font = font;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            const lines = text.split('\n');
            const lineHeight = 16;
            lines.forEach((line, i) => {
                ctx.fillText(line, x, y - ((lines.length - 1) * lineHeight / 2) + (i * lineHeight));
            });
        }

// Function to draw arrow
        function drawArrow(fromX, fromY, toX, toY, color = '#718096') {
            const headlen = 10;
            const angle = Math.atan2(toY - fromY, toX - fromX);
            
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.stroke();

// 1. Central Circle (Latent Profile)
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.fillStyle = '#ebf8ff';
        ctx.fill();
        ctx.strokeStyle = '#3182ce';
        ctx.lineWidth = 3;
        ctx.stroke();
        drawText("잠재\n프로파일", centerX, centerY, '#2c5282', 'bold 15px Noto Sans KR');

// 2. Left Box (Predictors)
        const leftX = centerX - 180;
        const leftY = centerY;
        ctx.fillStyle = '#f0fff4';
        ctx.fillRect(leftX - boxWidth/2, leftY - boxHeight/2, boxWidth, boxHeight);
        ctx.strokeStyle = '#38a169';
        ctx.lineWidth = 2;
        ctx.strokeRect(leftX - boxWidth/2, leftY - boxHeight/2, boxWidth, boxHeight);
        drawText("예측 변수\n(Antecedents)", leftX, leftY, '#276749');

// 3. Right Box (Outcomes)
        const rightX = centerX + 180;
        const rightY = centerY;
        ctx.fillStyle = '#fff5f5';
        ctx.fillRect(rightX - boxWidth/2, rightY - boxHeight/2, boxWidth, boxHeight);
        ctx.strokeStyle = '#e53e3e';
        ctx.lineWidth = 2;
        ctx.strokeRect(rightX - boxWidth/2, rightY - boxHeight/2, boxWidth, boxHeight);
        drawText("결과 변수\n(Outcomes)", rightX, rightY, '#9b2c2c');

// 4. Bottom Box (Covariates/Constructs)
        const bottomX = centerX;
        const bottomY = centerY + 120;
        ctx.fillStyle = '#fffaf0';
        ctx.fillRect(bottomX - boxWidth/2, bottomY - boxHeight/2, boxWidth, boxHeight);
        ctx.strokeStyle = '#dd6b20';
        ctx.lineWidth = 2;
        ctx.strokeRect(bottomX - boxWidth/2, bottomY - boxHeight/2, boxWidth, boxHeight);
        drawText("관련/비관련\n구성개념", bottomX, bottomY, '#9c4221');

// Arrows
        // Left -> Center
        drawArrow(leftX + boxWidth/2 + 5, centerY, centerX - radius - 5, centerY, '#38a169');
        // Center -> Right
        drawArrow(centerX + radius + 5, centerY, rightX - boxWidth/2 - 5, centerY, '#e53e3e');
        // Center <-> Bottom (Double arrow or line for correlation)
        ctx.beginPath();
        ctx.moveTo(centerX, centerY + radius + 5);
        ctx.lineTo(centerX, bottomY - boxHeight/2 - 5);
        ctx.strokeStyle = '#dd6b20';
        ctx.setLineDash([5, 3]);
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.setLineDash([]);

// Validation Labels
        drawText("예측 타당도", (leftX + centerX)/2, centerY - 15, '#38a169', '600 11px Noto Sans KR');
        drawText("기준 관련 타당도", (rightX + centerX)/2, centerY - 15, '#e53e3e', '600 11px Noto Sans KR');
        drawText("수렴/변별 타당도", centerX + 60, (centerY + bottomY)/2, '#dd6b20', '600 11px Noto Sans KR');

</script>

const width = rect.width;
        const height = rect.height;

// Configuration
        const chartMargin = 40;
        const chartWidth = (width - chartMargin * 3) / 2;
        const chartHeight = 200;
        const startY = 60;

// Function to draw a chart
        function drawChart(x, y, w, h, title, isReplicated) {
            // Draw Axes
            ctx.beginPath();
            ctx.moveTo(x, y + h);
            ctx.lineTo(x + w, y + h); // X axis
            ctx.moveTo(x, y + h);
            ctx.lineTo(x, y); // Y axis
            ctx.strokeStyle = '#cbd5e0';
            ctx.lineWidth = 2;
            ctx.stroke();

// Title
            ctx.fillStyle = '#4a5568';
            ctx.font = 'bold 16px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.fillText(title, x + w / 2, y - 15);

// Draw Profiles
            const steps = 4;
            const stepWidth = w / (steps - 1);
            
            // Profile 1: High
            ctx.beginPath();
            ctx.moveTo(x, y + h * 0.2);
            ctx.lineTo(x + stepWidth, y + h * 0.3);
            ctx.lineTo(x + stepWidth * 2, y + h * 0.25);
            ctx.lineTo(x + stepWidth * 3, y + h * 0.15);
            ctx.strokeStyle = '#3182ce';
            ctx.lineWidth = 3;
            ctx.stroke();

// Profile 2: Medium (Variable)
            ctx.beginPath();
            ctx.moveTo(x, y + h * 0.6);
            ctx.lineTo(x + stepWidth, y + h * 0.4);
            ctx.lineTo(x + stepWidth * 2, y + h * 0.7);
            ctx.lineTo(x + stepWidth * 3, y + h * 0.5);
            ctx.strokeStyle = '#e53e3e'; // Red
            ctx.lineWidth = 3;
            ctx.stroke();
            
            // Profile 3: Low
            ctx.beginPath();
            ctx.moveTo(x, y + h * 0.85);
            ctx.lineTo(x + stepWidth, y + h * 0.9);
            ctx.lineTo(x + stepWidth * 2, y + h * 0.8);
            ctx.lineTo(x + stepWidth * 3, y + h * 0.95);
            ctx.strokeStyle = '#38a169'; // Green
            ctx.lineWidth = 3;
            ctx.stroke();

// If replicated, add check mark
            if (isReplicated) {
               // Add noise to simulate real replication (slight difference)
               // (Visualized by drawing the same lines since it's "replication success" conceptual)
            }
        }

// Draw Sample A Chart
        drawChart(chartMargin, startY, chartWidth, chartHeight, "표본 A (발견)", false);

// Draw Sample B Chart
        // Drawing slightly different lines to look realistic but structurally same
        const x2 = chartMargin * 2 + chartWidth;
        const y2 = startY;
        
        // Axes
        ctx.beginPath();
        ctx.moveTo(x2, y2 + chartHeight);
        ctx.lineTo(x2 + chartWidth, y2 + chartHeight);
        ctx.moveTo(x2, y2 + chartHeight);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();

ctx.fillStyle = '#4a5568';
        ctx.font = 'bold 16px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText("표본 B (재현)", x2 + chartWidth / 2, y2 - 15);

// Profile 1 Replicated (Slight shift)
        const stepW = chartWidth / 3;
        ctx.beginPath();
        ctx.moveTo(x2, y2 + chartHeight * 0.22);
        ctx.lineTo(x2 + stepW, y2 + chartHeight * 0.28);
        ctx.lineTo(x2 + stepW * 2, y2 + chartHeight * 0.23);
        ctx.lineTo(x2 + stepW * 3, y2 + chartHeight * 0.18);
        ctx.strokeStyle = '#3182ce';
        ctx.lineWidth = 3;
        ctx.stroke();

// Profile 2 Replicated
        ctx.beginPath();
        ctx.moveTo(x2, y2 + chartHeight * 0.62);
        ctx.lineTo(x2 + stepW, y2 + chartHeight * 0.42);
        ctx.lineTo(x2 + stepW * 2, y2 + chartHeight * 0.68);
        ctx.lineTo(x2 + stepW * 3, y2 + chartHeight * 0.52);
        ctx.strokeStyle = '#e53e3e';
        ctx.lineWidth = 3;
        ctx.stroke();

// Profile 3 Replicated
        ctx.beginPath();
        ctx.moveTo(x2, y2 + chartHeight * 0.88);
        ctx.lineTo(x2 + stepW, y2 + chartHeight * 0.88);
        ctx.lineTo(x2 + stepW * 2, y2 + chartHeight * 0.82);
        ctx.lineTo(x2 + stepW * 3, y2 + chartHeight * 0.92);
        ctx.strokeStyle = '#38a169';
        ctx.lineWidth = 3;
        ctx.stroke();

// Arrow between charts
        const arrowY = startY + chartHeight / 2;
        const arrowXStart = chartMargin + chartWidth + 10;
        const arrowXEnd = chartMargin * 2 + chartWidth - 10;
        
        ctx.beginPath();
        ctx.moveTo(arrowXStart, arrowY);
        ctx.lineTo(arrowXEnd, arrowY);
        ctx.lineTo(arrowXEnd - 10, arrowY - 5);
        ctx.moveTo(arrowXEnd, arrowY);
        ctx.lineTo(arrowXEnd - 10, arrowY + 5);
        ctx.strokeStyle = '#718096';
        ctx.lineWidth = 2;
        ctx.stroke();

// Text "구조적 동일성 확인"
        ctx.fillStyle = '#2d3748';
        ctx.font = 'bold 12px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText("구조적 동일성 확인", (arrowXStart + arrowXEnd) / 2, arrowY - 15);
        
        // Success Icon (Simulated)
        ctx.font = '24px "Font Awesome 5 Free"';
        ctx.fillStyle = '#38a169';
        ctx.fillText('\uf00c', (arrowXStart + arrowXEnd) / 2, arrowY + 25); // Checkmark

</script>

const w = rect.width;
        const h = rect.height;

// Drawing Helper Functions
        function drawArrow(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = '#cbd5e0';
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // Arrowhead
            const angle = Math.atan2(y2-y1, x2-x1);
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - 10 * Math.cos(angle - Math.PI/6), y2 - 10 * Math.sin(angle - Math.PI/6));
            ctx.lineTo(x2 - 10 * Math.cos(angle + Math.PI/6), y2 - 10 * Math.sin(angle + Math.PI/6));
            ctx.fillStyle = '#cbd5e0';
            ctx.fill();
        }

function drawBox(x, y, width, height, title, subtitle, color, iconChar) {
            // Shadow
            ctx.fillStyle = 'rgba(0,0,0,0.05)';
            ctx.fillRect(x+4, y+4, width, height);
            
            // Box
            ctx.fillStyle = 'white';
            ctx.fillRect(x, y, width, height);
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.strokeRect(x, y, width, height);
            
            // Icon Background
            ctx.fillStyle = color + '20'; // transparent
            ctx.beginPath();
            ctx.arc(x + 40, y + height/2, 25, 0, Math.PI * 2);
            ctx.fill();
            
            // Icon (FontAwesome character code simplified simulation)
            ctx.fillStyle = color;
            ctx.font = '900 24px "Font Awesome 6 Free"';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(iconChar, x + 40, y + height/2);
            
            // Text
            ctx.textAlign = 'left';
            ctx.fillStyle = '#2d3748';
            ctx.font = 'bold 16px Noto Sans KR';
            ctx.fillText(title, x + 80, y + height/2 - 10);
            
            ctx.fillStyle = '#718096';
            ctx.font = '13px Noto Sans KR';
            ctx.fillText(subtitle, x + 80, y + height/2 + 10);
        }

const centerX = w / 2;
        const startY = 50;
        const gapY = 90;
        const boxW = 280;
        const boxH = 70;
        const boxX = centerX - boxW / 2;

// 1. Stratification
        drawBox(boxX, startY, boxW, boxH, "층화 (Stratification)", "동질적 하위 그룹 분할", "#3182ce", "\uf009");
        
        drawArrow(centerX, startY + boxH, centerX, startY + gapY);

// 2. Clustering
        drawBox(boxX, startY + gapY, boxW, boxH, "집락 (Clustering)", "단위 그룹 무작위 추출", "#805ad5", "\uf1b3");
        
        drawArrow(centerX, startY + gapY + boxH, centerX, startY + gapY * 2);

// 3. Weighting
        drawBox(boxX, startY + gapY * 2, boxW, boxH, "가중치 (Weighting)", "선택 확률 보정 & 편향 조정", "#38a169", "\uf24e"); // Balance scale icon

// Visualization of Weighting Effect (Right side or bottom)
        // Let's draw a simple "Before vs After" weighting visual at the bottom
        const visY = startY + gapY * 3 + 10;
        
        ctx.fillStyle = '#4a5568';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText("가중치 적용 효과", centerX, visY);
        
        // Unweighted
        const circleBaseY = visY + 40;
        ctx.fillStyle = '#e53e3e';
        ctx.beginPath();
        ctx.arc(centerX - 60, circleBaseY, 10, 0, Math.PI*2); // Small circle
        ctx.fill();
        ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText("과소대표됨", centerX - 60, circleBaseY + 25);
        
        // Arrow
        ctx.beginPath();
        ctx.moveTo(centerX - 20, circleBaseY);
        ctx.lineTo(centerX + 20, circleBaseY);
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();
        // Arrowhead
        ctx.lineTo(centerX + 15, circleBaseY - 5);
        ctx.moveTo(centerX + 20, circleBaseY);
        ctx.lineTo(centerX + 15, circleBaseY + 5);
        ctx.stroke();

// Weighted
        ctx.fillStyle = '#e53e3e';
        ctx.beginPath();
        ctx.arc(centerX + 60, circleBaseY, 18, 0, Math.PI*2); // Larger circle
        ctx.fill();
        ctx.fillStyle = '#718096';
        ctx.fillText("보정됨", centerX + 60, circleBaseY + 25);

</script>

const centerX = rect.width / 2;
        const centerY = rect.height / 2;

// Draw 'Open Science' concept - Unlocked Padlock with Data Flow
        
        // Draw Document Stack background
        function drawDoc(x, y, w, h, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.roundRect(x, y, w, h, 8);
            ctx.fill();
            // Lines representing text
            ctx.fillStyle = "rgba(255,255,255,0.6)";
            for(let i=0; i<4; i++) {
                ctx.fillRect(x + 20, y + 30 + (i*20), w - 40, 10);
            }
        }

// Draw stack of papers
        ctx.shadowColor = "rgba(0,0,0,0.1)";
        ctx.shadowBlur = 10;
        ctx.shadowOffsetY = 5;
        
        drawDoc(centerX - 90, centerY - 80, 140, 180, '#e2e8f0');
        drawDoc(centerX - 80, centerY - 70, 140, 180, '#cbd5e0');
        drawDoc(centerX - 70, centerY - 60, 140, 180, '#ffffff'); // Top document

// Draw Magnifying Glass (Search/Inspect)
        ctx.shadowBlur = 0;
        ctx.shadowOffsetY = 0;
        
        const glassX = centerX + 40;
        const glassY = centerY + 20;
        const glassR = 50;

// Handle
        ctx.beginPath();
        ctx.moveTo(glassX + glassR * 0.7, glassY + glassR * 0.7);
        ctx.lineTo(glassX + glassR * 0.7 + 60, glassY + glassR * 0.7 + 60);
        ctx.lineWidth = 15;
        ctx.strokeStyle = '#2c3e50';
        ctx.lineCap = 'round';
        ctx.stroke();

// Glass Circle Frame
        ctx.beginPath();
        ctx.arc(glassX, glassY, glassR, 0, Math.PI * 2);
        ctx.lineWidth = 8;
        ctx.strokeStyle = '#3182ce';
        ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
        ctx.fill();
        ctx.stroke();

// Glass Reflection
        ctx.beginPath();
        ctx.arc(glassX - 20, glassY - 20, 10, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(255, 255, 255, 0.6)';
        ctx.fill();

// Checkmark inside the document (seen through glass)
        ctx.beginPath();
        ctx.moveTo(centerX - 30, centerY + 10);
        ctx.lineTo(centerX - 10, centerY + 30);
        ctx.lineTo(centerX + 30, centerY - 20);
        ctx.lineWidth = 6;
        ctx.strokeStyle = '#48bb78'; // Green check
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.stroke();

// Decorative elements: "Open" lock icon small
        const lockX = centerX + 80;
        const lockY = centerY - 80;
        
        // Body
        ctx.fillStyle = '#ed8936';
        ctx.fillRect(lockX, lockY, 30, 24);
        
        // Shackle (Open)
        ctx.beginPath();
        ctx.arc(lockX + 15, lockY, 10, Math.PI, 0);
        ctx.lineTo(lockX + 25, lockY - 5); // Lifted up
        ctx.lineWidth = 4;
        ctx.strokeStyle = '#ed8936';
        ctx.stroke();

</script>

const width = rect.width;
        const height = rect.height;

// Function to draw rounded rectangle
        function drawBox(x, y, w, h, color, text, subtext) {
            ctx.beginPath();
            ctx.roundRect(x, y, w, h, 8);
            ctx.fillStyle = color;
            ctx.fill();
            ctx.strokeStyle = '#2d3748';
            ctx.lineWidth = 1.5;
            ctx.stroke();

ctx.fillStyle = '#fff';
            ctx.font = 'bold 16px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            if (subtext) {
                ctx.fillText(text, x + w/2, y + h/2 - 10);
                ctx.font = '13px Noto Sans KR';
                ctx.fillText(subtext, x + w/2, y + h/2 + 12);
            } else {
                ctx.fillText(text, x + w/2, y + h/2);
            }
        }

// Function to draw arrow
        function drawArrow(x1, y1, x2, y2, label) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.strokeStyle = '#718096';
            ctx.lineWidth = 2;
            ctx.stroke();

// Arrowhead
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.beginPath();
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - 10 * Math.cos(angle - Math.PI / 6), y2 - 10 * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(x2 - 10 * Math.cos(angle + Math.PI / 6), y2 - 10 * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fillStyle = '#718096';
            ctx.fill();

// Label
            if (label) {
                ctx.fillStyle = '#4a5568';
                ctx.font = 'bold 12px Noto Sans KR';
                ctx.textAlign = 'center';
                const midX = (x1 + x2) / 2;
                const midY = (y1 + y2) / 2;
                ctx.fillText(label, midX + 15, midY); // Offset slightly
            }
        }

// --- Drawing Flowchart ---

const startY = 30;
        const boxWidth = 160;
        const boxHeight = 60;
        const centerX = width / 2;

// 1. Data Check Node
        drawBox(centerX - boxWidth/2, startY, boxWidth, boxHeight, '#4a5568', '데이터 분포 확인', '(다변량 정규성)');

// 2. Decision Path
        const mlX = centerX - 120;
        const mlrX = centerX + 120;
        const level2Y = 160;

// Arrows from Data Check
        drawArrow(centerX, startY + boxHeight, mlX, level2Y, '');
        drawArrow(centerX, startY + boxHeight, mlrX, level2Y, '');
        
        // Text labels for paths
        ctx.fillStyle = '#2d3748';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.textAlign = 'right';
        ctx.fillText('Yes', centerX - 40, 120);
        ctx.textAlign = 'left';
        ctx.fillText('No (비정규/이상치)', centerX + 40, 120);

// 3. Estimator Nodes
        drawBox(mlX - boxWidth/2, level2Y, boxWidth, boxHeight, '#3182ce', 'ML', '최대우도법');
        drawBox(mlrX - boxWidth/2, level2Y, boxWidth, boxHeight, '#e53e3e', 'MLR', '강건 최대우도법');

// 4. Outcome Nodes
        const level3Y = 270;
        drawArrow(mlX, level2Y + boxHeight, mlX, level3Y, '');
        drawArrow(mlrX, level2Y + boxHeight, mlrX, level3Y, '');

drawBox(mlX - boxWidth/2, level3Y, boxWidth, boxHeight*0.8, '#ebf8ff', '표준 오차', '기본값 사용');
        // Change text color for light bg
        ctx.fillStyle = '#2c5282';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('표준 오차', mlX, level3Y + boxHeight*0.4 - 8);
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('기본값 사용', mlX, level3Y + boxHeight*0.4 + 10);

drawBox(mlrX - boxWidth/2, level3Y, boxWidth, boxHeight*0.8, '#fff5f5', 'Sandwich Estimator', '강건 표준오차');
        // Change text color for light bg
        ctx.fillStyle = '#9b2c2c';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.textAlign = 'center';
        ctx.fillText('Huber-White', mlrX, level3Y + boxHeight*0.4 - 8);
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('강건 표준오차', mlrX, level3Y + boxHeight*0.4 + 10);

</script>

const width = rect.width;
        const height = rect.height;
        const padding = 40;
        const graphWidth = width - padding * 2;
        const graphHeight = height - padding * 2;

// Draw Axes
        ctx.beginPath();
        ctx.moveTo(padding, height - padding);
        ctx.lineTo(width - padding, height - padding); // X axis
        ctx.moveTo(padding, height - padding);
        ctx.lineTo(padding, padding); // Y axis
        ctx.strokeStyle = '#cbd5e0';
        ctx.lineWidth = 2;
        ctx.stroke();

// Labels
        ctx.fillStyle = '#718096';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('변수 X', width - padding - 20, height - padding + 20);
        ctx.fillText('변수 Y', padding, padding - 10);

// --- Visualization Logic: Main Cluster vs Outliers ---

// 1. Draw Main Cluster (Normal data)
        const centerX = width * 0.4;
        const centerY = height * 0.6;
        
        // Draw Confidence Ellipses (Mahalanobis Distance zones)
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, 80, 50, -Math.PI / 6, 0, 2 * Math.PI);
        ctx.fillStyle = '#ebf8ff'; // Light Blue bg
        ctx.fill();
        ctx.strokeStyle = '#90cdf4';
        ctx.setLineDash([5, 5]);
        ctx.stroke();
        ctx.setLineDash([]); // Reset dash

// Draw points for main cluster
        ctx.fillStyle = '#3182ce'; // Blue
        for (let i = 0; i < 60; i++) {
            const angle = Math.random() * 2 * Math.PI;
            const r = Math.sqrt(Math.random()); // Uniform distribution in circle
            // Squish and rotate manually for ellipse effect
            const rawX = r * 80 * Math.cos(angle);
            const rawY = r * 50 * Math.sin(angle);
            
            // Rotate -30 degrees
            const rot = -Math.PI / 6;
            const x = centerX + rawX * Math.cos(rot) - rawY * Math.sin(rot) + (Math.random() - 0.5) * 10;
            const y = centerY + rawX * Math.sin(rot) + rawY * Math.cos(rot) + (Math.random() - 0.5) * 10;

ctx.beginPath();
            ctx.arc(x, y, 3, 0, 2 * Math.PI);
            ctx.fill();
        }

// 2. Draw Outliers (The problem)
        const outlierX = width * 0.8;
        const outlierY = height * 0.25;
        
        ctx.fillStyle = '#e53e3e'; // Red
        // Draw a small cluster of outliers or single extreme points
        const outliers = [
            {x: outlierX, y: outlierY},
            {x: outlierX + 15, y: outlierY - 10},
            {x: outlierX - 10, y: outlierY + 5}
        ];

outliers.forEach(pt => {
            ctx.beginPath();
            ctx.arc(pt.x, pt.y, 4, 0, 2 * Math.PI);
            ctx.fill();
            // Add a ring
            ctx.beginPath();
            ctx.arc(pt.x, pt.y, 8, 0, 2 * Math.PI);
            ctx.strokeStyle = '#feb2b2';
            ctx.lineWidth = 1;
            ctx.stroke();
        });

// 3. Annotations
        // Label for Normal Data
        ctx.fillStyle = '#3182ce';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('정상 데이터 분포', centerX - 50, centerY + 80);

// Label for Outliers
        ctx.fillStyle = '#e53e3e';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText('다변량 이상치', outlierX - 40, outlierY - 30);
        ctx.fillText('(Spurious Profile 원인)', outlierX - 60, outlierY - 12);

// Arrow from Outliers text to points
        ctx.beginPath();
        ctx.moveTo(outlierX, outlierY - 10);
        ctx.lineTo(outlierX, outlierY - 5);
        ctx.strokeStyle = '#e53e3e';
        ctx.lineWidth = 1;
        ctx.stroke();

// 4. Skewed Distribution Curve (Overlay on top right or side)
        // Let's draw a small distribution curve on the top right to symbolize skewness check
        const miniGraphX = width - 150;
        const miniGraphY = height - 100;
        const miniWidth = 120;
        const miniHeight = 60;

// Mini axes
        ctx.beginPath();
        ctx.moveTo(miniGraphX, miniGraphY);
        ctx.lineTo(miniGraphX + miniWidth, miniGraphY);
        ctx.strokeStyle = '#718096';
        ctx.lineWidth = 1;
        ctx.stroke();

// Skewed curve
        ctx.beginPath();
        ctx.moveTo(miniGraphX, miniGraphY);
        // Peak early (skewed right)
        ctx.bezierCurveTo(
            miniGraphX + 10, miniGraphY - miniHeight * 1.5, // Control pt 1 (sharp rise)
            miniGraphX + 30, miniGraphY - miniHeight,       // Control pt 2
            miniGraphX + miniWidth, miniGraphY              // End (long tail)
        );
        ctx.strokeStyle = '#e53e3e';
        ctx.lineWidth = 2;
        ctx.stroke();
        
        ctx.fillStyle = '#e53e3e';
        ctx.font = '12px Noto Sans KR';
        ctx.fillText('비정규 분포(왜도)', miniGraphX + 20, miniGraphY + 20);

</script>

const w = rect.width;
        const h = rect.height;

// Configuration
        const rows = 5;
        const cols = 6;
        const cellSize = 30;
        const gap = 6;
        const startX = (w - (cols * (cellSize + gap))) / 2;
        
        // Data pattern (1=data, 0=missing)
        const dataPattern = [
            [1, 1, 1, 1, 1, 1],
            [1, 1, 0, 1, 1, 1], // Row with missing
            [1, 1, 1, 1, 1, 1],
            [1, 0, 1, 0, 1, 1], // Row with missing
            [1, 1, 1, 1, 1, 1]
        ];

function drawGrid(yPos, label, isListwise) {
            // Label
            ctx.fillStyle = '#2d3748';
            ctx.font = 'bold 16px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.fillText(label, w/2, yPos - 15);

// Draw cells
            for(let r=0; r<rows; r++) {
                let isRowDiscarded = isListwise && dataPattern[r].includes(0);
                
                for(let c=0; c<cols; c++) {
                    const x = startX + c * (cellSize + gap);
                    const y = yPos + r * (cellSize + gap);
                    const hasData = dataPattern[r][c] === 1;

ctx.beginPath();
                    ctx.roundRect(x, y, cellSize, cellSize, 4);

if (isRowDiscarded) {
                        // Discarded row in Listwise
                        ctx.fillStyle = '#fed7d7'; // Light red background
                        ctx.fill();
                        ctx.strokeStyle = '#feb2b2';
                        ctx.stroke();
                        
                        // Small X visual for discarded data
                        if (hasData) {
                             ctx.fillStyle = '#e53e3e';
                             ctx.globalAlpha = 0.3;
                             ctx.fill();
                             ctx.globalAlpha = 1.0;
                        }
                    } else {
                        // Kept row
                        if (hasData) {
                            ctx.fillStyle = '#bee3f8'; // Blue
                            ctx.fill();
                            ctx.strokeStyle = '#90cdf4';
                            ctx.stroke();
                        } else {
                            // Missing cell handled by FIML
                            ctx.fillStyle = '#edf2f7'; // Grey
                            ctx.fill();
                            ctx.strokeStyle = '#cbd5e0';
                            ctx.setLineDash([2, 2]);
                            ctx.stroke();
                            ctx.setLineDash([]);
                            
                            // Question mark for missing
                            ctx.fillStyle = '#a0aec0';
                            ctx.font = 'bold 14px sans-serif';
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'middle';
                            ctx.fillText('?', x + cellSize/2, y + cellSize/2);
                        }
                    }
                }
                
                // Row Status Indicator
                const statusX = startX + cols * (cellSize + gap) + 15;
                const statusY = yPos + r * (cellSize + gap) + cellSize/2;
                
                ctx.font = '12px FontAwesome';
                ctx.textBaseline = 'middle';
                ctx.textAlign = 'left';
                
                if (isRowDiscarded) {
                    ctx.fillStyle = '#e53e3e';
                    ctx.fillText('\uf00d', statusX, statusY); // X icon
                    ctx.font = '12px Noto Sans KR';
                    ctx.fillText('제외', statusX + 15, statusY);
                } else {
                    ctx.fillStyle = '#38a169';
                    ctx.fillText('\uf00c', statusX, statusY); // Check icon
                    ctx.font = '12px Noto Sans KR';
                    if(!isListwise && dataPattern[r].includes(0)) {
                         ctx.fillStyle = '#3182ce'; // Blue for FIML handling
                         ctx.fillText('추정', statusX + 15, statusY);
                    } else {
                        ctx.fillText('포함', statusX + 15, statusY);
                    }
                }
            }
        }

const topY = 60;
        const bottomY = 240; // Reduced spacing to fit better

drawGrid(topY, "Listwise Deletion (전체 행 삭제)", true);
        
        // Arrow down
        ctx.fillStyle = '#cbd5e0';
        ctx.textAlign = 'center';
        ctx.font = '20px FontAwesome';
        ctx.fillText('\uf063', w/2, (topY + rows*(cellSize+gap) + bottomY)/2 - 10);
        
        drawGrid(bottomY, "FIML (가용 정보 최대 활용)", false);

</script>

.key-message-box {
            background-color: #fff5f5;
            border-left: 6px solid #e53e3e;
            padding: 15px 25px;
            border-radius: 0 6px 6px 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .key-message-label {
            color: #c53030;
            font-weight: 800;
            font-size: 16px;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .key-message-text {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
        }
        .page-number {
            position: absolute;
            bottom: 25px;
            right: 35px;
            color: #cbd5e0;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div class="top-section">
<span class="section-tag">통계적 실행 가이드</span>
<h1 class="main-title">공분산 구조와 제약 선택</h1>
</div>
<div class="main-content">

<div class="comparison-col">
<div class="col-header header-restricted">
<i class="fas fa-lock"></i> 등분산 / 대각행렬 (Restricted)
            </div>
<div class="col-body">
<div class="chart-container">
<canvas id="restrictedChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#4a5568"></i>
<p><strong>등분산(Equal Variance):</strong> 모든 집단이 동일한 분산을 가짐 (원의 크기가 같음)</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#4a5568"></i>
<p><strong>국지적 독립성:</strong> 집단 내 지표 간 상관을 0으로 가정 (축에 평행한 분포)</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#4a5568"></i>
<p><strong>장점:</strong> 모형이 간명하고(Parsimony), 추정이 안정적이며 수렴이 잘 됨</p>
</li>
</ul>
</div>
</div>

<div class="comparison-col">
<div class="col-header header-free">
<i class="fas fa-lock-open"></i> 이분산 / 자유행렬 (Freely Estimated)
            </div>
<div class="col-body">
<div class="chart-container">
<canvas id="freeChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#e53e3e"></i>
<p><strong>이분산(Varying Variance):</strong> 집단별로 다른 분산 허용 (원의 크기가 다름)</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#e53e3e"></i>
<p><strong>상관 허용:</strong> 지표 간 상관 허용 시 타원형 분포 형성 (기울기 존재)</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#e53e3e"></i>
<p><strong>단점:</strong> 추정 파라미터가 급증하여 과적합(Overfitting) 및 수렴 실패 위험</p>
</li>
</ul>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-label">
<i class="fas fa-balance-scale mr-2"></i> 핵심 정리
        </div>
<p class="key-message-text">
            제약은 <strong>단순성(Parsimony)</strong>과 <strong>현실성(Fit)</strong>의 균형 문제입니다.<br/>
            간명한 모형에서 시작해 이론적 필요와 적합도 개선에 따라 <strong>단계적으로 제약을 완화</strong>해야 합니다.
        </p>
</div>
</div>
<div class="page-number">29</div>
</div>
<script>
        // Data Generation Helper
        function generateData(count, centerX, centerY, scaleX, scaleY, rotation = 0) {
            const data = [];
            for (let i = 0; i < count; i++) {
                // Random point in unit circle
                const r = Math.sqrt(Math.random());
                const theta = Math.random() * 2 * Math.PI;
                let x = r * Math.cos(theta);
                let y = r * Math.sin(theta);

// Scale
                x *= scaleX;
                y *= scaleY;

// Rotate
                const cosRot = Math.cos(rotation);
                const sinRot = Math.sin(rotation);
                const xRot = x * cosRot - y * sinRot;
                const yRot = x * sinRot + y * cosRot;

// Translate
                data.push({ x: xRot + centerX, y: yRot + centerY });
            }
            return data;
        }

const commonOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: { enabled: false }
            },
            scales: {
                x: { 
                    type: 'linear', 
                    position: 'bottom',
                    min: 0, max: 20,
                    grid: { display: false },
                    ticks: { display: false }
                },
                y: { 
                    min: 0, max: 20,
                    grid: { display: false },
                    ticks: { display: false }
                }
            },
            elements: {
                point: { radius: 3 }
            }
        };

// Restricted Chart (Equal Variance, No Correlation)
        const ctxRestricted = document.getElementById('restrictedChart').getContext('2d');
        new Chart(ctxRestricted, {
            type: 'scatter',
            data: {
                datasets: [
                    {
                        label: 'Group A',
                        data: generateData(50, 6, 14, 2.5, 2.5), // Circle
                        backgroundColor: 'rgba(74, 85, 104, 0.7)'
                    },
                    {
                        label: 'Group B',
                        data: generateData(50, 14, 14, 2.5, 2.5), // Circle
                        backgroundColor: 'rgba(113, 128, 150, 0.7)'
                    },
                    {
                        label: 'Group C',
                        data: generateData(50, 10, 6, 2.5, 2.5), // Circle
                        backgroundColor: 'rgba(160, 174, 192, 0.7)'
                    }
                ]
            },
            options: commonOptions
        });

// Free Chart (Varying Variance, With Correlation)
        const ctxFree = document.getElementById('freeChart').getContext('2d');
        new Chart(ctxFree, {
            type: 'scatter',
            data: {
                datasets: [
                    {
                        label: 'Group A (Small, Correlated)',
                        data: generateData(50, 6, 14, 1.5, 3.5, -0.5), // Ellipse
                        backgroundColor: 'rgba(229, 62, 62, 0.7)'
                    },
                    {
                        label: 'Group B (Large, Correlated)',
                        data: generateData(70, 14, 12, 4, 2, 0.5), // Ellipse
                        backgroundColor: 'rgba(245, 101, 101, 0.7)'
                    },
                    {
                        label: 'Group C (Round)',
                        data: generateData(50, 8, 5, 2, 2), // Circle
                        backgroundColor: 'rgba(252, 129, 129, 0.7)'
                    }
                ]
            },
            options: commonOptions
        });
    </script>

const width = rect.width;
        const height = rect.height;

// Colors
        const primaryColor = '#3182ce';
        const secondaryColor = '#2c3e50';
        const accentColor = '#e53e3e';
        const successColor = '#38a169';

// Helper function to draw rounded rect
        function drawRoundedRect(x, y, w, h, r, color, fill = true) {
            ctx.beginPath();
            ctx.moveTo(x + r, y);
            ctx.lineTo(x + w - r, y);
            ctx.quadraticCurveTo(x + w, y, x + w, y + r);
            ctx.lineTo(x + w, y + h - r);
            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
            ctx.lineTo(x + r, y + h);
            ctx.quadraticCurveTo(x, y + h, x, y + h - r);
            ctx.lineTo(x, y + r);
            ctx.quadraticCurveTo(x, y, x + r, y);
            ctx.closePath();
            if (fill) {
                ctx.fillStyle = color;
                ctx.fill();
            } else {
                ctx.strokeStyle = color;
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        }

// Helper function to draw text
        function drawText(text, x, y, size, weight, color, align = 'center') {
            ctx.fillStyle = color;
            ctx.font = `${weight} ${size}px 'Noto Sans KR'`;
            ctx.textAlign = align;
            ctx.fillText(text, x, y);
        }

// Helper function to draw arrow
        function drawArrow(fromX, fromY, toX, toY, color) {
            const headlen = 10;
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            
            ctx.strokeStyle = color;
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.stroke();
            
            ctx.beginPath();
            ctx.moveTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.fillStyle = color;
            ctx.fill();
        }

// Draw Flowchart
        const boxWidth = 140;
        const boxHeight = 60;
        const centerX = width / 2;
        const startY = 40;
        const gapY = 90;

// Step 1: Problem (Top)
        drawRoundedRect(centerX - boxWidth/2, startY, boxWidth, boxHeight, 10, '#fff5f5', true);
        drawRoundedRect(centerX - boxWidth/2, startY, boxWidth, boxHeight, 10, accentColor, false);
        drawText('수렴 실패', centerX, startY + 25, 16, '700', accentColor);
        drawText('(비정규성/오류)', centerX, startY + 45, 12, '500', accentColor);

// Arrows to solutions
        const solY = startY + gapY + 40;
        const leftX = centerX - 120;
        const rightX = centerX + 120;

drawArrow(centerX, startY + boxHeight, centerX, solY - boxHeight/2 - 5, '#cbd5e0');
        drawArrow(centerX, startY + boxHeight, leftX + boxWidth/2, solY - boxHeight/2 - 5, '#cbd5e0');
        drawArrow(centerX, startY + boxHeight, rightX - boxWidth/2, solY - boxHeight/2 - 5, '#cbd5e0');

// Solution 1: Standardization (Left)
        drawRoundedRect(leftX - boxWidth/2, solY - boxHeight/2, boxWidth, boxHeight, 10, '#ebf8ff', true);
        drawRoundedRect(leftX - boxWidth/2, solY - boxHeight/2, boxWidth, boxHeight, 10, primaryColor, false);
        drawText('간명화', leftX, solY - 5, 15, '700', primaryColor);
        drawText('표준화 / 변수축소', leftX, solY + 15, 12, '500', primaryColor);

// Solution 2: Iterations (Center)
        drawRoundedRect(centerX - boxWidth/2, solY - boxHeight/2, boxWidth, boxHeight, 10, '#ebf8ff', true);
        drawRoundedRect(centerX - boxWidth/2, solY - boxHeight/2, boxWidth, boxHeight, 10, primaryColor, false);
        drawText('탐색 강화', centerX, solY - 5, 15, '700', primaryColor);
        drawText('초기값 / 반복 증가', centerX, solY + 15, 12, '500', primaryColor);

// Solution 3: Constraints (Right)
        drawRoundedRect(rightX - boxWidth/2, solY - boxHeight/2, boxWidth, boxHeight, 10, '#ebf8ff', true);
        drawRoundedRect(rightX - boxWidth/2, solY - boxHeight/2, boxWidth, boxHeight, 10, primaryColor, false);
        drawText('제약 강화', rightX, solY - 5, 15, '700', primaryColor);
        drawText('등분산 가정 등', rightX, solY + 15, 12, '500', primaryColor);

// Converge (Bottom)
        const finalY = solY + gapY + 20;
        
        drawArrow(leftX, solY + boxHeight/2, centerX - 20, finalY, '#cbd5e0');
        drawArrow(centerX, solY + boxHeight/2, centerX, finalY, '#cbd5e0');
        drawArrow(rightX, solY + boxHeight/2, centerX + 20, finalY, '#cbd5e0');

drawRoundedRect(centerX - boxWidth/2, finalY, boxWidth, boxHeight, 10, '#f0fff4', true);
        drawRoundedRect(centerX - boxWidth/2, finalY, boxWidth, boxHeight, 10, successColor, false);
        drawText('모형 수렴', centerX, finalY + 35, 16, '700', successColor);

// Icons
        ctx.font = '900 20px "Font Awesome 5 Free"';
        ctx.fillStyle = accentColor;
        ctx.fillText('\uf071', centerX, startY - 10); // Warning icon
        
        ctx.fillStyle = successColor;
        ctx.fillText('\uf00c', centerX, finalY + 75); // Check icon

</script>

body{
      margin:0;
      background:#f4f6f9;
      font-family:'Noto Sans KR', sans-serif;
      overflow:hidden;

display:flex;
      align-items:center;
      justify-content:center;
    }

/* ✅ 레이아웃 크기까지 "스케일된 값"으로 맞출 wrapper */
    .viewport{
      width: calc(1280px * var(--s, 1));
      height: calc(720px * var(--s, 1));
      display:flex;
      align-items:flex-start;
      justify-content:flex-start;
    }

/* 실제 슬라이드(고정 1280×720), 여기만 scale */
    .stage{
      width:1280px;
      height:720px;
      transform-origin: top left;
      transform: scale(var(--s, 1));
    }

.slide-container{
      width:1280px;
      height:720px;
      background:#ffffff;
      position:relative;
      overflow:hidden;
    }

.header-bar{ height:10px; width:100%; background:#2c3e50; }

.content-wrapper{
      height:calc(720px - 10px);
      padding:36px 56px 28px 56px;
      display:flex;
      flex-direction:column;
    }

.top-section{ margin-bottom:18px; }

.section-tag{
      background:#e2e8f0;
      color:#2c3e50;
      padding:5px 14px;
      border-radius:20px;
      font-weight:800;
      font-size:12px;
      display:inline-block;
      margin-bottom:12px;
      letter-spacing:0.5px;
      text-transform:uppercase;
    }

.main-title{
      font-size:38px;
      font-weight:900;
      color:#1a202c;
      line-height:1.15;
      position:relative;
      padding-bottom:10px;
    }
    .main-title::after{
      content:'';
      position:absolute;
      left:0;
      bottom:0;
      width:58px;
      height:5px;
      background:#3182ce;
    }

.main-content{
      display:flex;
      flex:1;
      gap:32px;
      align-items:stretch;
      margin-top:10px;
      min-height:0;
    }

.text-column{ flex:3; padding-top:6px; min-width:0; }
    .visual-column{
      flex:2;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      min-width:0;
    }

.bullet-list{ list-style:none; padding:0; margin:0; }
    .bullet-item{
      display:flex;
      gap:14px;
      align-items:flex-start;
      margin-bottom:16px;
      color:#4a5568;
    }
    .bullet-badge{
      width:30px;
      height:30px;
      border-radius:10px;
      background:#eff6ff;
      border:1px solid #cfe3ff;
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 30px;
      margin-top:2px;
    }
    .bullet-badge i{ color:#3182ce; font-size:14px; }
    .bullet-text{
      font-size:20px;
      line-height:1.45;
      margin:0;
    }
    .bullet-text strong{ color:#1a202c; }

.key-message-box{
      background:#f7fafc;
      border-left:6px solid #4a5568;
      padding:14px 20px;
      border-radius:0 6px 6px 0;
      margin-top:16px;
    }
    .key-message-title{
      color:#2d3748;
      font-weight:900;
      font-size:14px;
      display:flex;
      align-items:center;
      letter-spacing:0.8px;
      text-transform:uppercase;
      margin-bottom:6px;
    }
    .key-message-text{
      margin:0;
      color:#1a202c;
      font-size:18px;
      font-weight:700;
      line-height:1.35;
    }

#decisionCanvas{ width:100%; height:300px; display:block; }
    .chart-caption{
      margin-top:10px;
      text-align:center;
      font-size:13px;
      color:#718096;
      font-weight:600;
    }

.page-number{
      position:absolute;
      bottom:16px;
      right:20px;
      color:#cbd5e0;
      font-size:13px;
      font-weight:700;
    }
  </style>
</head>

<div class="main-content">
            <div class="text-column">
              <ul class="bullet-list">
                <li class="bullet-item">
                  <div class="bullet-badge"><i class="fas fa-chart-bar"></i></div>
                  <p class="bullet-text"><strong>통계적 적합도 지표</strong>(Information Criteria, LMR 등)를 종합적으로 검토하여 후보 모형을 선정함</p>
                </li>
                <li class="bullet-item">
                  <div class="bullet-badge"><i class="fas fa-users-viewfinder"></i></div>
                  <p class="bullet-text"><strong>분류 품질</strong>(Entropy, Posterior Probabilities)과 모형의 안정성을 함께 고려함</p>
                </li>
                <li class="bullet-item">
                  <div class="bullet-badge"><i class="fas fa-book-open"></i></div>
                  <p class="bullet-text"><strong>이론적 기대</strong>와 내용 타당성(Content Validity)으로 통계적 결과를 교차 확인함</p>
                </li>
                <li class="bullet-item">
                  <div class="bullet-badge"><i class="fas fa-magnifying-glass-chart"></i></div>
                  <p class="bullet-text"><strong>소규모 집단</strong>이 실질적 의미(Practical Significance)를 갖는지 엄격히 점검함</p>
                </li>
                <li class="bullet-item" style="margin-bottom:0;">
                  <div class="bullet-badge"><i class="fas fa-scale-balanced"></i></div>
                  <p class="bullet-text"><strong>단순성(Parsimony)</strong>을 우선하되, 이론적으로 중요한 <strong>형태 차이</strong>는 보존함</p>
                </li>
              </ul>
            </div>

<div class="key-message-box">
            <div class="key-message-title">
              <i class="fas fa-check-circle mr-2" style="color:#3182ce;"></i> 핵심 정리
            </div>
            <p class="key-message-text">
              단일 지표에 의존하지 않고 통계적 적합도, 분류 품질, 이론적 정당성, 실무적 유용성을 통합하여 다각적으로 최적해를 결정한다.
            </p>
          </div>
        </div>

// overflow:hidden 환경에서 안전하게: 약간의 여유를 둔다(브라우저 UI/OS 스케일 오차 대비)
      const vw = window.innerWidth;
      const vh = window.innerHeight;
      const safe = 0.98; // 2% 여유

const scale = Math.min((vw / baseW), (vh / baseH)) * safe;

document.documentElement.style.setProperty('--s', scale);
    }
    window.addEventListener('resize', fitStage);
    fitStage();

/* 캔버스 렌더링 */
    const canvas = document.getElementById('decisionCanvas');
    const ctx = canvas.getContext('2d');

const cssW = canvas.clientWidth;
    const cssH = canvas.clientHeight;

const dpr = window.devicePixelRatio || 1;
    canvas.width = Math.floor(cssW * dpr);
    canvas.height = Math.floor(cssH * dpr);
    ctx.scale(dpr, dpr);

const w = cssW, h = cssH;
    const cx = w/2, cy = h/2;

const colors = {
      stat:'#3182ce', theory:'#2c7a7b', class:'#d69e2e', practical:'#e53e3e', center:'#2d3748'
    };

const dist = 98;
    const centerRadius = 46;

ctx.lineWidth = 2;
    ctx.strokeStyle = '#cbd5e0';
    ctx.setLineDash([5,5]);

function dashedLine(x1,y1,x2,y2){
      ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();
    }
    dashedLine(cx, cy, cx - dist, cy - dist);
    dashedLine(cx, cy, cx + dist, cy - dist);
    dashedLine(cx, cy, cx + dist, cy + dist);
    dashedLine(cx, cy, cx - dist, cy + dist);
    ctx.setLineDash([]);

function drawBubble(x,y,color,l1,l2){
      const r = 42;
      ctx.beginPath(); ctx.arc(x+3,y+3,r,0,Math.PI*2);
      ctx.fillStyle='rgba(0,0,0,0.10)'; ctx.fill();

ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2);
      ctx.fillStyle='white'; ctx.fill();
      ctx.strokeStyle=color; ctx.lineWidth=3; ctx.stroke();

ctx.fillStyle='#4a5568';
      ctx.font='900 12px Noto Sans KR';
      ctx.textAlign='center';
      ctx.textBaseline='middle';
      ctx.fillText(l1,x,y-7);
      ctx.fillText(l2,x,y+9);
    }

drawBubble(cx - dist, cy - dist, colors.stat, '통계적','적합도');
    drawBubble(cx + dist, cy - dist, colors.theory, '이론적','정당성');
    drawBubble(cx + dist, cy + dist, colors.practical, '실무적','유용성');
    drawBubble(cx - dist, cy + dist, colors.class, '분류','품질');

ctx.beginPath(); ctx.arc(cx,cy,centerRadius+5,0,Math.PI*2);
    ctx.fillStyle='white'; ctx.fill();

ctx.beginPath(); ctx.arc(cx,cy,centerRadius,0,Math.PI*2);
    ctx.fillStyle=colors.center; ctx.fill();

ctx.fillStyle='white';
    ctx.font='900 15px Noto Sans KR';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.fillText('최적 해', cx, cy-9);
    ctx.fillText('결정', cx, cy+11);

function drawArrow(sx,sy,ex,ey,color){
      const angle = Math.atan2(ey - sy, ex - sx);
      const head = 10;
      const offsetStart = 50;
      const offsetEnd = 52;

const x1 = sx + offsetStart * Math.cos(angle);
      const y1 = sy + offsetStart * Math.sin(angle);
      const x2 = ex - offsetEnd * Math.cos(angle);
      const y2 = ey - offsetEnd * Math.sin(angle);

ctx.beginPath();
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2);
      ctx.strokeStyle=color;
      ctx.lineWidth=3;
      ctx.stroke();

ctx.beginPath();
      ctx.moveTo(x2,y2);
      ctx.lineTo(x2 - head*Math.cos(angle - Math.PI/6), y2 - head*Math.sin(angle - Math.PI/6));
      ctx.lineTo(x2 - head*Math.cos(angle + Math.PI/6), y2 - head*Math.sin(angle + Math.PI/6));
      ctx.fillStyle=color;
      ctx.fill();
    }

drawArrow(cx - dist, cy - dist, cx, cy, colors.stat);
    drawArrow(cx + dist, cy - dist, cx, cy, colors.theory);
    drawArrow(cx + dist, cy + dist, cx, cy, colors.practical);
    drawArrow(cx - dist, cy + dist, cx, cy, colors.class);
  </script>

.key-message-box {
            background-color: #ebf8ff;
            border-left: 6px solid #3182ce;
            padding: 15px 25px;
            border-radius: 0 6px 6px 0;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .key-message-label {
            color: #2b6cb0;
            font-weight: 800;
            font-size: 16px;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .key-message-text {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
        }
        .page-number {
            position: absolute;
            bottom: 25px;
            right: 35px;
            color: #cbd5e0;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div class="top-section">
<span class="section-tag">프로파일 수 결정</span>
<h1 class="main-title">정보 기준 지표(Information Criteria)의 해석</h1>
</div>
<div class="main-content">

<div class="comparison-col">
<div class="col-header header-bic">
<i class="fas fa-balance-scale-right"></i> 엄격한 기준 (BIC, CAIC)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="penaltyChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#2b6cb0"></i>
<p><strong>BIC (Bayesian Information Criterion):</strong> 불필요한 복잡성(파라미터 수)에 대해 가장 엄격한 벌점을 부과함.</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#2b6cb0"></i>
<p><strong>권장 사항:</strong> 시뮬레이션 연구에서 '진정한 모형'을 찾는 성능이 가장 우수한 것으로 평가됨.</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#2b6cb0"></i>
<p><strong>특징:</strong> 표본 크기가 클수록 벌점이 강화되어, 지나치게 많은 프로파일이 추출되는 것을 방지함.</p>
</li>
</ul>
</div>
</div>

<div class="comparison-col">
<div class="col-header header-aic">
<i class="fas fa-search-plus"></i> 관대한 기준 (AIC, SABIC)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="elbowChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#38a169"></i>
<p><strong>AIC (Akaike IC) & SABIC:</strong> 예측 적합도를 중시하며, 벌점이 상대적으로 작음.</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#38a169"></i>
<p><strong>SABIC (Sample-Adjusted BIC):</strong> BIC의 표본 크기 가중치를 조정하여 덜 보수적임. 종종 BIC와 함께 최우선 고려 대상.</p>
</li>
<li class="feature-item">
<i class="fas fa-check feature-icon" style="color:#38a169"></i>
<p><strong>주의:</strong> 단독 사용 시 과대추출(Over-extraction) 위험이 있어, BIC 감소세와 비교하여 판단해야 함.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-label">
<i class="fas fa-lightbulb mr-2"></i> 핵심 정리
                </div>
<p class="key-message-text">
                    정보 기준 지표들은 벌점 구조가 다르므로 상호보완적으로 해석해야 하며,<br/>
                    일반적으로 <strong>BIC와 SABIC의 일관된 감소 패턴</strong>과 <strong>엘보우(Elbow) 지점</strong>을 최적해의 유력한 후보로 본다.
                </p>
</div>
</div>
<div class="page-number">32</div>
</div>
<script>
        // Common Chart Options
        const commonOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: { family: "'Noto Sans KR', sans-serif", size: 12 },
                        boxWidth: 10
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { color: '#f0f0f0' },
                    ticks: { display: false } // Hide Y axis labels for cleaner look
                },
                x: {
                    grid: { display: false },
                    ticks: { font: { family: "'Noto Sans KR', sans-serif" } }
                }
            }
        };

// Penalty Chart (Left) - Bar chart showing penalty strength
        const ctxPenalty = document.getElementById('penaltyChart').getContext('2d');
        new Chart(ctxPenalty, {
            type: 'bar',
            data: {
                labels: ['AIC', 'SABIC', 'BIC', 'CAIC'],
                datasets: [{
                    label: '복잡성 벌점 강도 (Penalty Strength)',
                    data: [20, 35, 60, 75],
                    backgroundColor: [
                        '#38a169', // AIC (Green)
                        '#48bb78', // SABIC (Light Green)
                        '#2b6cb0', // BIC (Blue)
                        '#2c5282'  // CAIC (Dark Blue)
                    ],
                    borderWidth: 0,
                    barThickness: 30
                }]
            },
            options: {
                ...commonOptions,
                plugins: {
                    legend: { display: false }, // Hide legend as labels are clear
                    tooltip: { enabled: false }
                }
            }
        });

// Elbow Chart (Right) - Line chart showing information criteria values across profiles
        const ctxElbow = document.getElementById('elbowChart').getContext('2d');
        new Chart(ctxElbow, {
            type: 'line',
            data: {
                labels: ['2-Profile', '3-Profile', '4-Profile', '5-Profile', '6-Profile'],
                datasets: [
                    {
                        label: 'BIC (명확한 꺾임)',
                        data: [5000, 4200, 4000, 3950, 3940],
                        borderColor: '#2b6cb0',
                        backgroundColor: '#2b6cb0',
                        borderWidth: 3,
                        pointRadius: 4,
                        tension: 0.2
                    },
                    {
                        label: 'AIC (지속 감소)',
                        data: [4900, 4100, 3800, 3600, 3500],
                        borderColor: '#38a169',
                        backgroundColor: '#38a169',
                        borderWidth: 3,
                        pointRadius: 4,
                        borderDash: [5, 5],
                        tension: 0.2
                    }
                ]
            },
            options: commonOptions
        });
    </script>

.key-message-box {
            background-color: #ebf8ff;
            border-left: 6px solid #3182ce;
            padding: 15px 25px;
            border-radius: 0 6px 6px 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .key-message-label {
            color: #2b6cb0;
            font-weight: 800;
            font-size: 16px;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .key-message-text {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
        }
        .page-number {
            position: absolute;
            bottom: 25px;
            right: 35px;
            color: #cbd5e0;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div class="top-section">
<span class="section-tag">프로파일 수 결정</span>
<h1 class="main-title">우도비 검정(LRT)의 활용</h1>
</div>
<div class="main-content">

<div class="comparison-col">
<div class="col-header header-blrt">
<i class="fas fa-bolt"></i> 부트스트랩 우도비 검정 (BLRT)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="chartBLRT"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check-circle feature-icon" style="color:#3182ce"></i>
<p><strong>원리:</strong> 부트스트랩 샘플링으로 우도비 분포를 직접 추정</p>
</li>
<li class="feature-item">
<i class="fas fa-check-circle feature-icon" style="color:#3182ce"></i>
<p><strong>장점:</strong> 가장 정확한 검정력을 보이며, 시뮬레이션 연구에서 우수성 입증</p>
</li>
<li class="feature-item">
<i class="fas fa-exclamation-triangle feature-icon" style="color:#e53e3e"></i>
<p><strong>단점:</strong> 계산 시간이 오래 걸리며, 표본이 클수록 과도하게 유의할 수 있음</p>
</li>
</ul>
</div>
</div>

<div class="comparison-col">
<div class="col-header header-lmr">
<i class="fas fa-calculator"></i> 로우-멘델-루빈 검정 (LMR)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="chartLMR"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check-circle feature-icon" style="color:#4a5568"></i>
<p><strong>원리:</strong> 분포 가정을 완화한 수정된 우도비 검정 근사치 사용</p>
</li>
<li class="feature-item">
<i class="fas fa-check-circle feature-icon" style="color:#4a5568"></i>
<p><strong>장점:</strong> 계산이 매우 빠르고 효율적이며, 초기 단계 탐색에 유용</p>
</li>
<li class="feature-item">
<i class="fas fa-exclamation-triangle feature-icon" style="color:#e53e3e"></i>
<p><strong>단점:</strong> BLRT에 비해 검정력이 낮을 수 있으며 근사치에 의존</p>
</li>
</ul>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-label">
<i class="fas fa-lightbulb mr-2"></i> 핵심 정리
                </div>
<p class="key-message-text">
                    우도비 검정 결과(p < .05)는 유용하나, 표본 크기에 민감하므로<br/>
<strong>반드시 정보 기준(BIC) 및 내용 타당성</strong>과 교차 검증해야 한다.
                </p>
</div>
</div>
<div class="page-number">33</div>
</div>
<script>
        // BLRT Distribution Chart
        const ctxBLRT = document.getElementById('chartBLRT').getContext('2d');
        
        // Generate distribution data
        const xValues = [];
        const yValues = [];
        for(let i = 0; i <= 20; i+=0.5) {
            xValues.push(i);
            // Chi-square like distribution shape
            let y = (Math.pow(i, 1.5) * Math.exp(-i/2)); 
            yValues.push(y);
        }

new Chart(ctxBLRT, {
            type: 'line',
            data: {
                labels: xValues.map(v => v.toFixed(1)),
                datasets: [{
                    label: '부트스트랩 분포 (Null)',
                    data: yValues,
                    borderColor: '#3182ce',
                    backgroundColor: 'rgba(49, 130, 206, 0.1)',
                    borderWidth: 2,
                    fill: true,
                    pointRadius: 0,
                    tension: 0.4
                }, {
                    label: '실제 관측치 (2ΔLL)',
                    data: [{x: '14.0', y: 0}, {x: '14.0', y: 5}], // Vertical line simulation
                    borderColor: '#e53e3e',
                    borderWidth: 2,
                    borderDash: [5, 5],
                    pointRadius: 0,
                    type: 'line',
                    showLine: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { enabled: false },
                    title: {
                        display: true,
                        text: '부트스트랩 분포와 관측치 위치',
                        font: { family: "'Noto Sans KR', sans-serif", size: 14 }
                    }
                },
                scales: {
                    x: { display: false },
                    y: { display: false }
                }
            }
        });

// LMR Comparison Radar Chart
        const ctxLMR = document.getElementById('chartLMR').getContext('2d');
        new Chart(ctxLMR, {
            type: 'radar',
            data: {
                labels: ['검정력(Power)', '계산 효율성', '소표본 정확성', '제1종 오류 제어'],
                datasets: [{
                    label: 'BLRT',
                    data: [95, 30, 90, 85],
                    borderColor: '#3182ce',
                    backgroundColor: 'rgba(49, 130, 206, 0.2)',
                    borderWidth: 2,
                    pointBackgroundColor: '#3182ce'
                }, {
                    label: 'LMR',
                    data: [70, 95, 60, 80],
                    borderColor: '#4a5568',
                    backgroundColor: 'rgba(74, 85, 104, 0.2)',
                    borderWidth: 2,
                    pointBackgroundColor: '#4a5568'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { 
                        position: 'bottom',
                        labels: { font: { family: "'Noto Sans KR', sans-serif", size: 12 } }
                    }
                },
                scales: {
                    r: {
                        angleLines: { color: '#e2e8f0' },
                        grid: { color: '#e2e8f0' },
                        pointLabels: {
                            font: { family: "'Noto Sans KR', sans-serif", size: 12, weight: 'bold' },
                            color: '#2d3748'
                        },
                        ticks: { display: false, maxTicksLimit: 5 }
                    }
                }
            }
        });
    </script>

const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  ctx.scale(dpr, dpr);
  canvas.style.width = `${rect.width}px`;
  canvas.style.height = `${rect.height}px`;

const width = rect.width;
  const height = rect.height;

/* ============================
     ✅ 가독성용 레이아웃 파라미터
     ============================ */
  const baseline = height * 0.75;   // 바닥을 더 아래로
  const maxPeakHeight = height * 0.28; // 피크 최대 높이 제한 (여백 확보)
  const scaleY = maxPeakHeight;     // 실제 스케일은 여기서 통제

const mean1 = width * 0.35;
  const mean2 = width * 0.65;
  const sigma = width * 0.12;

function gaussian(x, mean, sigma) {
    return Math.exp(-0.5 * Math.pow((x - mean) / sigma, 2));
  }

function drawCurve(mean, color, label) {
    ctx.beginPath();
    ctx.moveTo(0, baseline);

for (let x = 0; x <= width; x += 2) {
      const y = baseline - gaussian(x, mean, sigma) * scaleY;
      ctx.lineTo(x, y);
    }

ctx.strokeStyle = color;
    ctx.lineWidth = 3;
    ctx.stroke();

ctx.lineTo(width, baseline);
    ctx.lineTo(0, baseline);
    ctx.fillStyle = color + '10';
    ctx.fill();

ctx.fillStyle = color;
    ctx.font = 'bold 14px Noto Sans KR';
    ctx.textAlign = 'center';
    ctx.fillText(
      label,
      mean,
      baseline - scaleY - 10
    );
  }

function drawOverlap() {
    ctx.beginPath();
    let first = true;

for (let x = 0; x <= width; x += 2) {
      const y1 = gaussian(x, mean1, sigma) * scaleY;
      const y2 = gaussian(x, mean2, sigma) * scaleY;
      const intersection = Math.min(y1, y2);

if (intersection > 1) {
        const y = baseline - intersection;
        if (first) {
          ctx.moveTo(x, y);
          first = false;
        } else {
          ctx.lineTo(x, y);
        }
      }
    }

ctx.lineTo(width, baseline);
    ctx.lineTo(0, baseline);
    ctx.closePath();
    ctx.fillStyle = '#718096';
    ctx.globalAlpha = 0.3;
    ctx.fill();
    ctx.globalAlpha = 1;

ctx.fillStyle = '#4a5568';
    ctx.font = '12px Noto Sans KR';
    ctx.textAlign = 'center';
    ctx.fillText('분류 불확실성 영역', width * 0.5, baseline - scaleY - 25);
    ctx.fillText('(Classification Error)', width * 0.5, baseline - scaleY - 10);

ctx.beginPath();
    ctx.moveTo(width * 0.5, baseline - scaleY);
    ctx.lineTo(width * 0.5, baseline - scaleY - 25);
    ctx.setLineDash([2, 2]);
    ctx.strokeStyle = '#718096';
    ctx.stroke();
    ctx.setLineDash([]);
  }

ctx.beginPath();
  ctx.moveTo(20, baseline);
  ctx.lineTo(width - 20, baseline);
  ctx.strokeStyle = '#cbd5e0';
  ctx.lineWidth = 2;
  ctx.stroke();

drawOverlap();
  drawCurve(mean1, '#3182ce', '프로파일 A');
  drawCurve(mean2, '#e53e3e', '프로파일 B');
</script>

const w = rect.width;
        const h = rect.height;

// Colors
        const colorPrimary = '#3182ce';
        const colorSecondary = '#718096';
        const colorAccent = '#48bb78';
        const colorBg = '#f7fafc';

// Draw Funnel Shape
        ctx.fillStyle = colorBg;
        // ctx.fillRect(0, 0, w, h);

const funnelTopY = 40;
        const funnelMidY = 140;
        const funnelBotY = 240;
        
        const topW = 240;
        const midW = 120;
        const botW = 120;
        const cx = w / 2;

// Funnel Body
        ctx.beginPath();
        ctx.moveTo(cx - topW/2, funnelTopY);
        ctx.lineTo(cx + topW/2, funnelTopY);
        ctx.lineTo(cx + midW/2, funnelMidY);
        ctx.lineTo(cx + midW/2, funnelBotY);
        ctx.lineTo(cx - midW/2, funnelBotY);
        ctx.lineTo(cx - midW/2, funnelMidY);
        ctx.closePath();
        
        const gradient = ctx.createLinearGradient(0, funnelTopY, 0, funnelBotY);
        gradient.addColorStop(0, '#ebf8ff');
        gradient.addColorStop(1, '#bee3f8');
        ctx.fillStyle = gradient;
        ctx.fill();
        
        ctx.strokeStyle = colorPrimary;
        ctx.lineWidth = 3;
        ctx.stroke();

// Labels inside Funnel
        ctx.fillStyle = '#2c5282';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.textAlign = 'center';
        
        // Input Arrows (Statistical Candidates)
        ctx.font = '12px Noto Sans KR';
        ctx.fillStyle = colorSecondary;
        ctx.fillText('통계적 후보 모형들 (k=3, 4, 5...)', cx, funnelTopY - 15);
        
        // Arrow down
        ctx.beginPath();
        ctx.moveTo(cx, funnelTopY - 5);
        ctx.lineTo(cx, funnelTopY + 10);
        ctx.lineTo(cx - 5, funnelTopY + 5);
        ctx.moveTo(cx, funnelTopY + 10);
        ctx.lineTo(cx + 5, funnelTopY + 5);
        ctx.strokeStyle = colorSecondary;
        ctx.stroke();

// Filter Layers
        function drawFilterLayer(y, text, iconChar) {
            ctx.beginPath();
            ctx.moveTo(cx - midW/1.5, y);
            ctx.lineTo(cx + midW/1.5, y);
            ctx.strokeStyle = '#3182ce';
            ctx.setLineDash([5, 3]);
            ctx.lineWidth = 2;
            ctx.stroke();
            ctx.setLineDash([]);

ctx.fillStyle = '#2d3748';
            ctx.font = 'bold 13px Noto Sans KR';
            ctx.fillText(text, cx, y - 8);
        }

drawFilterLayer(funnelTopY + 40, '1. 형태의 독창성', '');
        drawFilterLayer(funnelTopY + 90, '2. 이론적 해석 가능성', '');
        drawFilterLayer(funnelTopY + 140, '3. 실무적 유용성', '');

// Output (Final Solution)
        ctx.beginPath();
        ctx.moveTo(cx, funnelBotY);
        ctx.lineTo(cx, funnelBotY + 40);
        ctx.strokeStyle = colorAccent;
        ctx.lineWidth = 4;
        ctx.stroke();

// Arrow head
        ctx.beginPath();
        ctx.moveTo(cx - 8, funnelBotY + 30);
        ctx.lineTo(cx, funnelBotY + 40);
        ctx.lineTo(cx + 8, funnelBotY + 30);
        ctx.strokeStyle = colorAccent;
        ctx.stroke();

// Final Box
        ctx.fillStyle = '#f0fff4'; // light green bg
        ctx.strokeStyle = colorAccent;
        ctx.lineWidth = 2;
        const boxW = 180;
        const boxH = 40;
        const boxY = funnelBotY + 40;
        
        ctx.beginPath();
        ctx.roundRect(cx - boxW/2, boxY, boxW, boxH, 8);
        ctx.fill();
        ctx.stroke();

ctx.fillStyle = '#2f855a';
        ctx.font = 'bold 15px Noto Sans KR';
        ctx.fillText('최종 선정 모형', cx, boxY + 25);

// Discarded options (Side arrows)
        function drawDiscardArrow(y, side) {
            const startX = side === 'left' ? cx - midW/2 - 10 : cx + midW/2 + 10;
            const endX = side === 'left' ? startX - 30 : startX + 30;
            const curveX = side === 'left' ? startX - 15 : startX + 15;
            
            ctx.beginPath();
            ctx.moveTo(startX, y);
            ctx.quadraticCurveTo(curveX, y - 10, endX, y + 10);
            ctx.strokeStyle = '#a0aec0';
            ctx.lineWidth = 2;
            ctx.stroke();

// X icon
            ctx.fillStyle = '#e53e3e';
            ctx.font = '12px FontAwesome';
            ctx.fillText('✕', endX + (side === 'left' ? -10 : 10), y + 15);
        }

drawDiscardArrow(funnelTopY + 60, 'right');
        drawDiscardArrow(funnelTopY + 110, 'left');

</script>

.key-message-box {
            background-color: #ebf8ff;
            border-left: 6px solid #3182ce;
            padding: 15px 25px;
            border-radius: 0 6px 6px 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .key-message-label {
            color: #2b6cb0;
            font-weight: 800;
            font-size: 16px;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .key-message-text {
            color: #2d3748;
            font-size: 18px;
            font-weight: 600;
            line-height: 1.4;
            margin: 0;
        }
        .page-number {
            position: absolute;
            bottom: 25px;
            right: 35px;
            color: #cbd5e0;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="slide-container">
<div class="header-bar"></div>
<div class="content-wrapper">
<div class="top-section">
<span class="section-tag">프로파일 수 결정</span>
<h1 class="main-title">형태 차이의 재평가</h1>
</div>
<div class="main-content">

<div class="comparison-col">
<div class="col-header header-reject">
<i class="fas fa-compress-arrows-alt"></i> 수준 차이 추가 (통합 고려)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="rejectChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-exclamation-circle feature-icon" style="color:#e53e3e"></i>
<p><strong>문제점:</strong> 추가된 집단이 기존 집단과 평행하며 단순히 높낮이만 다름</p>
</li>
<li class="feature-item">
<i class="fas fa-arrow-right feature-icon" style="color:#718096"></i>
<p><strong>상대적 순위:</strong> 지표 간의 상대적 높낮이(Rank-order)가 기존 집단과 동일함</p>
</li>
<li class="feature-item">
<i class="fas fa-ban feature-icon" style="color:#718096"></i>
<p><strong>결정:</strong> 과추출(Over-extraction) 가능성 높음. 단순성을 위해 통합 권장</p>
</li>
</ul>
</div>
</div>

<div class="comparison-col">
<div class="col-header header-accept">
<i class="fas fa-expand-arrows-alt"></i> 형태 차이 추가 (유지 고려)
                    </div>
<div class="col-body">
<div class="chart-container">
<canvas id="acceptChart"></canvas>
</div>
<ul class="feature-list">
<li class="feature-item">
<i class="fas fa-check-circle feature-icon" style="color:#3182ce"></i>
<p><strong>가치:</strong> 추가된 집단이 기존과 질적으로 다른 고유한 패턴을 보임</p>
</li>
<li class="feature-item">
<i class="fas fa-exchange-alt feature-icon" style="color:#3182ce"></i>
<p><strong>상대적 순위:</strong> 특정 지표에서 교차(Cross-over)가 발생하거나 기울기가 반전됨</p>
</li>
<li class="feature-item">
<i class="fas fa-thumbs-up feature-icon" style="color:#3182ce"></i>
<p><strong>결정:</strong> 이론적, 실무적으로 해석 가치가 있다면 독립 집단으로 유지</p>
</li>
</ul>
</div>
</div>
</div>
<div class="key-message-box">
<div class="key-message-label">
<i class="fas fa-lightbulb mr-2"></i> 핵심 정리
                </div>
<p class="key-message-text">
                    단순한 수준(Level) 차이만 추가된다면 <strong>통합</strong>을 고려하고,<br/>
                    명확한 <strong>형태(Shape) 차이</strong>가 발견될 때에만 집단 추가의 명분이 확보된다.
                </p>
</div>
</div>
<div class="page-number">37</div>
</div>
<script>
        // Common Chart Options
        const commonOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                    labels: {
                        font: { family: "'Noto Sans KR', sans-serif", size: 12 },
                        boxWidth: 10,
                        usePointStyle: true
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 10,
                    grid: { color: '#f0f0f0' },
                    ticks: { display: false }
                },
                x: {
                    grid: { display: false },
                    ticks: { font: { family: "'Noto Sans KR', sans-serif" } }
                }
            },
            elements: {
                line: { tension: 0.3 }
            }
        };

// Reject Chart (Level Difference Only)
        const ctxReject = document.getElementById('rejectChart').getContext('2d');
        new Chart(ctxReject, {
            type: 'line',
            data: {
                labels: ['지표 A', '지표 B', '지표 C', '지표 D'],
                datasets: [
                    {
                        label: '기존 1',
                        data: [8, 8, 8, 8],
                        borderColor: '#cbd5e0',
                        borderWidth: 2,
                        pointRadius: 0
                    },
                    {
                        label: '기존 2',
                        data: [2, 2, 2, 2],
                        borderColor: '#cbd5e0',
                        borderWidth: 2,
                        pointRadius: 0
                    },
                    {
                        label: '추가 집단 (Level only)',
                        data: [5, 5, 5, 5],
                        borderColor: '#e53e3e',
                        backgroundColor: '#e53e3e',
                        borderWidth: 3,
                        pointRadius: 4,
                        borderDash: [5, 5]
                    }
                ]
            },
            options: commonOptions
        });

// Accept Chart (Shape Difference)
        const ctxAccept = document.getElementById('acceptChart').getContext('2d');
        new Chart(ctxAccept, {
            type: 'line',
            data: {
                labels: ['지표 A', '지표 B', '지표 C', '지표 D'],
                datasets: [
                    {
                        label: '기존 1 (상승)',
                        data: [2, 4, 6, 8],
                        borderColor: '#cbd5e0',
                        borderWidth: 2,
                        pointRadius: 0
                    },
                    {
                        label: '기존 2 (하강)',
                        data: [8, 6, 4, 2],
                        borderColor: '#cbd5e0',
                        borderWidth: 2,
                        pointRadius: 0
                    },
                    {
                        label: '추가 집단 (V자형)',
                        data: [7, 2, 2, 7],
                        borderColor: '#3182ce',
                        backgroundColor: '#3182ce',
                        borderWidth: 3,
                        pointRadius: 4,
                        borderDash: [5, 5]
                    }
                ]
            },
            options: commonOptions
        });
    </script>

const w = rect.width;
        const h = rect.height;
        const cx = w / 2;
        const cy = h / 2;

// Colors
        const coreColor = '#2c3e50';
        const accentColor = '#3182ce';
        const subColor = '#e2e8f0';
        const textColor = '#4a5568';

// Draw connections (Triangle)
        ctx.beginPath();
        const r = 100; // Radius for outer nodes
        const nodes = [
            { x: cx, y: cy - r, label: '이론', sub: 'Theory' },
            { x: cx - r * 0.866, y: cy + r * 0.5, label: '방법', sub: 'Method' },
            { x: cx + r * 0.866, y: cy + r * 0.5, label: '보고', sub: 'Reporting' }
        ];

ctx.moveTo(nodes[0].x, nodes[0].y);
        ctx.lineTo(nodes[1].x, nodes[1].y);
        ctx.lineTo(nodes[2].x, nodes[2].y);
        ctx.closePath();
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#cbd5e0';
        ctx.setLineDash([5, 5]);
        ctx.stroke();
        ctx.setLineDash([]);

// Center Node (Strategy)
        const centerR = 60;
        ctx.beginPath();
        ctx.arc(cx, cy, centerR, 0, Math.PI * 2);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.strokeStyle = accentColor;
        ctx.lineWidth = 4;
        ctx.stroke();

// Center Text
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = coreColor;
        ctx.font = 'bold 18px Noto Sans KR';
        ctx.fillText('통합적', cx, cy - 10);
        ctx.fillText('연구전략', cx, cy + 12);

// Outer Nodes
        const nodeR = 45;
        nodes.forEach(node => {
            // Circle background
            ctx.beginPath();
            ctx.arc(node.x, node.y, nodeR, 0, Math.PI * 2);
            ctx.fillStyle = coreColor;
            ctx.fill();
            
            // Icon Placeholder (Simulated with simple shapes)
            ctx.fillStyle = 'rgba(255,255,255,0.1)';
            ctx.beginPath();
            ctx.arc(node.x, node.y, nodeR - 5, 0, Math.PI * 2);
            ctx.fill();

// Label
            ctx.fillStyle = 'white';
            ctx.font = 'bold 16px Noto Sans KR';
            ctx.fillText(node.label, node.x, node.y - 8);
            
            // Sub Label
            ctx.fillStyle = '#cbd5e0';
            ctx.font = '12px Noto Sans KR';
            ctx.fillText(node.sub, node.x, node.y + 12);
        });

// Arrows indicating flow or interaction
        ctx.strokeStyle = accentColor;
        ctx.lineWidth = 2;
        nodes.forEach(node => {
            const angle = Math.atan2(cy - node.y, cx - node.x);
            const dist = Math.hypot(cx - node.x, cy - node.y);
            const startR = nodeR + 5;
            const endR = centerR + 5;
            
            // Draw arrow from outer to inner
            const startX = node.x + Math.cos(angle) * startR;
            const startY = node.y + Math.sin(angle) * startR;
            const endX = cx - Math.cos(angle) * endR;
            const endY = cy - Math.sin(angle) * endR;

// Simple line connecting them visualy reinforcing integration
            // ctx.beginPath();
            // ctx.moveTo(startX, startY);
            // ctx.lineTo(endX, endY);
            // ctx.stroke();
        });

</script>

const w = rect.width;
        const h = rect.height;
        const cx = w / 2;
        const cy = h / 2;

// Configuration for the diagram
        const radius = 90;
        const circleRadius = 55;
        
        // Coordinates for 3 nodes (Triangle)
        // Top: Theory/Design
        const p1 = { x: cx, y: cy - radius + 10, label: "이론 및 설계", color: "#2c3e50" };
        // Bottom Right: Practice
        const p2 = { x: cx + radius * Math.cos(Math.PI/6), y: cy + radius * Math.sin(Math.PI/6) + 10, label: "실무 적용", color: "#3182ce" };
        // Bottom Left: Analysis
        const p3 = { x: cx - radius * Math.cos(Math.PI/6), y: cy + radius * Math.sin(Math.PI/6) + 10, label: "LPA 분석", color: "#e53e3e" };

const nodes = [p1, p2, p3];

// Draw connections (arrows)
        ctx.lineWidth = 3;
        ctx.strokeStyle = '#cbd5e0';
        
        // Connect p1 -> p2 (Theory -> Practice ? No, Theory -> Analysis -> Practice -> Theory)
        // Order: p1 (Top) -> p3 (Bottom Left Analysis) -> p2 (Bottom Right Practice) -> p1 (Top)
        
        // Let's redefine logical flow: Theory -> Analysis -> Practice -> Theory
        // p1 (Top) -> p3 (Left) -> p2 (Right) -> p1 (Top) ... wait, visually 
        // p1 (Top), p3 (Left-Analysis), p2 (Right-Practice)
        
        drawArrow(ctx, p1.x, p1.y, p3.x, p3.y, circleRadius + 5); // Theory -> Analysis
        drawArrow(ctx, p3.x, p3.y, p2.x, p2.y, circleRadius + 5); // Analysis -> Practice
        drawArrow(ctx, p2.x, p2.y, p1.x, p1.y, circleRadius + 5); // Practice -> Theory (Feedback)

function drawArrow(ctx, x1, y1, x2, y2, offset) {
            const angle = Math.atan2(y2 - y1, x2 - x1);
            const startX = x1 + offset * Math.cos(angle);
            const startY = y1 + offset * Math.sin(angle);
            const endX = x2 - offset * Math.cos(angle);
            const endY = y2 - offset * Math.sin(angle);

ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = '#a0aec0';
            ctx.stroke();

// Arrowhead
            const headLen = 10;
            ctx.beginPath();
            ctx.moveTo(endX, endY);
            ctx.lineTo(endX - headLen * Math.cos(angle - Math.PI / 6), endY - headLen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(endX - headLen * Math.cos(angle + Math.PI / 6), endY - headLen * Math.sin(angle + Math.PI / 6));
            ctx.fillStyle = '#a0aec0';
            ctx.fill();
        }

// Draw Nodes
        nodes.forEach(p => {
            // Shadow
            ctx.beginPath();
            ctx.arc(p.x, p.y + 3, circleRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(0,0,0,0.1)';
            ctx.fill();

// Circle
            ctx.beginPath();
            ctx.arc(p.x, p.y, circleRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.strokeStyle = p.color;
            ctx.lineWidth = 3;
            ctx.stroke();

// Text
            ctx.fillStyle = p.color;
            ctx.font = 'bold 15px Noto Sans KR';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            // Handle multi-line text if needed, here simple split
            const words = p.label.split(' ');
            if(words.length > 1) {
                ctx.fillText(words[0], p.x, p.y - 8);
                ctx.fillText(words[1], p.x, p.y + 12);
            } else {
                ctx.fillText(p.label, p.x, p.y);
            }
        });

// Center Text
        ctx.fillStyle = '#718096';
        ctx.font = 'bold 14px Noto Sans KR';
        ctx.fillText("통합 연구 전략", cx, cy + 10);

</script>