<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");  
?>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스테이블 코인 & 디파이 프레젠테이션</title>
    
    <!-- Fonts: Pretendard -->
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Pretendard', 'sans-serif'],
                    },
                    colors: {
                        background: 'rgb(250, 250, 250)',
                        primary: {
                            DEFAULT: '#2563eb', // blue-600
                            light: '#dbeafe', // blue-100
                            dark: '#1e40af', // blue-800
                            foreground: '#ffffff',
                        },
                        slate: {
                            850: '#1e293b', // Custom dark slate
                        }
                    },
                    borderRadius: {
                        'card': '12px',
                        'pill': '9999px',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.5s ease-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(20px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    
    <!-- Icons: Lucide -->
    <script src="https://unpkg.com/lucide@latest"></script>
    
    <style>
        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f5f9; 
        }
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1; 
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8; 
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            overflow: hidden;
            height: 100vh;
        }

        .presentation {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .slide {
            width: 90%;
            max-width: 1200px;
            max-height: 90vh;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
            padding: 35px 50px;
            position: absolute;
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .slide.active {
            opacity: 1;
            transform: translateY(0);
            z-index: 10;
        }

        .slide h1 {
            font-size: 2em;
            color: #2563eb;
            margin-bottom: 15px;
            animation: slideInLeft 0.8s ease-out;
            font-weight: 800;
        }

        .slide h2 {
            font-size: 1.5em;
            color: #1e40af;
            margin-bottom: 12px;
            margin-top: 15px;
            animation: slideInLeft 0.8s ease-out 0.2s backwards;
            font-weight: 700;
        }

        .slide h3 {
            font-size: 1.2em;
            color: #2563eb;
            margin-bottom: 8px;
            margin-top: 12px;
            animation: fadeIn 0.8s ease-out 0.3s backwards;
            font-weight: 700;
        }

        .slide p, .slide li {
            font-size: 0.95em;
            line-height: 1.5;
            color: #1e293b;
            margin-bottom: 8px;
        }

        .slide ul {
            list-style: none;
            padding-left: 0;
        }

        .slide li {
            padding-left: 30px;
            position: relative;
            animation: slideInRight 0.6s ease-out backwards;
        }

        .slide li:nth-child(1) { animation-delay: 0.4s; }
        .slide li:nth-child(2) { animation-delay: 0.5s; }
        .slide li:nth-child(3) { animation-delay: 0.6s; }
        .slide li:nth-child(4) { animation-delay: 0.7s; }
        .slide li:nth-child(5) { animation-delay: 0.8s; }

        .slide li:before {
            content: "→";
            position: absolute;
            left: 0;
            color: #2563eb;
            font-weight: bold;
            font-size: 1.2em;
        }

        .highlight-box {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            border-left: 4px solid #2563eb;
            padding: 12px 15px;
            margin: 10px 0;
            border-radius: 12px;
            animation: scaleIn 0.6s ease-out 0.5s backwards;
            border: 1px solid #e0e7ff;
        }

        .info-card {
            background: #f8fafc;
            border-radius: 12px;
            padding: 12px 15px;
            margin: 8px 0;
            box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
            animation: slideInUp 0.6s ease-out backwards;
            border: 1px solid #e2e8f0;
        }

        .info-card:nth-child(1) { animation-delay: 0.4s; }
        .info-card:nth-child(2) { animation-delay: 0.5s; }
        .info-card:nth-child(3) { animation-delay: 0.6s; }

        .info-card h4 {
            color: #1e40af;
            font-size: 1.1em;
            margin-bottom: 6px;
            font-weight: 700;
        }

        .controls {
            position: fixed;
            bottom: 30px;
            right: 30px;
            display: flex;
            gap: 15px;
            z-index: 100;
        }

        .btn {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 9999px;
            font-size: 1.1em;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
            background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
        }

        .btn:active {
            transform: translateY(0);
        }

        .slide-counter {
            position: fixed;
            bottom: 30px;
            left: 30px;
            background: rgba(255, 255, 255, 0.95);
            padding: 12px 24px;
            border-radius: 9999px;
            font-size: 1.1em;
            color: #2563eb;
            font-weight: 700;
            z-index: 100;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(37, 99, 235, 0.1);
        }

        .cover-slide {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .cover-slide h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }

        .cover-slide .subtitle {
            font-size: 1.3em;
            color: #64748b;
            margin-bottom: 30px;
            animation: fadeIn 1s ease-out 0.5s backwards;
        }

        .cover-slide .date {
            font-size: 1.1em;
            color: #94a3b8;
            animation: fadeIn 1s ease-out 0.7s backwards;
        }

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 15px 0;
        }

        .emoji {
            font-size: 1.3em;
            margin-right: 8px;
        }

        .slide-content {
            flex: 1;
            overflow-y: auto;
            padding-right: 10px;
        }

        .slide::-webkit-scrollbar {
            width: 8px;
        }

        .slide::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 10px;
        }

        .slide::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            border-radius: 10px;
        }

        .slide::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
        }

        @media (max-width: 768px) {
            .slide {
                padding: 25px 30px;
                width: 95%;
            }

            .controls {
                bottom: 15px;
                right: 15px;
            }

            .btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }

            .slide-counter {
                bottom: 15px;
                left: 15px;
                padding: 8px 15px;
                font-size: 0.9em;
            }

            .slide h1 {
                font-size: 1.5em;
            }

            .slide h2 {
                font-size: 1.2em;
            }

            .grid-2 {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body class="bg-background text-slate-800 antialiased min-h-screen">

    <!-- Navigation / Header -->
    <header class="bg-white border-b border-slate-100 sticky top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white font-bold shadow-md">
                    S
                </div>
                <h1 class="text-lg font-bold text-slate-900 tracking-tight">스테이블 코인 & 디파이</h1>
            </div>
            <div class="flex items-center gap-4">
                <a href="../index.php" class="text-sm text-slate-500 hover:text-slate-900 flex items-center gap-1 font-medium transition-colors">
                    <i data-lucide="home" class="w-4 h-4"></i>
                    홈으로
                </a>
                <div class="h-4 w-px bg-slate-200"></div>
                <span class="text-xs font-medium px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full">프레젠테이션</span>
            </div>
        </div>
    </header>

    <div class="presentation">
        <!-- Slide 1: Cover -->
        <div class="slide active cover-slide">
            <h1>스테이블 코인 & 디파이</h1>
            <p class="subtitle">사업 검토 및 개요 설명</p>
            <p class="date">2025년 10월 28일</p>
        </div>

        <!-- Slide 2: 목차 -->
        <div class="slide">
            <h1>목차</h1>
            <div class="info-card">
                <h3>1. 왜 지금 스테이블 코인인가?</h3>
                <p>시장 환경 변화와 필요성</p>
            </div>
            <div class="info-card">
                <h3>2. 스테이블 코인의 정의와 종류</h3>
                <p>담보형, 암호자산형, 알고리즘형</p>
            </div>
            <div class="info-card">
                <h3>3. 디파이와 스테이블 코인</h3>
                <p>생태계 연관성 및 주요 서비스</p>
            </div>
            <div class="info-card">
                <h3>4. 사업적 시사점</h3>
                <p>기회와 위험 요소</p>
            </div>
            <div class="info-card">
                <h3>5. 결론 및 제언</h3>
                <p>실행 과제 및 전략 방향</p>
            </div>
        </div>

        <!-- Slide 3: 왜 지금 스테이블 코인인가? -->
        <div class="slide">
            <h1>왜 지금 스테이블 코인인가?</h1>
            
            <div class="highlight-box">
                <h3><span class="emoji">📊</span>시장 환경 변화</h3>
                <ul>
                    <li>암호화폐 시장은 변동성이 크지만, 거래·결제 수단으로는 안정성이 필요</li>
                    <li>스테이블 코인은 법정화폐와 1:1로 가치가 연동되어 가격 변동성이 적음</li>
                </ul>
            </div>

            <div class="highlight-box">
                <h3><span class="emoji">🚀</span>디파이 생태계의 급성장</h3>
                <ul>
                    <li>디파이가 급성장하면서 스테이블 코인은 "디지털 달러" 역할 수행</li>
                    <li>예치, 대출, 거래 등 모든 디파이 서비스의 기축통화로 활용</li>
                </ul>
            </div>

            <div class="highlight-box">
                <h3><span class="emoji">🌍</span>글로벌 기업의 시장 진입</h3>
                <ul>
                    <li>페이팔, 서클, 비자 등 글로벌 기업들이 이미 시장 진입</li>
                    <li>한국도 규제 논의가 본격화되며 제도권 편입 예상</li>
                </ul>
            </div>
        </div>

        <!-- Slide 4: 스테이블 코인의 정의 -->
        <div class="slide">
            <h1>스테이블 코인의 정의와 종류</h1>
            
            <div class="highlight-box">
                <h3>정의</h3>
                <p>블록체인 상에서 법정화폐나 특정 자산에 가치가 고정된 암호화폐</p>
            </div>

            <h2>주요 종류</h2>
            
            <div class="info-card">
                <h4><span class="emoji">💵</span>법정화폐 담보형</h4>
                <p><strong>방식:</strong> 실제 은행 계좌에 달러/원화 예치 → 같은 가치만큼 토큰 발행</p>
                <p><strong>예시:</strong> USDC, USDT</p>
                <p><strong>장점:</strong> 가치 안정성이 높고 신뢰성 확보 용이</p>
                <p><strong>단점:</strong> 중앙화된 발행 주체에 대한 의존도 높음</p>
            </div>

            <div class="info-card">
                <h4><span class="emoji">🔗</span>암호자산 담보형</h4>
                <p><strong>방식:</strong> ETH, BTC 등 암호자산을 초과 담보로 예치</p>
                <p><strong>예시:</strong> DAI (메이커다오)</p>
                <p><strong>장점:</strong> 탈중앙화, 투명성</p>
                <p><strong>단점:</strong> 자본 효율성이 낮고 담보 자산 변동성 위험</p>
            </div>
        </div>

        <!-- Slide 5: 알고리즘형 -->
        <div class="slide">
            <h1>스테이블 코인 종류 (계속)</h1>
            
            <div class="info-card">
                <h4><span class="emoji">⚙️</span>알고리즘형</h4>
                <p><strong>방식:</strong> 담보 없이 공급량을 알고리즘으로 자동 조정하여 1:1 가치 유지</p>
                <p><strong>예시:</strong> 루나(LUNA) - 2022년 붕괴</p>
                <p><strong>장점:</strong> 자본 효율성이 높음</p>
                <p><strong>단점:</strong> 시장 신뢰도 부족, 시스템 안정성 문제</p>
            </div>

            <div class="highlight-box">
                <h3>💡 핵심 인사이트</h3>
                <p>현재 시장에서는 <strong>법정화폐 담보형</strong>이 가장 널리 사용되고 있으며, 규제 당국도 이 방식을 선호하는 추세입니다.</p>
            </div>
        </div>

        <!-- Slide 6: 디파이 정의 -->
        <div class="slide">
            <h1>디파이(DeFi)와 스테이블 코인</h1>
            
            <div class="highlight-box">
                <h2>디파이(DeFi)란?</h2>
                <p>중앙 기관 없이 블록체인 기반 스마트 컨트랙트로 운영되는 금융 서비스</p>
                <p>은행, 증권사 등 전통 금융 중개자 없이 개인 간 직접 거래 가능</p>
            </div>

            <h2>주요 디파이 서비스</h2>
            
            <div class="grid-2">
                <div class="info-card">
                    <h4>Uniswap (유니스왑)</h4>
                    <p>탈중앙 거래소(DEX)</p>
                    <p>자동화된 유동성 풀 방식</p>
                </div>

                <div class="info-card">
                    <h4>Aave / Compound</h4>
                    <p>예치 및 대출 프로토콜</p>
                    <p>이자 수익 또는 담보 대출</p>
                </div>
            </div>

            <div class="info-card">
                <h4>Curve (커브)</h4>
                <p>스테이블 코인 교환 특화 프로토콜</p>
                <p>낮은 슬리피지로 대량 거래 가능</p>
            </div>
        </div>

        <!-- Slide 7: 스테이블 코인의 역할 -->
        <div class="slide">
            <h1>디파이에서 스테이블 코인의 역할</h1>
            
            <div class="info-card">
                <h3><span class="emoji">💰</span>기축통화</h3>
                <p>모든 거래 쌍의 기준이 되는 통화</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">💳</span>결제 수단</h3>
                <p>실시간 국경 간 결제 및 송금</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">📈</span>예치 자산</h3>
                <p>이자 수익을 창출하는 안정적인 자산</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🔒</span>대출 담보</h3>
                <p>변동성 없는 안정적인 담보 자산</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">💧</span>유동성 공급</h3>
                <p>거래소 및 프로토콜의 유동성 제공</p>
            </div>
        </div>

        <!-- Slide 8: 사업 기회 -->
        <div class="slide">
            <h1>사업적 시사점: 기회</h1>
            
            <h2>우리 회사와의 연결 포인트</h2>

            <div class="info-card">
                <h3><span class="emoji">💳</span>결제 솔루션 확장</h3>
                <ul>
                    <li>실시간 국경 간 결제 가능</li>
                    <li>낮은 수수료로 경쟁력 확보</li>
                    <li>24시간 365일 즉시 결제 처리</li>
                    <li>글로벌 고객층 확대</li>
                </ul>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🏦</span>예치 및 적립 서비스</h3>
                <ul>
                    <li>디파이 프로토콜을 통한 수익 창출</li>
                    <li>실시간 잔액 확인 및 투명한 운영</li>
                    <li>글로벌 고객 대상 서비스 제공</li>
                </ul>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🌏</span>해외 거래 편의성 강화</h3>
                <ul>
                    <li>환율 변동 리스크 최소화</li>
                    <li>송금 시간 및 비용 절감</li>
                    <li>중개 은행 없는 직접 거래</li>
                </ul>
            </div>
        </div>

        <!-- Slide 9: 위험 요소 -->
        <div class="slide">
            <h1>사업적 시사점: 위험 요소</h1>
            
            <div class="info-card">
                <h3><span class="emoji">⚖️</span>규제 불확실성</h3>
                <p>국내외 스테이블 코인 및 디파이 관련 규제가 아직 완전히 정립되지 않음</p>
                <p>향후 규제 변화에 따라 사업 모델 조정 필요</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🤝</span>신뢰 확보 과제</h3>
                <p>담보 자산의 투명한 관리와 정기적인 감사 필수</p>
                <p>고객 신뢰 구축을 위한 지속적인 노력 요구</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🔧</span>기술적 안정성</h3>
                <p>스마트 컨트랙트 버그, 해킹 위험</p>
                <p>블록체인 네트워크 장애에 대한 철저한 대비 필요</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🏆</span>경쟁 환경</h3>
                <p>글로벌 대기업들이 이미 시장에 진입</p>
                <p>차별화된 경쟁력 확보 중요</p>
            </div>
        </div>

        <!-- Slide 10: 결론 - 단기 -->
        <div class="slide">
            <h1>결론 및 제언</h1>
            
            <div class="highlight-box">
                <h2>핵심 요약</h2>
                <p>스테이블 코인은 단순한 암호화폐가 아니라 <strong>새로운 결제 및 금융 인프라</strong>로 자리잡고 있습니다.</p>
            </div>

            <h2><span class="emoji">⚡</span>단기 실행 과제</h2>

            <div class="info-card">
                <h4>1. 시장 모니터링 체계 구축</h4>
                <p>스테이블 코인 및 디파이 시장 동향과 주요 규제 변화를 지속적으로 추적</p>
            </div>

            <div class="info-card">
                <h4>2. 파일럿 프로젝트 검토</h4>
                <p>소규모 파일럿으로 기술적 타당성과 고객 수용도 테스트</p>
            </div>

            <div class="info-card">
                <h4>3. 전문 인력 확보</h4>
                <p>블록체인, 스마트 컨트랙트, 디파이 전문 지식 보유 인력 확보 또는 교육</p>
            </div>
        </div>

        <!-- Slide 11: 결론 - 중장기 -->
        <div class="slide">
            <h1>중장기 전략 방향</h1>

            <div class="info-card">
                <h3><span class="emoji">🌍</span>글로벌 확장성 확보</h3>
                <p>스테이블 코인 기반 결제 및 거래 시스템 도입</p>
                <p>국경을 넘어선 글로벌 서비스 제공 인프라 구축</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">💡</span>금융 혁신성 강화</h3>
                <p>기존 금융 서비스와 블록체인 기술 결합</p>
                <p>차별화된 고객 가치 창출 및 시장 선도 기업 입지 확보</p>
            </div>

            <div class="info-card">
                <h3><span class="emoji">🤝</span>전략적 파트너십 구축</h3>
                <p>스테이블 코인 발행사, 디파이 프로토콜과의 협력</p>
                <p>블록체인 인프라 제공 업체와 생태계 내 입지 강화</p>
            </div>

            <div class="highlight-box">
                <h3>최종 제언</h3>
                <p>점진적 준비를 통해 <strong>글로벌 확장성</strong>과 <strong>금융 혁신성</strong>을 동시에 확보하여 경쟁 우위를 선점할 수 있습니다.</p>
            </div>
        </div>

        <!-- Slide 12: Thank You -->
        <div class="slide cover-slide">
            <h1>감사합니다</h1>
            <p class="subtitle">Questions & Discussion</p>
        </div>
    </div>

    <div class="slide-counter">
        <span id="current-slide">1</span> / <span id="total-slides">12</span>
    </div>

    <div class="controls">
        <button class="btn" onclick="prevSlide()">← 이전</button>
        <button class="btn" onclick="nextSlide()">다음 →</button>
    </div>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        const totalSlides = slides.length;

        document.getElementById('total-slides').textContent = totalSlides;

        function showSlide(n) {
            slides[currentSlide].classList.remove('active');
            currentSlide = (n + totalSlides) % totalSlides;
            slides[currentSlide].classList.add('active');
            document.getElementById('current-slide').textContent = currentSlide + 1;
        }

        function nextSlide() {
            showSlide(currentSlide + 1);
        }

        function prevSlide() {
            showSlide(currentSlide - 1);
        }

        // 키보드 네비게이션
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === ' ') {
                nextSlide();
            } else if (e.key === 'ArrowLeft') {
                prevSlide();
            }
        });

        // 터치 스와이프 지원
        let touchStartX = 0;
        let touchEndX = 0;

        document.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });

        document.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        });

        function handleSwipe() {
            if (touchEndX < touchStartX - 50) {
                nextSlide();
            }
            if (touchEndX > touchStartX + 50) {
                prevSlide();
            }
        }
        
        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    </script>
</body>
</html>
