@extends('layouts.app')

@section('title', '경정청구 소개')

@section('content')
<div class="max-w-6xl mx-auto">
    {{-- Tab Navigation --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
        <nav class="flex space-x-1 overflow-x-auto p-1" id="cr-nav-container">
            <button onclick="crSwitchTab('overview')" id="cr-tab-overview"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-active">종합 요약</button>
            <button onclick="crSwitchTab('intro')" id="cr-tab-intro"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">서론</button>
            <button onclick="crSwitchTab('process')" id="cr-tab-process"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">프로세스 비교</button>
            <button onclick="crSwitchTab('analytics')" id="cr-tab-analytics"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">데이터 분석</button>
            <button onclick="crSwitchTab('benefits')" id="cr-tab-benefits"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">효익 분석</button>
            <button onclick="crSwitchTab('issues')" id="cr-tab-issues"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">쟁점</button>
            <button onclick="crSwitchTab('future')" id="cr-tab-future"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">미래 전망</button>
            <button onclick="crSwitchTab('quiz')" id="cr-tab-quiz"
                class="px-4 py-2.5 text-sm font-medium whitespace-nowrap rounded-md cr-tab-inactive">학습 가이드</button>
        </nav>
    </div>

    {{-- Dynamic Content Area --}}
    <div id="cr-content-area" class="cr-fade-in">
        {{-- Content injected by JS --}}
    </div>
</div>

<style>
    .cr-tab-active {
        background-color: #0d9488;
        color: #ffffff;
        font-weight: 600;
    }
    .cr-tab-inactive {
        color: #4b5563;
        background-color: transparent;
    }
    .cr-tab-inactive:hover {
        background-color: #f3f4f6;
        color: #0d9488;
    }
    .cr-fade-in {
        animation: crFadeIn 0.4s ease-out forwards;
    }
    @keyframes crFadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .cr-chart-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        height: 300px;
    }
    @media (min-width: 768px) {
        .cr-chart-container { height: 350px; }
    }
    .cr-step-connector {
        position: relative;
    }
    .cr-step-connector::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 100%;
        width: 100%;
        height: 2px;
        background-color: #e5e7eb;
        z-index: 0;
        transform: translateY(-50%);
    }
    .cr-step-connector:last-child::after {
        display: none;
    }
    .cr-custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .cr-custom-scroll::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 10px; }
    .cr-custom-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
    .cr-custom-scroll::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
</style>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@verbatim
<script>
    // --- State Management ---
    const crState = {
        currentTab: 'overview',
        processMode: 'manual'
    };

    // --- Data Store ---
    const crDataStore = {
        metrics: [
            { label: '처리 기간 단축', value: '90%', desc: '14일 → 1.4일', colorClass: 'text-teal-600' },
            { label: '행정 비용 절감', value: '75%', desc: '건당 5만원 → 1.2만원', colorClass: 'text-green-600' },
            { label: '오류 발생률 감소', value: '95%', desc: '입력 오류 자동 검증', colorClass: 'text-amber-600' }
        ],
        platformStats: [
            { label: '삼쩜삼 가입자', value: '2,300만 명', icon: 'ri-group-line' },
            { label: '누적 환급 신고액', value: '1조 6,700억 원', icon: 'ri-money-won-circle-line' },
            { label: '무료 환급 이용자', value: '120만 명', icon: 'ri-gift-line' }
        ],
        processSteps: {
            manual: [
                { step: 1, title: '신청서 작성', icon: 'ri-file-edit-line', desc: '납세자가 복잡한 법령을 확인하며 수기로 작성' },
                { step: 2, title: '방문/우편 접수', icon: 'ri-building-2-line', desc: '세무서 방문 또는 등기 우편 발송 (이동 시간 소요)' },
                { step: 3, title: '담당자 수동 배정', icon: 'ri-user-line', desc: '문서 접수 후 담당자 지정까지 대기' },
                { step: 4, title: '서류 검토', icon: 'ri-search-line', desc: '담당자가 종이 서류를 육안으로 검토 및 대조' },
                { step: 5, title: '수동 입력', icon: 'ri-keyboard-line', desc: '검토 결과를 내부 시스템에 직접 타이핑 (오류 위험)' },
                { step: 6, title: '결과 통지', icon: 'ri-mail-send-line', desc: '우편으로 결과 발송 (2-3일 소요)' }
            ],
            digital: [
                { step: 1, title: '본인 인증', icon: 'ri-lock-line', desc: '간편 인증을 통한 즉시 로그인' },
                { step: 2, title: '데이터 자동 채움', icon: 'ri-flashlight-line', desc: '기존 신고 내역 자동 연동 및 신청서 생성' },
                { step: 3, title: 'AI 자동 검증', icon: 'ri-robot-line', desc: 'AI 알고리즘이 오류 및 누락 사항 1차 검증' },
                { step: 4, title: '즉시 접수', icon: 'ri-rocket-line', desc: '클릭 한 번으로 관할 세무서 시스템 등재' },
                { step: 5, title: '실시간 조회', icon: 'ri-smartphone-line', desc: '카카오톡/문자로 진행 상황 실시간 알림' }
            ]
        },
        charts: {
            timeComparison: {
                labels: ['신청서 작성', '접수/이동', '담당자 배정', '검토/처리', '결과 통지'],
                manual: [4, 4, 24, 48, 48],
                digital: [0.5, 0, 0, 4, 0]
            },
            costSavings: {
                labels: ['2024', '2025', '2026', '2027', '2028'],
                manualData: [10, 11, 12.1, 13.3, 14.6],
                digitalData: [3, 2.8, 2.6, 2.5, 2.4]
            },
            errorTypes: {
                labels: ['계산 오류', '기재 누락', '증빙 미비', '법령 오적용'],
                data: [45, 30, 15, 10]
            },
            adoptionTrend: {
                labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
                users: [50, 200, 800, 1500, 2000, 2300]
            }
        }
    };

    // --- Core Rendering Functions ---
    function crInit() {
        crRenderContent();
    }

    function crSwitchTab(tabId) {
        crState.currentTab = tabId;

        document.querySelectorAll('#cr-nav-container button').forEach(btn => {
            btn.classList.remove('cr-tab-active');
            btn.classList.add('cr-tab-inactive');
        });
        document.getElementById('cr-tab-' + tabId).classList.remove('cr-tab-inactive');
        document.getElementById('cr-tab-' + tabId).classList.add('cr-tab-active');

        crRenderContent();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function crRenderContent() {
        const container = document.getElementById('cr-content-area');
        container.innerHTML = '';
        container.classList.remove('cr-fade-in');
        void container.offsetWidth;
        container.classList.add('cr-fade-in');

        switch (crState.currentTab) {
            case 'overview': crRenderOverview(container); break;
            case 'intro': crRenderIntro(container); break;
            case 'process': crRenderProcess(container); break;
            case 'analytics': crRenderAnalytics(container); break;
            case 'benefits': crRenderBenefits(container); break;
            case 'issues': crRenderIssues(container); break;
            case 'future': crRenderFuture(container); break;
            case 'quiz': crRenderQuiz(container); break;
        }
    }

    // --- Section Renderers ---
    function crRenderOverview(container) {
        container.innerHTML = `
            <div class="space-y-6">
                <!-- Hero Section -->
                <div class="bg-gradient-to-r from-teal-600 to-gray-800 text-white rounded-lg p-8 shadow-sm">
                    <h2 class="text-2xl font-bold mb-3">납세자 권익 보호와 행정 효율의 혁신</h2>
                    <p class="text-teal-100 text-lg leading-relaxed max-w-3xl">
                        경정청구 전산화는 <strong class="text-white">행정 효율성</strong>,
                        <strong class="text-white">비용 절감</strong>, 그리고
                        <strong class="text-white">오류 감소</strong>를 통해
                        조세 정의 실현과 경제 활성화라는 거시적 효익을 창출합니다.
                    </p>
                </div>

                <!-- KPI Cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    ${crDataStore.metrics.map(metric => `
                        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200 text-center">
                            <p class="text-gray-600 font-medium mb-2">${metric.label}</p>
                            <p class="text-4xl font-extrabold ${metric.colorClass} mb-2">${metric.value}</p>
                            <p class="text-sm text-gray-500">${metric.desc}</p>
                        </div>
                    `).join('')}
                </div>

                <!-- Platform Stats -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">플랫폼 성과 현황</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        ${crDataStore.platformStats.map(stat => `
                            <div class="bg-teal-50 rounded-lg p-4 text-center">
                                <i class="${stat.icon} text-3xl text-teal-600"></i>
                                <p class="text-2xl font-bold text-teal-700 mt-2">${stat.value}</p>
                                <p class="text-sm text-gray-700">${stat.label}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>

                <!-- Key Findings -->
                <div class="bg-teal-50 p-6 rounded-lg border border-teal-200">
                    <h3 class="text-xl font-bold text-teal-900 mb-4"><i class="ri-lightbulb-line mr-1"></i> 연구의 핵심 결론</h3>
                    <ul class="space-y-3 text-gray-800">
                        <li class="flex items-start">
                            <i class="ri-check-line text-teal-600 mr-2 mt-0.5"></i>
                            <span>단순 반복 업무의 자동화로 세무 공무원은 <strong>고부가가치 조사 업무에 집중</strong> 가능</span>
                        </li>
                        <li class="flex items-start">
                            <i class="ri-check-line text-teal-600 mr-2 mt-0.5"></i>
                            <span>복잡한 세법 계산의 자동화로 <strong>납세 협력 비용 획기적 감소</strong></span>
                        </li>
                        <li class="flex items-start">
                            <i class="ri-check-line text-teal-600 mr-2 mt-0.5"></i>
                            <span>데이터 기반의 세수 예측 및 <strong>정책 수립의 정확도 향상</strong></span>
                        </li>
                        <li class="flex items-start">
                            <i class="ri-check-line text-teal-600 mr-2 mt-0.5"></i>
                            <span><strong>1조 6,700억 원</strong> 이상의 유동성 공급을 통한 경제 활성화</span>
                        </li>
                    </ul>
                </div>

                <!-- Quick Navigation -->
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <button onclick="crSwitchTab('process')" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left">
                        <i class="ri-refresh-line text-2xl text-teal-600"></i>
                        <p class="font-medium text-gray-800 mt-2">프로세스 비교</p>
                        <p class="text-xs text-gray-500">수기 vs 전산화</p>
                    </button>
                    <button onclick="crSwitchTab('analytics')" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left">
                        <i class="ri-bar-chart-2-line text-2xl text-teal-600"></i>
                        <p class="font-medium text-gray-800 mt-2">데이터 분석</p>
                        <p class="text-xs text-gray-500">차트로 보는 변화</p>
                    </button>
                    <button onclick="crSwitchTab('issues')" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left">
                        <i class="ri-error-warning-line text-2xl text-amber-500"></i>
                        <p class="font-medium text-gray-800 mt-2">주요 쟁점</p>
                        <p class="text-xs text-gray-500">갈등과 위험 요인</p>
                    </button>
                    <button onclick="crSwitchTab('quiz')" class="bg-white p-4 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow text-left">
                        <i class="ri-book-open-line text-2xl text-teal-600"></i>
                        <p class="font-medium text-gray-800 mt-2">학습 가이드</p>
                        <p class="text-xs text-gray-500">용어와 퀴즈</p>
                    </button>
                </div>
            </div>
        `;
    }

    function crRenderIntro(container) {
        container.innerHTML = `
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 border-l-4 border-l-teal-600">
                    <h2 class="text-2xl font-bold text-gray-800 mb-3">경정청구의 전산화와 조세 행정의 패러다임 전환</h2>
                    <p class="text-gray-600 leading-relaxed">효익, 쟁점, 그리고 미래에 관한 심층 보고서</p>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center mb-4">
                            <i class="ri-focus-3-line text-2xl text-teal-600 mr-3"></i>
                            <h3 class="text-lg font-bold text-gray-800">연구 배경 및 목적</h3>
                        </div>
                        <p class="text-gray-600 leading-relaxed text-sm">
                            4차 산업혁명의 물결은 금융, 의료, 법률 등 전문직 서비스 영역의 진입장벽을 허물고 있습니다.
                            특히 보수적이고 폐쇄적인 영역으로 간주되던 세무·회계 시장은 AI, 빅데이터, 클라우드 컴퓨팅 기술의 결합을 통해
                            급격한 '디지털 전환(Digital Transformation, DX)'을 겪고 있습니다.
                        </p>
                    </div>
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center mb-4">
                            <i class="ri-file-list-3-line text-2xl text-teal-600 mr-3"></i>
                            <h3 class="text-lg font-bold text-gray-800">경정청구란?</h3>
                        </div>
                        <p class="text-gray-600 leading-relaxed text-sm">
                            「국세기본법」 제45조의2에 의거, 납세자가 법정신고기한 내에 세금을 신고·납부했으나,
                            착오나 누락 등으로 인해 정당한 세액보다 과다하게 납부한 경우 과세관청에 이를 바로잡아 줄 것을 청구하는 제도입니다.
                        </p>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">세무 행정 환경의 변화</h3>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <i class="ri-team-line text-2xl text-teal-600"></i>
                            <p class="text-sm font-medium text-gray-800 mt-2">다양한 고용 형태</p>
                            <p class="text-xs text-gray-500 mt-1">플랫폼 노동자, 프리랜서, N잡러 증가</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <i class="ri-line-chart-line text-2xl text-teal-600"></i>
                            <p class="text-sm font-medium text-gray-800 mt-2">세법 복잡성 증가</p>
                            <p class="text-xs text-gray-500 mt-1">매년 개정되는 조세특례제한법</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <i class="ri-robot-line text-2xl text-teal-600"></i>
                            <p class="text-sm font-medium text-gray-800 mt-2">AI 국세행정 추진</p>
                            <p class="text-xs text-gray-500 mt-1">2026년 자동화 수준 획기적 향상 목표</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">전통적 경정청구 방식의 한계점</h3>
                    <div class="space-y-4">
                        <div class="flex items-start p-4 bg-red-50 rounded-lg">
                            <i class="ri-lock-2-line text-xl text-red-500 mr-3 mt-0.5"></i>
                            <div>
                                <p class="font-medium text-gray-800">정보의 비대칭성과 접근성 제한</p>
                                <p class="text-sm text-gray-600 mt-1">환급 가능성을 납세자 스스로 인지하기 어려우며, 소액인 경우 수수료 부담으로 권리 행사 포기</p>
                            </div>
                        </div>
                        <div class="flex items-start p-4 bg-amber-50 rounded-lg">
                            <i class="ri-time-line text-xl text-amber-500 mr-3 mt-0.5"></i>
                            <div>
                                <p class="font-medium text-gray-800">절차의 복잡성 및 시간 소요</p>
                                <p class="text-sm text-gray-600 mt-1">방대한 증빙 서류 준비, 수동 작성, 관할 세무서 제출 후 통상 2개월 소요</p>
                            </div>
                        </div>
                        <div class="flex items-start p-4 bg-orange-50 rounded-lg">
                            <i class="ri-error-warning-line text-xl text-orange-500 mr-3 mt-0.5"></i>
                            <div>
                                <p class="font-medium text-gray-800">인적 오류(Human Error)의 위험</p>
                                <p class="text-sm text-gray-600 mt-1">계산 착오, 개정 세법 미반영으로 인한 과소/과다 환급 위험</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function crRenderProcess(container) {
        const steps = crDataStore.processSteps[crState.processMode];
        const isManual = crState.processMode === 'manual';

        container.innerHTML = `
            <div class="space-y-6">
                <div class="text-center space-y-4">
                    <h2 class="text-2xl font-bold text-gray-800">프로세스 비교 시뮬레이션</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">
                        기존의 복잡한 수기 절차와 전산화된 간소화 절차를 비교해보세요.
                    </p>
                    <div class="inline-flex bg-gray-200 rounded-lg p-1">
                        <button onclick="crToggleProcess('manual')" class="px-6 py-2 rounded-md text-sm font-medium transition-all ${isManual ? 'bg-white text-gray-800 shadow-sm' : 'text-gray-600 hover:text-gray-800'}">
                            기존 (수기 방식)
                        </button>
                        <button onclick="crToggleProcess('digital')" class="px-6 py-2 rounded-md text-sm font-medium transition-all ${!isManual ? 'bg-teal-600 text-white shadow-sm' : 'text-gray-600 hover:text-gray-800'}">
                            신규 (전산화)
                        </button>
                    </div>
                </div>

                <div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200 overflow-x-auto cr-custom-scroll">
                    <div class="flex items-start justify-between min-w-[800px] relative px-4 py-8">
                        ${steps.map((step, index) => `
                            <div class="flex flex-col items-center relative z-10 w-40 cr-step-connector group">
                                <div class="w-16 h-16 rounded-full flex items-center justify-center text-2xl mb-4 transition-all duration-300 ${isManual ? 'bg-gray-100 text-gray-500 group-hover:bg-gray-200' : 'bg-teal-100 text-teal-600 group-hover:bg-teal-200 group-hover:scale-110 shadow-lg'}">
                                    <i class="${step.icon}"></i>
                                </div>
                                <h3 class="font-bold text-gray-800 mb-2 text-center">${step.title}</h3>
                                <p class="text-xs text-center text-gray-500 px-2">${step.desc}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-red-50 p-6 rounded-lg border border-red-200 ${isManual ? 'block' : 'hidden'}">
                        <h4 class="font-bold text-red-800 mb-3"><i class="ri-error-warning-line mr-1"></i> 주요 문제점 (Pain Points)</h4>
                        <ul class="space-y-2 text-sm text-red-700">
                            <li>• 서류 미비로 인한 반려율이 높음</li>
                            <li>• 담당자 배정까지 평균 3일 소요</li>
                            <li>• 수기 입력 과정에서 오타 발생 가능성 상존</li>
                            <li>• 복잡한 세법 규정 이해의 어려움</li>
                        </ul>
                    </div>
                    <div class="bg-green-50 p-6 rounded-lg border border-green-200 ${!isManual ? 'block' : 'hidden'}">
                        <h4 class="font-bold text-green-800 mb-3"><i class="ri-checkbox-circle-line mr-1"></i> 개선 효과 (Benefits)</h4>
                        <ul class="space-y-2 text-sm text-green-700">
                            <li>• 데이터 자동 검증으로 반려율 0% 도전</li>
                            <li>• 시스템 즉시 배정으로 대기 시간 "0"</li>
                            <li>• 입력 불필요, 클릭만으로 신청 완료</li>
                            <li>• AI가 최적의 공제 항목 자동 추천</li>
                        </ul>
                    </div>
                </div>

                <!-- Technology Comparison Table -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">핵심 기술: 데이터 수집 기술의 진화</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-800 text-white">
                                <tr>
                                    <th class="px-4 py-3 text-left rounded-tl-lg">구분</th>
                                    <th class="px-4 py-3 text-left">스크래핑 (Scraping)</th>
                                    <th class="px-4 py-3 text-left rounded-tr-lg">API (마이데이터)</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">작동 원리</td>
                                    <td class="px-4 py-3 text-gray-600">화면 정보 자동 추출</td>
                                    <td class="px-4 py-3 text-gray-600">서버 간 표준화된 데이터 전송</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">속도</td>
                                    <td class="px-4 py-3 text-gray-600">상대적으로 느림</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">매우 빠름</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">보안성</td>
                                    <td class="px-4 py-3 text-red-600">취약 (인증정보 저장 이슈)</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">안전 (암호화 전송)</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">안정성</td>
                                    <td class="px-4 py-3 text-gray-600">UI 변경 시 서비스 중단</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">표준 규격 유지로 안정적</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">비용</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">낮음</td>
                                    <td class="px-4 py-3 text-gray-600">높음 (API 호출 수수료)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- AI Features -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">AI 기반 세액 분석 알고리즘</h3>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-600">
                            <p class="font-medium text-gray-800">패턴 매칭 및 누락 탐지</p>
                            <p class="text-sm text-gray-600 mt-2">5년간 신고 내역 스캔하여 누락된 세액공제 즉시 식별</p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-600">
                            <p class="font-medium text-gray-800">시뮬레이션 및 최적화</p>
                            <p class="text-sm text-gray-600 mt-2">모든 공제 조합을 시뮬레이션하여 최유리 결과 제시</p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-600">
                            <p class="font-medium text-gray-800">OCR 활용</p>
                            <p class="text-sm text-gray-600 mt-2">종이 영수증, 비정형 문서를 디지털화하여 증빙 누락 방지</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function crToggleProcess(mode) {
        crState.processMode = mode;
        crRenderContent();
    }

    function crRenderAnalytics(container) {
        container.innerHTML = `
            <div class="space-y-6">
                <div class="text-center">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">데이터로 보는 변화</h2>
                    <p class="text-gray-600">전산화 전후의 성과를 정량적인 데이터로 비교 분석합니다.</p>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Time Comparison Chart -->
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wide mb-4">단계별 소요 시간 비교 (단위: 시간)</h3>
                        <div class="cr-chart-container">
                            <canvas id="crTimeChart"></canvas>
                        </div>
                    </div>

                    <!-- Cost Savings Chart -->
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wide mb-4">연도별 운영 비용 절감 예측 (단위: 억원)</h3>
                        <div class="cr-chart-container">
                            <canvas id="crCostChart"></canvas>
                        </div>
                    </div>

                    <!-- Error Types Chart -->
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wide mb-4">기존 수기 방식의 주요 오류 유형 분석</h3>
                        <div class="cr-chart-container">
                            <canvas id="crErrorChart"></canvas>
                        </div>
                    </div>

                    <!-- Adoption Trend Chart -->
                    <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wide mb-4">플랫폼 이용자 증가 추이 (단위: 만 명)</h3>
                        <div class="cr-chart-container">
                            <canvas id="crAdoptionChart"></canvas>
                        </div>
                    </div>
                </div>

                <!-- Insights Block -->
                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
                    <h3 class="font-bold text-gray-800 mb-4 text-lg"><i class="ri-lightbulb-line mr-1 text-amber-500"></i> 데이터 분석 인사이트</h3>
                    <div class="grid md:grid-cols-3 gap-6 text-sm text-gray-700">
                        <div>
                            <p class="font-semibold text-teal-600 mb-2">시간 효율성</p>
                            <p>가장 큰 병목 구간인 '검토 및 처리' 단계가 전산 검증으로 90% 이상 단축됩니다.</p>
                        </div>
                        <div>
                            <p class="font-semibold text-green-600 mb-2">비용 효율성</p>
                            <p>초기 시스템 구축 비용이 발생하지만, 2년 차부터 BEP(손익분기점)를 달성합니다.</p>
                        </div>
                        <div>
                            <p class="font-semibold text-amber-600 mb-2">품질 향상</p>
                            <p>단순 계산 오류(45%)가 시스템 자동 계산으로 인해 원천 차단됩니다.</p>
                        </div>
                    </div>
                </div>
            </div>
        `;

        setTimeout(() => {
            crInitTimeChart();
            crInitCostChart();
            crInitErrorChart();
            crInitAdoptionChart();
        }, 100);
    }

    function crRenderBenefits(container) {
        container.innerHTML = `
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 border-l-4 border-l-teal-600">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">경정청구 전산화의 다차원적 효익 분석</h2>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center mb-4">
                            <i class="ri-global-line text-2xl text-teal-600 mr-3"></i>
                            <h3 class="text-lg font-bold text-gray-800">접근성 혁명</h3>
                        </div>
                        <p class="text-gray-600 leading-relaxed text-sm mb-4">
                            '세무 서비스의 민주화' - 기존 세무 시장은 높은 수수료를 지불할 수 있는 법인과 고소득 개인사업자 중심이었으나,
                            전산화된 플랫폼이 소액 납세자들을 제도권 세무 서비스로 편입시켰습니다.
                        </p>
                        <div class="bg-teal-50 rounded-lg p-4">
                            <div class="flex justify-between items-center mb-2">
                                <span class="text-sm font-medium text-gray-700">삼쩜삼 가입자</span>
                                <span class="text-lg font-bold text-teal-700">2,300만 명</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm font-medium text-gray-700">누적 환급 신고액</span>
                                <span class="text-lg font-bold text-teal-700">1조 6,700억 원</span>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center mb-4">
                            <i class="ri-checkbox-circle-line text-2xl text-teal-600 mr-3"></i>
                            <h3 class="text-lg font-bold text-gray-800">정확성과 완전성</h3>
                        </div>
                        <p class="text-gray-600 leading-relaxed text-sm mb-4">
                            AI 기반 분석은 인간이 범하기 쉬운 실수와 누락을 체계적으로 방지합니다.
                            고용증대세액공제 같은 복잡한 항목도 100% 찾아냅니다.
                        </p>
                        <div class="bg-amber-50 rounded-lg p-4">
                            <p class="text-sm text-gray-700"><strong>사례:</strong> 인천 제조업체 A사는 경정청구 플랫폼 진단을 통해 3년간 누락된 세액공제 <span class="text-amber-600 font-bold">1억 원</span>을 일괄 환급받았습니다.</p>
                        </div>
                    </div>
                </div>

                <!-- Process Comparison Table -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">프로세스 혁신: 시간과 비용의 획기적 절감</h3>
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead class="bg-gray-800 text-white">
                                <tr>
                                    <th class="px-4 py-3 text-left rounded-tl-lg">비교 항목</th>
                                    <th class="px-4 py-3 text-left">전통적 대면 방식</th>
                                    <th class="px-4 py-3 text-left">전산화/플랫폼 방식</th>
                                    <th class="px-4 py-3 text-left rounded-tr-lg">효익</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">탐색 비용</td>
                                    <td class="px-4 py-3 text-gray-600">세무사 수소문 및 상담 발품</td>
                                    <td class="px-4 py-3 text-teal-600">앱 설치 및 본인 인증 (5분)</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">99% 단축</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">진단 시간</td>
                                    <td class="px-4 py-3 text-gray-600">자료 전달 후 수일 소요</td>
                                    <td class="px-4 py-3 text-teal-600">데이터 연동 후 즉시 결과</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">실시간</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">수수료</td>
                                    <td class="px-4 py-3 text-gray-600">착수금 + 성공보수 (20~30%)</td>
                                    <td class="px-4 py-3 text-teal-600">무료 진단 + 성공보수 (10~20%)</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">비용 장벽 제거</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="px-4 py-3 font-medium text-gray-800">처리 기간</td>
                                    <td class="px-4 py-3 text-gray-600">세무서 검토 2개월 소요</td>
                                    <td class="px-4 py-3 text-teal-600">표준화된 데이터로 검토 용이</td>
                                    <td class="px-4 py-3 text-teal-600 font-medium">행정력 절감</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Qualitative Benefits -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="group bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
                            <i class="ri-eye-line text-teal-600"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800 mb-2">투명성 강화</h3>
                        <p class="text-gray-600 text-sm">
                            모든 처리 과정이 실시간으로 기록되고 납세자에게 공개됩니다. '깜깜이 행정'이라는 오명을 벗고 행정의 신뢰도를 제고할 수 있습니다.
                        </p>
                    </div>

                    <div class="group bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
                            <i class="ri-wheelchair-line text-green-600"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800 mb-2">접근성 개선</h3>
                        <p class="text-gray-600 text-sm">
                            세무서 방문이 어려운 도서 산간 지역 거주자나 거동이 불편한 납세자도 집에서 PC나 모바일로 손쉽게 권리를 행사할 수 있습니다.
                        </p>
                    </div>

                    <div class="group bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center text-xl mb-4 group-hover:scale-110 transition-transform">
                            <i class="ri-shield-check-line text-amber-600"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800 mb-2">정보 보호</h3>
                        <p class="text-gray-600 text-sm">
                            종이 서류의 분실 및 도난 위험이 사라집니다. 암호화된 DB 관리와 접근 제어를 통해 개인정보 유출 위험을 원천 차단합니다.
                        </p>
                    </div>
                </div>

                <!-- Economic Effect -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">거시경제적 효과</h3>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="bg-teal-50 rounded-lg p-4">
                            <i class="ri-money-won-circle-line text-2xl text-teal-600"></i>
                            <p class="font-medium text-gray-800 mt-2">소상공인 경영 안정</p>
                            <p class="text-sm text-gray-600 mt-1">평균 700~900만 원의 환급금이 영세 사업자의 임대료나 인건비 방어에 기여</p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4">
                            <i class="ri-refresh-line text-2xl text-teal-600"></i>
                            <p class="font-medium text-gray-800 mt-2">경제 선순환</p>
                            <p class="text-sm text-gray-600 mt-1">환급 자금의 소비·재투자로 내수 경기 활성화 및 납세 순응도 향상</p>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function crRenderIssues(container) {
        container.innerHTML = `
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 border-l-4 border-l-amber-500">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">전산화의 그늘: 주요 쟁점, 갈등 및 위험 요인</h2>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center mb-4">
                        <i class="ri-sword-line text-2xl text-red-500 mr-3"></i>
                        <h3 class="text-lg font-bold text-gray-800">직역 간 갈등: 한국세무사회 vs 택스테크 기업</h3>
                    </div>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="bg-red-50 rounded-lg p-4">
                            <p class="font-medium text-red-700">세무사회 입장</p>
                            <p class="text-sm text-gray-700 mt-2">세무사 자격 없이 영리 목적으로 세무 대리 업무 수행 및 알선 수수료 수취는 「세무사법」 위반</p>
                        </div>
                        <div class="bg-teal-50 rounded-lg p-4">
                            <p class="font-medium text-teal-700">플랫폼 입장</p>
                            <p class="text-sm text-gray-700 mt-2">전문 세무사 서비스를 이용하기 힘든 계층에게 환급 서비스를 제공하여 신고 문화 확산</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center mb-4">
                        <i class="ri-megaphone-line text-2xl text-amber-500 mr-3"></i>
                        <h3 class="text-lg font-bold text-gray-800">과장 광고와 소비자 기만 이슈</h3>
                    </div>
                    <div class="bg-amber-50 rounded-lg p-4">
                        <p class="text-sm text-gray-700">
                            <strong>공정위 제재:</strong> 실제 환급액이 0원임에도 "환급액 도착", "떼인 세금 받아가세요" 등의 광고 메시지 발송 →
                            <span class="text-amber-600 font-bold">과징금 7,100만 원</span> 및 시정명령
                        </p>
                        <p class="text-sm text-gray-600 mt-2">소비자의 오인을 유발하는 '다크 패턴(Dark Pattern)'으로 지적</p>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center mb-4">
                        <i class="ri-bomb-line text-2xl text-red-500 mr-3"></i>
                        <h3 class="text-lg font-bold text-gray-800">부실 신고와 가산세 폭탄의 위험</h3>
                    </div>
                    <ul class="space-y-2 text-sm text-gray-700">
                        <li class="flex items-start">
                            <span class="text-red-500 mr-2">•</span>
                            부양가족 중복 공제나 소득 금액 요건 위반으로 환급금 회수 및 가산세 추징 발생
                        </li>
                        <li class="flex items-start">
                            <span class="text-red-500 mr-2">•</span>
                            플랫폼은 "입력된 정보에 따른 결과일 뿐"이라며 납세자에게 책임 전가 경향
                        </li>
                        <li class="flex items-start">
                            <span class="text-red-500 mr-2">•</span>
                            국세청의 사후 검증으로 납세자에게 가산세 부과하는 행정 편의주의 비판
                        </li>
                    </ul>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center mb-4">
                        <i class="ri-lock-2-line text-2xl text-red-500 mr-3"></i>
                        <h3 class="text-lg font-bold text-gray-800">개인정보 보안 및 데이터 주권</h3>
                    </div>
                    <div class="bg-red-50 rounded-lg p-4">
                        <p class="text-sm text-gray-700">
                            <strong>개인정보위 제재:</strong> 법적 근거 없이 주민등록번호 수집·보유 →
                            <span class="text-red-600 font-bold">과징금 8억 5천만 원</span> 및 시정명령
                        </p>
                    </div>
                </div>

                <!-- 경정청구 장벽 요인 -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <div class="flex items-center mb-4">
                        <i class="ri-links-line text-2xl text-amber-500 mr-3"></i>
                        <h3 class="text-lg font-bold text-gray-800">기업의 경정청구 저해 요인</h3>
                    </div>
                    <p class="text-sm text-gray-600 mb-4">마치 <strong>복잡하게 얽힌 실타래</strong>에서 한 가닥을 잘못 당겼다가 전체가 엉켜버릴까 봐 두려워하는 것과 같습니다.</p>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="space-y-3">
                            <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                                <i class="ri-flashlight-line text-amber-500 mr-2 mt-0.5"></i>
                                <div>
                                    <p class="font-medium text-gray-800 text-sm">세법의 복잡성</p>
                                    <p class="text-xs text-gray-500">군 복무 기간 산입 등 복잡한 로직</p>
                                </div>
                            </div>
                            <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                                <i class="ri-pie-chart-line text-amber-500 mr-2 mt-0.5"></i>
                                <div>
                                    <p class="font-medium text-gray-800 text-sm">데이터 파편화</p>
                                    <p class="text-xs text-gray-500">인사/재무/현장 데이터 분산</p>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-3">
                            <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                                <i class="ri-error-warning-line text-amber-500 mr-2 mt-0.5"></i>
                                <div>
                                    <p class="font-medium text-gray-800 text-sm">사후관리 규정 부담</p>
                                    <p class="text-xs text-gray-500">고용 감소 시 환급액 반납 우려</p>
                                </div>
                            </div>
                            <div class="flex items-start p-3 bg-gray-50 rounded-lg">
                                <i class="ri-search-eye-line text-amber-500 mr-2 mt-0.5"></i>
                                <div>
                                    <p class="font-medium text-gray-800 text-sm">세무조사 두려움</p>
                                    <p class="text-xs text-gray-500">실사 및 추징 위험 회피 심리</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    function crRenderFuture(container) {
        container.innerHTML = `
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 border-l-4 border-l-teal-600">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">미래 전망: AI 국세행정과 민간 플랫폼의 공존</h2>
                </div>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center mb-4">
                            <i class="ri-government-line text-2xl text-teal-600 mr-3"></i>
                            <h3 class="text-lg font-bold text-gray-800">국세청의 디지털 대전환</h3>
                        </div>
                        <div class="border-l-2 border-gray-200 pl-4 space-y-4">
                            <div class="relative">
                                <div class="absolute -left-[1.35rem] w-3 h-3 bg-teal-600 rounded-full"></div>
                                <p class="font-medium text-gray-800">지능형 홈택스 구축 (2026)</p>
                                <p class="text-sm text-gray-600">AI 검색과 '세금비서' 기능으로 신고서 작성부터 제출까지 대화형 지원</p>
                            </div>
                            <div class="relative">
                                <div class="absolute -left-[1.35rem] w-3 h-3 bg-teal-600 rounded-full"></div>
                                <p class="font-medium text-gray-800">과학 세정의 고도화</p>
                                <p class="text-sm text-gray-600">AI와 빅데이터로 탈세 분석 및 부정 환급 시도 사전 차단</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                        <div class="flex items-center mb-4">
                            <i class="ri-rocket-line text-2xl text-teal-600 mr-3"></i>
                            <h3 class="text-lg font-bold text-gray-800">시장의 진화</h3>
                        </div>
                        <div class="space-y-4">
                            <div class="bg-teal-50 rounded-lg p-4">
                                <p class="font-medium text-gray-800">하이브리드 모델</p>
                                <p class="text-sm text-gray-600 mt-1">AI가 1차 진단, 복잡한 이슈는 제휴 세무사가 2차 검토</p>
                            </div>
                            <div class="bg-teal-50 rounded-lg p-4">
                                <p class="font-medium text-gray-800">사업 다각화</p>
                                <p class="text-sm text-gray-600 mt-1">세무를 넘어 보험, 통신, 상조 등 생활 밀착형 금융 서비스로 확장</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">정책 제언</h3>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-gray-800 text-white rounded-lg p-4">
                            <i class="ri-scales-3-line text-2xl"></i>
                            <p class="font-medium mt-2">규제와 혁신의 균형</p>
                            <p class="text-sm text-gray-300 mt-1">명확한 가이드라인 + 규제 샌드박스 활용</p>
                        </div>
                        <div class="bg-gray-800 text-white rounded-lg p-4">
                            <i class="ri-folder-open-line text-2xl"></i>
                            <p class="font-medium mt-2">공공 마이데이터 개방</p>
                            <p class="text-sm text-gray-300 mt-1">API 형태의 공공 데이터 개방 확대</p>
                        </div>
                        <div class="bg-gray-800 text-white rounded-lg p-4">
                            <i class="ri-graduation-cap-line text-2xl"></i>
                            <p class="font-medium mt-2">전문가 역할 재정립</p>
                            <p class="text-sm text-gray-300 mt-1">고부가가치 컨설팅으로 전문성 고도화</p>
                        </div>
                    </div>
                </div>

                <div class="bg-teal-600 text-white rounded-lg shadow-sm p-8">
                    <h3 class="text-xl font-bold mb-3">결론</h3>
                    <p class="leading-relaxed">
                        경정청구 전산화는 되돌릴 수 없는 시대적 흐름입니다. 중요한 것은 기술 그 자체가 아니라,
                        기술이 지향하는 방향이 <strong>'납세자의 권익 보호'</strong>와 <strong>'투명하고 공정한 조세 행정'</strong>에
                        부합하도록 제도적, 사회적 합의를 만들어가는 것입니다.
                    </p>
                    <button onclick="crSwitchTab('overview')" class="mt-4 bg-white text-teal-700 px-6 py-2 rounded-lg font-medium hover:bg-teal-50 transition-colors">
                        처음으로 돌아가기
                    </button>
                </div>
            </div>
        `;
    }

    function crRenderQuiz(container) {
        const quizItems = [
            { q: "세법에서 '청년'을 정의하는 기본 연령 기준은 무엇이며, 군 복무는 이 기준에 어떤 영향을 미칩니까?", a: "세법상 '청년'의 기본 연령 기준은 <strong>만 34세 이하</strong>입니다. 군 복무를 이행한 경우, 실제 나이에서 최대 6년의 군 복무 기간을 차감하여 연령을 계산하므로, 청년으로 인정받을 수 있는 연령 기준이 상향 조정되는 효과가 있습니다." },
            { q: "군 복무 기간을 반영하여 세법상 청년 여부를 판정하는 구체적인 공식을 설명하시오.", a: "청년 여부 판정 공식은 <code class='bg-gray-200 px-1 rounded'>(현재 연령 - 군 복무 기간) &le; 34</code>입니다. 예를 들어 현재 36세인 직원이 군 복무를 2년 했다면, 세법상 연령은 34세로 계산되어 청년으로 분류될 수 있습니다." },
            { q: "세법상 청년으로 판정되는 것이 기업에 중요한 이유는 무엇이며, 어떤 세제 혜택과 관련이 있습니까?", a: "직원이 청년으로 판정되면 <strong>'고용증대 세액공제'</strong> 등에서 일반 직원보다 더 높은 공제액을 적용받을 수 있기 때문입니다." },
            { q: "기업이 경정청구 행사를 주저하게 만드는 세 가지 핵심적인 원인은 무엇입니까?", a: "기업이 경정청구를 주저하는 핵심 원인은 <strong>세법의 복잡성</strong>, <strong>인사 및 세무 데이터의 단절</strong>, 그리고 <strong>환급 후 발생할 수 있는 추징 및 세무 실사에 대한 두려움</strong>입니다." },
            { q: "경정청구의 실무적 장벽 중 하나인 '사후관리 규정'이란 무엇이며, 기업에 어떤 부담을 줍니까?", a: "'사후관리 규정'은 경정청구로 세금을 환급받은 후, 일정 기간 내 고용 인원이 감소하면 환급액을 다시 납부해야 하는 규정입니다." },
            { q: "건설 및 제조업 분야에서 특히 경정청구를 위한 데이터 증빙이 어려운 이유는 무엇입니까?", a: "건설·제조업은 <strong>현장 출퇴근 기록과 같은 원시 데이터(Raw Data)와 실제 세무 신고 데이터가 일치하지 않는 경우가 많기 때문</strong>입니다." },
            { q: "세무 대리인들이 사업장 위치에 따른 세제 혜택 신고 시 보수적인 접근을 하는 경향이 있는 이유는 무엇입니까?", a: "사업장 위치가 '수도권 과밀억제권역'인지 '성장관리권역'인지의 <strong>경계가 지번 하나 차이로 바뀔 만큼 모호하기 때문</strong>입니다." },
            { q: "사업장 소재지가 '수도권 과밀억제권역'에 해당하는지 여부를 판정하는 것이 왜 중요한가요?", a: "사업장 위치가 어느 권역에 속하는지에 따라 <strong>기업이 받을 수 있는 각종 공제 및 면제 혜택의 규모가 직접적으로 결정</strong>되기 때문입니다." },
            { q: "자료에 언급된 'SAM'과 같은 자동화 시스템은 기업의 세무 실무에서 어떤 문제를 해결해 줄 수 있습니까?", a: "SAM과 같은 시스템은 <strong>인사 데이터와 병역 정보를 자동으로 연동</strong>하여, 실무자가 일일이 병적 증명서를 확인하지 않아도 청년 여부를 정확히 판정해 줍니다." },
            { q: "군 복무 기간을 연령 계산에 반영하는 제도를 '마라톤 경기의 보정 시간'에 비유한 이유를 설명하시오.", a: "군 복무로 인해 사회 진출이 늦어진 기간을 국가가 공식적으로 인정해 주는 것을 비유한 것입니다. <strong>군 복무 기간을 나이에서 차감하여 청년 세제 혜택의 기회를 공평하게 보장</strong>해 준다는 의미입니다." }
        ];

        container.innerHTML = `
            <div class="space-y-6">
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 border-l-4 border-l-teal-600">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">세법상 청년 기준 및 경정청구 학습 가이드</h2>
                </div>

                <!-- 주요 용어 -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">주요 용어 해설</h3>
                    <div class="grid gap-4">
                        <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-teal-600">
                            <p class="font-medium text-teal-700">경정청구(更正請求)</p>
                            <p class="text-sm text-gray-600 mt-1">기업이 세금을 더 많이 냈거나 잘못 냈을 경우, 이를 바로잡아 과세관청에 환급을 요청하는 정당한 권리</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-amber-500">
                            <p class="font-medium text-amber-700">고용증대 세액공제</p>
                            <p class="text-sm text-gray-600 mt-1">기업이 직원을 고용했을 때 세금에서 일정 금액을 공제해주는 제도. 청년 분류 시 더 높은 공제액 적용</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-gray-600">
                            <p class="font-medium text-gray-800">청년 (세법상)</p>
                            <p class="text-sm text-gray-600 mt-1">만 34세 이하. 군 복무 시 <code class="bg-gray-200 px-1 rounded">(현재 연령 - 군 복무 기간) &le; 34</code> 공식 적용 (최대 6년 차감)</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-gray-400">
                            <p class="font-medium text-gray-800">사후관리 규정</p>
                            <p class="text-sm text-gray-600 mt-1">경정청구로 환급 후, 일정 기간 내 고용 인원 감소 시 환급액을 다시 납부해야 하는 규정</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4 border-l-4 border-gray-400">
                            <p class="font-medium text-gray-800">수도권 과밀억제권역</p>
                            <p class="text-sm text-gray-600 mt-1">수도권 내 인구와 산업의 집중을 억제하기 위해 지정된 지역. 소재지에 따라 세제 혜택 규모가 달라짐</p>
                        </div>
                    </div>
                </div>

                <!-- 핵심 비유 -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">핵심 비유로 이해하기</h3>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-teal-50 rounded-lg p-4">
                            <i class="ri-run-line text-3xl text-teal-600"></i>
                            <p class="font-medium text-gray-800 mt-2">마라톤의 보정 시간</p>
                            <p class="text-sm text-gray-600 mt-1">군 복무로 늦게 출발한 선수에게 지체된 시간만큼 기록에서 빼주는 것처럼, 군 복무 기간을 나이에서 차감</p>
                        </div>
                        <div class="bg-amber-50 rounded-lg p-4">
                            <i class="ri-links-line text-3xl text-amber-600"></i>
                            <p class="font-medium text-gray-800 mt-2">얽힌 실타래</p>
                            <p class="text-sm text-gray-600 mt-1">복잡하게 얽힌 데이터에서 한 가닥을 잘못 당겼다가 전체가 엉켜버릴까 두려워하는 기업의 심리</p>
                        </div>
                        <div class="bg-gray-100 rounded-lg p-4">
                            <i class="ri-subway-line text-3xl text-gray-600"></i>
                            <p class="font-medium text-gray-800 mt-2">지하철 환승 할인</p>
                            <p class="text-sm text-gray-600 mt-1">내가 서 있는 지점이 할인 구역인지 아닌지에 따라 최종 지불 금액이 달라지는 것과 같은 원리</p>
                        </div>
                    </div>
                </div>

                <!-- 단답형 문제 -->
                <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">단답형 문제 (10문항)</h3>
                    <div class="space-y-4">
                        ${quizItems.map((item, idx) => `
                            <details class="bg-gray-50 rounded-lg border border-gray-200">
                                <summary class="p-4 cursor-pointer font-medium text-gray-800 hover:bg-gray-100 rounded-lg">
                                    ${idx + 1}. ${item.q}
                                </summary>
                                <div class="p-4 pt-0 text-sm text-gray-700 border-t border-gray-200">
                                    ${item.a}
                                </div>
                            </details>
                        `).join('')}
                    </div>
                </div>
            </div>
        `;
    }

    // --- Chart Initialization ---
    function crInitTimeChart() {
        const ctx = document.getElementById('crTimeChart');
        if (!ctx) return;
        new Chart(ctx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: crDataStore.charts.timeComparison.labels,
                datasets: [
                    {
                        label: '기존 (수기)',
                        data: crDataStore.charts.timeComparison.manual,
                        backgroundColor: '#9ca3af',
                        borderRadius: 4
                    },
                    {
                        label: '개선 (전산)',
                        data: crDataStore.charts.timeComparison.digital,
                        backgroundColor: '#0d9488',
                        borderRadius: 4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.raw + ' 시간';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: { display: true, text: '소요 시간 (시간)' }
                    }
                }
            }
        });
    }

    function crInitCostChart() {
        const ctx = document.getElementById('crCostChart');
        if (!ctx) return;
        new Chart(ctx.getContext('2d'), {
            type: 'line',
            data: {
                labels: crDataStore.charts.costSavings.labels,
                datasets: [
                    {
                        label: '기존 방식 비용 추이',
                        data: crDataStore.charts.costSavings.manualData,
                        borderColor: '#9ca3af',
                        backgroundColor: '#9ca3af',
                        borderDash: [5, 5],
                        tension: 0.4
                    },
                    {
                        label: '전산화 도입 시 비용 추이',
                        data: crDataStore.charts.costSavings.digitalData,
                        borderColor: '#0d9488',
                        backgroundColor: '#0d9488',
                        tension: 0.4,
                        fill: false
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' },
                    tooltip: { mode: 'index', intersect: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: { display: true, text: '비용 (억원)' }
                    }
                }
            }
        });
    }

    function crInitErrorChart() {
        const ctx = document.getElementById('crErrorChart');
        if (!ctx) return;
        new Chart(ctx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: crDataStore.charts.errorTypes.labels,
                datasets: [{
                    data: crDataStore.charts.errorTypes.data,
                    backgroundColor: ['#EF4444', '#F59E0B', '#0d9488', '#6366F1'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'right' },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw + '%';
                            }
                        }
                    }
                },
                cutout: '60%'
            }
        });
    }

    function crInitAdoptionChart() {
        const ctx = document.getElementById('crAdoptionChart');
        if (!ctx) return;
        new Chart(ctx.getContext('2d'), {
            type: 'line',
            data: {
                labels: crDataStore.charts.adoptionTrend.labels,
                datasets: [{
                    label: '플랫폼 이용자 수',
                    data: crDataStore.charts.adoptionTrend.users,
                    borderColor: '#0d9488',
                    backgroundColor: 'rgba(13, 148, 136, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'bottom' },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.raw + '만 명';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: { display: true, text: '이용자 수 (만 명)' }
                    }
                }
            }
        });
    }

    // Initialize App
    document.addEventListener('DOMContentLoaded', crInit);
</script>
@endverbatim
@endpush