@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>
    .brb-body { font-family: 'Noto Sans KR', sans-serif; color: #1e293b; }

    /* 히어로 */
    .brb-hero { background: linear-gradient(135deg, #312e81 0%, #4338ca 40%, #6366f1 70%, #818cf8 100%); }
    .brb-hero-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.12; }

    /* 탭 */
    .brb-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; }
    .brb-tab:hover { color: white; background: rgba(255,255,255,0.1); }
    .brb-tab.active { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }
    .brb-section { display: none; }
    .brb-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: #eef2ff; border: 1px solid #c7d2fe; color: #4338ca; margin-top: 4px; }

    /* 주의사항 박스 */
    .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; }
    .notice-danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
    .notice-purple { background: #f5f3ff; border: 1px solid #ddd6fe; color: #5b21b6; }

    /* 비교 테이블 */
    .cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.75rem; }
    .cmp-table th { background: #f1f5f9; padding: 0.6rem 0.75rem; font-weight: 700; text-align: left; border-bottom: 2px solid #e2e8f0; }
    .cmp-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #f1f5f9; }
    .cmp-table tr:hover td { background: #f8fafc; }

    /* 프로세스 흐름 */
    .process-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
    .process-step { flex: 1; min-width: 100px; max-width: 160px; 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; }

    /* 배지 */
    .badge-green { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #dcfce7; color: #166534; }
    .badge-blue { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #dbeafe; color: #1e40af; }
    .badge-amber { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #fef3c7; color: #92400e; }
    .badge-red { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #fee2e2; color: #991b1b; }
    .badge-purple { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 0.6rem; font-weight: 700; background: #f3e8ff; color: #6b21a8; }

    /* 체크리스트 */
    .checklist { list-style: none; padding: 0; margin: 0; }
    .checklist li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.8rem; }
    .checklist li:last-child { border-bottom: none; }
    .check-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 900; flex-shrink: 0; margin-top: 1px; }

    /* 메뉴 맵 */
    .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: #6366f1; background: #eef2ff; }
    .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; }

    @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="brb-body">

    {{-- ===== 히어로 ===== --}}
    <div class="brb-hero text-white px-6 py-10 rounded-b-3xl mb-8 relative overflow-hidden">
        <div class="brb-hero-glow" style="top: -40px; right: -40px; background: #a78bfa;"></div>
        <div class="brb-hero-glow" style="bottom: -60px; left: 15%; background: #60a5fa;"></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, #4338ca, #6366f1); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                    <span style="font-size: 1.5rem;">🔗</span>
                </div>
                <div>
                    <p class="text-indigo-300 text-xs font-bold tracking-wider uppercase">SAM 도움말</p>
                    <h1 class="text-3xl font-black">바로빌 연동 가이드</h1>
                </div>
            </div>
            <p class="text-indigo-100 text-sm mb-6" style="max-width: 700px;">
                SAM과 바로빌(Barobill) 플랫폼의 연동을 위한 필수 설정 가이드.
                카드 등록, 공인인증서 등록, 계정 연결부터 세금계산서, 홈택스 연동까지 한 번에 정리합니다.
            </p>

            <div class="flex flex-wrap gap-2">
                <button class="brb-tab active" onclick="switchBrbTab(0)">전체 구조</button>
                <button class="brb-tab" onclick="switchBrbTab(1)">초기 설정</button>
                <button class="brb-tab" onclick="switchBrbTab(2)">세금계산서</button>
                <button class="brb-tab" onclick="switchBrbTab(3)">계좌/카드</button>
                <button class="brb-tab" onclick="switchBrbTab(4)">홈택스 연동</button>
                <button class="brb-tab" onclick="switchBrbTab(5)">카카오톡/SMS</button>
                <button class="brb-tab" onclick="switchBrbTab(6)">메뉴 맵</button>
            </div>
        </div>
    </div>

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

        {{-- ===== 탭 0: 전체 구조 ===== --}}
        <div class="brb-section active" id="brbTab0">
            <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">데이터 연동 흐름</h3>
                <div class="process-flow mb-6">
                    <div class="process-step">
                        <div class="process-icon" style="background: #eef2ff; color: #4338ca;">🏢</div>
                        <div class="process-name">바로빌</div>
                        <div class="process-sub">플랫폼 (barobill.co.kr)</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">SOAP API</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">SAM 서버</div>
                        <div class="process-sub">API + MNG</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>

                <div class="notice-purple notice-box">
                    <strong>핵심 원리:</strong> 바로빌은 은행/카드사/국세청과 직접 통신하여 데이터를 수집하고, SAM은 바로빌 API를 통해 이 데이터를 가져옵니다. 따라서 <strong>바로빌에 카드/계좌/공인인증서를 먼저 등록</strong>해야 SAM에서 데이터를 조회할 수 있습니다.
                </div>
            </div>

            {{-- 바로빌 5대 서비스 --}}
            <h3 class="font-bold text-sm text-gray-700 mb-3">바로빌 연동 5대 서비스</h3>
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #4338ca, #6366f1);">
                        <span style="margin-right: 4px;">📄</span> 전자세금계산서 (eTax)
                    </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">국세청(NTS) 자동 전송</div>
                            <div class="step-menu">발행 상태 추적</div>
                        </div>
                        <div class="mt-2"><span class="badge-red">필수</span> 공인인증서 등록</div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #0369a1, #0ea5e9);">
                        <span style="margin-right: 4px;">🏦</span> 계좌 입출금 (eAccount)
                    </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">거래 분할 (split) 처리</div>
                            <div class="step-menu">분개(전표) 자동 생성</div>
                            <div class="step-menu">수동 거래 입력</div>
                        </div>
                        <div class="mt-2"><span class="badge-red">필수</span> 계좌 등록 + 공인인증서</div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
                        <span style="margin-right: 4px;">💳</span> 카드사용내역 (eCard)
                    </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">거래 분할 (split) 처리</div>
                            <div class="step-menu">분개(전표) 자동 생성</div>
                            <div class="step-menu">숨김/복원 처리</div>
                        </div>
                        <div class="mt-2"><span class="badge-red">필수</span> 카드 등록</div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
                        <span style="margin-right: 4px;">🏛</span> 홈택스 연동 (HomeTax)
                    </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>
                        <div class="mt-2"><span class="badge-red">필수</span> 홈택스 공인인증서</div>
                    </div>
                </div>

                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #db2777, #f472b6);">
                        <span style="margin-right: 4px;">💬</span> 카카오톡/SMS
                    </div>
                    <div class="flow-body">
                        <p class="text-xs text-gray-600 mb-3"><strong>알림톡, 친구톡, SMS</strong> 발송 기능입니다.</p>
                        <div class="space-y-1">
                            <div class="step-menu">알림톡 발송 (템플릿 기반)</div>
                            <div class="step-menu">전자계약 서명 요청 알림</div>
                            <div class="step-menu">SMS 문자 발송</div>
                            <div class="step-menu">발송 이력 관리</div>
                        </div>
                        <div class="mt-2"><span class="badge-amber">선택</span> 카카오 채널 개설</div>
                    </div>
                </div>
            </div>

            {{-- 바로빌이란? --}}
            <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">바로빌이란?</h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                    <div class="text-xs text-gray-600 leading-relaxed">
                        <p class="mb-2"><strong>바로빌(Barobill)</strong>은 전자세금계산서, 계좌/카드 조회, 홈택스 연동, 카카오톡/SMS 발송 등 기업 회계에 필요한 <strong>외부 데이터 연동 플랫폼</strong>입니다.</p>
                        <p class="mb-2">SAM은 바로빌의 SOAP API를 통해 데이터를 주고받으며, 이를 통해 수작업 없이 세금계산서 발행, 카드/계좌 거래 조회, 홈택스 데이터 동기화가 가능합니다.</p>
                        <p>바로빌 공식 사이트: <strong>www.barobill.co.kr</strong></p>
                    </div>
                    <div>
                        <table class="cmp-table">
                            <thead><tr><th>구분</th><th>바로빌 역할</th><th>SAM 역할</th></tr></thead>
                            <tbody>
                                <tr><td>세금계산서</td><td>발행/전송 처리</td><td>요청/조회/관리</td></tr>
                                <tr><td>계좌</td><td>은행 데이터 수집</td><td>조회/분개 처리</td></tr>
                                <tr><td>카드</td><td>카드사 데이터 수집</td><td>조회/분개 처리</td></tr>
                                <tr><td>홈택스</td><td>국세청 스크래핑</td><td>동기화/분개 처리</td></tr>
                                <tr><td>카카오톡</td><td>메시지 발송 대행</td><td>발송 요청/이력</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== 탭 1: 초기 설정 ===== --}}
        <div class="brb-section" id="brbTab1">
            <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="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">
                    <span class="badge-red">필수</span> 테넌트 초기 설정 체크리스트
                </h3>
                <p class="text-xs text-gray-500 mb-4">SAM을 사용하는 각 테넌트(고객사)는 아래 항목을 모두 완료해야 바로빌 연동이 정상 동작합니다.</p>

                <ul class="checklist">
                    <li>
                        <div class="check-icon" style="background: #fee2e2; color: #991b1b;">1</div>
                        <div>
                            <div class="font-bold text-sm">바로빌 회원 가입</div>
                            <div class="text-xs text-gray-500 mt-1">www.barobill.co.kr에서 사업자 회원으로 가입합니다. 사업자번호 기반으로 회원 등록됩니다.</div>
                        </div>
                    </li>
                    <li>
                        <div class="check-icon" style="background: #fee2e2; color: #991b1b;">2</div>
                        <div>
                            <div class="font-bold text-sm">바로빌 ID/PW를 SAM에 등록</div>
                            <div class="text-xs text-gray-500 mt-1">SAM 관리자가 <strong>바로빌 설정</strong> 메뉴에서 바로빌 계정 ID와 비밀번호를 입력합니다. 이 정보가 있어야 SAM이 바로빌 API를 호출할 수 있습니다.</div>
                            <div class="step-menu">SAM > 바로빌 > 바로빌 설정</div>
                        </div>
                    </li>
                    <li>
                        <div class="check-icon" style="background: #fee2e2; color: #991b1b;">3</div>
                        <div>
                            <div class="font-bold text-sm">사업자번호 및 인증키 등록</div>
                            <div class="text-xs text-gray-500 mt-1">바로빌에서 발급받은 <strong>인증키(cert_key)</strong>를 SAM에 등록합니다. 인증키는 SAM 서버에서 암호화하여 저장됩니다.</div>
                            <div class="step-menu">SAM > 바로빌 > 바로빌 설정</div>
                        </div>
                    </li>
                    <li>
                        <div class="check-icon" style="background: #fef3c7; color: #92400e;">4</div>
                        <div>
                            <div class="font-bold text-sm">공인인증서 등록 (바로빌 사이트)</div>
                            <div class="text-xs text-gray-500 mt-1">바로빌 사이트에 로그인 → <strong>인증서 관리</strong>에서 법인 공인인증서를 등록합니다. 세금계산서 발행 및 홈택스 스크래핑에 필수입니다.</div>
                        </div>
                    </li>
                    <li>
                        <div class="check-icon" style="background: #fef3c7; color: #92400e;">5</div>
                        <div>
                            <div class="font-bold text-sm">법인카드 등록 (바로빌 사이트)</div>
                            <div class="text-xs text-gray-500 mt-1">바로빌 사이트 → <strong>카드관리</strong>에서 법인카드를 등록합니다. 카드사별로 등록 방법이 다르며, 일부 카드사는 카드사 홈페이지에서 바로빌 연동을 별도로 신청해야 합니다.</div>
                        </div>
                    </li>
                    <li>
                        <div class="check-icon" style="background: #fef3c7; color: #92400e;">6</div>
                        <div>
                            <div class="font-bold text-sm">계좌 등록 (바로빌 사이트)</div>
                            <div class="text-xs text-gray-500 mt-1">바로빌 사이트 → <strong>계좌관리</strong>에서 법인 계좌를 등록합니다. 은행별 공인인증서 또는 OTP 인증이 필요할 수 있습니다.</div>
                        </div>
                    </li>
                    <li>
                        <div class="check-icon" style="background: #dbeafe; color: #1e40af;">7</div>
                        <div>
                            <div class="font-bold text-sm">연동 테스트</div>
                            <div class="text-xs text-gray-500 mt-1">SAM의 바로빌 설정에서 <strong>연동 테스트</strong> 버튼을 클릭하여 정상 연결을 확인합니다.</div>
                            <div class="step-menu">SAM > 바로빌 > 바로빌 설정 > 연동 테스트</div>
                        </div>
                    </li>
                </ul>
            </div>

            {{-- 상세 설정 카드 --}}
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #4338ca, #6366f1);">
                        SAM에서 설정하는 항목
                    </div>
                    <div class="flow-body">
                        <div class="step-row">
                            <div class="step-num" style="background: #4338ca;">1</div>
                            <div class="step-content">
                                <div class="step-title">바로빌 ID / 비밀번호</div>
                                <div class="step-desc">바로빌 로그인 계정. SAM이 API 호출 시 이 계정으로 인증합니다. 비밀번호는 암호화 저장됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #4338ca;">2</div>
                            <div class="step-content">
                                <div class="step-title">사업자번호</div>
                                <div class="step-desc">하이픈 포함 형식 (예: 123-45-67890). 세금계산서 발행/수취의 기준이 됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #4338ca;">3</div>
                            <div class="step-content">
                                <div class="step-title">인증키 (cert_key)</div>
                                <div class="step-desc">바로빌에서 발급한 API 인증키. Laravel Crypt로 암호화하여 DB에 저장됩니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #4338ca;">4</div>
                            <div class="step-content">
                                <div class="step-title">테스트/운영 모드 설정</div>
                                <div class="step-desc">테스트 모드에서는 바로빌 테스트 서버(testws.baroservice.com)를 사용합니다.</div>
                            </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">법인 공인인증서 파일(.pfx/.p12)을 바로빌에 업로드합니다. 세금계산서와 홈택스 연동에 필수.</div>
                            </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">은행 선택, 계좌번호 입력. 은행별로 인터넷뱅킹 인증서 또는 OTP 인증이 필요합니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #d97706;">4</div>
                            <div class="step-content">
                                <div class="step-title">서비스 신청</div>
                                <div class="step-desc">사용할 서비스(세금계산서/계좌조회/카드조회/홈택스)를 개별적으로 신청합니다.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 보안 주의사항 --}}
            <div class="notice-danger notice-box mb-6">
                <strong>보안 주의사항:</strong>
                <ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
                    <li>바로빌 비밀번호는 SAM 서버에서 <strong>암호화(Crypt)</strong>하여 저장됩니다. 평문으로 노출되지 않습니다.</li>
                    <li>인증키(cert_key)도 동일하게 암호화 저장됩니다.</li>
                    <li>바로빌 계정 비밀번호를 변경한 경우, SAM의 바로빌 설정에서도 <strong>반드시 업데이트</strong>해야 합니다.</li>
                    <li>공인인증서 갱신 시 바로빌 사이트에서 <strong>새 인증서를 재등록</strong>해야 합니다.</li>
                </ul>
            </div>

            {{-- 테넌트별 독립 관리 --}}
            <div class="notice-info notice-box mb-6">
                <strong>멀티테넌트 구조:</strong> SAM은 테넌트(고객사)별로 바로빌 설정이 <strong>완전히 분리</strong>되어 있습니다. 각 테넌트는 자체 바로빌 계정, 사업자번호, 인증키를 독립적으로 관리합니다. 테넌트 A의 바로빌 설정은 테넌트 B에 영향을 주지 않습니다.
            </div>
        </div>

        {{-- ===== 탭 2: 세금계산서 ===== --}}
        <div class="brb-section" id="brbTab2">
            <h2 class="text-xl font-bold mb-2 text-gray-800">전자세금계산서 (eTax)</h2>
            <p class="text-sm text-gray-500 mb-6">바로빌을 통한 전자세금계산서 발행, 수취, 국세청 전송 프로세스를 설명합니다.</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">세금계산서 발행 프로세스</h3>
                <div class="process-flow mb-4">
                    <div class="process-step">
                        <div class="process-icon" style="background: #eef2ff; color: #4338ca;">📝</div>
                        <div class="process-name">계산서 작성</div>
                        <div class="process-sub">SAM에서 입력</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">API 호출</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">NTS 자동 신고</div>
                    </div>
                    <div class="process-arrow">→</div>
                    <div class="process-step">
                        <div class="process-icon" style="background: #f0fdf4; color: #059669;">✅</div>
                        <div class="process-name">발행 완료</div>
                        <div class="process-sub">상태 확인</div>
                    </div>
                </div>
            </div>

            {{-- 발행/수취 --}}
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
                        매출 세금계산서 (발행)
                    </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">SAM에 등록된 거래처를 검색하여 선택합니다. 사업자번호, 상호, 대표자 등이 자동 입력됩니다.</div>
                            </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">품목명, 수량, 단가, 공급가액, 세액을 입력합니다. 세액은 공급가액의 10%로 자동 계산됩니다.</div>
                            </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">발행 버튼 클릭 시 바로빌 API를 통해 전자서명 → 국세청 전송이 자동 처리됩니다.</div>
                                <div class="step-menu">SAM > 바로빌 > 전자세금계산서</div>
                            </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>
                            </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>
                            </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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 사전 조건 --}}
            <div class="notice-warn notice-box mb-6">
                <strong>세금계산서 발행 전 필수 조건:</strong>
                <ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
                    <li>바로빌 사이트에 <strong>공인인증서가 등록</strong>되어 있어야 합니다 (전자서명용).</li>
                    <li>SAM에 <strong>바로빌 ID/PW와 인증키</strong>가 등록되어 있어야 합니다.</li>
                    <li>발행할 때 사용할 <strong>이메일 주소</strong>가 바로빌 설정에 등록되어 있어야 합니다.</li>
                    <li>사업자번호 <strong>휴폐업 조회</strong>를 통해 거래처의 사업 상태를 미리 확인하세요.</li>
                </ul>
            </div>
        </div>

        {{-- ===== 탭 3: 계좌/카드 ===== --}}
        <div class="brb-section" id="brbTab3">
            <h2 class="text-xl font-bold mb-2 text-gray-800">계좌 입출금 / 카드사용내역</h2>
            <p class="text-sm text-gray-500 mb-6">바로빌을 통해 자동 수집되는 계좌 입출금 내역과 카드 거래 내역의 관리 방법을 설명합니다.</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">
                    <span class="badge-blue">계좌</span> 계좌 입출금 내역 조회
                </h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                    <div>
                        <div class="step-row">
                            <div class="step-num" style="background: #0369a1;">1</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: #0369a1;">2</div>
                            <div class="step-content">
                                <div class="step-title">SAM에서 조회</div>
                                <div class="step-desc">계좌입출금내역 메뉴에서 기간/계좌를 선택하면 바로빌에서 수집된 데이터가 표시됩니다.</div>
                                <div class="step-menu">SAM > 바로빌 > 계좌입출금내역</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #0369a1;">3</div>
                            <div class="step-content">
                                <div class="step-title">분개(전표) 처리</div>
                                <div class="step-desc">입출금 내역을 선택하여 분개(일반전표)를 자동 생성할 수 있습니다. 계정과목을 지정하면 장부에 바로 반영됩니다.</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="notice-tip notice-box mb-3">
                            <strong>거래 분할(Split):</strong> 하나의 입출금 건에 여러 계정과목이 포함된 경우 (예: 급여 이체 + 보험료), 거래를 분할하여 각각 다른 계정으로 분개할 수 있습니다.
                        </div>
                        <div class="notice-info notice-box">
                            <strong>수동 거래 입력:</strong> 바로빌에서 자동 수집되지 않는 현금 거래 등은 수동으로 입력할 수 있습니다. 수동 입력도 분개 처리가 가능합니다.
                        </div>
                    </div>
                </div>
            </div>

            {{-- 카드 --}}
            <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">
                    <span class="badge-amber">카드</span> 카드사용내역 조회
                </h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                    <div>
                        <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>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #d97706;">2</div>
                            <div class="step-content">
                                <div class="step-title">SAM에서 조회</div>
                                <div class="step-desc">카드사용내역 메뉴에서 기간/카드를 선택하면 카드 거래 내역이 표시됩니다.</div>
                                <div class="step-menu">SAM > 바로빌 > 카드사용내역</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>
                    <div>
                        <div class="notice-tip notice-box mb-3">
                            <strong>카드 거래 숨김/복원:</strong> 개인적 사용 등 회계 처리가 불필요한 건은 '숨김' 처리하여 목록에서 제외할 수 있습니다. 숨긴 건은 언제든 복원 가능합니다.
                        </div>
                        <div class="notice-warn notice-box">
                            <strong>카드사별 등록 주의:</strong>
                            <ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
                                <li><strong>삼성/현대/KB 등:</strong> 바로빌에서 직접 등록 가능</li>
                                <li><strong>롯데/하나 등:</strong> 카드사 홈페이지에서 '바로빌' 연동을 별도로 신청 후 바로빌에서 등록</li>
                                <li>등록 후 데이터 수집까지 <strong>1~2영업일</strong> 소요될 수 있습니다.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 계좌 vs 카드 비교 --}}
            <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">계좌 vs 카드 기능 비교</h3>
                <table class="cmp-table">
                    <thead>
                        <tr>
                            <th>기능</th>
                            <th>계좌 입출금</th>
                            <th>카드사용내역</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>바로빌 등록 필요</td><td style="color: #059669; font-weight: 700;">필수 (계좌+인증서)</td><td style="color: #059669; font-weight: 700;">필수 (카드번호)</td></tr>
                        <tr><td>데이터 수집 주기</td><td>실시간 ~ 1일</td><td>1~2일 (카드사 정산 후)</td></tr>
                        <tr><td>거래 분할 (Split)</td><td style="color: #059669;">지원</td><td style="color: #059669;">지원</td></tr>
                        <tr><td>분개 자동 생성</td><td style="color: #059669;">지원</td><td style="color: #059669;">지원</td></tr>
                        <tr><td>수동 입력</td><td style="color: #059669;">지원</td><td style="color: #059669;">지원</td></tr>
                        <tr><td>숨김/복원</td><td style="color: #94a3b8;">미지원</td><td style="color: #059669;">지원</td></tr>
                        <tr><td>매입세액공제</td><td style="color: #94a3b8;">해당 없음</td><td style="color: #059669;">지원</td></tr>
                        <tr><td>금액 재정의</td><td style="color: #059669;">지원 (override)</td><td style="color: #94a3b8;">미지원</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- ===== 탭 4: 홈택스 연동 ===== --}}
        <div class="brb-section" id="brbTab4">
            <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="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">홈택스 연동 구조</h3>
                <div class="process-flow mb-4">
                    <div class="process-step">
                        <div class="process-icon" style="background: #dcfce7; color: #059669;">🏛</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: #eef2ff; color: #4338ca;">🔄</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">SAM 동기화</div>
                        <div class="process-sub">API 호출</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>

                <div class="notice-info notice-box">
                    <strong>스크래핑이란?</strong> 바로빌이 등록된 공인인증서를 사용하여 홈택스에 자동 로그인 → 매출/매입 데이터를 수집하는 과정입니다. 사용자가 직접 홈택스에 접속할 필요 없이, SAM에서 버튼 하나로 최신 데이터를 가져올 수 있습니다.
                </div>
            </div>

            {{-- 매출/매입 --}}
            <div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                <div class="flow-card">
                    <div class="flow-head" style="background: linear-gradient(135deg, #2563eb, #60a5fa);">
                        홈택스 매출 조회
                    </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>
                                <div class="step-menu">SAM > 바로빌 > 홈택스 매출</div>
                            </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>
                            </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>
                            </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>
                                <div class="step-menu">SAM > 바로빌 > 홈택스 매입</div>
                            </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>
                            </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>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 홈택스 주의사항 --}}
            <div class="notice-warn notice-box mb-3">
                <strong>홈택스 스크래핑 전 필수 조건:</strong>
                <ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
                    <li>바로빌 사이트에 <strong>홈택스용 공인인증서</strong>가 등록되어 있어야 합니다.</li>
                    <li>홈택스 공인인증서는 세금계산서용 인증서와 <strong>동일한 인증서</strong>를 사용하는 경우가 많습니다.</li>
                    <li>스크래핑은 <strong>수 초 ~ 수십 초</strong>가 소요될 수 있습니다 (데이터 양에 따라).</li>
                    <li>홈택스 시스템 점검 시간(주로 새벽)에는 스크래핑이 실패할 수 있습니다.</li>
                </ul>
            </div>
            <div class="notice-tip notice-box mb-6">
                <strong>부가세 신고와의 연계:</strong> 홈택스 매출/매입 데이터는 SAM의 <strong>부가세관리</strong> 메뉴와 연동됩니다. 매출세액(홈택스 매출) - 매입세액(홈택스 매입 + 카드 매입세액공제) = 납부세액으로 자동 계산됩니다.
            </div>
        </div>

        {{-- ===== 탭 5: 카카오톡/SMS ===== --}}
        <div class="brb-section" id="brbTab5">
            <h2 class="text-xl font-bold mb-2 text-gray-800">카카오톡 알림톡 / SMS</h2>
            <p class="text-sm text-gray-500 mb-6">바로빌을 통한 카카오톡 알림톡, 친구톡, SMS 발송 기능을 설명합니다.</p>

            {{-- 알림톡 vs 친구톡 --}}
            <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">알림톡 vs 친구톡 비교</h3>
                <table class="cmp-table">
                    <thead>
                        <tr>
                            <th>구분</th>
                            <th>알림톡</th>
                            <th>친구톡</th>
                            <th>SMS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="font-bold">용도</td>
                            <td>정보성 메시지 (주문확인, 서명요청)</td>
                            <td>광고성 메시지 (프로모션)</td>
                            <td>범용 문자 메시지</td>
                        </tr>
                        <tr>
                            <td class="font-bold">수신 대상</td>
                            <td style="color: #059669; font-weight: 700;">모든 카카오톡 사용자</td>
                            <td>채널 친구만</td>
                            <td>모든 휴대폰</td>
                        </tr>
                        <tr>
                            <td class="font-bold">템플릿</td>
                            <td style="color: #d97706;">필수 (카카오 사전 검수)</td>
                            <td>불필요 (자유 형식)</td>
                            <td>불필요</td>
                        </tr>
                        <tr>
                            <td class="font-bold">비용</td>
                            <td>건당 약 8~9원</td>
                            <td>건당 약 15~20원</td>
                            <td>건당 약 20~30원</td>
                        </tr>
                        <tr>
                            <td class="font-bold">이미지</td>
                            <td style="color: #991b1b;">불가</td>
                            <td style="color: #059669;">가능</td>
                            <td style="color: #991b1b;">불가 (MMS는 가능)</td>
                        </tr>
                        <tr>
                            <td class="font-bold">대체발송</td>
                            <td>SMS로 자동 전환 가능</td>
                            <td>SMS로 자동 전환 가능</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- 카카오톡 설정 --}}
            <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">
                    <span class="badge-purple">설정</span> 카카오톡 발송을 위한 사전 준비
                </h3>
                <div class="grid gap-4" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                    <div>
                        <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">카카오비즈니스(business.kakao.com)에서 법인 명의로 채널을 개설합니다. 법인 명의 휴대폰이 필요합니다.</div>
                            </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>
                            </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">바로빌 관리 URL에서 카카오 채널과 바로빌 계정을 연동합니다.</div>
                            </div>
                        </div>
                        <div class="step-row">
                            <div class="step-num" style="background: #7c3aed;">4</div>
                            <div class="step-content">
                                <div class="step-title">알림톡 템플릿 등록/검수</div>
                                <div class="step-desc">발송할 메시지의 템플릿을 등록하고 카카오의 검수를 받습니다. 검수 소요: 1~3영업일.</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="notice-purple notice-box mb-3">
                            <strong>현재 SAM에 등록된 템플릿:</strong>
                            <ul style="margin-top: 0.5rem; padding-left: 1.25rem; list-style: disc;">
                                <li><strong>전자계약_서명요청</strong> — 전자계약 서명 요청 알림</li>
                                <li><strong>전자계약_리마인드</strong> — 미서명 계약 리마인드</li>
                            </ul>
                            <p style="margin-top: 0.5rem;">추가 템플릿이 필요하면 바로빌 관리 페이지에서 등록 후 카카오 검수를 받아야 합니다.</p>
                        </div>
                        <div class="notice-info notice-box">
                            <strong>SMS 발송:</strong> SMS는 별도의 카카오 채널 없이 바로빌 계정만으로 사용 가능합니다. 다만, <strong>발신번호 등록</strong>이 필요합니다 (통신사 인증).
                        </div>
                    </div>
                </div>
            </div>

            {{-- 발송 흐름 --}}
            <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">알림톡 발송 흐름 (전자계약 예시)</h3>
                <div class="process-flow mb-4">
                    <div class="process-step">
                        <div class="process-icon" style="background: #eef2ff; color: #4338ca;">📝</div>
                        <div class="process-name">전자계약 생성</div>
                        <div class="process-sub">SAM E-Sign</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">바로빌 API 호출</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>
                <div class="notice-warn notice-box">
                    <strong>2단계 검증 필수:</strong> 바로빌이 SendKey를 반환해도 실제 카카오톡 전달이 실패할 수 있습니다. SAM은 3초 후 전달 결과를 자동 확인하며, 실패 시 이메일로 대체 발송합니다.
                </div>
            </div>
        </div>

        {{-- ===== 탭 6: 메뉴 맵 ===== --}}
        <div class="brb-section" id="brbTab6">
            <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-6">
                {{-- 바로빌 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #4338ca;"></span>
                        바로빌 (직접 메뉴)
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">1</span> 전자세금계산서</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">2</span> 계좌입출금내역</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">3</span> 카드사용내역</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">4</span> 홈택스 매출</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">5</span> 홈택스 매입</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">6</span> 카카오톡</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #4338ca;">7</span> SMS</div>
                    </div>
                </div>

                {{-- 바로빌 관리 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #d97706;"></span>
                        바로빌 관리/설정
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">1</span> 바로빌 설정</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">2</span> 회원사관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">3</span> 사용량조회</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">4</span> 과금관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">5</span> 계좌조회</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #d97706;">6</span> 개발문서</div>
                    </div>
                </div>

                {{-- 연동 메뉴 --}}
                <div class="menu-group">
                    <div class="menu-group-title">
                        <span style="width: 8px; height: 8px; border-radius: 50%; background: #059669;"></span>
                        바로빌 데이터를 사용하는 메뉴
                    </div>
                    <div class="flex flex-wrap gap-1">
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">1</span> 일반전표입력 (분개)</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">2</span> 부가세관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">3</span> 법인카드관리</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">4</span> 재무 대시보드</div>
                        <div class="menu-item"><span class="menu-item-num" style="background: #059669;">5</span> 전자계약 (E-Sign)</div>
                    </div>
                </div>
            </div>

            {{-- FAQ --}}
            <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">자주 묻는 질문 (FAQ)</h3>
                <div class="grid gap-3" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));">
                    <div style="background: #f5f3ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #ddd6fe;">
                        <div class="font-bold text-sm text-indigo-700 mb-2">"카드 내역이 안 보여요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. 바로빌 사이트에서 <strong>카드 등록</strong> 확인<br>
                            2. 카드사 홈페이지에서 <strong>바로빌 연동 신청</strong> 여부 확인<br>
                            3. 등록 후 <strong>1~2영업일</strong> 대기<br>
                            4. SAM 바로빌 설정에서 <strong>연동 테스트</strong> 실행
                        </div>
                    </div>
                    <div style="background: #f0fdf4; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bbf7d0;">
                        <div class="font-bold text-sm text-emerald-700 mb-2">"세금계산서 발행이 안 돼요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. 바로빌에 <strong>공인인증서 등록</strong> 확인<br>
                            2. 인증서 <strong>유효기간 만료</strong> 여부 확인<br>
                            3. SAM에 <strong>바로빌 ID/PW/인증키</strong> 등록 확인<br>
                            4. 거래처 <strong>사업자번호</strong> 정확성 확인
                        </div>
                    </div>
                    <div style="background: #eff6ff; border-radius: 0.75rem; padding: 1rem; border: 1px solid #bfdbfe;">
                        <div class="font-bold text-sm text-blue-700 mb-2">"바로빌 비밀번호를 변경했어요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            바로빌 사이트에서 비밀번호를 변경하면<br>
                            <strong>반드시 SAM에서도 업데이트</strong>해야 합니다.<br>
                            SAM > 바로빌 > 바로빌 설정 > 비밀번호 수정<br>
                            미변경 시 모든 API 호출이 실패합니다.
                        </div>
                    </div>
                    <div style="background: #fef3c7; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fde68a;">
                        <div class="font-bold text-sm text-amber-700 mb-2">"홈택스 스크래핑이 실패해요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. 바로빌에 <strong>홈택스용 공인인증서</strong> 등록 확인<br>
                            2. 인증서 <strong>유효기간</strong> 확인<br>
                            3. <strong>홈택스 시스템 점검 시간</strong> 아닌지 확인<br>
                            4. 조회 기간이 너무 길면 타임아웃 가능 → 분할 조회
                        </div>
                    </div>
                    <div style="background: #fce7f3; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fbcfe8;">
                        <div class="font-bold text-sm text-pink-700 mb-2">"알림톡이 발송 안 돼요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            1. <strong>카카오톡 채널</strong> 개설 및 바로빌 연동 확인<br>
                            2. 발송 메시지가 <strong>등록된 템플릿과 정확히 일치</strong>하는지 확인<br>
                            3. 버튼 URL이 <strong>등록된 URL과 1글자도 다르면 실패</strong><br>
                            4. SMS 대체발송 시 <strong>발신번호 등록</strong> 필요
                        </div>
                    </div>
                    <div style="background: #fef2f2; border-radius: 0.75rem; padding: 1rem; border: 1px solid #fecaca;">
                        <div class="font-bold text-sm text-red-700 mb-2">"인증서가 만료되었어요"</div>
                        <div class="text-xs text-gray-600 leading-relaxed">
                            공인인증서는 보통 <strong>1년 주기</strong>로 갱신해야 합니다.<br>
                            갱신 후 바로빌 사이트에서 <strong>새 인증서를 재등록</strong>하세요.<br>
                            미갱신 시 세금계산서 발행, 홈택스 스크래핑이 모두 중단됩니다.
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>{{-- max-width wrapper --}}
</div>{{-- brb-body --}}
@endsection

@push('scripts')
<script>
function switchBrbTab(idx) {
    document.querySelectorAll('.brb-tab').forEach(function(t, i) {
        t.classList.toggle('active', i === idx);
    });
    document.querySelectorAll('.brb-section').forEach(function(s, i) {
        s.classList.toggle('active', i === idx);
        if (i === idx) {
            s.querySelectorAll('.flow-card, .notice-box, .menu-map').forEach(function(el, j) {
                el.style.opacity = '0';
                el.classList.remove('anim-in');
                setTimeout(function() { el.classList.add('anim-in'); }, j * 60);
            });
        }
    });
}
</script>
@endpush