@extends('layouts.app')

@section('title', '바로빌 개발문서')

@section('content')
<div class="max-w-5xl mx-auto">

    {{-- 페이지 헤더 --}}
    <div class="mb-8">
        <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
            <a href="{{ route('barobill.settings.index') }}" class="hover:text-blue-600">바로빌</a>
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <span class="text-gray-800 font-medium">개발문서</span>
        </div>
        <h1 class="text-2xl font-bold text-gray-800">바로빌 연동 개발문서</h1>
        <p class="text-sm text-gray-500 mt-1">SAM에서 바로빌 API를 통해 연동하는 서비스 현황과 기술 가이드</p>
    </div>

    {{-- 목차 --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-8">
        <h2 class="font-semibold text-blue-800 mb-3">📋 목차</h2>
        <nav class="grid gap-1 text-sm" style="grid-template-columns: repeat(2, 1fr);">
            <a href="#section1" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">1. 바로빌이란?</a>
            <a href="#section7" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">7. 시스템 구조 (개발자용)</a>
            <a href="#section2" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5 font-semibold">2. 회원사 필수 설정 가이드</a>
            <a href="#section8" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">8. 주요 테이블</a>
            <a href="#section3" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">3. 우리가 쓰는 서비스</a>
            <a href="#section9" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">9. API 엔드포인트</a>
            <a href="#section4" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">4. 서비스별 상세</a>
            <a href="#section10" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">10. 트러블슈팅</a>
            <a href="#section5" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">5. 카카오톡 알림톡 흐름</a>
            <a href="#section11" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">11. 관련 파일 경로</a>
            <a href="#section6" class="text-blue-700 hover:text-blue-900 hover:underline py-0.5">6. 과금 구조</a>
        </nav>
    </div>

    {{-- 본문 섹션들 --}}
    <div class="space-y-10">

        {{-- 섹션 1: 바로빌이란? --}}
        <section id="section1" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">1</div>
                    <h2 class="text-xl font-bold text-gray-800">바로빌이란?</h2>
                </div>

                <div class="space-y-4 text-sm text-gray-700 leading-relaxed">
                    <p><strong>바로빌(BaroBill)</strong>은 전자세금계산서, 카카오톡 알림톡, 계좌조회, 카드내역 등 다양한 비즈니스 서비스를 API로 제공하는 플랫폼입니다.</p>

                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="font-semibold text-gray-800 mb-2">SAM에서 바로빌을 쓰는 이유</p>
                        <ul class="space-y-1">
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-0.5">•</span>
                                <span><strong>전자세금계산서</strong> — 세금계산서를 SAM 안에서 바로 발행하고 국세청에 전송</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-0.5">•</span>
                                <span><strong>카카오톡 알림톡</strong> — 전자계약 서명 요청 등 중요 알림을 카카오톡으로 자동 발송</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-0.5">•</span>
                                <span><strong>계좌 입출금 조회</strong> — 법인 계좌의 입출금 내역을 자동으로 수집/조회</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-0.5">•</span>
                                <span><strong>법인카드 사용내역</strong> — 법인카드 사용 내역을 자동으로 수집/조회</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <span class="text-blue-500 mt-0.5">•</span>
                                <span><strong>홈텍스 매입/매출</strong> — 국세청 홈텍스 데이터를 자동으로 수집</span>
                            </li>
                        </ul>
                    </div>

                    <div class="bg-blue-50 border border-blue-100 rounded-lg p-4">
                        <p class="text-blue-800 text-xs">
                            <strong>개발자 센터:</strong>
                            <a href="https://dev.barobill.co.kr/" target="_blank" class="underline">https://dev.barobill.co.kr/</a>
                            — API 문서, 테스트 도구, 에러코드 참조
                        </p>
                    </div>
                </div>
            </div>
        </section>

        {{-- 섹션 2: 회원사 필수 설정 가이드 --}}
        <section id="section2" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">2</div>
                    <h2 class="text-xl font-bold text-gray-800">회원사 필수 설정 가이드</h2>
                </div>

                {{-- 파트너사 / 회원사 구조 설명 --}}
                <div class="bg-gray-50 rounded-lg p-4 mb-5 text-sm text-gray-700">
                    <p class="font-semibold text-gray-800 mb-2">파트너사와 회원사 구조</p>
                    <div class="flex items-center gap-3 flex-wrap text-xs mb-3">
                        <div class="px-3 py-2 bg-blue-100 border border-blue-300 rounded-lg text-center">
                            <p class="font-bold text-blue-800">바로빌</p>
                            <p class="text-blue-600">API 플랫폼</p>
                        </div>
                        <span class="text-gray-400 text-lg">→</span>
                        <div class="px-3 py-2 bg-indigo-100 border border-indigo-300 rounded-lg text-center">
                            <p class="font-bold text-indigo-800">(주)코드브릿지엑스</p>
                            <p class="text-indigo-600">파트너사 (본사)</p>
                        </div>
                        <span class="text-gray-400 text-lg">→</span>
                        <div class="px-3 py-2 bg-green-100 border border-green-300 rounded-lg text-center">
                            <p class="font-bold text-green-800">주일 · 경동 · …</p>
                            <p class="text-green-600">회원사 (테넌트)</p>
                        </div>
                    </div>
                    <ul class="space-y-1 text-xs text-gray-600">
                        <li>• <strong>파트너사</strong> (코드브릿지엑스) — 바로빌과 직접 계약하고, 인증키(CERTKEY)를 보유. 회원사를 등록/관리</li>
                        <li>• <strong>회원사</strong> (각 테넌트) — 파트너사 아래에 등록된 실제 사업체. 각자의 사업자번호로 서비스를 이용</li>
                    </ul>
                </div>

                {{-- 회원사 설정 단계 --}}
                <div class="space-y-4">
                    <p class="text-sm text-gray-700">새 회원사가 바로빌 서비스를 사용하려면 아래 단계를 <strong>순서대로</strong> 완료해야 합니다.</p>

                    {{-- STEP 1: MNG에서 회원사 등록 --}}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex items-center gap-3 p-4 bg-gray-50 border-b border-gray-200">
                            <span class="w-7 h-7 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">1</span>
                            <span class="font-semibold text-gray-800 text-sm">MNG에서 회원사 등록</span>
                            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs">SAM 관리자 작업</span>
                        </div>
                        <div class="p-4 text-xs text-gray-700 space-y-2">
                            <p><strong>경로:</strong> SAM MNG → 바로빌 → 회원사관리 → 신규등록</p>
                            <p>회사 기본 정보(사업자번호, 상호명, 대표자명, 주소 등)와 <strong>바로빌 로그인 정보</strong>(아이디/비밀번호)를 입력하면, 바로빌 API(<code>RegistCorp</code>)를 통해 회원사가 자동 등록됩니다.</p>
                            <div class="bg-amber-50 border border-amber-200 rounded p-2 text-amber-800">
                                <strong>주의:</strong> 바로빌 아이디/비밀번호는 이후 모든 바로빌 사이트 접속에 사용됩니다. 회원사에 반드시 안내해 주세요.
                            </div>
                        </div>
                    </div>

                    {{-- STEP 2: 공동인증서 등록 --}}
                    <div class="border border-red-200 rounded-lg overflow-hidden">
                        <div class="flex items-center gap-3 p-4 bg-red-50 border-b border-red-200">
                            <span class="w-7 h-7 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">2</span>
                            <span class="font-semibold text-red-800 text-sm">공동인증서 등록</span>
                            <span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-xs">회원사 필수 작업</span>
                            <span class="px-2 py-0.5 bg-red-200 text-red-800 rounded-full text-xs font-bold">가장 중요</span>
                        </div>
                        <div class="p-4 text-xs text-gray-700 space-y-2">
                            <p><strong>바로빌 사이트에서 직접 수행</strong> — SAM 설정 페이지에서 "공동인증서 등록" 버튼 클릭 시 바로빌 사이트로 이동</p>
                            <div class="bg-gray-50 rounded p-3 space-y-1">
                                <p class="font-medium text-gray-800">해야 할 일:</p>
                                <ol class="list-decimal ml-4 space-y-1">
                                    <li>SAM MNG → 바로빌 → 설정 → <strong>"공동인증서 등록"</strong> 버튼 클릭</li>
                                    <li>바로빌 사이트가 열리면, 회원사의 <strong>범용 공동인증서</strong>(.pfx 파일)를 업로드</li>
                                    <li>인증서 비밀번호 입력 후 등록 완료</li>
                                </ol>
                            </div>
                            <div class="bg-red-50 border border-red-200 rounded p-2 text-red-800">
                                <strong>⚠️ 미등록 시:</strong> 전자세금계산서 발행 불가, 홈텍스 매입/매출 수집 불가. 인증서 없이는 국세청 연동 기능을 사용할 수 없습니다.
                            </div>
                            <div class="bg-amber-50 border border-amber-200 rounded p-2 text-amber-800">
                                <strong>인증서 갱신:</strong> 인증서는 1년 단위로 만료됩니다. 갱신 후 바로빌에 <strong>다시 등록</strong>해야 합니다. SAM 회원사관리에서 인증서 만료일을 확인할 수 있습니다.
                            </div>
                        </div>
                    </div>

                    {{-- STEP 3: 계좌 등록 --}}
                    <div class="border border-green-200 rounded-lg overflow-hidden">
                        <div class="flex items-center gap-3 p-4 bg-green-50 border-b border-green-200">
                            <span class="w-7 h-7 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">3</span>
                            <span class="font-semibold text-green-800 text-sm">은행 계좌 등록 (계좌조회 서비스 이용 시)</span>
                            <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs">회원사 필수 작업</span>
                        </div>
                        <div class="p-4 text-xs text-gray-700 space-y-2">
                            <p><strong>바로빌 사이트에서 직접 수행</strong> — 입출금 내역을 자동 수집하려면 은행 계좌를 등록해야 합니다.</p>
                            <div class="bg-gray-50 rounded p-3 space-y-1">
                                <p class="font-medium text-gray-800">해야 할 일:</p>
                                <ol class="list-decimal ml-4 space-y-1">
                                    <li>SAM MNG → 바로빌 → 설정 → <strong>"은행 빠른조회 서비스 등록"</strong> 버튼 클릭</li>
                                    <li>바로빌 사이트에서 법인 계좌 정보 입력 (은행, 계좌번호)</li>
                                    <li>은행별 본인 인증 절차 완료</li>
                                    <li>등록 후 <strong>"계좌 관리"</strong> 버튼에서 등록된 계좌 확인</li>
                                </ol>
                            </div>
                            <p class="text-gray-500">37개 은행 지원 (국민, 신한, 우리, 산업, 하나 등)</p>
                        </div>
                    </div>

                    {{-- STEP 4: 카드 등록 --}}
                    <div class="border border-orange-200 rounded-lg overflow-hidden">
                        <div class="flex items-center gap-3 p-4 bg-orange-50 border-b border-orange-200">
                            <span class="w-7 h-7 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">4</span>
                            <span class="font-semibold text-orange-800 text-sm">법인카드 등록 (카드내역 서비스 이용 시)</span>
                            <span class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded-full text-xs">회원사 필수 작업</span>
                        </div>
                        <div class="p-4 text-xs text-gray-700 space-y-2">
                            <p><strong>바로빌 사이트에서 직접 수행</strong> — 법인카드 사용 내역을 자동 수집하려면 카드를 등록해야 합니다.</p>
                            <div class="bg-gray-50 rounded p-3 space-y-1">
                                <p class="font-medium text-gray-800">해야 할 일:</p>
                                <ol class="list-decimal ml-4 space-y-1">
                                    <li>SAM MNG → 바로빌 → 설정 → <strong>"카드 연동 등록"</strong> 버튼 클릭</li>
                                    <li>바로빌 사이트에서 법인카드 정보 입력 (카드사, 카드번호)</li>
                                    <li>카드사별 인증 절차 완료</li>
                                    <li>등록 후 <strong>"카드 관리"</strong> 버튼에서 등록된 카드 확인</li>
                                </ol>
                            </div>
                            <p class="text-gray-500">16개 카드사 지원 (비씨, 삼성, 신한, 현대 등)</p>
                        </div>
                    </div>

                    {{-- STEP 5: 서비스 활성화 --}}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex items-center gap-3 p-4 bg-gray-50 border-b border-gray-200">
                            <span class="w-7 h-7 bg-gray-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">5</span>
                            <span class="font-semibold text-gray-800 text-sm">서비스 활성화 및 담당자 정보 설정</span>
                            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded-full text-xs">SAM 관리자 작업</span>
                        </div>
                        <div class="p-4 text-xs text-gray-700 space-y-2">
                            <p><strong>경로:</strong> SAM MNG → 바로빌 → 설정 → 서비스 이용 설정</p>
                            <div class="overflow-x-auto">
                                <table class="w-full text-xs border-collapse">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="border border-gray-200 px-3 py-2 text-left">서비스</th>
                                            <th class="border border-gray-200 px-3 py-2 text-left">사전 조건</th>
                                            <th class="border border-gray-200 px-3 py-2 text-left">설정 항목</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">전자세금계산서</td>
                                            <td class="border border-gray-200 px-3 py-2 text-red-600">공동인증서 등록 필수</td>
                                            <td class="border border-gray-200 px-3 py-2"><code>use_tax_invoice</code> 체크</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">계좌조회</td>
                                            <td class="border border-gray-200 px-3 py-2">은행 계좌 등록 완료</td>
                                            <td class="border border-gray-200 px-3 py-2"><code>use_bank_account</code> 체크</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">카드사용내역</td>
                                            <td class="border border-gray-200 px-3 py-2">법인카드 등록 완료</td>
                                            <td class="border border-gray-200 px-3 py-2"><code>use_card_usage</code> 체크</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">홈텍스 매입/매출</td>
                                            <td class="border border-gray-200 px-3 py-2">공동인증서 등록 필수</td>
                                            <td class="border border-gray-200 px-3 py-2"><code>use_hometax</code> 체크</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <p class="text-gray-500 mt-1">담당자 이름, 연락처, 이메일도 이 단계에서 설정합니다 (세금계산서 알림 수신용).</p>
                        </div>
                    </div>

                    {{-- STEP 6: 충전 잔액 확인 --}}
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <div class="flex items-center gap-3 p-4 bg-gray-50 border-b border-gray-200">
                            <span class="w-7 h-7 bg-gray-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">6</span>
                            <span class="font-semibold text-gray-800 text-sm">충전 잔액 확인 (선불제)</span>
                            <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs">회원사 수시 확인</span>
                        </div>
                        <div class="p-4 text-xs text-gray-700 space-y-2">
                            <p>바로빌 API 호출은 <strong>선불 충전 방식</strong>입니다. 잔액이 부족하면 계좌조회/카드내역 수집이 중단됩니다.</p>
                            <div class="bg-gray-50 rounded p-3 space-y-1">
                                <p class="font-medium text-gray-800">확인 방법:</p>
                                <ul class="list-disc ml-4 space-y-1">
                                    <li>SAM MNG → 바로빌 → 회원사관리 → 상태조회 버튼 → <strong>"충전 잔액"</strong> 확인</li>
                                    <li>잔액 부족 시: 바로빌 사이트에서 직접 충전 (SAM 설정 → "현금충전" 버튼)</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- 체크리스트 요약 --}}
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-5">
                    <p class="font-semibold text-blue-800 text-sm mb-2">회원사 설정 체크리스트</p>
                    <div class="text-xs text-blue-700 space-y-1">
                        <p>☐ MNG에서 회원사 등록 (사업자번호, 바로빌 ID/PW)</p>
                        <p>☐ <strong class="text-red-600">공동인증서 등록</strong> (바로빌 사이트 — 세금계산서/홈텍스 필수)</p>
                        <p>☐ 은행 계좌 등록 (바로빌 사이트 — 계좌조회 이용 시)</p>
                        <p>☐ 법인카드 등록 (바로빌 사이트 — 카드내역 이용 시)</p>
                        <p>☐ 서비스 활성화 (SAM 설정 페이지)</p>
                        <p>☐ 담당자 정보 설정 (이름, 연락처, 이메일)</p>
                        <p>☐ 충전 잔액 확인 (선불 충전제)</p>
                        <p>☐ 서버 모드 확인 (테스트 → 운영 전환)</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- 섹션 3: 우리가 쓰는 서비스 --}}
        <section id="section3" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">3</div>
                    <h2 class="text-xl font-bold text-gray-800">우리가 쓰는 서비스</h2>
                </div>

                <div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));">
                    {{-- 전자세금계산서 --}}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-indigo-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>
                            </div>
                            <h3 class="font-semibold text-gray-800 text-sm">전자세금계산서</h3>
                        </div>
                        <p class="text-xs text-gray-500">세금계산서 발행 · 국세청 전송 · 상태 조회</p>
                        <span class="inline-block mt-2 px-2 py-0.5 bg-indigo-100 text-indigo-700 rounded-full text-xs font-medium">TI.asmx</span>
                    </div>

                    {{-- 카카오톡 --}}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                            </div>
                            <h3 class="font-semibold text-gray-800 text-sm">카카오톡</h3>
                        </div>
                        <p class="text-xs text-gray-500">알림톡 · 친구톡 · SMS 대체발송</p>
                        <span class="inline-block mt-2 px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full text-xs font-medium">KAKAOTALK.asmx</span>
                    </div>

                    {{-- 계좌조회 --}}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                            </div>
                            <h3 class="font-semibold text-gray-800 text-sm">계좌조회</h3>
                        </div>
                        <p class="text-xs text-gray-500">입출금 내역 수집 · 잔액 조회 · 인증서 관리</p>
                        <span class="inline-block mt-2 px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">BANKACCOUNT.asmx</span>
                    </div>

                    {{-- 카드내역 --}}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg>
                            </div>
                            <h3 class="font-semibold text-gray-800 text-sm">카드내역</h3>
                        </div>
                        <p class="text-xs text-gray-500">법인카드 등록 · 사용내역 수집 · 카드사 조회</p>
                        <span class="inline-block mt-2 px-2 py-0.5 bg-orange-100 text-orange-700 rounded-full text-xs font-medium">CARD.asmx</span>
                    </div>

                    {{-- 홈텍스 --}}
                    <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                        <div class="flex items-center gap-2 mb-2">
                            <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-teal-600" 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>
                            </div>
                            <h3 class="font-semibold text-gray-800 text-sm">홈텍스 매입/매출</h3>
                        </div>
                        <p class="text-xs text-gray-500">국세청 매입/매출 데이터 자동 수집</p>
                        <span class="inline-block mt-2 px-2 py-0.5 bg-teal-100 text-teal-700 rounded-full text-xs font-medium">CORPSTATE.asmx</span>
                    </div>
                </div>
            </div>
        </section>

        {{-- 섹션 4: 서비스별 상세 --}}
        <section id="section4" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">4</div>
                    <h2 class="text-xl font-bold text-gray-800">서비스별 상세</h2>
                </div>

                <div class="space-y-6">
                    {{-- 전자세금계산서 --}}
                    <details class="group border border-gray-200 rounded-lg">
                        <summary class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center gap-3">
                                <span class="w-6 h-6 bg-indigo-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">1</span>
                                <span class="font-semibold text-gray-800">전자세금계산서</span>
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">운영중</span>
                            </div>
                            <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="px-4 pb-4 text-sm text-gray-700 space-y-3">
                            <p>SAM에서 거래처에 세금계산서를 발행하고, 바로빌 API를 통해 국세청에 자동 전송합니다.</p>
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="font-medium text-gray-800 mb-1">처리 흐름</p>
                                <div class="flex items-center gap-2 text-xs flex-wrap">
                                    <span class="px-2 py-1 bg-white border rounded">SAM에서 발행</span>
                                    <span class="text-gray-400">→</span>
                                    <span class="px-2 py-1 bg-white border rounded">바로빌 API 전송</span>
                                    <span class="text-gray-400">→</span>
                                    <span class="px-2 py-1 bg-white border rounded">국세청 전송</span>
                                    <span class="text-gray-400">→</span>
                                    <span class="px-2 py-1 bg-green-50 border border-green-200 rounded">전송 완료</span>
                                </div>
                            </div>
                            <div class="text-xs text-gray-500">
                                <p><strong>SOAP 서비스:</strong> TI.asmx | <strong>주요 메서드:</strong> RegistAndIssueTaxInvoice, CancelTaxInvoice, GetTaxInvoiceState</p>
                                <p><strong>상태 흐름:</strong> DRAFT → ISSUED → SENT (국세청 전송 완료)</p>
                            </div>
                        </div>
                    </details>

                    {{-- 카카오톡 알림톡/친구톡 --}}
                    <details class="group border border-gray-200 rounded-lg">
                        <summary class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center gap-3">
                                <span class="w-6 h-6 bg-yellow-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">2</span>
                                <span class="font-semibold text-gray-800">카카오톡 알림톡 / 친구톡</span>
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">운영중</span>
                            </div>
                            <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="px-4 pb-4 text-sm text-gray-700 space-y-3">
                            <p>전자계약 서명 요청, 리마인드 등 중요한 알림을 카카오톡으로 발송합니다.</p>

                            <div class="overflow-x-auto">
                                <table class="w-full text-xs border-collapse">
                                    <thead>
                                        <tr class="bg-gray-50">
                                            <th class="border border-gray-200 px-3 py-2 text-left">구분</th>
                                            <th class="border border-gray-200 px-3 py-2 text-left">알림톡</th>
                                            <th class="border border-gray-200 px-3 py-2 text-left">친구톡</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">용도</td>
                                            <td class="border border-gray-200 px-3 py-2">정보성 메시지 (계약 알림 등)</td>
                                            <td class="border border-gray-200 px-3 py-2">광고성 메시지</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">수신 대상</td>
                                            <td class="border border-gray-200 px-3 py-2">모든 카카오톡 사용자</td>
                                            <td class="border border-gray-200 px-3 py-2">채널 친구 추가자만</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">템플릿</td>
                                            <td class="border border-gray-200 px-3 py-2"><span class="text-red-600 font-medium">필수</span> (카카오 사전 승인)</td>
                                            <td class="border border-gray-200 px-3 py-2">불필요 (자유 작성)</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">비용</td>
                                            <td class="border border-gray-200 px-3 py-2">건당 8~9원</td>
                                            <td class="border border-gray-200 px-3 py-2">건당 15~20원</td>
                                        </tr>
                                        <tr>
                                            <td class="border border-gray-200 px-3 py-2 font-medium">SMS 대체발송</td>
                                            <td class="border border-gray-200 px-3 py-2">지원</td>
                                            <td class="border border-gray-200 px-3 py-2">지원</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-xs">
                                <p class="font-medium text-yellow-800">카카오톡 채널 정보</p>
                                <p class="text-yellow-700 mt-1">채널명: (주)코드브릿지엑스 | 채널ID: @codebridge</p>
                            </div>
                        </div>
                    </details>

                    {{-- 계좌조회 --}}
                    <details class="group border border-gray-200 rounded-lg">
                        <summary class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center gap-3">
                                <span class="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">3</span>
                                <span class="font-semibold text-gray-800">계좌조회 (입출금 내역)</span>
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">운영중</span>
                            </div>
                            <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="px-4 pb-4 text-sm text-gray-700 space-y-3">
                            <p>법인 계좌를 등록하면, 바로빌이 자동으로 입출금 내역을 수집합니다. SAM에서는 이 데이터를 조회하여 재무관리에 활용합니다.</p>
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="font-medium text-gray-800 mb-1">주요 기능</p>
                                <ul class="text-xs space-y-1 text-gray-600">
                                    <li>• 계좌 등록/관리 (바로빌 페이지로 이동)</li>
                                    <li>• 일별/월별/기간별 입출금 내역 조회</li>
                                    <li>• 공동인증서 등록 및 유효성 관리</li>
                                    <li>• 충전 잔액 확인</li>
                                </ul>
                            </div>
                            <p class="text-xs text-gray-500"><strong>SOAP 서비스:</strong> BANKACCOUNT.asmx | 37개 은행 코드 지원</p>
                        </div>
                    </details>

                    {{-- 카드내역 --}}
                    <details class="group border border-gray-200 rounded-lg">
                        <summary class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center gap-3">
                                <span class="w-6 h-6 bg-orange-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">4</span>
                                <span class="font-semibold text-gray-800">법인카드 사용내역</span>
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">운영중</span>
                            </div>
                            <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="px-4 pb-4 text-sm text-gray-700 space-y-3">
                            <p>법인카드를 등록하면, 바로빌이 카드 사용 내역을 자동으로 수집합니다. 16개 카드사를 지원합니다.</p>
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="font-medium text-gray-800 mb-1">주요 기능</p>
                                <ul class="text-xs space-y-1 text-gray-600">
                                    <li>• 카드 등록/수정/해지 관리</li>
                                    <li>• 일별/월별/기간별 사용내역 조회</li>
                                    <li>• 카드 스크랩 신청 (바로빌 페이지)</li>
                                </ul>
                            </div>
                            <p class="text-xs text-gray-500"><strong>SOAP 서비스:</strong> CARD.asmx | 16개 카드사 지원 (비씨, 삼성, 신한 등)</p>
                        </div>
                    </details>

                    {{-- 홈텍스 --}}
                    <details class="group border border-gray-200 rounded-lg">
                        <summary class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50">
                            <div class="flex items-center gap-3">
                                <span class="w-6 h-6 bg-teal-500 text-white rounded-full flex items-center justify-center text-xs font-bold shrink-0">5</span>
                                <span class="font-semibold text-gray-800">홈텍스 매입/매출</span>
                                <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-xs font-medium">운영중</span>
                            </div>
                            <svg class="w-5 h-5 text-gray-400 group-open:rotate-180 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="px-4 pb-4 text-sm text-gray-700 space-y-3">
                            <p>국세청 홈텍스의 매입/매출 세금계산서 데이터를 자동으로 수집하여 SAM에서 조회할 수 있습니다.</p>
                            <div class="bg-gray-50 rounded-lg p-3">
                                <p class="font-medium text-gray-800 mb-1">주요 기능</p>
                                <ul class="text-xs space-y-1 text-gray-600">
                                    <li>• 매입/매출 세금계산서 자동 수집</li>
                                    <li>• 홈텍스 관리 페이지 연동 (바로빌 URL)</li>
                                    <li>• 공동인증서 기반 인증</li>
                                </ul>
                            </div>
                            <p class="text-xs text-gray-500"><strong>SOAP 서비스:</strong> CORPSTATE.asmx | 인증서 관리 포함</p>
                        </div>
                    </details>
                </div>
            </div>
        </section>

        {{-- 섹션 5: 카카오톡 알림톡 흐름 --}}
        <section id="section5" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">5</div>
                    <h2 class="text-xl font-bold text-gray-800">카카오톡 알림톡 흐름</h2>
                </div>

                <p class="text-sm text-gray-600 mb-4">전자계약 서명 요청 시 알림톡이 발송되는 과정입니다.</p>

                {{-- 플로우차트 --}}
                <div class="bg-gray-50 rounded-lg p-4 mb-4 overflow-x-auto">
                    <pre class="text-xs text-gray-700 font-mono leading-relaxed whitespace-pre">
┌─────────────┐     ┌─────────────────┐     ┌──────────────────┐     ┌──────────────┐
│  SAM 전자계약  │────▶│  EsignApiController │────▶│  BarobillService   │────▶│  바로빌 서버  │
│  서명 요청     │     │  sendAlimtalk()    │     │  sendATKakaotalkEx │     │  SOAP API    │
└─────────────┘     └─────────────────┘     └──────────────────┘     └──────┬───────┘
                                                                              │
                     ┌─────────────────┐     ┌──────────────────┐            │
                     │  수신자 카카오톡   │◀────│  카카오 서버       │◀───────────┘
                     │  알림톡 수신      │     │  메시지 전달       │
                     └─────────────────┘     └──────────────────┘</pre>
                </div>

                {{-- 2단계 검증 --}}
                <div class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                    <p class="font-semibold text-red-800 text-sm mb-2">⚠️ 2단계 검증 (필수)</p>
                    <div class="text-xs text-red-700 space-y-2">
                        <p>알림톡 발송은 <strong>SendKey 반환 ≠ 전달 성공</strong>입니다. 반드시 2단계 검증이 필요합니다:</p>
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="px-2 py-1 bg-white border border-red-200 rounded">1. SendATKakaotalkEx 호출</span>
                            <span class="text-red-400">→</span>
                            <span class="px-2 py-1 bg-white border border-red-200 rounded">SendKey 수신</span>
                            <span class="text-red-400">→</span>
                            <span class="px-2 py-1 bg-white border border-red-200 rounded">2. 3초 대기</span>
                            <span class="text-red-400">→</span>
                            <span class="px-2 py-1 bg-white border border-red-200 rounded">3. GetSendKakaotalk 호출</span>
                            <span class="text-red-400">→</span>
                            <span class="px-2 py-1 bg-red-100 border border-red-300 rounded font-medium">ResultCode 확인</span>
                        </div>
                        <p class="mt-1"><code class="bg-white px-1 rounded">ResultCode=1</code>: 성공 | <code class="bg-white px-1 rounded">ResultCode=4</code>: 템플릿 불일치 | 기타: 실패</p>
                    </div>
                </div>

                {{-- 등록된 템플릿 --}}
                <div class="overflow-x-auto">
                    <p class="font-semibold text-gray-800 text-sm mb-2">등록된 알림톡 템플릿</p>
                    <table class="w-full text-xs border-collapse">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="border border-gray-200 px-3 py-2 text-left">템플릿명</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">운영</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">개발</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">용도</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">전자계약_서명요청</td>
                                <td class="border border-gray-200 px-3 py-2"><code>전자계약_서명요청</code></td>
                                <td class="border border-gray-200 px-3 py-2"><code>전자계약_서명요청_DEV</code></td>
                                <td class="border border-gray-200 px-3 py-2">서명 요청 알림</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">전자계약_완료</td>
                                <td class="border border-gray-200 px-3 py-2"><code>전자계약_완료</code></td>
                                <td class="border border-gray-200 px-3 py-2"><code>전자계약_완료_DEV</code></td>
                                <td class="border border-gray-200 px-3 py-2">서명 완료 알림</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">전자계약_리마인드</td>
                                <td class="border border-gray-200 px-3 py-2"><code>전자계약_리마인드</code></td>
                                <td class="border border-gray-200 px-3 py-2"><code>전자계약_리마인드_DEV</code></td>
                                <td class="border border-gray-200 px-3 py-2">미서명 독촉 알림</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="bg-blue-50 border border-blue-100 rounded-lg p-3 mt-4 text-xs text-blue-700">
                    <p><strong>템플릿 자동 분기:</strong> <code>APP_ENV=production</code>이면 원본 템플릿, 그 외에는 <code>_DEV</code> 접미사 자동 추가</p>
                </div>
            </div>
        </section>

        {{-- 섹션 6: 과금 구조 --}}
        <section id="section6" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">6</div>
                    <h2 class="text-xl font-bold text-gray-800">과금 구조</h2>
                </div>

                <p class="text-sm text-gray-600 mb-4">바로빌 서비스는 <strong>월정액 + 건별 과금</strong> 구조로 운영됩니다.</p>

                <div class="overflow-x-auto mb-4">
                    <table class="w-full text-xs border-collapse">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="border border-gray-200 px-3 py-2 text-left">서비스</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">과금 방식</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">무료 구간</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">초과 요금</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">전자세금계산서</td>
                                <td class="border border-gray-200 px-3 py-2">건별</td>
                                <td class="border border-gray-200 px-3 py-2">100건/월 무료</td>
                                <td class="border border-gray-200 px-3 py-2">50건 단위 5,000원</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">계좌조회</td>
                                <td class="border border-gray-200 px-3 py-2">월정액</td>
                                <td class="border border-gray-200 px-3 py-2">1개 계좌 무료</td>
                                <td class="border border-gray-200 px-3 py-2">추가 계좌당 월 10,000원</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">카드내역</td>
                                <td class="border border-gray-200 px-3 py-2">월정액</td>
                                <td class="border border-gray-200 px-3 py-2">5장 무료</td>
                                <td class="border border-gray-200 px-3 py-2">추가 카드당 월 5,000원</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">홈텍스</td>
                                <td class="border border-gray-200 px-3 py-2">월정액</td>
                                <td class="border border-gray-200 px-3 py-2">—</td>
                                <td class="border border-gray-200 px-3 py-2">본사 부담 (무료)</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium">카카오톡 알림톡</td>
                                <td class="border border-gray-200 px-3 py-2">건별 (바로빌 직접 과금)</td>
                                <td class="border border-gray-200 px-3 py-2">—</td>
                                <td class="border border-gray-200 px-3 py-2">건당 8~9원</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="bg-amber-50 border border-amber-200 rounded-lg p-3 text-xs text-amber-800">
                    <p><strong>참고:</strong> 과금 정책은 DB(<code>barobill_pricing_policies</code> 테이블)에서 관리되며, DB에 없으면 위의 기본값이 적용됩니다. 매월 1일 자동 과금 처리가 실행됩니다.</p>
                </div>
            </div>
        </section>

        {{-- 섹션 7: 시스템 구조 (개발자용) --}}
        <section id="section7" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">7</div>
                    <h2 class="text-xl font-bold text-gray-800">시스템 구조 <span class="text-sm font-normal text-gray-500">(개발자용)</span></h2>
                </div>

                <div class="space-y-4">
                    {{-- API 통신 방식 --}}
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="font-semibold text-gray-800 text-sm mb-2">API 통신 방식</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-white">
                                        <th class="border border-gray-200 px-3 py-2 text-left">프로젝트</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">프로토콜</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">용도</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">MNG (관리자)</td>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">SOAP/WSDL</span></td>
                                        <td class="border border-gray-200 px-3 py-2">계좌, 카드, 카카오톡, SMS, 회원관리</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">API (백엔드)</td>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded text-xs">REST</span></td>
                                        <td class="border border-gray-200 px-3 py-2">세금계산서 발행, 사업자번호 검증</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- SOAP WSDL 엔드포인트 --}}
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="font-semibold text-gray-800 text-sm mb-2">SOAP WSDL 엔드포인트</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-white">
                                        <th class="border border-gray-200 px-3 py-2 text-left">서비스</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">테스트 서버</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">운영 서버</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">회원관리</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testws.baroservice.com/CORPSTATE.asmx</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>ws.baroservice.com/CORPSTATE.asmx</code></td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">세금계산서</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testws.baroservice.com/TI.asmx</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>ws.baroservice.com/TI.asmx</code></td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">계좌조회</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testws.baroservice.com/BANKACCOUNT.asmx</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>ws.baroservice.com/BANKACCOUNT.asmx</code></td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">카드조회</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testws.baroservice.com/CARD.asmx</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>ws.baroservice.com/CARD.asmx</code></td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">카카오톡</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testws.baroservice.com/KAKAOTALK.asmx</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>ws.baroservice.com/KAKAOTALK.asmx</code></td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">문자(SMS)</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testws.baroservice.com/SMS.asmx</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>ws.baroservice.com/SMS.asmx</code></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- 테스트/운영 환경 분리 --}}
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="font-semibold text-gray-800 text-sm mb-2">테스트/운영 환경 분리</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-white">
                                        <th class="border border-gray-200 px-3 py-2 text-left">환경</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">APP_ENV</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">바로빌 서버</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">도메인</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">로컬 (Docker)</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>local</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded">test / production</span></td>
                                        <td class="border border-gray-200 px-3 py-2">mng.sam.kr</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">개발 서버</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>local</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-amber-100 text-amber-700 rounded">test / production</span></td>
                                        <td class="border border-gray-200 px-3 py-2">admin.codebridge-x.com</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">운영 서버</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>production</code></td>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">production</span></td>
                                        <td class="border border-gray-200 px-3 py-2">mng.codebridge-x.com</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <p class="text-xs text-gray-500 mt-2">
                            <strong>server_mode</strong>는 <code>barobill_members</code> 테이블에서 회원사별로 관리됩니다. APP_ENV와 독립적으로 설정 가능합니다.
                        </p>
                    </div>

                    {{-- 응답 형식 --}}
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="font-semibold text-gray-800 text-sm mb-2">API 공통 응답 형식</p>
                        <pre class="text-xs text-gray-700 bg-white border border-gray-200 rounded p-3 overflow-x-auto"><code>{
    "success": true|false,
    "data": mixed,           // success=true
    "error": "에러 메시지",    // success=false
    "error_code": -11102     // 에러 코드
}</code></pre>
                    </div>
                </div>
            </div>
        </section>

        {{-- 섹션 8: 주요 테이블 --}}
        <section id="section8" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">8</div>
                    <h2 class="text-xl font-bold text-gray-800">주요 테이블</h2>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-xs border-collapse">
                        <thead>
                            <tr class="bg-gray-50">
                                <th class="border border-gray-200 px-3 py-2 text-left">테이블</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">모델</th>
                                <th class="border border-gray-200 px-3 py-2 text-left">역할</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>barobill_members</code></td>
                                <td class="border border-gray-200 px-3 py-2">BarobillMember</td>
                                <td class="border border-gray-200 px-3 py-2">바로빌 회원사 정보 (사업자번호, 인증키, server_mode)</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>barobill_configs</code></td>
                                <td class="border border-gray-200 px-3 py-2">BarobillConfig</td>
                                <td class="border border-gray-200 px-3 py-2">SOAP 연동 설정 (DB 기반)</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>barobill_subscriptions</code></td>
                                <td class="border border-gray-200 px-3 py-2">BarobillSubscription</td>
                                <td class="border border-gray-200 px-3 py-2">월정액 구독 관리 (계좌/카드/홈텍스)</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>barobill_billing_records</code></td>
                                <td class="border border-gray-200 px-3 py-2">BarobillBillingRecord</td>
                                <td class="border border-gray-200 px-3 py-2">건별/월정액 과금 기록</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>barobill_monthly_summaries</code></td>
                                <td class="border border-gray-200 px-3 py-2">BarobillMonthlySummary</td>
                                <td class="border border-gray-200 px-3 py-2">월별 과금 집계</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>barobill_pricing_policies</code></td>
                                <td class="border border-gray-200 px-3 py-2">BarobillPricingPolicy</td>
                                <td class="border border-gray-200 px-3 py-2">서비스별 과금 정책 (무료건수, 단가)</td>
                            </tr>
                            <tr>
                                <td class="border border-gray-200 px-3 py-2 font-medium"><code>hometax_invoices</code></td>
                                <td class="border border-gray-200 px-3 py-2">HometaxInvoice</td>
                                <td class="border border-gray-200 px-3 py-2">세금계산서 내역 (매입/매출, 사용량 집계용)</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        {{-- 섹션 9: API 엔드포인트 --}}
        <section id="section9" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">9</div>
                    <h2 class="text-xl font-bold text-gray-800">API 엔드포인트</h2>
                </div>

                <div class="space-y-4">
                    {{-- MNG 내부 라우트 --}}
                    <div>
                        <p class="font-semibold text-gray-800 text-sm mb-2">MNG 페이지 라우트</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-gray-50">
                                        <th class="border border-gray-200 px-3 py-2 text-left">Method</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">Path</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">설명</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/settings</code></td>
                                        <td class="border border-gray-200 px-3 py-2">바로빌 설정</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/members</code></td>
                                        <td class="border border-gray-200 px-3 py-2">회원사 관리</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/tax-invoice</code></td>
                                        <td class="border border-gray-200 px-3 py-2">전자세금계산서</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/bank-account</code></td>
                                        <td class="border border-gray-200 px-3 py-2">계좌조회</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/card-usage</code></td>
                                        <td class="border border-gray-200 px-3 py-2">카드사용내역</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/usage</code></td>
                                        <td class="border border-gray-200 px-3 py-2">사용량 조회</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/billing</code></td>
                                        <td class="border border-gray-200 px-3 py-2">과금 관리 (본사 전용)</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- 카카오톡 API --}}
                    <div>
                        <p class="font-semibold text-gray-800 text-sm mb-2">카카오톡 API 라우트</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-gray-50">
                                        <th class="border border-gray-200 px-3 py-2 text-left">Method</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">Path</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">설명</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/kakaotalk</code></td>
                                        <td class="border border-gray-200 px-3 py-2">카카오톡 메인</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-green-100 text-green-700 rounded">GET</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/barobill/kakaotalk/guide</code></td>
                                        <td class="border border-gray-200 px-3 py-2">카카오톡 사용법 가이드</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded">POST</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/api/admin/barobill/kakaotalk/send-alimtalk</code></td>
                                        <td class="border border-gray-200 px-3 py-2">알림톡 발송</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2"><span class="px-1.5 py-0.5 bg-blue-100 text-blue-700 rounded">POST</span></td>
                                        <td class="border border-gray-200 px-3 py-2"><code>/api/admin/barobill/kakaotalk/send-friendtalk</code></td>
                                        <td class="border border-gray-200 px-3 py-2">친구톡 발송</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- API 프로젝트 엔드포인트 --}}
                    <div>
                        <p class="font-semibold text-gray-800 text-sm mb-2">API 프로젝트 (REST)</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-gray-50">
                                        <th class="border border-gray-200 px-3 py-2 text-left">기능</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">메서드</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">설명</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">사업자 검증</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>checkBusinessNumber()</code></td>
                                        <td class="border border-gray-200 px-3 py-2">사업자번호 유효성/휴폐업 조회</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">세금계산서 발행</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>issueTaxInvoice()</code></td>
                                        <td class="border border-gray-200 px-3 py-2">세금계산서 발행 (DRAFT → ISSUED)</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">세금계산서 취소</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>cancelTaxInvoice()</code></td>
                                        <td class="border border-gray-200 px-3 py-2">세금계산서 취소 (ISSUED → CANCELLED)</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">국세청 전송 확인</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>checkNtsSendStatus()</code></td>
                                        <td class="border border-gray-200 px-3 py-2">국세청 전송 상태 (ISSUED → SENT)</td>
                                    </tr>
                                    <tr>
                                        <td class="border border-gray-200 px-3 py-2 font-medium">연동 테스트</td>
                                        <td class="border border-gray-200 px-3 py-2"><code>testConnection()</code></td>
                                        <td class="border border-gray-200 px-3 py-2">바로빌 API 연결 테스트</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- 섹션 10: 트러블슈팅 --}}
        <section id="section10" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">10</div>
                    <h2 class="text-xl font-bold text-gray-800">트러블슈팅</h2>
                </div>

                <div class="space-y-4">
                    {{-- 이슈 1: 2단계 검증 --}}
                    <div class="border border-red-200 rounded-lg p-4 bg-red-50">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="px-2 py-0.5 bg-red-200 text-red-800 rounded-full text-xs font-bold">이슈 1</span>
                            <span class="font-semibold text-red-800 text-sm">SendKey 반환 ≠ 전달 성공</span>
                        </div>
                        <div class="text-xs text-red-700 space-y-1">
                            <p><strong>증상:</strong> <code>SendATKakaotalkEx</code>가 SendKey를 반환했지만, 수신자가 메시지를 받지 못함</p>
                            <p><strong>원인:</strong> SendKey는 "바로빌 서버가 접수했다"는 의미일 뿐, 카카오 전달 성공을 보장하지 않음</p>
                            <p><strong>해결:</strong> 반드시 3초 대기 후 <code>GetSendKakaotalk()</code>을 호출하여 <code>ResultCode=1</code>인지 확인</p>
                        </div>
                    </div>

                    {{-- 이슈 2: 템플릿 URL --}}
                    <div class="border border-orange-200 rounded-lg p-4 bg-orange-50">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="px-2 py-0.5 bg-orange-200 text-orange-800 rounded-full text-xs font-bold">이슈 2</span>
                            <span class="font-semibold text-orange-800 text-sm">알림톡 템플릿 URL 정확 일치</span>
                        </div>
                        <div class="text-xs text-orange-700 space-y-1">
                            <p><strong>증상:</strong> <code>ResultCode=4</code> (템플릿 불일치) 오류 발생</p>
                            <p><strong>원인:</strong> 버튼 URL이 등록된 템플릿과 <strong>정확히</strong> 일치해야 함 (경로, 쿼리 파라미터 추가 불가)</p>
                            <p><strong>해결:</strong> 동적 URL이 필요하면, 템플릿에 <code>#{변수}</code>를 포함하여 카카오에 재등록</p>
                        </div>
                    </div>

                    {{-- 이슈 3: SmsReply 오류 --}}
                    <div class="border border-amber-200 rounded-lg p-4 bg-amber-50">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="px-2 py-0.5 bg-amber-200 text-amber-800 rounded-full text-xs font-bold">이슈 3</span>
                            <span class="font-semibold text-amber-800 text-sm">SmsReply='S' + 발신번호 누락 → -31325 오류</span>
                        </div>
                        <div class="text-xs text-amber-700 space-y-1">
                            <p><strong>증상:</strong> 에러코드 <code>-31325</code> 발생</p>
                            <p><strong>원인:</strong> <code>SmsReply='S'</code>(SMS 대체발송 사용)인데 <code>SmsSenderNum</code>이 비어있음</p>
                            <p><strong>해결:</strong> SMS 메시지/발신번호가 비어있으면 <code>SmsReply='N'</code>으로 설정</p>
                        </div>
                    </div>

                    {{-- 이슈 4: 응답 타입 --}}
                    <div class="border border-blue-200 rounded-lg p-4 bg-blue-50">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="px-2 py-0.5 bg-blue-200 text-blue-800 rounded-full text-xs font-bold">이슈 4</span>
                            <span class="font-semibold text-blue-800 text-sm">SOAP 응답 타입 불일치</span>
                        </div>
                        <div class="text-xs text-blue-700 space-y-1">
                            <p><strong>증상:</strong> 1건일 때는 정상, 여러 건일 때 에러 (또는 반대)</p>
                            <p><strong>원인:</strong> SOAP 응답이 1건이면 stdClass 객체, N건이면 배열로 반환</p>
                            <p><strong>해결:</strong> 응답을 받으면 <code>is_array()</code>로 타입을 확인한 후 처리</p>
                        </div>
                    </div>

                    {{-- 주요 에러 코드 --}}
                    <div class="bg-gray-50 rounded-lg p-4">
                        <p class="font-semibold text-gray-800 text-sm mb-2">주요 에러 코드</p>
                        <div class="overflow-x-auto">
                            <table class="w-full text-xs border-collapse">
                                <thead>
                                    <tr class="bg-white">
                                        <th class="border border-gray-200 px-3 py-2 text-left">코드</th>
                                        <th class="border border-gray-200 px-3 py-2 text-left">의미</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-11101</td><td class="border border-gray-200 px-3 py-2">사업자번호 미설정 또는 유효하지 않음</td></tr>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-11102</td><td class="border border-gray-200 px-3 py-2">CERTKEY 유효하지 않음</td></tr>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-11103</td><td class="border border-gray-200 px-3 py-2">인증서 만료 또는 유효하지 않음</td></tr>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-11104</td><td class="border border-gray-200 px-3 py-2">등록되지 않은 사업자</td></tr>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-26001</td><td class="border border-gray-200 px-3 py-2">공동인증서 미등록</td></tr>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-31325</td><td class="border border-gray-200 px-3 py-2">SMS 발신번호 누락 (SmsReply 오류)</td></tr>
                                    <tr><td class="border border-gray-200 px-3 py-2 font-mono">-32010</td><td class="border border-gray-200 px-3 py-2">이미 등록된 사업자번호</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {{-- 섹션 11: 관련 파일 경로 --}}
        <section id="section11" class="scroll-mt-20">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold shrink-0">11</div>
                    <h2 class="text-xl font-bold text-gray-800">관련 파일 경로</h2>
                </div>

                <div class="space-y-4">
                    {{-- MNG 프로젝트 --}}
                    <div>
                        <p class="font-semibold text-gray-800 text-sm mb-2">MNG 프로젝트 (관리자)</p>
                        <div class="bg-gray-50 rounded-lg p-3 text-xs space-y-1 font-mono text-gray-700">
                            <p><span class="text-gray-400">서비스</span> app/Services/Barobill/BarobillService.php <span class="text-gray-400">← SOAP 클라이언트</span></p>
                            <p><span class="text-gray-400">서비스</span> app/Services/Barobill/BarobillBillingService.php <span class="text-gray-400">← 과금 처리</span></p>
                            <p><span class="text-gray-400">서비스</span> app/Services/Barobill/BarobillUsageService.php <span class="text-gray-400">← 사용량 집계</span></p>
                            <p><span class="text-gray-400">모델 </span> app/Models/Barobill/*.php <span class="text-gray-400">← 6개 모델</span></p>
                            <p><span class="text-gray-400">컨트롤러</span> app/Http/Controllers/Barobill/*.php</p>
                            <p><span class="text-gray-400">뷰   </span> resources/views/barobill/**/*.blade.php</p>
                        </div>
                    </div>

                    {{-- API 프로젝트 --}}
                    <div>
                        <p class="font-semibold text-gray-800 text-sm mb-2">API 프로젝트 (백엔드)</p>
                        <div class="bg-gray-50 rounded-lg p-3 text-xs space-y-1 font-mono text-gray-700">
                            <p><span class="text-gray-400">서비스</span> app/Services/BarobillService.php <span class="text-gray-400">← REST 클라이언트</span></p>
                            <p><span class="text-gray-400">모델 </span> app/Models/BarobillSetting.php</p>
                            <p><span class="text-gray-400">모델 </span> app/Models/TaxInvoice.php</p>
                        </div>
                    </div>

                    {{-- 문서 --}}
                    <div>
                        <p class="font-semibold text-gray-800 text-sm mb-2">문서</p>
                        <div class="bg-gray-50 rounded-lg p-3 text-xs space-y-1 font-mono text-gray-700">
                            <p><span class="text-gray-400">가이드</span> docs/features/barobill-kakaotalk/README.md</p>
                            <p><span class="text-gray-400">가이드</span> docs/features/barobill-kakaotalk/esign-notification-guide.md</p>
                            <p><span class="text-gray-400">정책 </span> docs/rules/billing-policy.md</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>

    {{-- 하단 빠른 바로가기 --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 text-center mt-10 mb-8">
        <h3 class="font-semibold text-blue-800 mb-3">바로 이동하기</h3>
        <div class="flex flex-wrap justify-center gap-3">
            <a href="{{ route('barobill.settings.index') }}" class="px-4 py-2 bg-white border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-100 transition-colors">바로빌 설정</a>
            <a href="{{ route('barobill.tax-invoice.index') }}" class="px-4 py-2 bg-white border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-100 transition-colors">전자세금계산서</a>
            <a href="{{ route('barobill.bank-account.index') }}" class="px-4 py-2 bg-white border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-100 transition-colors">계좌조회</a>
            <a href="{{ route('barobill.card-usage.index') }}" class="px-4 py-2 bg-white border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-100 transition-colors">카드내역</a>
            <a href="{{ route('barobill.usage.index') }}" class="px-4 py-2 bg-white border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-100 transition-colors">사용량 조회</a>
            <a href="{{ route('barobill.billing.index') }}" class="px-4 py-2 bg-white border border-blue-300 text-blue-700 rounded-lg text-sm hover:bg-blue-100 transition-colors">과금 관리</a>
        </div>
    </div>

</div>
@endsection