<?php
require_once($_SERVER['DOCUMENT_ROOT'] . "/session.php");
$root_dir = dirname($_SERVER['PHP_SELF']);
?>

<!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%);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .presentation-container {
            width: 100%;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .slide {
            width: 100%;
            height: 100vh;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 40px;
            position: absolute;
            top: 0;
            left: 0;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .slide.active {
            display: flex;
            animation: slideInRight 0.5s ease-out;
        }

        .slide-content {
            background: rgba(255, 255, 255, 0.98);
            border-radius: 24px;
            padding: 60px;
            max-width: 1200px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
            animation: fadeIn 0.8s ease-out;
            margin: auto 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        h1 {
            color: #2563eb;
            font-size: 3em;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 800;
        }

        h2 {
            color: #1e40af;
            font-size: 2.5em;
            margin-bottom: 30px;
            text-align: center;
            border-bottom: 3px solid #2563eb;
            padding-bottom: 15px;
            font-weight: 700;
        }

        h3 {
            color: #2563eb;
            font-size: 1.8em;
            margin: 25px 0 15px 0;
            font-weight: 700;
        }

        p, li {
            font-size: 1.2em;
            line-height: 1.8;
            color: #1e293b;
            margin-bottom: 15px;
        }

        ul {
            margin-left: 30px;
        }

        .company-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .info-card {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
            padding: 25px;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
            animation: scaleIn 0.5s ease-out;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .info-card h4 {
            font-size: 1.3em;
            margin-bottom: 10px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 8px;
        }

        .pricing-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 1.1em;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            animation: slideInLeft 0.5s ease-out;
        }

        .pricing-table thead tr {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
            text-align: left;
        }

        .pricing-table th,
        .pricing-table td {
            padding: 15px;
            border: 1px solid #ddd;
        }

        .pricing-table tbody tr {
            background: white;
        }

        .pricing-table tbody tr:nth-of-type(even) {
            background: #f3f3f3;
        }

        .pricing-table tbody tr:hover {
            background: #e8e8ff;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 1em;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .comparison-table thead tr {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
        }

        .comparison-table tbody tr:nth-of-type(even) {
            background: #f3f3f3;
        }

        .highlight {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
            padding: 5px 10px;
            border-radius: 8px;
            font-weight: 700;
        }

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

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

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

        .nav-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .slide-number {
            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: 1000;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(37, 99, 235, 0.1);
        }

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

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

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

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

        .feature-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .feature-item {
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            border-left: 4px solid #2563eb;
            border: 1px solid #e2e8f0;
            border-left-width: 4px;
        }

        .conclusion-box {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            color: white;
            padding: 30px;
            border-radius: 16px;
            margin: 20px 0;
            text-align: center;
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

        .conclusion-box p {
            color: white;
        }

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

            h1 {
                font-size: 2em;
            }

            h2 {
                font-size: 1.8em;
            }

            h3 {
                font-size: 1.4em;
            }

            p, li {
                font-size: 1em;
            }

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

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

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

            .pricing-table,
            .comparison-table {
                font-size: 0.8em;
            }

            .pricing-table th,
            .pricing-table td,
            .comparison-table th,
            .comparison-table td {
                padding: 8px;
            }
        }
    </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-container">
        <!-- Slide 1: Cover -->
        <div class="slide active">
            <div class="slide-content">
                <h1>장기적 세무전략</h1>
                <h2 style="border: none; color: #2563eb;">통합 세무 관리 시스템 중장기 계획안</h2>
                <div style="text-align: center; margin-top: 50px;">
                    <p style="font-size: 1.5em; color: #1e40af; font-weight: 600;">기획 · 디자인 · 백엔드 · 프론트엔드</p>
                    <p style="margin-top: 30px; color: #64748b;">2025년 세무 자동화 솔루션 - 중장기 발전 계획</p>
                </div>
            </div>
        </div>

        <!-- Slide 2: Table of Contents -->
        <div class="slide">
            <div class="slide-content">
                <h2>목차</h2>
                <div style="margin-top: 40px;">
                    <div class="feature-item">
                        <h3 style="margin: 0; font-size: 1.3em;">1-4. 프로젝트 개요</h3>
                        <p style="margin: 10px 0 0 0;">비전, 목표, 핵심 가치, 기대 효과</p>
                    </div>
                    <div class="feature-item">
                        <h3 style="margin: 0; font-size: 1.3em;">5-8. 기획 관점</h3>
                        <p style="margin: 10px 0 0 0;">요구사항 정의, 사용자 시나리오, 기능 명세</p>
                    </div>
                    <div class="feature-item">
                        <h3 style="margin: 0; font-size: 1.3em;">9-11. 디자인 관점</h3>
                        <p style="margin: 10px 0 0 0;">UI/UX 전략, 디자인 시스템, 사용자 경험</p>
                    </div>
                    <div class="feature-item">
                        <h3 style="margin: 0; font-size: 1.3em;">12-14. 백엔드 관점</h3>
                        <p style="margin: 10px 0 0 0;">시스템 아키텍처, 데이터베이스 설계, API 설계</p>
                    </div>
                    <div class="feature-item">
                        <h3 style="margin: 0; font-size: 1.3em;">15-16. 프론트엔드 관점</h3>
                        <p style="margin: 10px 0 0 0;">기술 스택, 컴포넌트 구조, 개발 로드맵</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 3: Project Vision -->
        <div class="slide">
            <div class="slide-content">
                <h2>프로젝트 비전</h2>
                <div class="conclusion-box">
                    <h3 style="color: white; margin-top: 0;">세무 업무의 디지털 혁신</h3>
                    <p style="font-size: 1.3em;">복잡한 세무 업무를 자동화하고, 전략적 의사결정을 지원하는 통합 플랫폼</p>
                </div>

                <div style="margin-top: 30px;">
                    <h3>핵심 목표</h3>
                    <div class="feature-list">
                        <div class="feature-item">
                            <h4>⚡ 업무 자동화</h4>
                            <p>반복적인 세무 업무를 90% 이상 자동화</p>
                        </div>
                        <div class="feature-item">
                            <h4>📊 데이터 통합</h4>
                            <p>회계, 인사, 영업 데이터의 실시간 통합</p>
                        </div>
                        <div class="feature-item">
                            <h4>🛡️ 리스크 관리</h4>
                            <p>세무 리스크 사전 감지 및 알림</p>
                        </div>
                        <div class="feature-item">
                            <h4>📈 전략 수립</h4>
                            <p>데이터 기반 세무 전략 의사결정 지원</p>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>주요 타겟 사용자</h3>
                    <ul>
                        <li><strong>세무사/회계사:</strong> 전문가용 세무 관리 도구</li>
                        <li><strong>기업 재무팀:</strong> 내부 세무 업무 자동화</li>
                        <li><strong>중소기업:</strong> 간편한 세무 컴플라이언스 관리</li>
                        <li><strong>스타트업:</strong> 초기 세무 구조 설계 지원</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 4: Core Values -->
        <div class="slide">
            <div class="slide-content">
                <h2>핵심 가치 제안</h2>
                <div class="company-info">
                    <div class="info-card">
                        <h4>🤖 자동화</h4>
                        <p>세금 계산, 신고서 작성, 납부 관리 자동화</p>
                        <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">매월 80시간 업무 시간 절감</p>
                    </div>
                    <div class="info-card">
                        <h4>🔗 통합성</h4>
                        <p>회계 시스템, ERP, 급여 시스템 연동</p>
                        <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">데이터 이중 입력 제거</p>
                    </div>
                    <div class="info-card">
                        <h4>📱 접근성</h4>
                        <p>클라우드 기반 언제 어디서나 접근</p>
                        <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">PC, 태블릿, 모바일 지원</p>
                    </div>
                    <div class="info-card">
                        <h4>🎯 정확성</h4>
                        <p>최신 세법 자동 반영 및 검증</p>
                        <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">인적 오류 95% 감소</p>
                    </div>
                    <div class="info-card">
                        <h4>💡 인사이트</h4>
                        <p>AI 기반 세무 최적화 제안</p>
                        <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">절세 기회 자동 발견</p>
                    </div>
                    <div class="info-card">
                        <h4>🔐 보안</h4>
                        <p>금융권 수준의 데이터 보안</p>
                        <p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">암호화 및 접근 제어</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 5: Planning - Requirements -->
        <div class="slide">
            <div class="slide-content">
                <h2>기획: 기능 요구사항</h2>
                <div style="margin-top: 30px;">
                    <h3>1. 세무 신고 관리</h3>
                    <ul>
                        <li>부가가치세 신고서 자동 작성 및 전송</li>
                        <li>법인세/소득세 예정/확정 신고 관리</li>
                        <li>원천세 신고 및 납부 스케줄링</li>
                        <li>지방세 통합 관리 (취득세, 재산세 등)</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>2. 세무 회계 처리</h3>
                    <ul>
                        <li>매입매출 전표 자동 분개 처리</li>
                        <li>계정과목 자동 매핑 및 학습</li>
                        <li>세무조정 항목 관리</li>
                        <li>손익계산서 및 재무상태표 생성</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>3. 증빙 관리</h3>
                    <ul>
                        <li>전자세금계산서 발행 및 수신</li>
                        <li>현금영수증 및 카드매출 통합</li>
                        <li>증빙 스캔 및 OCR 자동 인식</li>
                        <li>증빙 보관 및 검색 시스템</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 6: Planning - User Scenarios -->
        <div class="slide">
            <div class="slide-content">
                <h2>기획: 사용자 시나리오</h2>

                <div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb;">
                    <h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 1: 부가세 신고 프로세스</h3>
                    <ol style="color: #333;">
                        <li><strong>데이터 수집:</strong> ERP 및 회계 시스템에서 매입/매출 데이터 자동 수집</li>
                        <li><strong>검증:</strong> AI 기반 이상 거래 탐지 및 알림</li>
                        <li><strong>신고서 작성:</strong> 부가세 신고서 자동 생성 및 미리보기</li>
                        <li><strong>승인:</strong> 담당자 검토 및 전자서명</li>
                        <li><strong>전송:</strong> 국세청 홈택스 자동 전송</li>
                        <li><strong>납부:</strong> 계좌 연동 자동 납부 또는 납부서 출력</li>
                    </ol>
                </div>

                <div style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af;">
                    <h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 2: 절세 전략 수립</h3>
                    <ol style="color: #333;">
                        <li><strong>현황 분석:</strong> 현재 세무 부담 및 비용 구조 분석</li>
                        <li><strong>시뮬레이션:</strong> 다양한 절세 시나리오 자동 시뮬레이션</li>
                        <li><strong>추천:</strong> AI 기반 최적 절세 방안 제시</li>
                        <li><strong>실행:</strong> 선택한 전략의 단계별 실행 가이드</li>
                        <li><strong>모니터링:</strong> 효과 추적 및 리포팅</li>
                    </ol>
                </div>

                <div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb;">
                    <h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 3: 세무 감사 대응</h3>
                    <ol style="color: #333;">
                        <li><strong>자료 준비:</strong> 요청 자료 자동 추출 및 정리</li>
                        <li><strong>리스크 분석:</strong> 감사 포인트 사전 분석</li>
                        <li><strong>문서 생성:</strong> 소명 자료 및 답변서 작성 지원</li>
                        <li><strong>이력 관리:</strong> 감사 진행 상황 추적</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Slide 7: Planning - Advanced Features -->
        <div class="slide">
            <div class="slide-content">
                <h2>기획: 고급 기능</h2>

                <div class="feature-list">
                    <div class="feature-item">
                        <h4>🤖 AI 세무 어시스턴트</h4>
                        <p>자연어 질의응답으로 세무 문의 즉시 해결</p>
                        <p style="font-size: 0.9em; margin-top: 5px; color: #666;">"이번 달 부가세 예상액은?" 같은 질문에 즉시 답변</p>
                    </div>
                    <div class="feature-item">
                        <h4>📊 세무 대시보드</h4>
                        <p>실시간 세무 현황 및 KPI 모니터링</p>
                        <p style="font-size: 0.9em; margin-top: 5px; color: #666;">납부 일정, 세부담률, 공제 현황 한눈에 확인</p>
                    </div>
                    <div class="feature-item">
                        <h4>⚠️ 리스크 알림</h4>
                        <p>세무 리스크 사전 감지 및 예방</p>
                        <p style="font-size: 0.9em; margin-top: 5px; color: #666;">신고 누락, 기한 임박, 이상 거래 자동 알림</p>
                    </div>
                    <div class="feature-item">
                        <h4>📈 절세 시뮬레이터</h4>
                        <p>다양한 시나리오별 세금 영향 분석</p>
                        <p style="font-size: 0.9em; margin-top: 5px; color: #666;">투자, 채용, 구조조정 시 세무 영향 사전 검토</p>
                    </div>
                    <div class="feature-item">
                        <h4>🔗 외부 시스템 연동</h4>
                        <p>ERP, 급여, 회계 시스템 자동 연동</p>
                        <p style="font-size: 0.9em; margin-top: 5px; color: #666;">더존, 영림원, SAP, 더블린 등 주요 시스템 지원</p>
                    </div>
                    <div class="feature-item">
                        <h4>📱 모바일 승인</h4>
                        <p>언제 어디서나 신고서 검토 및 승인</p>
                        <p style="font-size: 0.9em; margin-top: 5px; color: #666;">푸시 알림 및 생체인증 기반 전자서명</p>
                    </div>
                </div>

                <div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
                    <h3 style="margin-top: 0; color: #92400e; font-weight: 700;">컴플라이언스 기능</h3>
                    <ul style="color: #78350f;">
                        <li><strong>세법 자동 업데이트:</strong> 개정 세법 자동 반영 및 영향 분석</li>
                        <li><strong>전자신고 통합:</strong> 홈택스, 위택스 등 전자신고 시스템 연동</li>
                        <li><strong>감사 추적:</strong> 모든 세무 처리 이력 완벽 기록 및 추적</li>
                        <li><strong>권한 관리:</strong> 역할 기반 접근 제어 및 승인 워크플로우</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 8: Planning - User Roles -->
        <div class="slide">
            <div class="slide-content">
                <h2>기획: 사용자 권한 체계</h2>

                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>역할</th>
                            <th>주요 권한</th>
                            <th>접근 범위</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>시스템 관리자</strong></td>
                            <td>전체 시스템 설정, 사용자 관리, 감사 로그 조회</td>
                            <td>전체</td>
                        </tr>
                        <tr>
                            <td><strong>세무 책임자</strong></td>
                            <td>신고서 최종 승인, 전략 수립, 리포트 생성</td>
                            <td>전체 세무 데이터</td>
                        </tr>
                        <tr>
                            <td><strong>세무 담당자</strong></td>
                            <td>신고서 작성, 증빙 처리, 세무조정</td>
                            <td>담당 업무 데이터</td>
                        </tr>
                        <tr>
                            <td><strong>회계 담당자</strong></td>
                            <td>전표 입력, 계정 관리, 증빙 등록</td>
                            <td>회계 데이터</td>
                        </tr>
                        <tr>
                            <td><strong>경영진</strong></td>
                            <td>대시보드 조회, 리포트 확인 (읽기 전용)</td>
                            <td>요약 데이터</td>
                        </tr>
                        <tr>
                            <td><strong>외부 세무사</strong></td>
                            <td>자문, 검토, 신고 대행 (제한적 접근)</td>
                            <td>위임받은 데이터</td>
                        </tr>
                    </tbody>
                </table>

                <div style="margin-top: 30px;">
                    <h3>워크플로우 승인 체계</h3>
                    <div style="background: #f1f5f9; padding: 20px; border-radius: 12px; margin: 15px 0; border: 1px solid #e2e8f0;">
                        <p><strong>1단계:</strong> 세무 담당자가 신고서 작성</p>
                        <p><strong>2단계:</strong> 회계 담당자가 데이터 검증</p>
                        <p><strong>3단계:</strong> 세무 책임자가 최종 승인</p>
                        <p><strong>4단계:</strong> 시스템 자동 전송 또는 경영진 통보</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 9: Design - UI/UX Strategy -->
        <div class="slide">
            <div class="slide-content">
                <h2>디자인: UI/UX 전략</h2>

                <div class="conclusion-box">
                    <h3 style="color: white; margin-top: 0;">디자인 철학</h3>
                    <p style="font-size: 1.2em;">"복잡한 세무를 단순하게, 전문성을 직관적으로"</p>
                </div>

                <div style="margin-top: 30px;">
                    <h3>핵심 디자인 원칙</h3>
                    <div class="feature-list">
                        <div class="feature-item">
                            <h4>🎯 단순성</h4>
                            <p>복잡한 세무 프로세스를 단계별로 분해</p>
                            <p style="font-size: 0.9em; color: #666;">마법사(Wizard) 형태의 진행 방식</p>
                        </div>
                        <div class="feature-item">
                            <h4>📊 시각화</h4>
                            <p>숫자와 데이터를 직관적인 차트로 표현</p>
                            <p style="font-size: 0.9em; color: #666;">인포그래픽 중심의 대시보드</p>
                        </div>
                        <div class="feature-item">
                            <h4>⚡ 효율성</h4>
                            <p>최소 클릭으로 작업 완료</p>
                            <p style="font-size: 0.9em; color: #666;">자주 쓰는 기능 빠른 실행</p>
                        </div>
                        <div class="feature-item">
                            <h4>🎨 일관성</h4>
                            <p>통일된 디자인 언어 및 패턴</p>
                            <p style="font-size: 0.9em; color: #666;">학습 곡선 최소화</p>
                        </div>
                        <div class="feature-item">
                            <h4>♿ 접근성</h4>
                            <p>WCAG 2.1 AA 레벨 준수</p>
                            <p style="font-size: 0.9em; color: #666;">키보드 내비게이션 완벽 지원</p>
                        </div>
                        <div class="feature-item">
                            <h4>📱 반응형</h4>
                            <p>모든 디바이스에서 최적 경험</p>
                            <p style="font-size: 0.9em; color: #666;">PC, 태블릿, 모바일 대응</p>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>컬러 시스템</h3>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 15px;">
                        <div style="background: #2563eb; color: white; padding: 20px; border-radius: 12px; text-align: center;">
                            <p style="margin: 0; color: white; font-weight: 700;"><strong>Primary</strong></p>
                            <p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#2563eb</p>
                        </div>
                        <div style="background: #10b981; color: white; padding: 20px; border-radius: 12px; text-align: center;">
                            <p style="margin: 0; color: white; font-weight: 700;"><strong>Success</strong></p>
                            <p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#10b981</p>
                        </div>
                        <div style="background: #f59e0b; color: white; padding: 20px; border-radius: 12px; text-align: center;">
                            <p style="margin: 0; color: white; font-weight: 700;"><strong>Warning</strong></p>
                            <p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#f59e0b</p>
                        </div>
                        <div style="background: #ef4444; color: white; padding: 20px; border-radius: 12px; text-align: center;">
                            <p style="margin: 0; color: white; font-weight: 700;"><strong>Danger</strong></p>
                            <p style="margin: 5px 0 0 0; font-size: 0.9em; color: white;">#ef4444</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 10: Design - Design System -->
        <div class="slide">
            <div class="slide-content">
                <h2>디자인: 디자인 시스템</h2>

                <div style="margin-top: 30px;">
                    <h3>컴포넌트 라이브러리</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>컴포넌트</th>
                                <th>용도</th>
                                <th>변형</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>Button</strong></td>
                                <td>주요 액션 실행</td>
                                <td>Primary, Secondary, Outline, Text</td>
                            </tr>
                            <tr>
                                <td><strong>Card</strong></td>
                                <td>정보 그룹핑</td>
                                <td>Basic, Elevated, Outlined</td>
                            </tr>
                            <tr>
                                <td><strong>Table</strong></td>
                                <td>데이터 표시</td>
                                <td>Sortable, Filterable, Paginated</td>
                            </tr>
                            <tr>
                                <td><strong>Form</strong></td>
                                <td>데이터 입력</td>
                                <td>Input, Select, Datepicker, Autocomplete</td>
                            </tr>
                            <tr>
                                <td><strong>Modal</strong></td>
                                <td>팝업 대화상자</td>
                                <td>Alert, Confirm, Form</td>
                            </tr>
                            <tr>
                                <td><strong>Chart</strong></td>
                                <td>데이터 시각화</td>
                                <td>Line, Bar, Pie, Donut</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="margin-top: 30px;">
                    <h3>타이포그래피</h3>
                    <div style="background: #f1f5f9; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
                        <p><strong>본문:</strong> Noto Sans KR (가독성 최적화)</p>
                        <p><strong>숫자:</strong> Roboto Mono (표 및 금액 표시)</p>
                        <p><strong>제목:</strong> Spoqa Han Sans (명확한 위계)</p>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>아이콘 시스템</h3>
                    <ul>
                        <li>Material Icons (기본 UI 아이콘)</li>
                        <li>Custom Tax Icons (세무 특화 아이콘)</li>
                        <li>일관된 24x24px 그리드 시스템</li>
                        <li>Outlined, Filled 스타일 제공</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 11: Design - User Experience -->
        <div class="slide">
            <div class="slide-content">
                <h2>디자인: 사용자 경험 설계</h2>

                <div style="background: #dbeafe; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #2563eb;">
                    <h3 style="margin-top: 0; color: #004085;">대시보드 레이아웃</h3>
                    <ul style="color: #333;">
                        <li><strong>상단:</strong> 주요 KPI 카드 (이번 달 납부 세액, 공제액, 세부담률)</li>
                        <li><strong>중단:</strong> 일정 타임라인 (다가오는 신고 및 납부 일정)</li>
                        <li><strong>하단:</strong> 상세 차트 (월별 세금 추이, 업종 비교)</li>
                        <li><strong>사이드:</strong> 빠른 실행 메뉴 및 알림 센터</li>
                    </ul>
                </div>

                <div style="background: #e0e7ff; padding: 25px; border-radius: 16px; margin: 20px 0; border-left: 5px solid #1e40af;">
                    <h3 style="margin-top: 0; color: #6a1b9a;">신고서 작성 UX</h3>
                    <ol style="color: #333;">
                        <li><strong>Step 1 - 기간 선택:</strong> 신고 대상 기간 및 신고 유형 선택</li>
                        <li><strong>Step 2 - 데이터 확인:</strong> 자동 수집된 데이터 검토 및 수정</li>
                        <li><strong>Step 3 - 계산 검증:</strong> 세액 계산 결과 미리보기</li>
                        <li><strong>Step 4 - 첨부 서류:</strong> 필요 서류 업로드 및 전자서명</li>
                        <li><strong>Step 5 - 최종 확인:</strong> 요약 정보 확인 및 제출</li>
                    </ol>
                    <p style="margin-top: 15px; color: #333;"><strong>진행 표시:</strong> 각 단계별 진행 상황 프로그레스 바 표시</p>
                </div>

                <div style="margin-top: 30px;">
                    <h3>피드백 및 알림 시스템</h3>
                    <div class="feature-list">
                        <div class="feature-item">
                            <h4>✅ 성공 메시지</h4>
                            <p>작업 완료 시 명확한 확인 메시지</p>
                        </div>
                        <div class="feature-item">
                            <h4>⚠️ 경고 알림</h4>
                            <p>주의가 필요한 항목 강조 표시</p>
                        </div>
                        <div class="feature-item">
                            <h4>❌ 오류 안내</h4>
                            <p>문제 발생 시 해결 방법 제시</p>
                        </div>
                        <div class="feature-item">
                            <h4>💡 도움말</h4>
                            <p>컨텍스트 기반 도움말 제공</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 12: Backend - Architecture -->
        <div class="slide">
            <div class="slide-content">
                <h2>백엔드: 시스템 아키텍처</h2>

                <div class="conclusion-box">
                    <h3 style="color: white; margin-top: 0;">마이크로서비스 아키텍처</h3>
                    <p style="font-size: 1.2em;">확장 가능하고 유지보수가 쉬운 분산 시스템</p>
                </div>

                <div style="margin-top: 30px;">
                    <h3>주요 서비스 구성</h3>
                    <div class="company-info">
                        <div class="info-card">
                            <h4>🔐 인증 서비스</h4>
                            <p>JWT 기반 인증 및 권한 관리</p>
                            <p style="font-size: 0.9em; margin-top: 5px;">OAuth 2.0, 2FA 지원</p>
                        </div>
                        <div class="info-card">
                            <h4>📊 데이터 수집 서비스</h4>
                            <p>외부 시스템 데이터 수집 및 변환</p>
                            <p style="font-size: 0.9em; margin-top: 5px;">ETL 파이프라인</p>
                        </div>
                        <div class="info-card">
                            <h4>🧮 계산 엔진</h4>
                            <p>세금 계산 및 시뮬레이션</p>
                            <p style="font-size: 0.9em; margin-top: 5px;">규칙 엔진 기반</p>
                        </div>
                        <div class="info-card">
                            <h4>📄 신고서 생성</h4>
                            <p>각종 신고서 자동 작성</p>
                            <p style="font-size: 0.9em; margin-top: 5px;">PDF/XML 변환</p>
                        </div>
                        <div class="info-card">
                            <h4>🔗 통합 서비스</h4>
                            <p>ERP 및 회계 시스템 연동</p>
                            <p style="font-size: 0.9em; margin-top: 5px;">API Gateway</p>
                        </div>
                        <div class="info-card">
                            <h4>🤖 AI 서비스</h4>
                            <p>자연어 처리 및 예측 분석</p>
                            <p style="font-size: 0.9em; margin-top: 5px;">TensorFlow/PyTorch</p>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>기술 스택</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>레이어</th>
                                <th>기술</th>
                                <th>목적</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>API Gateway</strong></td>
                                <td>Kong / AWS API Gateway</td>
                                <td>라우팅, 인증, 속도 제한</td>
                            </tr>
                            <tr>
                                <td><strong>Application</strong></td>
                                <td>Node.js (NestJS) / Python (FastAPI)</td>
                                <td>비즈니스 로직 처리</td>
                            </tr>
                            <tr>
                                <td><strong>Database</strong></td>
                                <td>PostgreSQL / MongoDB</td>
                                <td>관계형/문서형 데이터 저장</td>
                            </tr>
                            <tr>
                                <td><strong>Cache</strong></td>
                                <td>Redis</td>
                                <td>세션, 계산 결과 캐싱</td>
                            </tr>
                            <tr>
                                <td><strong>Message Queue</strong></td>
                                <td>RabbitMQ / Apache Kafka</td>
                                <td>비동기 처리, 이벤트 스트리밍</td>
                            </tr>
                            <tr>
                                <td><strong>Search</strong></td>
                                <td>Elasticsearch</td>
                                <td>전체 텍스트 검색, 로그 분석</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Slide 13: Backend - Database Design -->
        <div class="slide">
            <div class="slide-content">
                <h2>백엔드: 데이터베이스 설계</h2>

                <div style="margin-top: 30px;">
                    <h3>핵심 테이블 구조</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>테이블명</th>
                                <th>주요 필드</th>
                                <th>관계</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>companies</strong></td>
                                <td>id, name, business_number, tax_type</td>
                                <td>1:N users, tax_returns</td>
                            </tr>
                            <tr>
                                <td><strong>users</strong></td>
                                <td>id, email, role, company_id</td>
                                <td>N:1 companies</td>
                            </tr>
                            <tr>
                                <td><strong>tax_returns</strong></td>
                                <td>id, type, period, status, company_id</td>
                                <td>N:1 companies, 1:N items</td>
                            </tr>
                            <tr>
                                <td><strong>tax_items</strong></td>
                                <td>id, return_id, account, amount</td>
                                <td>N:1 tax_returns</td>
                            </tr>
                            <tr>
                                <td><strong>receipts</strong></td>
                                <td>id, type, date, amount, file_path</td>
                                <td>N:1 companies</td>
                            </tr>
                            <tr>
                                <td><strong>tax_rules</strong></td>
                                <td>id, name, formula, effective_date</td>
                                <td>독립 테이블</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="margin-top: 30px;">
                    <h3>데이터 보안 전략</h3>
                    <ul>
                        <li><strong>암호화:</strong> 민감 데이터 AES-256 암호화 (금액, 계좌번호 등)</li>
                        <li><strong>접근 제어:</strong> Row-Level Security (RLS) 적용</li>
                        <li><strong>감사 로그:</strong> 모든 데이터 변경 이력 자동 기록</li>
                        <li><strong>백업:</strong> 일일 자동 백업 및 Point-in-Time Recovery 지원</li>
                        <li><strong>다중화:</strong> Master-Slave Replication으로 고가용성 확보</li>
                    </ul>
                </div>

                <div style="margin-top: 30px; padding: 25px; background: #f1f5f9; border-radius: 16px; border-left: 5px solid #2563eb; border: 1px solid #e2e8f0;">
                    <h3 style="margin-top: 0;">성능 최적화</h3>
                    <ul>
                        <li>주요 쿼리 대상 컬럼에 인덱스 생성</li>
                        <li>자주 조회되는 집계 데이터 Materialized View 활용</li>
                        <li>파티셔닝: 연도별 세금 신고 데이터 분할</li>
                        <li>커넥션 풀링으로 DB 연결 관리 최적화</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 14: Backend - API Design -->
        <div class="slide">
            <div class="slide-content">
                <h2>백엔드: API 설계</h2>

                <div style="margin-top: 30px;">
                    <h3>RESTful API 엔드포인트</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>엔드포인트</th>
                                <th>메서드</th>
                                <th>설명</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>/api/v1/auth/login</td>
                                <td>POST</td>
                                <td>사용자 로그인 및 JWT 발급</td>
                            </tr>
                            <tr>
                                <td>/api/v1/tax-returns</td>
                                <td>GET</td>
                                <td>세금 신고서 목록 조회</td>
                            </tr>
                            <tr>
                                <td>/api/v1/tax-returns</td>
                                <td>POST</td>
                                <td>새 신고서 생성</td>
                            </tr>
                            <tr>
                                <td>/api/v1/tax-returns/:id</td>
                                <td>PUT</td>
                                <td>신고서 수정</td>
                            </tr>
                            <tr>
                                <td>/api/v1/tax-returns/:id/submit</td>
                                <td>POST</td>
                                <td>신고서 제출</td>
                            </tr>
                            <tr>
                                <td>/api/v1/receipts/upload</td>
                                <td>POST</td>
                                <td>증빙 파일 업로드 및 OCR 처리</td>
                            </tr>
                            <tr>
                                <td>/api/v1/dashboard/summary</td>
                                <td>GET</td>
                                <td>대시보드 요약 정보</td>
                            </tr>
                            <tr>
                                <td>/api/v1/ai/ask</td>
                                <td>POST</td>
                                <td>AI 세무 어시스턴트 질의</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="margin-top: 30px;">
                    <h3>API 보안 및 품질</h3>
                    <div class="feature-list">
                        <div class="feature-item">
                            <h4>🔐 인증/인가</h4>
                            <p>JWT Bearer Token 기반 인증</p>
                            <p style="font-size: 0.9em; color: #666;">역할 기반 접근 제어 (RBAC)</p>
                        </div>
                        <div class="feature-item">
                            <h4>📝 문서화</h4>
                            <p>OpenAPI 3.0 (Swagger) 자동 생성</p>
                            <p style="font-size: 0.9em; color: #666;">인터랙티브 API 문서</p>
                        </div>
                        <div class="feature-item">
                            <h4>⚡ 속도 제한</h4>
                            <p>Rate Limiting (100 req/min/user)</p>
                            <p style="font-size: 0.9em; color: #666;">DDoS 방어</p>
                        </div>
                        <div class="feature-item">
                            <h4>✅ 입력 검증</h4>
                            <p>DTO 기반 자동 검증</p>
                            <p style="font-size: 0.9em; color: #666;">타입 안전성 보장</p>
                        </div>
                        <div class="feature-item">
                            <h4>📊 모니터링</h4>
                            <p>API 성능 및 오류율 추적</p>
                            <p style="font-size: 0.9em; color: #666;">Prometheus + Grafana</p>
                        </div>
                        <div class="feature-item">
                            <h4>🔄 버전 관리</h4>
                            <p>URL 기반 버저닝 (/v1/, /v2/)</p>
                            <p style="font-size: 0.9em; color: #666;">하위 호환성 보장</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 15: Frontend - Tech Stack -->
        <div class="slide">
            <div class="slide-content">
                <h2>프론트엔드: 기술 스택</h2>

                <div class="conclusion-box">
                    <h3 style="color: white; margin-top: 0;">현대적인 프론트엔드 아키텍처</h3>
                    <p style="font-size: 1.2em;">React 18 + TypeScript 기반 SPA</p>
                </div>

                <div style="margin-top: 30px;">
                    <h3>핵심 기술 스택</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>카테고리</th>
                                <th>기술</th>
                                <th>목적</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>프레임워크</strong></td>
                                <td>React 18</td>
                                <td>컴포넌트 기반 UI 구축</td>
                            </tr>
                            <tr>
                                <td><strong>언어</strong></td>
                                <td>TypeScript</td>
                                <td>타입 안전성, 개발 생산성</td>
                            </tr>
                            <tr>
                                <td><strong>상태 관리</strong></td>
                                <td>Zustand / React Query</td>
                                <td>전역 상태 및 서버 상태 관리</td>
                            </tr>
                            <tr>
                                <td><strong>라우팅</strong></td>
                                <td>React Router v6</td>
                                <td>SPA 페이지 라우팅</td>
                            </tr>
                            <tr>
                                <td><strong>UI 라이브러리</strong></td>
                                <td>Material-UI (MUI)</td>
                                <td>디자인 시스템 구현</td>
                            </tr>
                            <tr>
                                <td><strong>차트</strong></td>
                                <td>Recharts / Chart.js</td>
                                <td>데이터 시각화</td>
                            </tr>
                            <tr>
                                <td><strong>폼 관리</strong></td>
                                <td>React Hook Form</td>
                                <td>폼 검증 및 상태 관리</td>
                            </tr>
                            <tr>
                                <td><strong>스타일링</strong></td>
                                <td>Emotion / Styled Components</td>
                                <td>CSS-in-JS</td>
                            </tr>
                            <tr>
                                <td><strong>빌드 도구</strong></td>
                                <td>Vite</td>
                                <td>빠른 개발 서버 및 빌드</td>
                            </tr>
                            <tr>
                                <td><strong>테스트</strong></td>
                                <td>Vitest / Testing Library</td>
                                <td>유닛/통합 테스트</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="margin-top: 30px; padding: 25px; background: #f1f5f9; border-radius: 16px; border-left: 5px solid #2563eb; border: 1px solid #e2e8f0;">
                    <h3 style="margin-top: 0;">개발 도구</h3>
                    <ul>
                        <li><strong>코드 품질:</strong> ESLint, Prettier, Husky (pre-commit hooks)</li>
                        <li><strong>번들 분석:</strong> Vite Bundle Analyzer로 최적화</li>
                        <li><strong>성능 모니터링:</strong> React DevTools, Lighthouse CI</li>
                        <li><strong>문서화:</strong> Storybook으로 컴포넌트 문서화</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 16: Frontend - Component Structure -->
        <div class="slide">
            <div class="slide-content">
                <h2>프론트엔드: 컴포넌트 구조</h2>

                <div style="margin-top: 30px;">
                    <h3>폴더 구조</h3>
                    <div style="background: #f1f5f9; padding: 20px; border-radius: 12px; font-family: monospace; font-size: 0.9em; border: 1px solid #e2e8f0;">
                        <pre style="margin: 0; color: #333;">
src/
├── components/          # 재사용 가능 컴포넌트
│   ├── common/         # 공통 UI 컴포넌트 (Button, Input 등)
│   ├── layout/         # 레이아웃 컴포넌트 (Header, Sidebar)
│   └── domain/         # 도메인 특화 컴포넌트
├── pages/              # 페이지 컴포넌트
│   ├── Dashboard/
│   ├── TaxReturn/
│   └── Settings/
├── hooks/              # 커스텀 React Hooks
├── services/           # API 호출 로직
├── stores/             # 상태 관리 (Zustand)
├── types/              # TypeScript 타입 정의
├── utils/              # 유틸리티 함수
└── assets/             # 정적 파일 (이미지, 폰트)
                        </pre>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>주요 컴포넌트</h3>
                    <div class="feature-list">
                        <div class="feature-item">
                            <h4>📊 DashboardWidget</h4>
                            <p>대시보드 KPI 카드 및 차트</p>
                        </div>
                        <div class="feature-item">
                            <h4>📝 TaxReturnWizard</h4>
                            <p>단계별 신고서 작성 마법사</p>
                        </div>
                        <div class="feature-item">
                            <h4>📁 ReceiptUploader</h4>
                            <p>증빙 파일 업로드 및 OCR</p>
                        </div>
                        <div class="feature-item">
                            <h4>📈 TaxChart</h4>
                            <p>세무 데이터 시각화</p>
                        </div>
                        <div class="feature-item">
                            <h4>🔔 NotificationCenter</h4>
                            <p>알림 및 작업 센터</p>
                        </div>
                        <div class="feature-item">
                            <h4>🤖 AIAssistant</h4>
                            <p>채팅 기반 세무 도우미</p>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>성능 최적화 전략</h3>
                    <ul>
                        <li><strong>Code Splitting:</strong> 페이지 단위 lazy loading으로 초기 로딩 속도 개선</li>
                        <li><strong>Memoization:</strong> React.memo, useMemo, useCallback 활용</li>
                        <li><strong>Virtual Scrolling:</strong> 대용량 테이블 렌더링 최적화</li>
                        <li><strong>이미지 최적화:</strong> WebP 포맷, lazy loading, responsive images</li>
                        <li><strong>캐싱:</strong> React Query로 서버 데이터 캐싱 및 재검증</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 17: Development Roadmap -->
        <div class="slide">
            <div class="slide-content">
                <h2>개발 로드맵</h2>

                <table class="pricing-table">
                    <thead>
                        <tr>
                            <th>단계</th>
                            <th>기간</th>
                            <th>주요 마일스톤</th>
                            <th>산출물</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Phase 1: 기획</strong></td>
                            <td>4주</td>
                            <td>요구사항 정의, 시스템 설계</td>
                            <td>PRD, 아키텍처 문서</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 2: 디자인</strong></td>
                            <td>4주</td>
                            <td>UI/UX 설계, 디자인 시스템 구축</td>
                            <td>Figma 프로토타입, 디자인 가이드</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 3: MVP 개발</strong></td>
                            <td>12주</td>
                            <td>핵심 기능 구현 (신고, 증빙, 대시보드)</td>
                            <td>Alpha 버전</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 4: 통합 테스트</strong></td>
                            <td>4주</td>
                            <td>외부 시스템 연동 및 테스트</td>
                            <td>Beta 버전</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 5: 파일럿</strong></td>
                            <td>4주</td>
                            <td>실사용자 테스트 및 피드백 수집</td>
                            <td>개선사항 리스트</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 6: 정식 출시</strong></td>
                            <td>2주</td>
                            <td>버그 수정 및 성능 최적화</td>
                            <td>v1.0 릴리스</td>
                        </tr>
                    </tbody>
                </table>

                <div style="margin-top: 30px; padding: 25px; background: #dbeafe; border-radius: 16px; border-left: 5px solid #2563eb; border: 1px solid #bfdbfe;">
                    <h3 style="margin-top: 0;">주요 기술 과제</h3>
                    <ul>
                        <li><strong>세법 규칙 엔진:</strong> 복잡한 세법 규칙의 유연한 모델링</li>
                        <li><strong>대용량 데이터 처리:</strong> 수백만 건의 거래 데이터 실시간 처리</li>
                        <li><strong>외부 시스템 통합:</strong> 다양한 ERP/회계 시스템 API 연동</li>
                        <li><strong>보안 및 컴플라이언스:</strong> 금융권 수준의 보안 요구사항 충족</li>
                        <li><strong>AI 모델 학습:</strong> 세무 데이터 기반 예측 모델 개발</li>
                    </ul>
                </div>

                <div style="margin-top: 20px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
                    <h3 style="margin-top: 0; color: #92400e; font-weight: 700;">예상 리소스</h3>
                    <ul style="color: #78350f;">
                        <li><strong>기획:</strong> PM 1명, 세무 도메인 전문가 1명</li>
                        <li><strong>디자인:</strong> UI/UX 디자이너 2명</li>
                        <li><strong>백엔드:</strong> 시니어 개발자 3명, 주니어 개발자 2명</li>
                        <li><strong>프론트엔드:</strong> 시니어 개발자 2명, 주니어 개발자 2명</li>
                        <li><strong>QA:</strong> 테스터 2명</li>
                        <li><strong>DevOps:</strong> 인프라 엔지니어 1명</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 18: Success Metrics -->
        <div class="slide">
            <div class="slide-content">
                <h2>성공 지표</h2>

                <div style="margin-top: 30px;">
                    <h3>📊 정량적 KPI</h3>
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th>지표</th>
                                <th>목표치</th>
                                <th>측정 방법</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>업무 시간 절감</strong></td>
                                <td>80% 이상</td>
                                <td>신고 준비 소요 시간 Before/After 비교</td>
                            </tr>
                            <tr>
                                <td><strong>오류율 감소</strong></td>
                                <td>95% 이상</td>
                                <td>수정 신고 건수 감소율</td>
                            </tr>
                            <tr>
                                <td><strong>사용자 만족도</strong></td>
                                <td>NPS 50 이상</td>
                                <td>분기별 사용자 설문 조사</td>
                            </tr>
                            <tr>
                                <td><strong>시스템 가용성</strong></td>
                                <td>99.9% 이상</td>
                                <td>Uptime 모니터링</td>
                            </tr>
                            <tr>
                                <td><strong>API 응답 속도</strong></td>
                                <td>평균 200ms 이하</td>
                                <td>APM 도구 (New Relic/Datadog)</td>
                            </tr>
                            <tr>
                                <td><strong>월간 활성 사용자</strong></td>
                                <td>80% 이상</td>
                                <td>Google Analytics / Mixpanel</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="margin-top: 30px;">
                    <h3>🎯 정성적 목표</h3>
                    <div class="feature-list">
                        <div class="feature-item">
                            <h4>💡 혁신성</h4>
                            <p>국내 최초 AI 기반 세무 자동화 플랫폼 구축</p>
                        </div>
                        <div class="feature-item">
                            <h4>🏆 시장 포지션</h4>
                            <p>중소기업 세무 솔루션 시장 점유율 Top 3</p>
                        </div>
                        <div class="feature-item">
                            <h4>🤝 파트너십</h4>
                            <p>주요 ERP/회계 시스템과 공식 파트너십 체결</p>
                        </div>
                        <div class="feature-item">
                            <h4>🔐 보안 인증</h4>
                            <p>ISO 27001, SOC 2 Type 2 인증 획득</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 19: Risk & Mitigation -->
        <div class="slide">
            <div class="slide-content">
                <h2>리스크 관리</h2>

                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>리스크</th>
                            <th>영향</th>
                            <th>대응 전략</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>세법 변경</strong></td>
                            <td>높음</td>
                            <td>규칙 엔진 기반 설계로 신속 대응, 법률 자문 확보</td>
                        </tr>
                        <tr>
                            <td><strong>외부 시스템 장애</strong></td>
                            <td>중간</td>
                            <td>Fallback 메커니즘, 수동 입력 옵션 제공</td>
                        </tr>
                        <tr>
                            <td><strong>데이터 보안 침해</strong></td>
                            <td>매우 높음</td>
                            <td>다층 보안 체계, 정기 보안 감사, 침해 대응 계획 수립</td>
                        </tr>
                        <tr>
                            <td><strong>개발 일정 지연</strong></td>
                            <td>중간</td>
                            <td>Agile 방법론, 단계별 마일스톤 관리</td>
                        </tr>
                        <tr>
                            <td><strong>사용자 채택률 저조</strong></td>
                            <td>높음</td>
                            <td>직관적 UX, 충분한 교육 및 온보딩, 전담 지원팀</td>
                        </tr>
                        <tr>
                            <td><strong>AI 모델 정확도</strong></td>
                            <td>중간</td>
                            <td>Human-in-the-loop 검증, 점진적 자동화 확대</td>
                        </tr>
                    </tbody>
                </table>

                <div style="margin-top: 30px; padding: 25px; background: #fef3c7; border-radius: 16px; border-left: 5px solid #f59e0b; border: 1px solid #fde68a;">
                    <h3 style="margin-top: 0; color: #92400e; font-weight: 700;">규제 준수 전략</h3>
                    <ul style="color: #78350f;">
                        <li><strong>전자세금계산서법:</strong> 국세청 표준 XML 스키마 준수</li>
                        <li><strong>개인정보보호법:</strong> PIMS 인증 획득, 개인정보 암호화 저장</li>
                        <li><strong>전자금융거래법:</strong> 전자서명 및 공인인증서 연동</li>
                        <li><strong>회계 기준:</strong> K-IFRS 및 일반기업회계기준 준수</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 20: Conclusion -->
        <div class="slide">
            <div class="slide-content">
                <h2>맺음말</h2>

                <div class="conclusion-box">
                    <h3 style="color: white; margin-top: 0;">세무 업무의 새로운 패러다임</h3>
                    <p style="font-size: 1.3em;">자동화로 시간을 절약하고, AI로 인사이트를 발견하며, 통합으로 효율을 극대화하는 차세대 세무 솔루션</p>
                </div>

                <div style="margin-top: 40px;">
                    <h3>핵심 차별점</h3>
                    <div class="company-info">
                        <div class="info-card">
                            <h4>⚡ 완전 자동화</h4>
                            <p>데이터 수집부터 신고까지 End-to-End 자동화</p>
                        </div>
                        <div class="info-card">
                            <h4>🤖 AI 기반</h4>
                            <p>머신러닝으로 패턴 학습 및 절세 전략 제안</p>
                        </div>
                        <div class="info-card">
                            <h4>🔗 완벽한 통합</h4>
                            <p>모든 주요 ERP/회계 시스템 네이티브 연동</p>
                        </div>
                        <div class="info-card">
                            <h4>📱 언제 어디서나</h4>
                            <p>클라우드 기반으로 시간과 장소의 제약 없음</p>
                        </div>
                        <div class="info-card">
                            <h4>🛡️ 기업급 보안</h4>
                            <p>금융권 수준의 다층 보안 체계</p>
                        </div>
                        <div class="info-card">
                            <h4>💡 직관적 UX</h4>
                            <p>복잡한 세무를 누구나 쉽게 처리</p>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 40px; text-align: center;">
                    <p style="font-size: 1.3em; color: #2563eb; font-weight: 700;"><strong>예상 효과</strong></p>
                    <p style="font-size: 1.1em; margin-top: 20px;">업무 시간 <span class="highlight">80% 절감</span> | 오류율 <span class="highlight">95% 감소</span> | 절세 기회 <span class="highlight">자동 발견</span></p>
                </div>

                <div style="margin-top: 40px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
                    <h3 style="text-align: center;">Next Steps</h3>
                    <ol style="font-size: 1.1em; margin-top: 20px;">
                        <li>이해관계자 승인 및 예산 확보</li>
                        <li>개발팀 구성 및 킥오프 미팅</li>
                        <li>Phase 1 상세 요구사항 정의 착수</li>
                        <li>디자인 시스템 프로토타입 개발</li>
                    </ol>
                </div>
            </div>
        </div>

        <!-- Slide 21: Thank You -->
        <div class="slide">
            <div class="slide-content">
                <h1 style="font-size: 4em; margin-bottom: 40px;">감사합니다</h1>
                <div style="text-align: center;">
                    <p style="font-size: 1.5em; color: #2563eb; margin-bottom: 30px; font-weight: 700;">장기적 세무전략 - 중장기 계획안</p>
                    <div style="margin-top: 50px; padding: 30px; background: #f1f5f9; border-radius: 16px; border: 1px solid #e2e8f0;">
                        <h3>문의 및 피드백</h3>
                        <p style="margin-top: 20px;">본 계획안에 대한 의견이나 추가 논의가 필요하신 경우</p>
                        <p>프로젝트 팀으로 연락 주시기 바랍니다.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slide-number">
        <span id="currentSlide">1</span> / <span id="totalSlides">21</span>
    </div>

    <div class="navigation">
        <button class="nav-btn" id="prevBtn" onclick="changeSlide(-1)">← 이전</button>
        <button class="nav-btn" id="nextBtn" onclick="changeSlide(1)">다음 →</button>
    </div>

    <script>
        let currentSlide = 1;
        const totalSlides = 21;
        let touchStartX = 0;
        let touchEndX = 0;

        document.getElementById('totalSlides').textContent = totalSlides;

        function showSlide(n) {
            const slides = document.querySelectorAll('.slide');

            if (n > totalSlides) {
                currentSlide = 1;
            }
            if (n < 1) {
                currentSlide = totalSlides;
            }

            slides.forEach(slide => {
                slide.classList.remove('active');
            });

            if (slides[currentSlide - 1]) {
                slides[currentSlide - 1].classList.add('active');
            }
            document.getElementById('currentSlide').textContent = currentSlide;

            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            if (prevBtn) prevBtn.disabled = (currentSlide === 1);
            if (nextBtn) nextBtn.disabled = (currentSlide === totalSlides);
        }

        function changeSlide(direction) {
            currentSlide += direction;
            showSlide(currentSlide);
        }

        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                changeSlide(-1);
            } else if (event.key === 'ArrowRight' || event.key === ' ') {
                event.preventDefault();
                changeSlide(1);
            }
        });

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

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

        function handleSwipe() {
            if (touchEndX < touchStartX - 50) {
                changeSlide(1);
            }
            if (touchEndX > touchStartX + 50) {
                changeSlide(-1);
            }
        }

        showSlide(currentSlide);
        
        // Initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    </script>
</body>
</html>
