@extends('layouts.app')

@section('title', '장기적 노무전략')

@push('styles')
<style>
    ::-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; }

    .presentation-container { width: 100%; min-height: calc(100vh - 80px); position: relative; overflow: hidden; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }
    .slide { width: 100%; min-height: calc(100vh - 80px); 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); }

    .presentation-container h1 { color: #2563eb; font-size: 3em; margin-bottom: 20px; text-align: center; font-weight: 800; }
    .presentation-container h2 { color: #1e40af; font-size: 2.5em; margin-bottom: 30px; text-align: center; border-bottom: 3px solid #2563eb; padding-bottom: 15px; font-weight: 700; }
    .presentation-container h3 { color: #2563eb; font-size: 1.8em; margin: 25px 0 15px 0; font-weight: 700; }
    .presentation-container p, .presentation-container li { font-size: 1.2em; line-height: 1.8; color: #1e293b; margin-bottom: 15px; }
    .presentation-container 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; }

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

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

    .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: 50%; transform: translateX(-50%); 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; }
        .presentation-container h1 { font-size: 2em; } .presentation-container h2 { font-size: 1.8em; } .presentation-container h3 { font-size: 1.4em; }
        .presentation-container p, .presentation-container 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>
@endpush

@section('content')
<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: 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 class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 근태 자동화</h4><p>출퇴근 관리 및 휴가 신청 자동 처리</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 급여 계산</h4><p>급여, 수당, 공제 자동 계산 및 명세서 발행</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg> 4대보험 관리</h4><p>국민연금, 건강보험, 고용보험, 산재보험 자동 신고</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 퇴직금 산정</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 3: Core Values -->
    <div class="slide">
        <div class="slide-content">
            <h2>핵심 가치 제안</h2>
            <div class="company-info">
                <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg> 자동화</h4><p>근태, 급여, 보험 업무 자동 처리</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">월 100시간 노무 업무 절감</p></div>
                <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg> 정확성</h4><p>복잡한 급여 및 보험료 계산 오류 방지</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">계산 오류 99% 감소</p></div>
                <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg> 법규 준수</h4><p>근로기준법 및 4대보험 법규 자동 반영</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">법적 리스크 최소화</p></div>
                <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg> 접근성</h4><p>모바일 앱을 통한 근태 및 급여 확인</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">언제 어디서나 접근</p></div>
                <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg> 통합성</h4><p>회계, ERP 시스템과 연동</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">데이터 이중 입력 제거</p></div>
                <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> 보안</h4><p>개인정보 암호화 및 접근 제어</p><p style="font-size: 0.9em; margin-top: 10px; opacity: 0.9;">ISMS 인증 수준 보안</p></div>
            </div>
        </div>
    </div>

    <!-- Slide 4: Planning - Requirements -->
    <div class="slide">
        <div class="slide-content">
            <h2>기획: 기능 요구사항</h2>
            <div style="margin-top: 30px;">
                <h3>1. 근태 관리</h3>
                <ul>
                    <li>출퇴근 타임카드 및 GPS 기반 위치 확인</li>
                    <li>연차, 반차, 병가 등 휴가 신청 및 승인</li>
                    <li>야근, 특근, 휴일근무 신청 및 집계</li>
                    <li>월별 근태 현황 리포트 및 통계</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>2. 급여 관리</h3>
                <ul>
                    <li>기본급, 수당, 상여금 자동 계산</li>
                    <li>4대보험료, 소득세 자동 공제</li>
                    <li>급여명세서 자동 생성 및 발송</li>
                    <li>연봉 계약 관리 및 인상률 반영</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>3. 4대보험 관리</h3>
                <ul>
                    <li>국민연금, 건강보험 자동 계산 및 신고</li>
                    <li>고용보험, 산재보험 신고 자동화</li>
                    <li>보험료 납부 내역 관리</li>
                    <li>취득/상실 신고 자동 처리</li>
                </ul>
            </div>
            <div style="margin-top: 30px;">
                <h3>4. 퇴직금 관리</h3>
                <ul>
                    <li>퇴직금 자동 계산 (평균임금 기준)</li>
                    <li>퇴직연금 DC/DB 관리</li>
                    <li>중간정산 신청 및 처리</li>
                    <li>퇴직금 지급 내역 기록</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Slide 5: 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; border: 1px solid #bfdbfe;">
                <h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 1: 월급여 처리 프로세스</h3>
                <ol style="color: #333;">
                    <li><strong>근태 마감:</strong> 월말 근태 데이터 확정 (출퇴근, 휴가, 야근)</li>
                    <li><strong>급여 계산:</strong> 기본급 + 수당 - 공제 자동 계산</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; border: 1px solid #c7d2fe;">
                <h3 style="margin-top: 0; color: #1e40af; font-weight: 700;">시나리오 2: 신규 직원 입사 처리</h3>
                <ol style="color: #333;">
                    <li><strong>정보 등록:</strong> 인적사항, 연봉, 계약 조건 입력</li>
                    <li><strong>4대보험 취득:</strong> 자동으로 취득 신고 데이터 생성</li>
                    <li><strong>계정 생성:</strong> 근태/급여 시스템 계정 자동 생성</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; border: 1px solid #bfdbfe;">
                <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>4대보험 상실:</strong> 자동 상실 신고</li>
                    <li><strong>문서 발급:</strong> 퇴직증명서, 경력증명서 발급</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Slide 6: Advanced Features -->
    <div class="slide">
        <div class="slide-content">
            <h2>기획: 고급 기능</h2>
            <div class="feature-list">
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg> 모바일 앱</h4><p>출퇴근 타임카드, 급여 조회, 휴가 신청</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">iOS/Android 지원</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg> 알림 시스템</h4><p>급여일, 보험료 납부일, 계약 갱신 알림</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">푸시, 이메일, SMS</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg> 인사 대시보드</h4><p>직원 현황, 급여 통계, 퇴사율 분석</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">실시간 인사 KPI</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg> 전자문서</h4><p>근로계약서, 급여명세서 전자서명</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">법적 효력 보장</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg> ERP 연동</h4><p>회계 시스템 자동 연동</p><p style="font-size: 0.9em; margin-top: 5px; color: #666;">급여 → 회계 자동 전표</p></div>
                <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg> AI 추천</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>4대보험 신고:</strong> 공단 연동 자동 신고</li>
                    <li><strong>감사 추적:</strong> 모든 급여 및 인사 변경 이력 기록</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Slide 7: 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 class="flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg> 사용자 중심</h4><p>직원과 관리자 모두 쉽게 사용</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> 빠른 처리</h4><p>최소 클릭으로 업무 완료</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg> 모바일 우선</h4><p>스마트폰에서 주요 기능 사용</p></div>
                    <div class="feature-item"><h4 class="flex items-center gap-2"><svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> 보안 강조</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>
                    <li><strong>4대보험:</strong> 보험료 현황, 신고 내역, 납부 관리</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Slide 8: 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 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg> 인사 정보 서비스</h4><p>직원 정보 관리 및 조직도</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 근태 서비스</h4><p>출퇴근, 휴가, 야근 관리</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 급여 계산 엔진</h4><p>급여, 수당, 공제 자동 계산</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg> 보험 서비스</h4><p>4대보험 계산 및 신고</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg> 퇴직금 서비스</h4><p>퇴직금 계산 및 정산</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg> 알림 서비스</h4><p>푸시, 이메일, SMS 발송</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>Application</strong></td><td>Node.js (NestJS) / Python (FastAPI)</td><td>비즈니스 로직 처리</td></tr>
                        <tr><td><strong>Database</strong></td><td>PostgreSQL</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</td><td>비동기 처리 (급여 계산 등)</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Slide 9: 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>employees</strong></td><td>id, name, dept, position, hire_date, salary</td><td>1:N attendance, payroll</td></tr>
                        <tr><td><strong>attendance</strong></td><td>id, employee_id, date, check_in, check_out</td><td>N:1 employees</td></tr>
                        <tr><td><strong>leave_requests</strong></td><td>id, employee_id, type, start_date, end_date</td><td>N:1 employees</td></tr>
                        <tr><td><strong>payroll</strong></td><td>id, employee_id, period, base_pay, deductions</td><td>N:1 employees</td></tr>
                        <tr><td><strong>insurance</strong></td><td>id, employee_id, type, premium, period</td><td>N:1 employees</td></tr>
                        <tr><td><strong>severance_pay</strong></td><td>id, employee_id, years, avg_wage, amount</td><td>N:1 employees</td></tr>
                    </tbody>
                </table>
            </div>
            <div style="margin-top: 30px;">
                <h3>데이터 보안 전략</h3>
                <ul>
                    <li><strong>암호화:</strong> 주민번호, 계좌번호 AES-256 암호화</li>
                    <li><strong>접근 제어:</strong> 역할 기반 접근 제어 (RBAC)</li>
                    <li><strong>감사 로그:</strong> 모든 급여 및 인사 변경 이력 기록</li>
                    <li><strong>백업:</strong> 일일 자동 백업 및 복구 테스트</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Slide 10: 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 + TypeScript</td><td>컴포넌트 기반 UI 구축</td></tr>
                        <tr><td><strong>상태 관리</strong></td><td>Zustand / React Query</td><td>전역 상태 및 서버 상태 관리</td></tr>
                        <tr><td><strong>UI 라이브러리</strong></td><td>Material-UI (MUI)</td><td>디자인 시스템 구현</td></tr>
                        <tr><td><strong>차트</strong></td><td>Recharts</td><td>통계 데이터 시각화</td></tr>
                    </tbody>
                </table>
            </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 Native</td><td>크로스 플랫폼 앱 개발</td></tr>
                        <tr><td><strong>내비게이션</strong></td><td>React Navigation</td><td>화면 전환 관리</td></tr>
                        <tr><td><strong>푸시 알림</strong></td><td>Firebase Cloud Messaging</td><td>실시간 알림 발송</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Slide 11: Development Roadmap -->
    <div class="slide">
        <div class="slide-content">
            <h2>개발 로드맵</h2>
            <table class="comparison-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>4대보험 연동 및 테스트</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: #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>
                </ul>
            </div>
        </div>
    </div>

    <!-- Slide 12: Success Metrics -->
    <div class="slide">
        <div class="slide-content">
            <h2>성공 지표</h2>
            <div style="margin-top: 30px;">
                <h3 class="flex items-center gap-2"><svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg> 정량적 KPI</h3>
                <table class="comparison-table">
                    <thead><tr><th>지표</th><th>목표치</th><th>측정 방법</th></tr></thead>
                    <tbody>
                        <tr><td><strong>업무 시간 절감</strong></td><td>70% 이상</td><td>급여 처리 소요 시간 비교</td></tr>
                        <tr><td><strong>계산 오류율</strong></td><td>99% 감소</td><td>급여 및 보험료 오류 건수</td></tr>
                        <tr><td><strong>사용자 만족도</strong></td><td>NPS 60 이상</td><td>분기별 만족도 조사</td></tr>
                        <tr><td><strong>시스템 가용성</strong></td><td>99.9% 이상</td><td>Uptime 모니터링</td></tr>
                        <tr><td><strong>모바일 사용률</strong></td><td>60% 이상</td><td>모바일 앱 활성 사용자</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Slide 13: 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;">자동화로 시간을 절약하고, 정확성으로 신뢰를 높이며, 통합으로 효율을 극대화하는 노무 솔루션</p>
            </div>
            <div style="margin-top: 40px;">
                <h3>핵심 차별점</h3>
                <div class="company-info">
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg> 완전 자동화</h4><p>근태부터 급여까지 End-to-End 자동화</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg> 모바일 우선</h4><p>언제 어디서나 근태 및 급여 확인</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" /></svg> 법규 준수</h4><p>근로기준법 및 4대보험 자동 반영</p></div>
                    <div class="info-card"><h4 class="flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg> 강력한 보안</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 style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">70% 절감</span> | 계산 오류 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">99% 감소</span> | 법규 준수 <span style="background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); color: white; padding: 5px 10px; border-radius: 8px;">자동 보장</span></p>
            </div>
        </div>
    </div>

    <!-- Slide 14: 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">14</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>
@endsection

@push('scripts')
<script>
    let currentSlide = 1;
    const totalSlides = 14;
    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);
</script>
@endpush