diff --git a/prototype/gemini.zip b/prototype/gemini.zip
new file mode 100644
index 0000000..964b143
Binary files /dev/null and b/prototype/gemini.zip differ
diff --git a/prototype/opus.jsx b/prototype/opus.jsx
new file mode 100644
index 0000000..3909d74
--- /dev/null
+++ b/prototype/opus.jsx
@@ -0,0 +1,1720 @@
+import React, { useState, useEffect } from 'react';
+
+const MacroEconomicSimulator = () => {
+ const [currentStep, setCurrentStep] = useState(1);
+ const [inputMode, setInputMode] = useState('slider');
+ const [naturalInput, setNaturalInput] = useState('');
+ const [isAnalyzing, setIsAnalyzing] = useState(false);
+ const [activeAgent, setActiveAgent] = useState(null);
+ const [showConsensus, setShowConsensus] = useState(false);
+
+ // 현재 실제 경제 지표 (API에서 가져온 것처럼)
+ const currentIndicators = {
+ exchangeRate: { value: 1380, unit: '₩/$', name: '원/달러 환율', trend: 'up' },
+ baseRate: { value: 3.50, unit: '%', name: '기준금리', trend: 'stable' },
+ cpi: { value: 3.2, unit: '%', name: '소비자물가 상승률', trend: 'down' },
+ gdpGrowth: { value: 2.1, unit: '%', name: 'GDP 성장률', trend: 'up' },
+ unemployment: { value: 3.7, unit: '%', name: '실업률', trend: 'stable' },
+ oilPrice: { value: 78, unit: '$', name: '국제유가 (WTI)', trend: 'up' }
+ };
+
+ // 사용자가 설정한 시뮬레이션 값
+ const [simValues, setSimValues] = useState({
+ exchangeRate: 1380,
+ baseRate: 3.50,
+ cpi: 3.2,
+ gdpGrowth: 2.1,
+ unemployment: 3.7,
+ oilPrice: 78
+ });
+
+ const indicatorRanges = {
+ exchangeRate: { min: 1100, max: 1600, step: 10 },
+ baseRate: { min: 0, max: 7, step: 0.25 },
+ cpi: { min: -1, max: 10, step: 0.1 },
+ gdpGrowth: { min: -5, max: 10, step: 0.1 },
+ unemployment: { min: 1, max: 15, step: 0.1 },
+ oilPrice: { min: 30, max: 150, step: 1 }
+ };
+
+ const agents = [
+ {
+ id: 'consumer',
+ name: '소비자',
+ role: 'Consumer Representative',
+ color: '#10b981',
+ icon: '👤',
+ perspective: '가계 경제 관점',
+ thinking: '환율 상승으로 인해 수입품 가격이 오르고, 해외여행 비용이 증가합니다. 특히 에너지와 식료품 가격 상승이 실질 구매력을 약화시킬 것으로 보입니다. 다만 금리 인상 시 예금 이자 수익은 증가할 수 있습니다.',
+ position: '소비 위축 우려'
+ },
+ {
+ id: 'business',
+ name: '기업',
+ role: 'Corporate Sector',
+ color: '#3b82f6',
+ icon: '🏢',
+ perspective: '기업 경영 관점',
+ thinking: '수출 기업에게 환율 상승은 가격 경쟁력 제고의 기회입니다. 그러나 원자재 수입 비용 증가와 금리 인상에 따른 자금 조달 비용 상승은 부담 요인입니다. 업종별로 명암이 갈릴 것으로 예상됩니다.',
+ position: '업종별 차별화'
+ },
+ {
+ id: 'government',
+ name: '정부',
+ role: 'Fiscal Authority',
+ color: '#8b5cf6',
+ icon: '🏛',
+ perspective: '재정 정책 관점',
+ thinking: '물가 안정과 경기 부양 사이의 균형이 필요합니다. 취약계층 지원을 위한 선별적 재정 지출을 검토하되, 재정 건전성도 고려해야 합니다. 환율 급등 시 외환시장 안정화 조치를 준비하고 있습니다.',
+ position: '선별적 재정 대응'
+ },
+ {
+ id: 'centralbank',
+ name: '중앙은행',
+ role: 'Monetary Authority',
+ color: '#f59e0b',
+ icon: '🏦',
+ perspective: '통화 정책 관점',
+ thinking: '환율 상승에 따른 수입 물가 상승은 인플레이션 압력을 높입니다. 물가 안정 목표(2%)를 고려할 때 기준금리 인상 압력이 존재하나, 경기 둔화 우려도 함께 살펴야 합니다. 금융 안정에도 주의를 기울이고 있습니다.',
+ position: '긴축 기조 유지'
+ },
+ {
+ id: 'bank',
+ name: '시중은행',
+ role: 'Commercial Banking',
+ color: '#ec4899',
+ icon: '💳',
+ perspective: '금융 중개 관점',
+ thinking: '기준금리 인상은 예대마진 확대로 이어질 수 있으나, 대출 수요 감소와 부실 위험 증가를 동반합니다. 가계부채 연착륙을 위한 리스크 관리가 중요하며, 기업 대출 심사도 강화할 필요가 있습니다.',
+ position: '리스크 관리 강화'
+ }
+ ];
+
+ const getDelta = (key) => {
+ const current = currentIndicators[key].value;
+ const sim = simValues[key];
+ const delta = sim - current;
+ return delta;
+ };
+
+ const formatDelta = (key) => {
+ const delta = getDelta(key);
+ if (delta === 0) return null;
+ const sign = delta > 0 ? '+' : '';
+ const decimals = key === 'exchangeRate' || key === 'oilPrice' ? 0 : 1;
+ return `${sign}${delta.toFixed(decimals)}`;
+ };
+
+ const handleStartSimulation = () => {
+ setCurrentStep(3);
+ setIsAnalyzing(true);
+
+ // 에이전트별로 순차적으로 분석
+ agents.forEach((agent, idx) => {
+ setTimeout(() => {
+ setActiveAgent(agent.id);
+ }, idx * 1200);
+ });
+
+ // 모든 분석 완료 후 합의 도출
+ setTimeout(() => {
+ setIsAnalyzing(false);
+ setShowConsensus(true);
+ }, agents.length * 1200 + 800);
+ };
+
+ return (
+
+ {/* Subtle Grid Background */}
+
+
+ {/* Navigation */}
+
+
+
+
+
+ {['현재 상황', '시나리오 설정', '분석 & 토론', '레포트'].map((step, idx) => (
+ idx + 1 <= currentStep && setCurrentStep(idx + 1)}
+ style={{
+ ...styles.navStep,
+ ...(currentStep === idx + 1 ? styles.navStepActive : {}),
+ ...(currentStep > idx + 1 ? styles.navStepCompleted : {}),
+ cursor: idx + 1 <= currentStep ? 'pointer' : 'default'
+ }}
+ >
+ = idx + 1 ? styles.navStepNumberActive : {})
+ }}>
+ {currentStep > idx + 1 ? '✓' : idx + 1}
+
+ {step}
+
+ ))}
+
+
+
+ 히스토리
+
+
+
+
+
+ {/* Step 1: Current Economic Situation */}
+ {currentStep === 1 && (
+
+
+
+
STEP 01
+
현재 경제 상황
+
+ 실시간 경제 지표를 확인하고 시뮬레이션을 시작하세요
+
+
+
+
+ Live Data
+
+
+
+
+ {Object.entries(currentIndicators).map(([key, data], idx) => (
+
+
+ {data.name}
+
+ {data.trend === 'up' ? '↑' : data.trend === 'down' ? '↓' : '→'}
+
+
+
+ {data.value.toLocaleString()}
+ {data.unit}
+
+
+ ))}
+
+
+
+
setCurrentStep(2)}
+ style={styles.primaryButton}
+ >
+ 시나리오 설정하기
+
+
+
+
+
+
+ )}
+
+ {/* Step 2: Scenario Setting */}
+ {currentStep === 2 && (
+
+
+
+
STEP 02
+
시나리오 설정
+
+ 경제 지표를 조정하여 가상의 시나리오를 만들어보세요
+
+
+
+
+ {/* Input Mode Toggle */}
+
+
+
setInputMode('slider')}
+ style={{
+ ...styles.modeButton,
+ ...(inputMode === 'slider' ? styles.modeButtonActive : {})
+ }}
+ >
+
+
+
+ 슬라이더
+
+
setInputMode('natural')}
+ style={{
+ ...styles.modeButton,
+ ...(inputMode === 'natural' ? styles.modeButtonActive : {})
+ }}
+ >
+
+
+
+ 자연어
+
+
+
+
+ {inputMode === 'slider' ? (
+
+ {Object.entries(currentIndicators).map(([key, data], idx) => {
+ const range = indicatorRanges[key];
+ const delta = getDelta(key);
+ const deltaFormatted = formatDelta(key);
+ const percentage = ((simValues[key] - range.min) / (range.max - range.min)) * 100;
+
+ return (
+
+
+ {data.name}
+ {deltaFormatted && (
+ 0 ? 'rgba(239, 68, 68, 0.1)' : 'rgba(16, 185, 129, 0.1)',
+ color: delta > 0 ? '#ef4444' : '#10b981'
+ }}>
+ {deltaFormatted} {data.unit}
+
+ )}
+
+
+
+
+ 현재
+ {data.value.toLocaleString()}
+
+
+
+
+
+ 시뮬레이션
+
+ {simValues[key].toLocaleString()}
+ {data.unit}
+
+
+
+
+
+
+
+ {/* Current value marker */}
+
+
+
setSimValues({
+ ...simValues,
+ [key]: parseFloat(e.target.value)
+ })}
+ style={styles.sliderInput}
+ />
+
+
+
+ {range.min.toLocaleString()}
+ {range.max.toLocaleString()}
+
+
+ );
+ })}
+
+ ) : (
+
+
+
+
+
예시 시나리오
+
+ {[
+ '미국 기준금리가 0.5%p 인상되면?',
+ '국제유가 배럴당 120달러 돌파 시',
+ '한국 GDP 성장률 1%대 진입 시나리오',
+ '환율 1,450원 + 기준금리 4% 복합 상황'
+ ].map((example, idx) => (
+ setNaturalInput(example)}
+ style={styles.exampleButton}
+ >
+ {example}
+
+ ))}
+
+
+
+ )}
+
+ {/* Summary Bar */}
+
+
+
변경된 지표
+
+ {Object.entries(currentIndicators).map(([key, data]) => {
+ const deltaFormatted = formatDelta(key);
+ if (!deltaFormatted) return null;
+ const delta = getDelta(key);
+ return (
+ 0 ? 'rgba(239, 68, 68, 0.3)' : 'rgba(16, 185, 129, 0.3)',
+ color: delta > 0 ? '#fca5a5' : '#6ee7b7'
+ }}
+ >
+ {data.name} {deltaFormatted}
+
+ );
+ })}
+ {Object.entries(currentIndicators).every(([key]) => !formatDelta(key)) && (
+ 지표를 조정해주세요
+ )}
+
+
+
formatDelta(key)) ? 1 : 0.5
+ }}
+ disabled={Object.entries(currentIndicators).every(([key]) => !formatDelta(key))}
+ >
+ 분석 시작
+
+
+
+
+
+
+ )}
+
+ {/* Step 3: Analysis & Debate */}
+ {currentStep === 3 && (
+
+
+
+
STEP 03
+
분석 & 토론
+
+ 각 경제 주체가 시나리오를 분석하고 의견을 나눕니다
+
+
+ {isAnalyzing && (
+
+ )}
+
+
+ {/* Agents Grid */}
+
+ {agents.map((agent, idx) => {
+ const isActive = activeAgent === agent.id;
+ const isCompleted = agents.findIndex(a => a.id === activeAgent) > idx;
+
+ return (
+
+
+
+ {agent.icon}
+
+
+
{agent.name}
+
{agent.role}
+
+ {isCompleted && (
+
✓
+ )}
+ {isActive && (
+
+
+
+
+
+ )}
+
+
+ {(isActive || isCompleted) && (
+
+
+
+ {agent.perspective}
+
+
+
{agent.thinking}
+
+ 입장
+ {agent.position}
+
+
+ )}
+
+ );
+ })}
+
+
+ {/* Consensus Section */}
+ {showConsensus && (
+
+
+
+
+
합의점 도출
+
5개 경제 주체의 종합 의견
+
+
+
+
+
+ 종합 전망
+ 단기 부정적, 중기 중립
+
+
+
+ 환율 상승은 수출 기업의 가격 경쟁력 을 일시적으로 높이나,
+ 수입 물가 상승 으로 인한 소비자 부담 증가와
+ 인플레이션 압력 이 더 큰 영향을 미칠 것으로 예상됩니다.
+ 중앙은행의 긴축 기조 유지 가 예상되며,
+ 정부의 선별적 재정 지원이 경기 하방 리스크를 일부 완화할 것으로 보입니다.
+
+
+
+
+ 📉
+ 소비
+ 위축 예상
+
+
+ 📊
+ 투자
+ 업종별 차별화
+
+
+ 💵
+ 금리
+ 인상 압력
+
+
+ 📈
+ 물가
+ 상승 전망
+
+
+
+
+
+
+
+
+
+
+ PDF 레포트 다운로드
+
+
setCurrentStep(4)}
+ style={styles.primaryButton}
+ >
+ 상세 레포트 보기
+
+
+
+
+
+
+ )}
+
+ )}
+
+ {/* Step 4: Report */}
+ {currentStep === 4 && (
+
+
+
+
STEP 04
+
분석 레포트
+
+ 시뮬레이션 결과에 대한 종합 보고서입니다
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 생성일: 2025년 1월 25일
+ •
+ 시뮬레이션 ID: SIM-2025-0125-001
+
+
+
+ 1. 개요
+
+ 본 보고서는 원/달러 환율 1,500원 돌파 시나리오에 대한 다자간 경제 분석 결과를 담고 있습니다.
+ 소비자, 기업, 정부, 중앙은행, 시중은행 등 5개 경제 주체의 관점에서 시나리오를 분석하고,
+ 각 주체 간 토론을 통해 도출된 합의점을 정리하였습니다.
+
+
+ 2. 시나리오 설정
+
+
+ 지표
+ 현재 값
+ 시뮬레이션 값
+ 변화
+
+ {Object.entries(currentIndicators).map(([key, data]) => {
+ const delta = getDelta(key);
+ const deltaFormatted = formatDelta(key);
+ return (
+
+ {data.name}
+ {data.value.toLocaleString()} {data.unit}
+ {simValues[key].toLocaleString()} {data.unit}
+ 0 ? '#ef4444' : delta < 0 ? '#10b981' : '#6b7280'
+ }}>
+ {deltaFormatted || '-'}
+
+
+ );
+ })}
+
+
+ 3. 주체별 분석
+ {agents.map((agent) => (
+
+
+ {agent.icon} {agent.name} ({agent.role})
+
+
{agent.thinking}
+
+ 입장: {agent.position}
+
+
+ ))}
+
+
+
+
+ )}
+
+
+
+
+ );
+};
+
+const styles = {
+ container: {
+ minHeight: '100vh',
+ background: '#09090b',
+ color: '#fafafa',
+ fontFamily: "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif",
+ position: 'relative',
+ overflow: 'hidden'
+ },
+ gridBg: {
+ position: 'fixed',
+ inset: 0,
+ backgroundImage: `
+ linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)
+ `,
+ backgroundSize: '64px 64px',
+ pointerEvents: 'none'
+ },
+
+ // Navigation
+ nav: {
+ position: 'sticky',
+ top: 0,
+ zIndex: 100,
+ background: 'rgba(9, 9, 11, 0.8)',
+ backdropFilter: 'blur(12px)',
+ borderBottom: '1px solid rgba(255,255,255,0.06)'
+ },
+ navInner: {
+ maxWidth: '1400px',
+ margin: '0 auto',
+ padding: '0 48px',
+ height: '72px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between'
+ },
+ logo: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px'
+ },
+ logoMark: {
+ width: '40px',
+ height: '40px',
+ background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+ borderRadius: '10px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: '#fff'
+ },
+ logoText: {
+ fontSize: '18px',
+ fontWeight: 600,
+ letterSpacing: '-0.02em'
+ },
+ navSteps: {
+ display: 'flex',
+ gap: '8px'
+ },
+ navStep: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '10px',
+ padding: '10px 16px',
+ background: 'transparent',
+ border: 'none',
+ borderRadius: '8px',
+ color: '#6b7280',
+ fontSize: '14px',
+ fontFamily: 'inherit',
+ cursor: 'default',
+ transition: 'all 0.2s ease'
+ },
+ navStepActive: {
+ background: 'rgba(255,255,255,0.05)',
+ color: '#fff'
+ },
+ navStepCompleted: {
+ color: '#9ca3af'
+ },
+ navStepNumber: {
+ width: '24px',
+ height: '24px',
+ borderRadius: '6px',
+ background: 'rgba(255,255,255,0.05)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ fontSize: '12px',
+ fontWeight: 600
+ },
+ navStepNumberActive: {
+ background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+ color: '#fff'
+ },
+ navStepLabel: {
+ fontWeight: 500
+ },
+ navRight: {
+ display: 'flex',
+ gap: '12px'
+ },
+ navButton: {
+ padding: '10px 20px',
+ background: 'rgba(255,255,255,0.05)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '8px',
+ color: '#9ca3af',
+ fontSize: '14px',
+ fontWeight: 500,
+ fontFamily: 'inherit',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease'
+ },
+
+ // Main
+ main: {
+ maxWidth: '1400px',
+ margin: '0 auto',
+ padding: '0 48px'
+ },
+
+ // Section
+ section: {
+ padding: '64px 0 120px'
+ },
+ sectionHeader: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ marginBottom: '48px'
+ },
+ sectionLabel: {
+ fontSize: '12px',
+ fontWeight: 600,
+ color: '#3b82f6',
+ letterSpacing: '0.1em',
+ marginBottom: '8px'
+ },
+ sectionTitle: {
+ fontSize: '36px',
+ fontWeight: 700,
+ letterSpacing: '-0.03em',
+ marginBottom: '12px',
+ background: 'linear-gradient(135deg, #fff 0%, #9ca3af 100%)',
+ WebkitBackgroundClip: 'text',
+ WebkitTextFillColor: 'transparent'
+ },
+ sectionDesc: {
+ fontSize: '16px',
+ color: '#6b7280',
+ lineHeight: 1.6
+ },
+
+ // Live Indicator
+ liveIndicator: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '8px',
+ padding: '8px 16px',
+ background: 'rgba(16, 185, 129, 0.1)',
+ borderRadius: '20px',
+ fontSize: '13px',
+ fontWeight: 500,
+ color: '#10b981'
+ },
+ liveDot: {
+ width: '8px',
+ height: '8px',
+ background: '#10b981',
+ borderRadius: '50%',
+ animation: 'pulse 2s ease-in-out infinite'
+ },
+
+ // Indicator Grid (Step 1)
+ indicatorGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(3, 1fr)',
+ gap: '16px',
+ marginBottom: '48px'
+ },
+ indicatorCard: {
+ padding: '28px',
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ borderRadius: '16px',
+ animation: 'fadeIn 0.5s ease forwards',
+ opacity: 0,
+ transition: 'all 0.2s ease'
+ },
+ indicatorHeader: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: '16px'
+ },
+ indicatorName: {
+ fontSize: '14px',
+ color: '#9ca3af',
+ fontWeight: 500
+ },
+ indicatorTrend: {
+ fontSize: '16px',
+ fontWeight: 600
+ },
+ indicatorValue: {
+ display: 'flex',
+ alignItems: 'baseline',
+ gap: '6px'
+ },
+ indicatorNumber: {
+ fontSize: '32px',
+ fontWeight: 700,
+ letterSpacing: '-0.03em',
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+ indicatorUnit: {
+ fontSize: '14px',
+ color: '#6b7280',
+ fontWeight: 500
+ },
+
+ // CTA
+ ctaContainer: {
+ display: 'flex',
+ justifyContent: 'center'
+ },
+ primaryButton: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '16px 32px',
+ background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+ border: 'none',
+ borderRadius: '12px',
+ color: '#fff',
+ fontSize: '15px',
+ fontWeight: 600,
+ fontFamily: 'inherit',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease',
+ boxShadow: '0 4px 24px rgba(59, 130, 246, 0.25)'
+ },
+ secondaryButton: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '16px 32px',
+ background: 'rgba(255,255,255,0.05)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ borderRadius: '12px',
+ color: '#fff',
+ fontSize: '15px',
+ fontWeight: 600,
+ fontFamily: 'inherit',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease'
+ },
+ iconButton: {
+ width: '44px',
+ height: '44px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ background: 'rgba(255,255,255,0.05)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '10px',
+ color: '#9ca3af',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease'
+ },
+
+ // Mode Toggle (Step 2)
+ modeToggleContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ marginBottom: '40px'
+ },
+ modeToggle: {
+ display: 'flex',
+ padding: '4px',
+ background: 'rgba(255,255,255,0.03)',
+ borderRadius: '12px',
+ border: '1px solid rgba(255,255,255,0.06)'
+ },
+ modeButton: {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '12px 24px',
+ background: 'transparent',
+ border: 'none',
+ borderRadius: '8px',
+ color: '#6b7280',
+ fontSize: '14px',
+ fontWeight: 500,
+ fontFamily: 'inherit',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease'
+ },
+ modeButtonActive: {
+ background: 'rgba(255,255,255,0.08)',
+ color: '#fff'
+ },
+
+ // Slider Grid (Step 2)
+ sliderGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(2, 1fr)',
+ gap: '20px',
+ marginBottom: '32px'
+ },
+ sliderCard: {
+ padding: '28px',
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ borderRadius: '16px',
+ animation: 'fadeIn 0.5s ease forwards',
+ opacity: 0
+ },
+ sliderHeader: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: '20px'
+ },
+ sliderName: {
+ fontSize: '15px',
+ fontWeight: 600,
+ color: '#e5e5e5'
+ },
+ deltaTag: {
+ padding: '4px 10px',
+ borderRadius: '6px',
+ fontSize: '12px',
+ fontWeight: 600,
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+ sliderValueRow: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ marginBottom: '24px'
+ },
+ sliderCurrentValue: {
+ textAlign: 'left'
+ },
+ sliderCurrentLabel: {
+ display: 'block',
+ fontSize: '11px',
+ color: '#6b7280',
+ marginBottom: '4px',
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ sliderCurrentNumber: {
+ fontSize: '20px',
+ fontWeight: 600,
+ color: '#6b7280',
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+ sliderSimValue: {
+ textAlign: 'right'
+ },
+ sliderSimLabel: {
+ display: 'block',
+ fontSize: '11px',
+ color: '#3b82f6',
+ marginBottom: '4px',
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ sliderSimNumber: {
+ fontSize: '28px',
+ fontWeight: 700,
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+ sliderUnit: {
+ fontSize: '14px',
+ color: '#6b7280',
+ marginLeft: '4px'
+ },
+ sliderWrapper: {
+ position: 'relative',
+ height: '40px',
+ marginBottom: '8px'
+ },
+ sliderTrack: {
+ position: 'absolute',
+ top: '50%',
+ left: 0,
+ right: 0,
+ height: '4px',
+ background: 'rgba(255,255,255,0.08)',
+ borderRadius: '2px',
+ transform: 'translateY(-50%)'
+ },
+ sliderFill: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ height: '100%',
+ background: 'linear-gradient(90deg, #3b82f6, #8b5cf6)',
+ borderRadius: '2px'
+ },
+ currentMarker: {
+ position: 'absolute',
+ top: '-8px',
+ transform: 'translateX(-50%)',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center'
+ },
+ currentMarkerLine: {
+ width: '2px',
+ height: '20px',
+ background: '#f59e0b',
+ borderRadius: '1px'
+ },
+ currentMarkerLabel: {
+ marginTop: '4px',
+ fontSize: '9px',
+ color: '#f59e0b',
+ fontWeight: 600,
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ sliderInput: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ margin: 0,
+ cursor: 'pointer'
+ },
+ sliderRange: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ fontSize: '11px',
+ color: '#4b5563',
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+
+ // Natural Input (Step 2)
+ naturalInputContainer: {
+ maxWidth: '800px',
+ margin: '0 auto'
+ },
+ naturalInputWrapper: {
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '16px',
+ overflow: 'hidden',
+ marginBottom: '32px'
+ },
+ naturalInput: {
+ width: '100%',
+ padding: '24px',
+ background: 'transparent',
+ border: 'none',
+ color: '#fff',
+ fontSize: '16px',
+ fontFamily: 'inherit',
+ lineHeight: 1.7,
+ resize: 'none',
+ minHeight: '160px',
+ outline: 'none'
+ },
+ naturalInputFooter: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ padding: '16px 24px',
+ borderTop: '1px solid rgba(255,255,255,0.06)',
+ background: 'rgba(255,255,255,0.01)'
+ },
+ naturalInputHint: {
+ fontSize: '13px',
+ color: '#6b7280'
+ },
+ naturalInputButton: {
+ padding: '10px 20px',
+ background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+ border: 'none',
+ borderRadius: '8px',
+ color: '#fff',
+ fontSize: '14px',
+ fontWeight: 600,
+ fontFamily: 'inherit',
+ cursor: 'pointer'
+ },
+ examplePrompts: {
+ marginBottom: '48px'
+ },
+ exampleLabel: {
+ fontSize: '13px',
+ color: '#6b7280',
+ marginBottom: '16px',
+ fontWeight: 500
+ },
+ exampleGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(2, 1fr)',
+ gap: '12px'
+ },
+ exampleButton: {
+ padding: '16px 20px',
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ borderRadius: '10px',
+ color: '#9ca3af',
+ fontSize: '14px',
+ fontFamily: 'inherit',
+ textAlign: 'left',
+ cursor: 'pointer',
+ transition: 'all 0.2s ease'
+ },
+
+ // Summary Bar
+ summaryBar: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ padding: '24px 32px',
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ borderRadius: '16px'
+ },
+ summaryChanges: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '16px'
+ },
+ summaryLabel: {
+ fontSize: '14px',
+ color: '#6b7280',
+ fontWeight: 500
+ },
+ summaryTags: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: '8px'
+ },
+ summaryTag: {
+ padding: '6px 12px',
+ background: 'rgba(255,255,255,0.03)',
+ border: '1px solid',
+ borderRadius: '6px',
+ fontSize: '13px',
+ fontWeight: 500,
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+ summaryEmpty: {
+ fontSize: '14px',
+ color: '#4b5563',
+ fontStyle: 'italic'
+ },
+
+ // Analyzing Indicator
+ analyzingIndicator: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: 'rgba(59, 130, 246, 0.1)',
+ borderRadius: '10px',
+ fontSize: '14px',
+ fontWeight: 500,
+ color: '#3b82f6'
+ },
+ analyzingSpinner: {
+ width: '18px',
+ height: '18px',
+ border: '2px solid rgba(59, 130, 246, 0.2)',
+ borderTopColor: '#3b82f6',
+ borderRadius: '50%',
+ animation: 'spin 0.8s linear infinite'
+ },
+
+ // Agents Grid (Step 3)
+ agentsGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(5, 1fr)',
+ gap: '16px',
+ marginBottom: '48px'
+ },
+ agentCard: {
+ padding: '24px',
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.05)',
+ borderRadius: '16px',
+ animation: 'fadeIn 0.5s ease forwards',
+ opacity: 0,
+ transition: 'all 0.3s ease'
+ },
+ agentCardActive: {
+ background: 'rgba(255,255,255,0.04)'
+ },
+ agentCardCompleted: {
+ background: 'rgba(255,255,255,0.03)'
+ },
+ agentHeader: {
+ display: 'flex',
+ alignItems: 'flex-start',
+ gap: '12px',
+ marginBottom: '20px',
+ position: 'relative'
+ },
+ agentIcon: {
+ width: '48px',
+ height: '48px',
+ borderRadius: '12px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0
+ },
+ agentInfo: {
+ flex: 1,
+ minWidth: 0
+ },
+ agentName: {
+ fontSize: '16px',
+ fontWeight: 600,
+ marginBottom: '4px',
+ transition: 'color 0.3s ease'
+ },
+ agentRole: {
+ fontSize: '11px',
+ color: '#6b7280',
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ agentStatus: {
+ width: '24px',
+ height: '24px',
+ borderRadius: '50%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: '#fff',
+ fontSize: '12px',
+ fontWeight: 700
+ },
+ agentTyping: {
+ display: 'flex',
+ gap: '4px',
+ alignItems: 'center'
+ },
+ typingDot: {
+ width: '6px',
+ height: '6px',
+ background: '#3b82f6',
+ borderRadius: '50%',
+ animation: 'typing 1s ease-in-out infinite'
+ },
+ agentContent: {
+ transition: 'opacity 0.3s ease'
+ },
+ agentPerspective: {
+ marginBottom: '12px'
+ },
+ perspectiveTag: {
+ display: 'inline-block',
+ padding: '4px 10px',
+ borderRadius: '6px',
+ fontSize: '11px',
+ fontWeight: 600,
+ textTransform: 'uppercase',
+ letterSpacing: '0.03em'
+ },
+ agentThinking: {
+ fontSize: '13px',
+ color: '#9ca3af',
+ lineHeight: 1.7,
+ marginBottom: '16px'
+ },
+ agentPosition: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ paddingTop: '12px',
+ borderTop: '1px solid rgba(255,255,255,0.06)'
+ },
+ positionLabel: {
+ fontSize: '11px',
+ color: '#6b7280',
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ positionValue: {
+ fontSize: '13px',
+ fontWeight: 600
+ },
+
+ // Consensus Section
+ consensusSection: {
+ padding: '40px',
+ background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05))',
+ border: '1px solid rgba(255,255,255,0.08)',
+ borderRadius: '20px',
+ animation: 'fadeIn 0.6s ease forwards'
+ },
+ consensusHeader: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '16px',
+ marginBottom: '32px'
+ },
+ consensusIcon: {
+ width: '56px',
+ height: '56px',
+ background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
+ borderRadius: '14px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ color: '#fff'
+ },
+ consensusTitle: {
+ fontSize: '24px',
+ fontWeight: 700,
+ letterSpacing: '-0.02em',
+ marginBottom: '4px'
+ },
+ consensusSubtitle: {
+ fontSize: '14px',
+ color: '#6b7280'
+ },
+ consensusContent: {
+ marginBottom: '32px'
+ },
+ verdictBox: {
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: '12px',
+ padding: '12px 20px',
+ background: 'rgba(255,255,255,0.05)',
+ borderRadius: '10px',
+ marginBottom: '24px'
+ },
+ verdictLabel: {
+ fontSize: '12px',
+ color: '#6b7280',
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ verdictValue: {
+ fontSize: '16px',
+ fontWeight: 600,
+ color: '#f59e0b'
+ },
+ consensusText: {
+ fontSize: '16px',
+ color: '#d1d5db',
+ lineHeight: 1.8,
+ marginBottom: '32px'
+ },
+ impactGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(4, 1fr)',
+ gap: '16px'
+ },
+ impactCard: {
+ padding: '20px',
+ background: 'rgba(255,255,255,0.03)',
+ borderRadius: '12px',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ textAlign: 'center',
+ gap: '8px'
+ },
+ impactEmoji: {
+ fontSize: '28px'
+ },
+ impactLabel: {
+ fontSize: '13px',
+ color: '#6b7280',
+ fontWeight: 500
+ },
+ impactValue: {
+ fontSize: '14px',
+ fontWeight: 600
+ },
+ consensusActions: {
+ display: 'flex',
+ gap: '16px',
+ justifyContent: 'flex-end'
+ },
+
+ // Report (Step 4)
+ reportActions: {
+ display: 'flex',
+ gap: '8px'
+ },
+ reportContainer: {
+ display: 'grid',
+ gridTemplateColumns: '240px 1fr',
+ gap: '48px'
+ },
+ reportSidebar: {
+ position: 'sticky',
+ top: '120px',
+ alignSelf: 'start'
+ },
+ reportSidebarLabel: {
+ fontSize: '11px',
+ color: '#6b7280',
+ textTransform: 'uppercase',
+ letterSpacing: '0.1em',
+ marginBottom: '16px'
+ },
+ reportNav: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '4px'
+ },
+ reportNavItem: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+ padding: '12px 16px',
+ borderRadius: '8px',
+ color: '#6b7280',
+ fontSize: '14px',
+ textDecoration: 'none',
+ transition: 'all 0.2s ease'
+ },
+ reportNavItemActive: {
+ background: 'rgba(255,255,255,0.05)',
+ color: '#fff'
+ },
+ reportNavNumber: {
+ fontSize: '11px',
+ color: '#4b5563',
+ fontFamily: "'JetBrains Mono', monospace"
+ },
+ reportContent: {
+ minWidth: 0
+ },
+ reportMeta: {
+ display: 'flex',
+ gap: '12px',
+ fontSize: '13px',
+ color: '#6b7280',
+ marginBottom: '40px',
+ paddingBottom: '24px',
+ borderBottom: '1px solid rgba(255,255,255,0.06)'
+ },
+ reportArticle: {
+ maxWidth: '720px'
+ },
+ reportH2: {
+ fontSize: '22px',
+ fontWeight: 700,
+ letterSpacing: '-0.02em',
+ marginBottom: '20px',
+ marginTop: '48px',
+ color: '#fff'
+ },
+ reportH3: {
+ fontSize: '17px',
+ fontWeight: 600,
+ marginBottom: '12px',
+ marginTop: '32px'
+ },
+ reportP: {
+ fontSize: '15px',
+ color: '#a1a1aa',
+ lineHeight: 1.8,
+ marginBottom: '20px'
+ },
+ reportTable: {
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ borderRadius: '12px',
+ overflow: 'hidden',
+ marginBottom: '32px'
+ },
+ reportTableHeader: {
+ display: 'grid',
+ gridTemplateColumns: '1fr 1fr 1fr 100px',
+ gap: '16px',
+ padding: '16px 24px',
+ background: 'rgba(255,255,255,0.03)',
+ fontSize: '12px',
+ fontWeight: 600,
+ color: '#6b7280',
+ textTransform: 'uppercase',
+ letterSpacing: '0.05em'
+ },
+ reportTableRow: {
+ display: 'grid',
+ gridTemplateColumns: '1fr 1fr 1fr 100px',
+ gap: '16px',
+ padding: '16px 24px',
+ fontSize: '14px',
+ color: '#d1d5db',
+ borderTop: '1px solid rgba(255,255,255,0.04)'
+ },
+ reportAgentSection: {
+ padding: '24px',
+ background: 'rgba(255,255,255,0.02)',
+ borderRadius: '12px',
+ marginBottom: '16px'
+ },
+ reportAgentPosition: {
+ fontSize: '14px',
+ color: '#9ca3af',
+ marginTop: '12px',
+ paddingTop: '12px',
+ borderTop: '1px solid rgba(255,255,255,0.06)'
+ }
+};
+
+export default MacroEconomicSimulator;