@extends('layouts.app')

@section('title', '회계동작원리')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
    .acg-body { font-family: 'Noto Sans KR', sans-serif; color: #1e293b; }

    /* 히어로 */
    .acg-hero { background: linear-gradient(135deg, #1e3a5f 0%, #0f4c75 40%, #1b6ca8 70%, #3282b8 100%); }
    .acg-hero-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.12; }

    /* 탭 */
    .acg-tab { padding: 0.5rem 1.25rem; border-radius: 2rem; font-weight: 600; font-size: 0.8rem; transition: all 0.2s; border: 2px solid transparent; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); cursor: pointer; }
    .acg-tab:hover { color: white; background: rgba(255,255,255,0.1); }
    .acg-tab.active { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }
    .acg-section { display: none; }
    .acg-section.active { display: block; }

    /* 플로우 카드 */
    .flow-card { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s; }
    .flow-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .flow-head { padding: 1rem 1.25rem; color: white; font-weight: 700; font-size: 0.85rem; }
    .flow-body { padding: 1.25rem; }

    /* 스텝 */
    .step-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; position: relative; }
    .step-row:last-child { margin-bottom: 0; }
    .step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: white; flex-shrink: 0; }
    .step-content { flex: 1; }
    .step-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
    .step-desc { font-size: 0.75rem; color: #64748b; line-height: 1.6; }
    .step-menu { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1; margin-top: 4px; }

    /* 연결 화살표 */
    .flow-arrow { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; color: #94a3b8; font-size: 1.5rem; }

    /* 주의사항 박스 */
    .notice-box { border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.8rem; line-height: 1.7; }
    .notice-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
    .notice-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
    .notice-tip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

    /* 메뉴 맵 */
    .menu-map { background: #f8fafc; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1.5rem; }
    .menu-group { margin-bottom: 1.25rem; }
    .menu-group:last-child { margin-bottom: 0; }
    .menu-group-title { font-weight: 800; font-size: 0.85rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
    .menu-item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: white; border: 1px solid #e2e8f0; margin: 2px; transition: all 0.2s; }
    .menu-item:hover { border-color: #3b82f6; background: #eff6ff; }
    .menu-item-num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 800; color: white; }

    /* 월간 업무 달력 */
    .cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
    .cal-card { background: white; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 1rem; }
    .cal-day { font-size: 2rem; font-weight: 900; line-height: 1; }
    .cal-label { font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; }
    .cal-desc { font-size: 0.7rem; color: #64748b; margin-top: 0.5rem; line-height: 1.5; }

    /* 흐름도 */
    .process-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
    .process-step { flex: 1; min-width: 120px; max-width: 180px; text-align: center; padding: 1rem 0.5rem; position: relative; }
    .process-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-size: 1.25rem; }
    .process-name { font-weight: 700; font-size: 0.8rem; }
    .process-sub { font-size: 0.65rem; color: #64748b; margin-top: 2px; }
    .process-arrow { display: flex; align-items: center; color: #cbd5e1; font-size: 1.2rem; padding: 0 2px; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
    .anim-in { animation: fadeIn 0.5s ease-out forwards; }
</style>
@endpush

@section('content')
<div class="acg-body">

    {{-- ===== 히어로 ===== --}}
    <div class="acg-hero text-white px-6 py-10 rounded-b-3xl mb-8 relative overflow-hidden">
        <div class="acg-hero-glow" style="top: -40px; right: -40px; background: #60a5fa;"></div>
        <div class="acg-hero-glow" style="bottom: -60px; left: 15%; background: #34d399;"></div>

        <div style="max-width: 1400px; margin: 0 auto; position: relative; z-index: 1;">
            <div class="flex items-center gap-3 mb-3">
                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #2563eb, #3b82f6); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 1.5rem;">📒</span>
                </div>
                <div>
                    <p class="text-blue-300 text-xs font-bold tracking-wider uppercase">SAM 도움말</p>
                    <h1 class="text-3xl font-black">회계동작원리</h1>
                </div>
            </div>
            <p class="text-blue-100 text-sm mb-6" style="max-width: 700px;">
                중소기업 회계담당자와 경리담당자를 위한 SAM 재무/회계 시스템 완전 가이드.
                일상 업무부터 결산까지, 이 문서 하나로 SAM의 회계 프로세스를 완벽하게 이해할 수 있습니다.
            </p>

            <div class="flex flex-wrap gap-2">
                <button class="acg-tab active" onclick="switchAcgTab(0)">전체 흐름도</button>
                <button class="acg-tab" onclick="switchAcgTab(1)">일상 업무</button>
                <button class="acg-tab" onclick="switchAcgTab(2)">월간 업무</button>
                <button class="acg-tab" onclick="switchAcgTab(3)">세금/부가세</button>
                <button class="acg-tab" onclick="switchAcgTab(4)">정산/결산</button>
                <button class="acg-tab" onclick="switchAcgTab(5)">메뉴 맵</button>
            </div>
        </div>
    </div>

    <div style="max-width: 1400px; margin: 0 auto;" class="px-4">

        {{-- ===== 탭 0: 전체 흐름도 ===== --}}
        <div class="acg-section active" id="acgTab0">
            <h2 class="text-xl font-bold mb-2 text-gray-800">SAM 재무/회계 전체 흐름</h2>
            <p class="text-sm text-gray-500 mb-6">매출 발생부터 결산까지, SAM 시스템에서 처리하는 회계의 전체 사이클을 보여줍니다.</p>

            {{-- 큰 흐름도 --}}
            <div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-700 mb-4">회계 순환 과정 (Accounting Cycle)</h3>

                <div class="process-flow mb-6">
                    <div class="process-step">
                        <div class="process-icon" style="background: #dbeafe; color: #2563eb;">📋</div>
                        <div class="process-name">거래 발생</div>
                        <div class="process-sub">매출/매입/경비</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fef3c7; color: #d97706;">✏</div>
                        <div class="process-name">증빙 수집</div>
                        <div class="process-sub">세금계산서/카드전표</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #dcfce7; color: #16a34a;">📝</div>
                        <div class="process-name">전표 입력</div>
                        <div class="process-sub">일반전표/분개</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">📊</div>
                        <div class="process-name">장부 반영</div>
                        <div class="process-sub">자금일보/계좌내역</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #fce7f3; color: #db2777;">🧮</div>
                        <div class="process-name">세무 신고</div>
                        <div class="process-sub">부가세/원천세</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #ecfdf5; color: #059669;">✅</div>
                        <div class="process-name">결산</div>
                        <div class="process-sub">월/분기/연 마감</div>
                    </div>
                </div>

                <div class="notice-info notice-box">
                    <strong>핵심 원리:</strong> SAM에서는 모든 거래가 <strong>증빙(세금계산서, 카드전표, 입금증)</strong>을 기반으로 처리됩니다. 증빙 없는 거래는 존재하지 않으며, 각 증빙은 자동 또는 수동으로 <strong>전표(분개)</strong>로 변환되어 장부에 반영됩니다.
                </div>
            </div>

            {{-- 4대 영역 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">SAM 회계의 4대 영역</h3>
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #1d4ed8, #3b82f6);">
                        <span style="margin-right: 4px;">💰</span> 재무/자금관리
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">회사의 <strong>돈의 흐름</strong>을 관리합니다. "지금 통장에 얼마 있지?", "이번 주 지출 예정은?"</p>
                        <div class="space-y-1">
                            <div class="step-menu">재무 대시보드 — 전사 자금 현황 한눈에</div>
                            <div class="step-menu">일일자금일보 — 매일 입출금 요약</div>
                            <div class="step-menu">자금계획일정 — 미래 자금 스케줄</div>
                            <div class="step-menu">보유계좌관리 — 법인 통장 목록</div>
                            <div class="step-menu">계좌입출금내역 — 실제 이체 내역</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        <span style="margin-right: 4px;">📒</span> 회계/세무관리
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">거래를 <strong>장부에 기록</strong>하고 <strong>세금을 관리</strong>합니다. 모든 숫자의 근거가 되는 핵심 영역.</p>
                        <div class="space-y-1">
                            <div class="step-menu">일반전표입력 — 분개 장부 기록</div>
                            <div class="step-menu">전자세금계산서 — 바로빌 연동 발행/수취</div>
                            <div class="step-menu">홈택스매출/매입 — 국세청 데이터 동기화</div>
                            <div class="step-menu">부가세관리 — 부가가치세 신고 준비</div>
                            <div class="step-menu">경조사비관리 — 복리후생 증빙 관리</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
                        <span style="margin-right: 4px;">💳</span> 카드/차량관리
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3"><strong>법인카드 사용내역</strong>과 <strong>업무용 차량</strong>을 관리합니다. 경비 처리의 핵심.</p>
                        <div class="space-y-1">
                            <div class="step-menu">법인카드관리 — 카드 등록/한도 관리</div>
                            <div class="step-menu">카드사용내역 — 승인/취소 내역 조회</div>
                            <div class="step-menu">차량목록 — 업무용 차량 등록</div>
                            <div class="step-menu">차량일지 — 운행 기록 (유류비 연동)</div>
                            <div class="step-menu">정비이력 — 수리/점검 기록</div>
                        </div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
                        <span style="margin-right: 4px;">🧮</span> 정산관리
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3">영업수수료, 컨설팅비, 구독료 등 <strong>대가를 정산</strong>합니다. 누구에게 얼마를 지급/청구할지.</p>
                        <div class="space-y-1">
                            <div class="step-menu">통합 정산 — 전체 정산 현황</div>
                            <div class="step-menu">영업수수료정산 — 파트너별 수수료 계산</div>
                            <div class="step-menu">컨설팅비용정산 — 외부 컨설팅비</div>
                            <div class="step-menu">고객사정산 — 고객별 청구/입금 매칭</div>
                            <div class="step-menu">구독료정산 — SaaS 구독 과금 관리</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 연관 영역 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">회계와 연결되는 관련 영역</h3>
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
                <div class="flow-card" style="border-left: 3px solid #0ea5e9;">
                    <div class="flow-body">
                        <p class="font-bold text-sm text-sky-700 mb-1">고객/거래처/채권관리</p>
                        <p class="text-xs text-gray-500 mb-2">거래처 등록, 미수금/미지급금 추적, 환불/해지 처리</p>
                        <div class="flex flex-wrap gap-1">
                            <span class="step-menu">거래처관리</span>
                            <span class="step-menu">미수금관리</span>
                            <span class="step-menu">미지급금관리</span>
                            <span class="step-menu">환불/해지관리</span>
                        </div>
                    </div>
                </div>
                <div class="flow-card" style="border-left: 3px solid #f43f5e;">
                    <div class="flow-body">
                        <p class="font-bold text-sm text-rose-700 mb-1">인사/급여관리</p>
                        <p class="text-xs text-gray-500 mb-2">사원정보, 급여 계산, 4대보험, 원천징수</p>
                        <div class="flex flex-wrap gap-1">
                            <span class="step-menu">사원관리</span>
                            <span class="step-menu">급여관리</span>
                            <span class="step-menu">사업소득자관리</span>
                            <span class="step-menu">근태현황</span>
                        </div>
                    </div>
                </div>
                <div class="flow-card" style="border-left: 3px solid #8b5cf6;">
                    <div class="flow-body">
                        <p class="font-bold text-sm text-violet-700 mb-1">영업/매출관리</p>
                        <p class="text-xs text-gray-500 mb-2">영업 실적, 고객 관리, 수주 데이터 → 매출 전표로 연결</p>
                        <div class="flex flex-wrap gap-1">
                            <span class="step-menu">영업실적관리</span>
                            <span class="step-menu">파트너관리</span>
                            <span class="step-menu">고객관리</span>
                            <span class="step-menu">상품관리</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== 탭 1: 일상 업무 ===== --}}
        <div class="acg-section" id="acgTab1">
            <h2 class="text-xl font-bold mb-2 text-gray-800">일상 업무 가이드</h2>
            <p class="text-sm text-gray-500 mb-6">회계담당자가 매일 처리하는 핵심 업무를 단계별로 안내합니다.</p>

            <div class="grid gap-5" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));">

                {{-- 출근 후 확인 --}}
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #1d4ed8, #3b82f6);">
                        ☀ 출근 후 — 자금 현황 확인
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">1</div>
                            <div class="step-content">
                                <div class="step-title">재무 대시보드 확인</div>
                                <div class="step-desc">전사 자금 현황, 당일 입출금 예정, 미수금/미지급금 알림을 한눈에 확인합니다.</div>
                                <span class="step-menu">재무/자금관리 > 재무 대시보드</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">2</div>
                            <div class="step-content">
                                <div class="step-title">계좌 입출금 내역 조회</div>
                                <div class="step-desc">전일 이후 발생한 입출금 내역을 확인하고, 미확인 건이 있는지 체크합니다.</div>
                                <span class="step-menu">재무/자금관리 > 계좌입출금내역</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #2563eb;">3</div>
                            <div class="step-content">
                                <div class="step-title">일일자금일보 작성</div>
                                <div class="step-desc">전일 기준 자금 현황을 정리하여 대표에게 보고할 자금일보를 확인/작성합니다.</div>
                                <span class="step-menu">재무/자금관리 > 일일자금일보</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 매출/매입 처리 --}}
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        📑 일상 — 매출/매입 전표 처리
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">1</div>
                            <div class="step-content">
                                <div class="step-title">세금계산서 확인</div>
                                <div class="step-desc">바로빌 연동으로 발행/수취한 전자세금계산서를 확인합니다. 누락 건이 없는지 매일 체크.</div>
                                <span class="step-menu">회계/세무관리 > 전자세금계산서</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">2</div>
                            <div class="step-content">
                                <div class="step-title">전표 입력 (분개)</div>
                                <div class="step-desc">세금계산서, 입금증, 지출증빙 등을 기반으로 차변/대변 분개 전표를 입력합니다.</div>
                                <span class="step-menu">회계/세무관리 > 일반전표입력</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #059669;">3</div>
                            <div class="step-content">
                                <div class="step-title">미수금/미지급금 확인</div>
                                <div class="step-desc">거래처별 미수금(받을 돈)과 미지급금(줄 돈)의 잔액을 확인하고 독촉/지급 일정을 관리합니다.</div>
                                <span class="step-menu">고객/거래처/채권관리 > 미수금/미지급금관리</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 법인카드 --}}
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
                        💳 일상 — 법인카드 관리
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #d97706;">1</div>
                            <div class="step-content">
                                <div class="step-title">카드 사용내역 조회</div>
                                <div class="step-desc">임직원의 법인카드 사용 내역을 조회합니다. 사용 목적, 금액, 가맹점 정보를 확인합니다.</div>
                                <span class="step-menu">카드/차량관리 > 카드사용내역</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #d97706;">2</div>
                            <div class="step-content">
                                <div class="step-title">사용 내역 분류</div>
                                <div class="step-desc">각 사용건의 계정 과목을 분류합니다 (접대비, 복리후생비, 소모품비, 여비교통비 등).</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #d97706;">3</div>
                            <div class="step-content">
                                <div class="step-title">증빙 확인 및 전표 연결</div>
                                <div class="step-desc">영수증/카드전표를 증빙으로 첨부하고, 해당 전표를 일반전표에 반영합니다.</div>
                            </div>
                        </div>
                        <div class="notice-tip notice-box mt-3" style="font-size: 0.7rem;">
                            <strong>팁:</strong> 법인카드 사용 내역은 카드사 연동으로 자동 수집됩니다. 경리담당자는 <strong>계정 과목 분류</strong>와 <strong>사용 목적 확인</strong>에 집중하세요.
                        </div>
                    </div>
                </div>

                {{-- 경비/지출 --}}
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
                        🧾 일상 — 경비/지출 처리
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">1</div>
                            <div class="step-content">
                                <div class="step-title">경조사비 처리</div>
                                <div class="step-desc">직원 경조사 발생 시 축의금/조의금을 등록합니다. 비과세 한도(20만원) 자동 체크.</div>
                                <span class="step-menu">회계/세무관리 > 경조사비관리</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">2</div>
                            <div class="step-content">
                                <div class="step-title">거래처 관리</div>
                                <div class="step-desc">신규 거래처 등록, 사업자등록번호 확인, 계좌정보 관리. 세금계산서 발행에 필요한 기초 정보.</div>
                                <span class="step-menu">고객/거래처/채권관리 > 거래처관리</span>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">3</div>
                            <div class="step-content">
                                <div class="step-title">환불/해지 처리</div>
                                <div class="step-desc">고객 환불 요청이나 계약 해지 시 환불금액을 산정하고 역분개 전표를 처리합니다.</div>
                                <span class="step-menu">고객/거래처/채권관리 > 환불/해지관리</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== 탭 2: 월간 업무 ===== --}}
        <div class="acg-section" id="acgTab2">
            <h2 class="text-xl font-bold mb-2 text-gray-800">월간 업무 캘린더</h2>
            <p class="text-sm text-gray-500 mb-6">매월 반복되는 회계/경리 업무 일정입니다. 마감일을 놓치지 않도록 참고하세요.</p>

            <div class="cal-grid mb-6">
                <div class="cal-card" style="border-top: 3px solid #ef4444;">
                    <div class="cal-day text-red-500">1~5일</div>
                    <div class="cal-label text-red-700">전월 마감</div>
                    <div class="cal-desc">전월 매출/매입 세금계산서 최종 확인. 미수취 세금계산서 독촉. 전월 카드 사용내역 분류 완료.</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #f97316;">
                    <div class="cal-day text-orange-500">10일</div>
                    <div class="cal-label text-orange-700">원천세 신고/납부</div>
                    <div class="cal-desc">전월 급여/사업소득에 대한 원천징수세액 신고 및 납부 기한. (급여관리 연동)</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #eab308;">
                    <div class="cal-day text-yellow-600">10~15일</div>
                    <div class="cal-label text-yellow-700">급여 처리</div>
                    <div class="cal-desc">당월 급여 계산, 4대보험료 산정, 원천징수 계산. 급여 이체 및 급여 전표 처리.</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #22c55e;">
                    <div class="cal-day text-green-600">15일</div>
                    <div class="cal-label text-green-700">4대보험 납부</div>
                    <div class="cal-desc">국민연금, 건강보험, 고용보험, 산재보험 사업장 분담금 납부.</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #3b82f6;">
                    <div class="cal-day text-blue-600">20일</div>
                    <div class="cal-label text-blue-700">자금 계획 수립</div>
                    <div class="cal-desc">차월 지출 예정 파악, 자금 스케줄 등록, 대표 보고용 자금 계획 작성.</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #8b5cf6;">
                    <div class="cal-day text-violet-600">25일</div>
                    <div class="cal-label text-violet-700">부가세 예정 (분기)</div>
                    <div class="cal-desc">1/4/7/10월 25일: 부가가치세 예정/확정 신고 기한. SAM의 부가세관리에서 사전 준비.</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #06b6d4;">
                    <div class="cal-day text-cyan-600">말일</div>
                    <div class="cal-label text-cyan-700">월 마감</div>
                    <div class="cal-desc">당월 전표 최종 점검, 잔액 대사(통장 vs 장부), 미처리 건 확인, 월간 재무제표 생성.</div>
                </div>
                <div class="cal-card" style="border-top: 3px solid #ec4899;">
                    <div class="cal-day text-pink-500">수시</div>
                    <div class="cal-label text-pink-700">정산 처리</div>
                    <div class="cal-desc">영업수수료, 컨설팅비, 구독료 정산 요청 발생 시 수시 처리. 고객사 정산 매칭.</div>
                </div>
            </div>

            <div class="notice-warn notice-box mb-6">
                <strong>주의:</strong> 세금계산서 발행은 <strong>거래일이 속한 달의 다음 달 10일까지</strong> 완료해야 합니다 (지연발급 가산세 1%). 매월 초에 전월 미발행 건을 반드시 확인하세요.
            </div>

            <div class="notice-info notice-box">
                <strong>분기별 추가 업무:</strong> 1월/4월/7월/10월에는 <strong>부가가치세 신고</strong>가 추가됩니다. SAM의 '부가세관리'에서 매출/매입 세액을 자동 집계하여 신고서 작성을 도와줍니다.
            </div>
        </div>

        {{-- ===== 탭 3: 세금/부가세 ===== --}}
        <div class="acg-section" id="acgTab3">
            <h2 class="text-xl font-bold mb-2 text-gray-800">세금/부가세 관리</h2>
            <p class="text-sm text-gray-500 mb-6">SAM에서 세금 관련 업무를 처리하는 전체 흐름입니다.</p>

            {{-- 부가세 프로세스 --}}
            <div class="flow-card mb-5">
                <div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">
                    부가가치세 신고 프로세스
                </div>
                <div class="flow-body">
                    <div class="step-row">
                        <div class="step-num" style="background: #dc2626;">1</div>
                        <div class="step-content">
                            <div class="step-title">매출 세금계산서 발행</div>
                            <div class="step-desc">고객에게 재화/용역을 공급하면 전자세금계산서를 발행합니다. 바로빌 연동으로 발행하면 국세청에 자동 전송됩니다.</div>
                            <span class="step-menu">회계/세무관리 > 전자세금계산서</span>
                        </div>
                    </div>
                    <div class="step-row">
                        <div class="step-num" style="background: #dc2626;">2</div>
                        <div class="step-content">
                            <div class="step-title">매입 세금계산서 수취 확인</div>
                            <div class="step-desc">거래처로부터 받은 매입 세금계산서를 확인합니다. 홈택스 데이터와 자동 대사하여 누락 건을 찾습니다.</div>
                            <span class="step-menu">회계/세무관리 > 홈택스매출/매입</span>
                        </div>
                    </div>
                    <div class="step-row">
                        <div class="step-num" style="background: #dc2626;">3</div>
                        <div class="step-content">
                            <div class="step-title">매출세액 - 매입세액 = 납부세액</div>
                            <div class="step-desc">분기별로 매출세액(받은 부가세)에서 매입세액(낸 부가세)을 차감하여 납부할 부가세를 계산합니다.</div>
                            <span class="step-menu">회계/세무관리 > 부가세관리</span>
                        </div>
                    </div>
                    <div class="step-row">
                        <div class="step-num" style="background: #dc2626;">4</div>
                        <div class="step-content">
                            <div class="step-title">신고서 작성 및 납부</div>
                            <div class="step-desc">SAM에서 집계된 데이터를 기반으로 부가세 신고서를 작성합니다. 납부 기한: 분기 종료 후 25일 이내.</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 부가세 계산 설명 --}}
            <div class="bg-white rounded-xl p-6 mb-5" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <h3 class="font-bold text-sm text-gray-800 mb-3">부가세 계산 원리</h3>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm" style="border-collapse: separate; border-spacing: 0;">
                        <thead>
                            <tr style="background: #fef2f2;">
                                <th class="text-left p-3 font-bold text-red-800 rounded-tl-lg">구분</th>
                                <th class="text-center p-3 font-bold text-red-800">의미</th>
                                <th class="text-center p-3 font-bold text-red-800">예시</th>
                                <th class="text-center p-3 font-bold text-red-800 rounded-tr-lg">SAM 메뉴</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b">
                                <td class="p-3 font-medium">매출세액</td>
                                <td class="p-3 text-center text-xs text-gray-600">고객에게 받은 부가세 (공급가액의 10%)</td>
                                <td class="p-3 text-center text-xs">매출 1,000만원 → 부가세 100만원</td>
                                <td class="p-3 text-center"><span class="step-menu">전자세금계산서</span></td>
                            </tr>
                            <tr class="border-b">
                                <td class="p-3 font-medium">매입세액</td>
                                <td class="p-3 text-center text-xs text-gray-600">거래처에 낸 부가세 (비용의 10%)</td>
                                <td class="p-3 text-center text-xs">매입 600만원 → 부가세 60만원</td>
                                <td class="p-3 text-center"><span class="step-menu">홈택스매출/매입</span></td>
                            </tr>
                            <tr style="background: #fef2f2;">
                                <td class="p-3 font-bold text-red-700">납부세액</td>
                                <td class="p-3 text-center text-xs font-bold text-red-700">매출세액 - 매입세액</td>
                                <td class="p-3 text-center text-xs font-bold text-red-700">100만 - 60만 = 40만원 납부</td>
                                <td class="p-3 text-center"><span class="step-menu">부가세관리</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- 세금계산서 vs 카드매입 --}}
            <div class="grid gap-4 mb-5" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        세금계산서 기반 매입세액 공제
                    </div>
                    <div class="flow-body text-xs text-gray-600" style="line-height: 1.8;">
                        <p><strong>적격 증빙:</strong> 전자세금계산서, 전자계산서</p>
                        <p><strong>매입세액 공제:</strong> 공급가액의 10% 전액 공제 가능</p>
                        <p><strong>발행 기한:</strong> 공급일이 속하는 달의 다음 달 10일</p>
                        <p><strong>SAM 처리:</strong> 바로빌 연동으로 자동 발행/수취, 홈택스 대사</p>
                    </div>
                </div>
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
                        법인카드 기반 매입세액 공제
                    </div>
                    <div class="flow-body text-xs text-gray-600" style="line-height: 1.8;">
                        <p><strong>적격 증빙:</strong> 법인카드 매출전표 (사업자 가맹점)</p>
                        <p><strong>매입세액 공제:</strong> 부가세 포함 금액에서 10/110 공제</p>
                        <p><strong>주의:</strong> 비사업자 가맹점, 간이과세자 매입은 공제 불가</p>
                        <p><strong>SAM 처리:</strong> 카드사 연동으로 자동 수집, 계정 과목 분류</p>
                    </div>
                </div>
            </div>

            <div class="notice-tip notice-box">
                <strong>실무 팁:</strong> 매 분기 부가세 신고 전에 SAM의 <strong>'홈택스매출/매입'</strong> 메뉴에서 국세청 데이터와 우리 장부를 대사하세요. 누락된 매입 세금계산서가 있으면 매입세액 공제를 못 받아 세금을 더 내게 됩니다.
            </div>
        </div>

        {{-- ===== 탭 4: 정산/결산 ===== --}}
        <div class="acg-section" id="acgTab4">
            <h2 class="text-xl font-bold mb-2 text-gray-800">정산 및 결산</h2>
            <p class="text-sm text-gray-500 mb-6">SAM에서의 정산 업무와 월/분기/연간 결산 프로세스입니다.</p>

            {{-- 정산 유형 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">정산 업무 유형</h3>
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">영업수수료 정산</div>
                    <div class="flow-body">
                        <div class="text-xs text-gray-600 space-y-2">
                            <p><strong>대상:</strong> 영업파트너 (대리점, 총판, 개인 영업)</p>
                            <p><strong>기준:</strong> 매출 실적 x 수수료율 = 지급액</p>
                            <p><strong>주기:</strong> 월 1회 (익월 15일 지급)</p>
                            <p><strong>처리:</strong> 실적 확인 → 수수료 계산 → 세금계산서 수취 → 이체</p>
                        </div>
                        <span class="step-menu mt-2">정산관리 > 영업수수료정산</span>
                    </div>
                </div>
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #0891b2, #67e8f9);">고객사 정산</div>
                    <div class="flow-body">
                        <div class="text-xs text-gray-600 space-y-2">
                            <p><strong>대상:</strong> 서비스 이용 고객사</p>
                            <p><strong>기준:</strong> 구독료 + 추가 사용량 = 청구액</p>
                            <p><strong>주기:</strong> 월 1회 (당월 말 청구, 익월 10일 입금)</p>
                            <p><strong>처리:</strong> 사용량 집계 → 청구서 발행 → 입금 확인 → 미수금 관리</p>
                        </div>
                        <span class="step-menu mt-2">정산관리 > 고객사정산</span>
                    </div>
                </div>
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">급여 정산</div>
                    <div class="flow-body">
                        <div class="text-xs text-gray-600 space-y-2">
                            <p><strong>대상:</strong> 정규직 사원 + 사업소득자(프리랜서)</p>
                            <p><strong>기준:</strong> 기본급 + 수당 - 4대보험 - 원천세 = 실수령액</p>
                            <p><strong>주기:</strong> 월 1회 (매월 15~25일)</p>
                            <p><strong>처리:</strong> 근태 확인 → 급여 계산 → 원천징수 → 이체 → 전표</p>
                        </div>
                        <span class="step-menu mt-2">인사관리 > 급여관리</span>
                    </div>
                </div>
            </div>

            {{-- 결산 프로세스 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">월 결산 체크리스트</h3>
            <div class="bg-white rounded-xl p-6 mb-5" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
                <div class="space-y-3">
                    <div class="flex items-start gap-3 p-3 rounded-lg" style="background: #f0fdf4; border: 1px solid #bbf7d0;">
                        <span class="text-lg">1️⃣</span>
                        <div>
                            <p class="text-sm font-bold text-green-800">전표 마감</p>
                            <p class="text-xs text-gray-600">해당 월의 모든 전표가 입력되었는지 확인. 미처리 증빙, 누락된 세금계산서 체크.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 p-3 rounded-lg" style="background: #eff6ff; border: 1px solid #bfdbfe;">
                        <span class="text-lg">2️⃣</span>
                        <div>
                            <p class="text-sm font-bold text-blue-800">잔액 대사</p>
                            <p class="text-xs text-gray-600">실제 통장 잔고와 SAM 장부 잔액을 대사합니다. 차이가 있으면 원인을 추적합니다.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 p-3 rounded-lg" style="background: #fefce8; border: 1px solid #fef08a;">
                        <span class="text-lg">3️⃣</span>
                        <div>
                            <p class="text-sm font-bold text-yellow-800">미수금/미지급금 확인</p>
                            <p class="text-xs text-gray-600">해당 월 발생한 미수금과 미지급금의 잔액을 확인하고, 장기 미수금에 대한 조치를 결정합니다.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 p-3 rounded-lg" style="background: #fdf2f8; border: 1px solid #fbcfe8;">
                        <span class="text-lg">4️⃣</span>
                        <div>
                            <p class="text-sm font-bold text-pink-800">감가상각/선급비용 처리</p>
                            <p class="text-xs text-gray-600">고정자산 감가상각비, 보험료 등 선급비용의 당월분을 비용으로 처리합니다.</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3 p-3 rounded-lg" style="background: #f5f3ff; border: 1px solid #ddd6fe;">
                        <span class="text-lg">5️⃣</span>
                        <div>
                            <p class="text-sm font-bold text-purple-800">월간 재무제표 확인</p>
                            <p class="text-xs text-gray-600">손익계산서, 재무상태표를 출력하여 전월 대비 이상 항목이 없는지 검토합니다.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="notice-warn notice-box">
                <strong>연간 결산 참고:</strong> 12월 결산법인은 <strong>3월 말</strong>까지 법인세 신고를 완료해야 합니다. 연간 결산은 월 결산의 누적이므로, 매월 정확히 마감하면 연말 결산이 수월해집니다.
            </div>
        </div>

        {{-- ===== 탭 5: 메뉴 맵 ===== --}}
        <div class="acg-section" id="acgTab5">
            <h2 class="text-xl font-bold mb-2 text-gray-800">SAM 재무/회계 메뉴 맵</h2>
            <p class="text-sm text-gray-500 mb-6">SAM 시스템의 재무/회계 관련 전체 메뉴를 한눈에 보여줍니다. 각 메뉴의 역할을 빠르게 파악하세요.</p>

            <div class="menu-map mb-5">
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #1d4ed8, #3b82f6); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">💰</span>
                        재무/자금관리
                    </div>
                    <div class="flex flex-wrap">
                        <span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">1</span> 재무 대시보드</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">2</span> 일일자금일보</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">3</span> 자금계획일정</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">4</span> 보유계좌관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">5</span> 계좌입출금내역</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #059669, #34d399); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">📒</span>
                        회계/세무관리
                    </div>
                    <div class="flex flex-wrap">
                        <span class="menu-item"><span class="menu-item-num" style="background: #059669;">1</span> 일반전표입력</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #059669;">2</span> 전자세금계산서</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #059669;">3</span> 홈택스매출/매입</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #059669;">4</span> 부가세관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #059669;">5</span> 경조사비관리</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #d97706, #f59e0b); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">💳</span>
                        카드/차량관리
                    </div>
                    <div class="flex flex-wrap">
                        <span class="menu-item"><span class="menu-item-num" style="background: #d97706;">1</span> 법인카드관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #d97706;">2</span> 카드사용내역</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #d97706;">3</span> 차량목록</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #d97706;">4</span> 차량일지</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #d97706;">5</span> 정비이력</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #7c3aed, #a78bfa); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">🧮</span>
                        정산관리
                    </div>
                    <div class="flex flex-wrap">
                        <span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">1</span> 통합 정산</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">2</span> 영업수수료정산</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">3</span> 컨설팅비용정산</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">4</span> 고객사정산</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">5</span> 구독료정산</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">6</span> 수당지급현황통계</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #0ea5e9, #38bdf8); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">🤝</span>
                        고객/거래처/채권관리
                    </div>
                    <div class="flex flex-wrap">
                        <span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">1</span> 거래처관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">2</span> 고객사관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">3</span> 미수금관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">4</span> 미지급금관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">5</span> 환불/해지관리</span>
                    </div>
                </div>

                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #e11d48, #fb7185); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">👤</span>
                        인사관리 (회계 연관)
                    </div>
                    <div class="flex flex-wrap">
                        <span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">1</span> 사원관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">2</span> 급여관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">3</span> 사업소득자관리</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">4</span> 사업소득자입력</span>
                        <span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">5</span> 근태현황</span>
                    </div>
                </div>
            </div>

            <div class="notice-tip notice-box">
                <strong>사용 순서 권장:</strong> SAM을 처음 사용하신다면 이 순서로 시작하세요:
                <strong>거래처관리</strong>(기초 등록) → <strong>보유계좌관리</strong>(통장 등록) → <strong>법인카드관리</strong>(카드 등록) → <strong>재무 대시보드</strong>(현황 파악) → <strong>일반전표입력</strong>(일상 업무 시작)
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
function switchAcgTab(index) {
    document.querySelectorAll('.acg-tab').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
    });
    document.querySelectorAll('.acg-section').forEach((section, i) => {
        section.classList.toggle('active', i === index);
    });
}
</script>
@endpush