<?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%);
            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;
        }

        h4 {
            color: #1e40af;
            font-size: 1.3em;
            margin: 15px 0 10px 0;
            font-weight: 700;
        }

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

        ul, ol {
            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 {
            color: white;
            font-size: 1.3em;
            margin-bottom: 10px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            padding-bottom: 8px;
        }

        .info-card p {
            color: white;
            font-size: 1em;
        }

        .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;
        }

        .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;
        }

        .feature-item h4 {
            color: #1e40af;
            margin-top: 0;
        }

        .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, .conclusion-box h3 {
            color: white;
        }

        .warning-box {
            background: #fef3c7;
            border-left: 5px solid #f59e0b;
            padding: 25px;
            border-radius: 16px;
            margin: 20px 0;
            border: 1px solid #fde68a;
        }

        .warning-box h3, .warning-box li {
            color: #92400e;
        }

        .flow-diagram {
            background: #f1f5f9;
            padding: 25px;
            border-radius: 16px;
            margin: 20px 0;
            border: 2px solid #2563eb;
        }

        .flow-diagram pre {
            font-size: 1em;
            line-height: 1.6;
            color: #1e293b;
            overflow-x: auto;
        }

        .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 fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

        @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;
            }

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

            .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">
                    C
                </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;">바로빌 카드조회 API 기반 완전 자동화 시스템</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;">법인카드 사용부터 세무 처리까지 완전 자동화</p>
                </div>
            </div>
        </div>

        <!-- Slide 2: Project Overview -->
        <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;">법인카드 사용 내역을 바로빌 API로 자동 수집하여<br>승인↔매입 매핑, VAT 처리, 계정과목 분류를 자동화하고<br>금전출납부 및 일일일보에 즉시 반영</p>
                </div>

                <div style="margin-top: 30px;">
                    <h3>핵심 목표</h3>
                    <ul>
                        <li><strong>바로빌 카드조회 API 통합:</strong> 모든 법인카드 내역을 단일 API로 통합 수집</li>
                        <li><strong>승인↔매입 자동 매핑:</strong> 카드 승인 내역과 매입 전표를 자동으로 연결</li>
                        <li><strong>VAT/불공제 자동 판정:</strong> 접대비, 복리후생비 등 불공제 항목 자동 분류</li>
                        <li><strong>계정과목 자동 분류:</strong> 룰 기반 + ML 하이브리드 엔진으로 정확도 95% 달성</li>
                        <li><strong>금전출납부/일일일보 자동 생성:</strong> 카드 사용 시점부터 회계 처리까지 실시간 반영</li>
                        <li><strong>멀티테넌트 구조:</strong> 여러 법인의 카드를 안전하게 격리 관리</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 3: Project Scope -->
        <div class="slide">
            <div class="slide-content">
                <h2>프로젝트 범위</h2>

                <div class="company-info">
                    <div class="info-card">
                        <h4>✅ 포함 범위</h4>
                        <p><strong>카드 내역 수집:</strong> 바로빌 카드조회 API 연동, 일일 자동 수집</p>
                        <p><strong>데이터 정규화:</strong> 승인/매입 분리, 중복 제거, 취소 매칭</p>
                        <p><strong>자동 전표화:</strong> 계정과목, 거래처, 사업자등록번호, VAT 분류</p>
                        <p><strong>금전출납부/일보:</strong> 실시간 리포트 생성 및 검토 화면</p>
                        <p><strong>엑스포트:</strong> 세무사 제출용 CSV/Excel 내보내기</p>
                    </div>
                    <div class="info-card">
                        <h4>❌ 제외 범위</h4>
                        <p><strong>영수증 OCR:</strong> 향후 로드맵 (Phase 2)</p>
                        <p><strong>법인카드 실물 발급:</strong> 카드사 직접 처리</p>
                        <p><strong>실시간 결제 알림:</strong> 카드사 앱 활용</p>
                        <p><strong>여신 관리:</strong> 카드사 관리 기능</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 4: Architecture Overview -->
        <div class="slide">
            <div class="slide-content">
                <h2>시스템 아키텍처 개요</h2>

                <div class="flow-diagram">
                    <pre>
[카드사 1, 2, 3...N] → [바로빌 API] → [ETL/수집 스케줄러]
                                              ↓
                                [정규화 & 중복제거 & 취소 매핑]
                                              ↓
                            [분류 엔진: Rule + ML Hybrid]
                                              ↓
                    [승인↔매입 매칭 & VAT 처리 & 계정과목 분류]
                                              ↓
                        [전표 생성 & 금전출납부/일일일보 반영]
                                              ↓
            [검토 대시보드 & 예외 처리 & 세무사 제출용 리포트]
                    </pre>
                </div>

                <div style="margin-top: 30px;">
                    <h3>아키텍처 핵심 전략</h3>
                    <ul>
                        <li><strong>멀티테넌시:</strong> 테넌트별 카드 등록정보/인증 격리, 데이터 완전 분리</li>
                        <li><strong>일일 배치 수집:</strong> 매일 오전 자동 수집 + 수동 즉시 수집 옵션</li>
                        <li><strong>이중화 설계:</strong> (카드번호, 승인번호, 승인일시) 고유키로 중복 방지</li>
                        <li><strong>하이브리드 분류:</strong> 룰 기반 1차 분류 + ML 모델 2차 보조</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 5: Functional Requirements -->
        <div class="slide">
            <div class="slide-content">
                <h2>기능 요구사항 (Functional Requirements)</h2>

                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>기능명</th>
                            <th>설명</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>F1</strong></td>
                            <td>카드 등록/인증</td>
                            <td>테넌트별 법인카드 등록, 바로빌 인증 정보 안전 보관</td>
                        </tr>
                        <tr>
                            <td><strong>F2</strong></td>
                            <td>내역 자동 수집</td>
                            <td>일일 배치 + 수동 즉시 수집, 승인/매입 분리 저장</td>
                        </tr>
                        <tr>
                            <td><strong>F3</strong></td>
                            <td>데이터 정규화</td>
                            <td>가맹점명 표준화, 중복 제거, 취소 건 자동 매칭</td>
                        </tr>
                        <tr>
                            <td><strong>F4</strong></td>
                            <td>분류 엔진 (Rule + ML)</td>
                            <td>계정과목, VAT 처리, 불공제 판정 자동화</td>
                        </tr>
                        <tr>
                            <td><strong>F5</strong></td>
                            <td>승인↔매입 매칭 & 전표 생성</td>
                            <td>승인/매입 쌍 연결, 차액 발생 시 알림</td>
                        </tr>
                        <tr>
                            <td><strong>F6</strong></td>
                            <td>금전출납부/일일일보 통합</td>
                            <td>실시간 리포트 생성, 월말 마감 자동화</td>
                        </tr>
                        <tr>
                            <td><strong>F7</strong></td>
                            <td>감사 추적</td>
                            <td>모든 수정/분류 이력 로그, 담당자 기록</td>
                        </tr>
                        <tr>
                            <td><strong>F8</strong></td>
                            <td>내보내기/연동</td>
                            <td>CSV/Excel 추출, 세무사 제출용 포맷</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Slide 6: Non-Functional Requirements -->
        <div class="slide">
            <div class="slide-content">
                <h2>비기능 요구사항 (Non-Functional Requirements)</h2>

                <div class="company-info">
                    <div class="info-card">
                        <h4>N1. 멀티테넌시 격리</h4>
                        <p>모든 테이블 tenant_id 분리</p>
                        <p>카드 인증정보 암호화 보관</p>
                        <p>테넌트별 데이터 완전 격리</p>
                    </div>
                    <div class="info-card">
                        <h4>N2. 보안/컴플라이언스</h4>
                        <p>카드번호 마스킹 (끝 4자리만)</p>
                        <p>HTTPS 통신 필수</p>
                        <p>개인정보 최소 수집</p>
                    </div>
                    <div class="info-card">
                        <h4>N3. 확장성</h4>
                        <p>월 10만 건 처리 가능</p>
                        <p>테넌트 50개 동시 지원</p>
                        <p>API 호출 rate limit 준수</p>
                    </div>
                    <div class="info-card">
                        <h4>N4. 가용성/복구</h4>
                        <p>수집 실패 시 재시도 3회</p>
                        <p>데이터 백업 일 1회</p>
                        <p>장애 시 수동 수집 가능</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 7: Data Flow -->
        <div class="slide">
            <div class="slide-content">
                <h2>데이터 플로우 (End-to-End)</h2>

                <ol style="font-size: 1.1em; line-height: 2;">
                    <li><strong>카드 등록:</strong> 법인카드 정보 + 바로빌 인증 정보 등록 → 시스템에 안전 저장</li>
                    <li><strong>자동 수집:</strong> 스케줄러가 매일 오전 바로빌 API 호출 → 승인/매입 내역 수집</li>
                    <li><strong>정규화:</strong> 가맹점명 표준화, 중복 제거, 취소 건 원 거래와 매칭</li>
                    <li><strong>분류 엔진:</strong> 룰 기반 1차 분류 → ML 모델 2차 검증 → 계정과목 확정</li>
                    <li><strong>승인↔매입 매칭:</strong> 승인번호 기준으로 승인/매입 쌍 연결, 차액 발생 시 알림</li>
                    <li><strong>전표 생성:</strong> 계정과목, 거래처, VAT, 불공제 여부 포함한 전표 생성</li>
                    <li><strong>검토:</strong> 담당자가 미분류/예외 건 검토 → 수정 시 학습 데이터 축적</li>
                    <li><strong>금전출납부/일보 반영:</strong> 확정된 전표를 금전출납부/일일일보에 자동 반영</li>
                    <li><strong>내보내기:</strong> 세무사 제출용 CSV/Excel 생성</li>
                </ol>
            </div>
        </div>

        <!-- Slide 8: Database Schema -->
        <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>cards</strong></td>
                            <td>id, tenant_id, card_no_masked, card_name, issuer, status</td>
                            <td>법인카드 등록 정보</td>
                        </tr>
                        <tr>
                            <td><strong>card_transactions_raw</strong></td>
                            <td>id, tenant_id, card_id, trans_type (승인/매입), approval_no, amount, merchant_name, trans_datetime, status</td>
                            <td>바로빌 API 원본 데이터</td>
                        </tr>
                        <tr>
                            <td><strong>merchants</strong></td>
                            <td>id, tenant_id, merchant_raw_name, merchant_std_name, bizno, category, vat_type</td>
                            <td>가맹점 마스터 (표준화)</td>
                        </tr>
                        <tr>
                            <td><strong>classification_rules</strong></td>
                            <td>id, tenant_id, condition (merchant/category/amount), account_code, vat_flag, priority</td>
                            <td>룰 기반 분류 규칙</td>
                        </tr>
                        <tr>
                            <td><strong>card_postings</strong></td>
                            <td>id, tenant_id, approval_trans_id, purchase_trans_id, account_code, amount, vat, is_non_deductible, posting_date, status</td>
                            <td>확정된 회계 전표</td>
                        </tr>
                        <tr>
                            <td><strong>reports_cashbook</strong></td>
                            <td>id, tenant_id, posting_id, date, debit_account, credit_account, amount, description</td>
                            <td>금전출납부 생성 데이터</td>
                        </tr>
                        <tr>
                            <td><strong>audit_logs</strong></td>
                            <td>id, tenant_id, entity_type, entity_id, action, old_value, new_value, actor, timestamp</td>
                            <td>모든 수정 이력 추적</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Slide 9: Classification Engine -->
        <div class="slide">
            <div class="slide-content">
                <h2>분류 엔진 (Rule + ML Hybrid)</h2>

                <div style="margin-top: 30px;">
                    <h3>1차: 룰 기반 분류 (Rule-Based)</h3>
                    <ul>
                        <li><strong>가맹점명 매칭:</strong> "GS25" → 복리후생비, "현대오일뱅크" → 차량유지비</li>
                        <li><strong>카테고리 매칭:</strong> "주유소" → 차량유지비, "식당" → 접대비/복리후생비</li>
                        <li><strong>금액 기준:</strong> 3만원 이상 식사 → 접대비, 3만원 미만 → 복리후생비</li>
                        <li><strong>VAT 처리:</strong> 면세 가맹점 자동 판정, 불공제 항목 자동 마킹</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>2차: ML 모델 보조 (Machine Learning)</h3>
                    <ul>
                        <li><strong>학습 데이터:</strong> 담당자가 수정한 이력을 학습 데이터로 축적</li>
                        <li><strong>특징 추출:</strong> 가맹점명, 시간대, 요일, 금액, 사용자, 카테고리</li>
                        <li><strong>모델:</strong> Random Forest 또는 XGBoost로 계정과목 추천</li>
                        <li><strong>신뢰도 표시:</strong> 95% 이상 → 자동 확정, 미만 → 검토 필요 마킹</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>피드백 루프 (Continuous Learning)</h3>
                    <div class="flow-diagram">
                        <pre>
[분류 엔진 예측] → [담당자 검토/수정] → [audit_logs 저장]
                                              ↓
                            [학습 데이터셋 업데이트] → [모델 재학습]
                                              ↓
                                    [정확도 향상] → [자동화율 증가]
                        </pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 10: Accounting/Tax Processing -->
        <div class="slide">
            <div class="slide-content">
                <h2>회계/세무 처리 규칙</h2>

                <div style="margin-top: 30px;">
                    <h3>승인 vs 매입 처리</h3>
                    <ul>
                        <li><strong>승인 내역:</strong> 카드 사용 시점 (실시간 알림용, 경비 지출 추적)</li>
                        <li><strong>매입 내역:</strong> 실제 결제 확정 시점 (회계 전표 기준)</li>
                        <li><strong>매칭 로직:</strong> (승인번호, 금액, 가맹점) 3개 기준으로 쌍 연결</li>
                        <li><strong>차액 발생:</strong> 팁, 부분 취소 등으로 차액 발생 시 알림 → 수동 검토</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>VAT 처리</h3>
                    <ul>
                        <li><strong>과세 거래:</strong> 공급가액 + VAT 10% 분리 저장</li>
                        <li><strong>면세 거래:</strong> 전액 공급가액, VAT 0원</li>
                        <li><strong>불공제 항목:</strong> 접대비, 개인 경비 등은 매입세액 불공제 마킹</li>
                        <li><strong>영수증 매칭:</strong> 향후 OCR 연동 시 영수증 이미지와 카드 내역 자동 매칭</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>증빙 우선순위</h3>
                    <ol>
                        <li><strong>세금계산서:</strong> 최우선 증빙 (VAT 공제 가능)</li>
                        <li><strong>신용카드 매출전표:</strong> 2순위 (사업용 신용카드 등록 시 공제 가능)</li>
                        <li><strong>현금영수증:</strong> 3순위 (간이과세자 등)</li>
                        <li><strong>간이영수증:</strong> 3만원 미만 소액 (공제 불가, 경비 인정용)</li>
                    </ol>
                </div>

                <div style="margin-top: 30px;">
                    <h3>사업용 신용카드 등록</h3>
                    <p>국세청에 사업용 신용카드로 등록된 카드는 세금계산서 없이도 매입세액 공제 가능<br>→ 시스템에서 카드별 "사업용 등록 여부" 플래그 관리</p>
                </div>
            </div>
        </div>

        <!-- Slide 11: Reports & Dashboard -->
        <div class="slide">
            <div class="slide-content">
                <h2>리포트 & 대시보드</h2>

                <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>검토 필요 건, ML 신뢰도 낮은 건 실시간 표시</p>
                    </div>
                    <div class="feature-item">
                        <h4>📅 월말 마감 리포트</h4>
                        <p>월별 카드 사용 집계, 계정과목별 요약</p>
                    </div>
                    <div class="feature-item">
                        <h4>📋 세무사 제출용 리포트</h4>
                        <p>CSV/Excel 내보내기, 전표별 증빙 첨부</p>
                    </div>
                    <div class="feature-item">
                        <h4>📉 불공제 내역 리포트</h4>
                        <p>접대비, 개인 경비 등 불공제 항목 집계</p>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>실시간 알림</h3>
                    <ul>
                        <li><strong>미분류 건:</strong> 분류 실패 또는 ML 신뢰도 낮은 건 즉시 알림</li>
                        <li><strong>승인↔매입 불일치:</strong> 금액 차이 발생 시 담당자에게 알림</li>
                        <li><strong>고액 사용:</strong> 일정 금액 이상 카드 사용 시 관리자 알림</li>
                        <li><strong>월말 마감 임박:</strong> 마감 D-3, D-1 알림</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 12: Multi-Tenancy Design -->
        <div class="slide">
            <div class="slide-content">
                <h2>멀티테넌시 설계</h2>

                <div style="margin-top: 30px;">
                    <h3>논리적 격리 (Logical Isolation)</h3>
                    <ul>
                        <li><strong>tenant_id 필수:</strong> 모든 테이블에 tenant_id 컬럼, 쿼리 시 필터링</li>
                        <li><strong>인덱스 최적화:</strong> (tenant_id, created_at) 복합 인덱스로 성능 확보</li>
                        <li><strong>데이터 완전 분리:</strong> 테넌트 간 데이터 조회 절대 불가</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>자격증명 격리 (Credential Isolation)</h3>
                    <ul>
                        <li><strong>바로빌 API Key:</strong> 테넌트별 별도 등록, 암호화 저장</li>
                        <li><strong>카드 인증 정보:</strong> AES-256 암호화, 사용 시에만 복호화</li>
                        <li><strong>접근 제어:</strong> 테넌트 관리자만 자신의 카드 정보 열람 가능</li>
                    </ul>
                </div>

                <div style="margin-top: 30px;">
                    <h3>속도 제한 & 쿼터 (Rate Limit & Quota)</h3>
                    <ul>
                        <li><strong>API 호출 제한:</strong> 테넌트별 일일 API 호출 횟수 제한</li>
                        <li><strong>데이터 용량:</strong> 테넌트별 월 거래 건수 쿼터 설정</li>
                        <li><strong>공정 사용:</strong> 과도한 사용 시 경고 및 제한</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 13: Security & Compliance -->
        <div class="slide">
            <div class="slide-content">
                <h2>보안 & 컴플라이언스</h2>

                <div class="company-info">
                    <div class="info-card">
                        <h4>🔐 데이터 암호화</h4>
                        <p>전송 중: HTTPS/TLS 1.3</p>
                        <p>저장 시: AES-256 암호화</p>
                        <p>카드번호: 마스킹 (끝 4자리만)</p>
                    </div>
                    <div class="info-card">
                        <h4>🛡️ 접근 제어</h4>
                        <p>역할 기반 권한 (RBAC)</p>
                        <p>테넌트 관리자/회계담당자/열람자</p>
                        <p>IP 화이트리스트 옵션</p>
                    </div>
                    <div class="info-card">
                        <h4>📋 감사 지표</h4>
                        <p>모든 수정 이력 로그</p>
                        <p>누가, 언제, 무엇을 변경했는지 추적</p>
                        <p>7년간 로그 보관</p>
                    </div>
                    <div class="info-card">
                        <h4>🔒 개인정보 최소화</h4>
                        <p>필요한 정보만 수집</p>
                        <p>사용자 동의 기반</p>
                        <p>개인정보 보호법 준수</p>
                    </div>
                </div>

                <div style="margin-top: 30px;">
                    <h3>컴플라이언스 체크리스트</h3>
                    <ul>
                        <li>✅ 개인정보 보호법 준수 (카드번호 마스킹, 암호화)</li>
                        <li>✅ 전자금융거래법 준수 (인증, 암호화 통신)</li>
                        <li>✅ 법인세법 시행령 (증빙 보관 7년)</li>
                        <li>✅ 부가가치세법 (매입세액 공제 요건 충족)</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Slide 14: Development Roadmap -->
        <div class="slide">
            <div class="slide-content">
                <h2>개발 로드맵 (6 Phase, 18주)</h2>

                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>단계</th>
                            <th>기간</th>
                            <th>주요 마일스톤</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Phase 1</strong></td>
                            <td>W1-3</td>
                            <td>바로빌 API 연동, 스키마 설계, 카드 등록 기능</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 2</strong></td>
                            <td>W4-6</td>
                            <td>자동 수집 스케줄러, 데이터 정규화, 중복 제거</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 3</strong></td>
                            <td>W7-9</td>
                            <td>룰 기반 분류 엔진, 가맹점 마스터 구축</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 4</strong></td>
                            <td>W10-12</td>
                            <td>승인↔매입 매칭, 전표 생성, 금전출납부/일보 연동</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 5</strong></td>
                            <td>W13-15</td>
                            <td>ML 모델 개발, 학습 데이터 수집, 피드백 루프</td>
                        </tr>
                        <tr>
                            <td><strong>Phase 6</strong></td>
                            <td>W16-18</td>
                            <td>대시보드, 리포트, 내보내기, 테스트 & 베타 운영</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

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

                <table class="comparison-table">
                    <thead>
                        <tr>
                            <th>지표</th>
                            <th>현재</th>
                            <th>목표</th>
                            <th>측정 방법</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>계정과목 분류 자동화율</strong></td>
                            <td>50% (수동)</td>
                            <td>95%</td>
                            <td>자동 분류 건수 / 전체 건수</td>
                        </tr>
                        <tr>
                            <td><strong>월말 마감 소요 시간</strong></td>
                            <td>8시간</td>
                            <td>1시간</td>
                            <td>카드 내역 정리 시작~완료 시간</td>
                        </tr>
                        <tr>
                            <td><strong>미분류/예외 건수</strong></td>
                            <td>월 평균 200건</td>
                            <td>월 10건 이하</td>
                            <td>검토 필요 건수</td>
                        </tr>
                        <tr>
                            <td><strong>승인↔매입 매칭 정확도</strong></td>
                            <td>70% (수동)</td>
                            <td>98%</td>
                            <td>정확히 매칭된 건수 / 전체 건수</td>
                        </tr>
                        <tr>
                            <td><strong>ML 모델 정확도</strong></td>
                            <td>N/A</td>
                            <td>90% (F1 Score)</td>
                            <td>테스트 데이터셋 검증</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Slide 16: Future Roadmap -->
        <div class="slide">
            <div class="slide-content">
                <h2>향후 로드맵</h2>

                <div class="company-info">
                    <div class="info-card">
                        <h4>📸 영수증 OCR</h4>
                        <p>영수증 이미지 자동 인식</p>
                        <p>카드 내역과 자동 매칭</p>
                        <p>증빙 자료 디지털화</p>
                    </div>
                    <div class="info-card">
                        <h4>🔗 ERP 동기화</h4>
                        <p>회계 시스템 실시간 연동</p>
                        <p>전표 자동 전송</p>
                        <p>양방향 데이터 동기화</p>
                    </div>
                    <div class="info-card">
                        <h4>🤖 ML 고도화</h4>
                        <p>딥러닝 모델 적용</p>
                        <p>이상 거래 탐지</p>
                        <p>비용 최적화 제안</p>
                    </div>
                    <div class="info-card">
                        <h4>📊 홈택스 신고 보조</h4>
                        <p>부가세 신고서 자동 작성</p>
                        <p>매입세액 공제 최적화</p>
                        <p>세무사 협업 기능</p>
                    </div>
                    <div class="info-card">
                        <h4>📱 모바일 앱</h4>
                        <p>현장 영수증 촬영</p>
                        <p>카드 사용 즉시 알림</p>
                        <p>승인/반려 워크플로우</p>
                    </div>
                    <div class="info-card">
                        <h4>📈 고급 분석</h4>
                        <p>부서별 비용 분석</p>
                        <p>예산 대비 실적</p>
                        <p>비용 절감 인사이트</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide 17: 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">17</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 = 17;
        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');
            });

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

            document.getElementById('prevBtn').disabled = (currentSlide === 1);
            document.getElementById('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>
