1362 lines
108 KiB
PHP
1362 lines
108 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '경정청구')
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* 이미지 hover 확대 효과 */
|
|
.academy-img-hover {
|
|
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
|
}
|
|
.academy-img-hover:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
transform: scale(1.03);
|
|
}
|
|
.academy-img-wrap {
|
|
overflow: hidden;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
/* === 키프레임 애니메이션 === */
|
|
@keyframes fadeUp { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
|
|
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
|
|
@keyframes slideLeft { from { opacity:0; transform:translateX(-40px) } to { opacity:1; transform:translateX(0) } }
|
|
@keyframes slideRight { from { opacity:0; transform:translateX(40px) } to { opacity:1; transform:translateX(0) } }
|
|
@keyframes popIn { from { opacity:0; transform:scale(0.8) } to { opacity:1; transform:scale(1) } }
|
|
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
|
|
@keyframes drawLine { from { stroke-dashoffset:200 } to { stroke-dashoffset:0 } }
|
|
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.5 } }
|
|
@keyframes spin { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
|
|
|
|
/* === Animate-on-Scroll === */
|
|
.aos { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
|
|
.aos.is-visible { opacity: 1; transform: translateY(0); }
|
|
.aos-delay-1 { transition-delay: 0.1s; }
|
|
.aos-delay-2 { transition-delay: 0.2s; }
|
|
.aos-delay-3 { transition-delay: 0.3s; }
|
|
.aos-delay-4 { transition-delay: 0.4s; }
|
|
.aos-pop { opacity: 0; transform: scale(0.8); transition: opacity 0.5s ease, transform 0.5s ease; }
|
|
.aos-pop.is-visible { opacity: 1; transform: scale(1); }
|
|
.aos-slide-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
|
|
.aos-slide-left.is-visible { opacity: 1; transform: translateX(0); }
|
|
.aos-slide-right { opacity: 0; transform: translateX(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
|
|
.aos-slide-right.is-visible { opacity: 1; transform: translateX(0); }
|
|
|
|
/* === 히어로 장식 요소 === */
|
|
.hero-float { animation: float 6s ease-in-out infinite; }
|
|
.hero-float-delay { animation: float 6s ease-in-out infinite; animation-delay: -2s; }
|
|
.hero-float-delay2 { animation: float 6s ease-in-out infinite; animation-delay: -4s; }
|
|
.hero-pulse { animation: pulse 2s ease-in-out infinite; }
|
|
.hero-spin-slow { animation: spin 12s linear infinite; }
|
|
|
|
/* === TOC 활성 하이라이트 === */
|
|
.toc-link { transition: all 0.2s ease; border-radius: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; }
|
|
.toc-link.is-active { background: #ccfbf1; font-weight: 700; color: #0f766e; }
|
|
|
|
/* 차트 컨테이너 */
|
|
.chart-container { position: relative; width: 100%; height: 280px; }
|
|
|
|
/* 프로세스 스텝 커넥터 */
|
|
.step-card { position: relative; }
|
|
.step-card:not(:last-child)::after { content: ''; position: absolute; top: 2rem; right: -1rem; width: 2rem; height: 2px; background: #e2e8f0; }
|
|
|
|
/* 퀴즈 아코디언 */
|
|
.quiz-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
|
|
.quiz-answer.is-open { max-height: 500px; }
|
|
|
|
/* 프로세스 토글 */
|
|
.process-toggle-btn.active { background: #0d9488; color: white; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3); }
|
|
|
|
/* 프로세스 패널 트랜지션 */
|
|
.process-panel { opacity: 1; max-height: 2000px; overflow: hidden; transition: opacity 0.4s ease, max-height 0.5s ease; }
|
|
.process-panel.is-hidden { opacity: 0; max-height: 0; pointer-events: none; }
|
|
|
|
/* SVG 인포그래픽 드로우라인 */
|
|
.svg-draw-line { stroke-dasharray: 200; stroke-dashoffset: 200; }
|
|
.is-visible .svg-draw-line { animation: drawLine 1.2s ease forwards; }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="max-w-6xl mx-auto">
|
|
|
|
<!-- 히어로 배너 -->
|
|
<div class="rounded-2xl overflow-hidden mb-8 shadow-lg" style="background: linear-gradient(135deg, #0d5c52 0%, #0f172a 100%);">
|
|
<div class="flex items-center" style="flex-wrap: wrap;">
|
|
<div style="flex: 1 1 300px; padding: 2rem 2.5rem;">
|
|
<div class="flex items-center gap-2 text-sm mb-2" style="color: #5eead4;">
|
|
<span>아카데미</span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
|
|
<span style="color: #ffffff;">경정청구</span>
|
|
</div>
|
|
<h1 class="text-3xl font-bold mb-2" style="color: #ffffff;">경정청구</h1>
|
|
<p class="text-sm" style="color: #cbd5e1;">경정청구 제도의 이해와 SAM 자동화 솔루션을 통한 기업 세무 혁신 가이드</p>
|
|
<div class="flex items-center gap-3 mt-4">
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium" style="background: rgba(94, 234, 212, 0.15); color: #5eead4;">세무/회계</span>
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium" style="background: rgba(94, 234, 212, 0.15); color: #5eead4;">자동화</span>
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium" style="background: rgba(94, 234, 212, 0.15); color: #5eead4;">제안</span>
|
|
</div>
|
|
</div>
|
|
<div class="shrink-0" style="width: 280px; padding: 1.5rem;">
|
|
<div class="overflow-hidden rounded-xl flex items-center justify-center" style="background: rgba(13, 148, 136, 0.10); height: 180px; position: relative;">
|
|
<!-- 배경 장식 원 -->
|
|
<div class="hero-float" style="position:absolute; top:12px; left:18px; width:24px; height:24px; border-radius:50%; background:rgba(94,234,212,0.12);"></div>
|
|
<div class="hero-float-delay" style="position:absolute; bottom:20px; right:22px; width:18px; height:18px; border-radius:50%; background:rgba(94,234,212,0.15);"></div>
|
|
<div class="hero-float-delay2" style="position:absolute; top:40px; right:50px; width:12px; height:12px; border-radius:4px; background:rgba(94,234,212,0.10); transform:rotate(45deg);"></div>
|
|
<!-- 메인 SVG 일러스트: 세금문서 → SAM → 환급 -->
|
|
<svg viewBox="0 0 240 160" style="width:220px; height:148px;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 좌측: 세금 문서 -->
|
|
<g class="hero-float-delay">
|
|
<rect x="16" y="40" width="52" height="68" rx="6" fill="rgba(94,234,212,0.15)" stroke="#5eead4" stroke-width="1.5"/>
|
|
<line x1="26" y1="56" x2="58" y2="56" stroke="#5eead4" stroke-width="1" opacity="0.6"/>
|
|
<line x1="26" y1="64" x2="52" y2="64" stroke="#5eead4" stroke-width="1" opacity="0.4"/>
|
|
<line x1="26" y1="72" x2="56" y2="72" stroke="#5eead4" stroke-width="1" opacity="0.4"/>
|
|
<line x1="26" y1="80" x2="48" y2="80" stroke="#5eead4" stroke-width="1" opacity="0.3"/>
|
|
<circle cx="42" cy="96" r="6" fill="rgba(239,68,68,0.25)" stroke="#f87171" stroke-width="1"/>
|
|
<text x="42" y="99" text-anchor="middle" fill="#f87171" font-size="7" font-weight="bold">!</text>
|
|
</g>
|
|
<!-- 점선 화살표 1 -->
|
|
<line x1="72" y1="74" x2="90" y2="74" stroke="#5eead4" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.6"/>
|
|
<polygon points="90,71 96,74 90,77" fill="#5eead4" opacity="0.6"/>
|
|
<!-- 중앙: SAM 프로세서 -->
|
|
<g>
|
|
<circle cx="120" cy="74" r="30" fill="rgba(13,148,136,0.15)" stroke="#0d9488" stroke-width="1.5"/>
|
|
<circle cx="120" cy="74" r="20" fill="rgba(13,148,136,0.08)" stroke="#0d9488" stroke-width="0.8" stroke-dasharray="4 2" class="hero-spin-slow" style="transform-origin:120px 74px;"/>
|
|
<text x="120" y="71" text-anchor="middle" fill="#5eead4" font-size="11" font-weight="bold">SAM</text>
|
|
<text x="120" y="83" text-anchor="middle" fill="#99f6e4" font-size="6">AUTO</text>
|
|
</g>
|
|
<!-- 점선 화살표 2 -->
|
|
<line x1="154" y1="74" x2="172" y2="74" stroke="#5eead4" stroke-width="1.2" stroke-dasharray="3 2" opacity="0.6"/>
|
|
<polygon points="172,71 178,74 172,77" fill="#5eead4" opacity="0.6"/>
|
|
<!-- 우측: 환급금 -->
|
|
<g class="hero-float">
|
|
<rect x="180" y="46" width="48" height="56" rx="8" fill="rgba(34,197,94,0.12)" stroke="#4ade80" stroke-width="1.5"/>
|
|
<text x="204" y="72" text-anchor="middle" fill="#4ade80" font-size="18" font-weight="bold">₩</text>
|
|
<text x="204" y="90" text-anchor="middle" fill="#86efac" font-size="7">환급</text>
|
|
</g>
|
|
<!-- AI 자동화 뱃지 -->
|
|
<g class="hero-pulse">
|
|
<rect x="88" y="18" width="64" height="18" rx="9" fill="rgba(94,234,212,0.2)" stroke="#5eead4" stroke-width="0.8"/>
|
|
<text x="120" y="30" text-anchor="middle" fill="#5eead4" font-size="8" font-weight="600">AI 자동화</text>
|
|
</g>
|
|
<!-- 하단 라벨 -->
|
|
<text x="42" y="128" text-anchor="middle" fill="rgba(203,213,225,0.6)" font-size="7">과오납 세금</text>
|
|
<text x="120" y="128" text-anchor="middle" fill="rgba(203,213,225,0.6)" font-size="7">자동 분석</text>
|
|
<text x="204" y="128" text-anchor="middle" fill="rgba(203,213,225,0.6)" font-size="7">환급금 수령</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-8">
|
|
<!-- 좌측 고정 목차 (TOC) -->
|
|
<nav class="hidden lg:block shrink-0" style="width: 220px;">
|
|
<div class="sticky top-24">
|
|
<div class="bg-teal-50 border border-teal-200 rounded-xl p-5">
|
|
<h2 class="font-semibold text-teal-800 mb-3 flex items-center gap-2 text-sm">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
|
|
목차
|
|
</h2>
|
|
<div class="space-y-0.5 text-xs" id="toc-links">
|
|
<a href="#overview" class="block text-teal-700 hover:text-teal-900 py-1 font-medium toc-link" data-section="overview">1. 개요</a>
|
|
<a href="#overview-definition" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">경정청구란?</a>
|
|
<a href="#overview-background" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">배경과 필요성</a>
|
|
<a href="#overview-kpi" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">핵심 성과 지표</a>
|
|
|
|
<a href="#limits" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="limits">2. 제도의 한계와 혁신</a>
|
|
<a href="#limits-traditional" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">기존 방식의 한계</a>
|
|
<a href="#limits-tech" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">핵심 기술</a>
|
|
|
|
<a href="#process" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="process">3. 프로세스 비교</a>
|
|
|
|
<a href="#analytics" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="analytics">4. 데이터 분석</a>
|
|
|
|
<a href="#benefits" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="benefits">5. 효익 분석</a>
|
|
<a href="#benefits-access" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">접근성 혁명</a>
|
|
<a href="#benefits-accuracy" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">정확성 향상</a>
|
|
<a href="#benefits-cost" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">비용 절감</a>
|
|
|
|
<a href="#issues" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="issues">6. 주요 쟁점</a>
|
|
|
|
<a href="#sam-role" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="sam-role">7. SAM의 역할</a>
|
|
<a href="#sam-youth" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">청년 자동 판정</a>
|
|
<a href="#sam-location" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">사업장 권역 판정</a>
|
|
<a href="#sam-data" class="block text-teal-600 hover:text-teal-800 py-0.5 pl-3">데이터 통합</a>
|
|
|
|
<a href="#quiz" class="block text-teal-700 hover:text-teal-900 py-1 font-medium mt-2 toc-link" data-section="quiz">8. 학습 가이드</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 우측 콘텐츠 -->
|
|
<div class="flex-1 min-w-0 space-y-10">
|
|
|
|
<!-- 모바일 목차 -->
|
|
<div class="lg:hidden bg-teal-50 border border-teal-200 rounded-xl p-4 mb-6">
|
|
<details>
|
|
<summary class="font-semibold text-teal-800 text-sm cursor-pointer flex items-center gap-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
|
|
목차 보기
|
|
</summary>
|
|
<nav class="mt-3 space-y-1 text-sm">
|
|
<a href="#overview" class="block text-teal-700 hover:text-teal-900 py-1">1. 개요</a>
|
|
<a href="#limits" class="block text-teal-700 hover:text-teal-900 py-1">2. 제도의 한계와 혁신</a>
|
|
<a href="#process" class="block text-teal-700 hover:text-teal-900 py-1">3. 프로세스 비교</a>
|
|
<a href="#analytics" class="block text-teal-700 hover:text-teal-900 py-1">4. 데이터 분석</a>
|
|
<a href="#benefits" class="block text-teal-700 hover:text-teal-900 py-1">5. 효익 분석</a>
|
|
<a href="#issues" class="block text-teal-700 hover:text-teal-900 py-1">6. 주요 쟁점</a>
|
|
<a href="#sam-role" class="block text-teal-700 hover:text-teal-900 py-1">7. SAM의 역할</a>
|
|
<a href="#quiz" class="block text-teal-700 hover:text-teal-900 py-1">8. 학습 가이드</a>
|
|
</nav>
|
|
</details>
|
|
</div>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 1. 개요 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="overview" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">1</span>
|
|
개요
|
|
</h2>
|
|
|
|
<!-- 1-1. 경정청구란? -->
|
|
<div id="overview-definition" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
경정청구란?
|
|
</h3>
|
|
|
|
<!-- 인포그래픽: 경정청구 플로우차트 -->
|
|
<div class="aos mb-5 overflow-x-auto">
|
|
<svg viewBox="0 0 620 100" style="width:100%; max-width:620px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 스텝 1 -->
|
|
<rect x="0" y="20" width="130" height="60" rx="10" fill="#fef2f2" stroke="#fca5a5" stroke-width="1.2"/>
|
|
<text x="65" y="46" text-anchor="middle" fill="#dc2626" font-size="10" font-weight="600">세금 과오납 발생</text>
|
|
<text x="65" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">착오 / 누락 / 오류</text>
|
|
<!-- 화살표 1→2 -->
|
|
<line x1="134" y1="50" x2="158" y2="50" stroke="#94a3b8" stroke-width="1.2" class="svg-draw-line"/>
|
|
<polygon points="158,47 164,50 158,53" fill="#94a3b8"/>
|
|
<!-- 스텝 2 -->
|
|
<rect x="166" y="20" width="130" height="60" rx="10" fill="#eff6ff" stroke="#93c5fd" stroke-width="1.2"/>
|
|
<text x="231" y="46" text-anchor="middle" fill="#2563eb" font-size="10" font-weight="600">경정청구 신청</text>
|
|
<text x="231" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">5년 이내 청구 가능</text>
|
|
<!-- 화살표 2→3 -->
|
|
<line x1="300" y1="50" x2="324" y2="50" stroke="#94a3b8" stroke-width="1.2" class="svg-draw-line"/>
|
|
<polygon points="324,47 330,50 324,53" fill="#94a3b8"/>
|
|
<!-- 스텝 3 -->
|
|
<rect x="332" y="20" width="130" height="60" rx="10" fill="#fefce8" stroke="#fde047" stroke-width="1.2"/>
|
|
<text x="397" y="46" text-anchor="middle" fill="#ca8a04" font-size="10" font-weight="600">국세청 심사</text>
|
|
<text x="397" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">서류 검토 / 판정</text>
|
|
<!-- 화살표 3→4 -->
|
|
<line x1="466" y1="50" x2="490" y2="50" stroke="#94a3b8" stroke-width="1.2" class="svg-draw-line"/>
|
|
<polygon points="490,47 496,50 490,53" fill="#94a3b8"/>
|
|
<!-- 스텝 4 -->
|
|
<rect x="498" y="20" width="120" height="60" rx="10" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1.2"/>
|
|
<text x="558" y="46" text-anchor="middle" fill="#059669" font-size="10" font-weight="600">환급금 지급</text>
|
|
<text x="558" y="62" text-anchor="middle" fill="#9ca3af" font-size="8">계좌 입금 완료</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">
|
|
<strong>경정청구(更正請求)</strong>란 「국세기본법」 제45조의2에 의거, 납세자가 법정신고기한 내에 세금을 신고·납부했으나,
|
|
착오나 누락 등으로 인해 <strong>정당한 세액보다 과다하게 납부한 경우</strong> 과세관청에 이를 바로잡아 줄 것을 청구하는 제도이다.
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
|
<div class="bg-gray-50 rounded-lg p-4 border text-center">
|
|
<div class="text-2xl mb-2">
|
|
<svg class="w-8 h-8 mx-auto text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-800">과다 납부 환급</p>
|
|
<p class="text-xs text-gray-500 mt-1">더 낸 세금을 돌려받는 정당한 권리</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border text-center">
|
|
<div class="text-2xl mb-2">
|
|
<svg class="w-8 h-8 mx-auto text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-800">5년 이내 청구</p>
|
|
<p class="text-xs text-gray-500 mt-1">법정신고기한 경과 후 5년 이내</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border text-center">
|
|
<div class="text-2xl mb-2">
|
|
<svg class="w-8 h-8 mx-auto text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-800">기업 현금 흐름 개선</p>
|
|
<p class="text-xs text-gray-500 mt-1">환급금은 가처분 소득 증가에 직결</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1-2. 배경과 필요성 -->
|
|
<div id="overview-background" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
배경과 필요성
|
|
</h3>
|
|
<div class="space-y-3 text-sm text-gray-700 leading-relaxed">
|
|
<p>4차 산업혁명의 물결은 금융, 의료, 법률 등 전문직 서비스 영역의 진입장벽을 허물고 있다. 특히 보수적이고 폐쇄적인 영역으로 간주되던 <strong>세무·회계 시장</strong>은 AI, 빅데이터, 클라우드 컴퓨팅 기술의 결합을 통해 급격한 <strong>디지털 전환(DX)</strong>을 겪고 있다.</p>
|
|
<p>디지털 경제의 확산으로 소득 발생 원천이 다변화되고 있다. 플랫폼 노동자, 프리랜서, N잡러 등 다양한 고용 형태가 등장함에 따라 개인이 직접 세무 신고를 처리해야 하는 빈도가 증가했다.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<svg class="w-6 h-6 text-teal-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
|
|
<p class="text-sm font-medium text-gray-800">다양한 고용 형태</p>
|
|
<p class="text-xs text-gray-500 mt-1">플랫폼 노동자, 프리랜서, N잡러 증가</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<svg class="w-6 h-6 text-teal-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
|
|
<p class="text-sm font-medium text-gray-800">세법 복잡성 증가</p>
|
|
<p class="text-xs text-gray-500 mt-1">매년 개정되는 조세특례제한법</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
<svg class="w-6 h-6 text-teal-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
|
<p class="text-sm font-medium text-gray-800">AI 국세행정 추진</p>
|
|
<p class="text-xs text-gray-500 mt-1">2026년 자동화 수준 획기적 향상 목표</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1-3. 핵심 성과 지표 -->
|
|
<div id="overview-kpi" class="scroll-mt-20 mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
핵심 성과 지표 (KPI)
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="kpi-cards">
|
|
<div class="aos-pop aos-delay-1 bg-teal-50 p-5 rounded-lg border border-teal-100 text-center">
|
|
<p class="text-3xl font-extrabold text-teal-600 kpi-number" data-target="90" data-suffix="%">90%</p>
|
|
<p class="text-sm font-medium text-gray-700 mt-1">처리 기간 단축</p>
|
|
<p class="text-xs text-gray-500">14일 → 1.4일</p>
|
|
</div>
|
|
<div class="aos-pop aos-delay-2 bg-green-50 p-5 rounded-lg border border-green-100 text-center">
|
|
<p class="text-3xl font-extrabold text-green-600 kpi-number" data-target="75" data-suffix="%">75%</p>
|
|
<p class="text-sm font-medium text-gray-700 mt-1">행정 비용 절감</p>
|
|
<p class="text-xs text-gray-500">건당 5만원 → 1.2만원</p>
|
|
</div>
|
|
<div class="aos-pop aos-delay-3 bg-amber-50 p-5 rounded-lg border border-amber-100 text-center">
|
|
<p class="text-3xl font-extrabold text-amber-600 kpi-number" data-target="95" data-suffix="%">95%</p>
|
|
<p class="text-sm font-medium text-gray-700 mt-1">오류 발생률 감소</p>
|
|
<p class="text-xs text-gray-500">입력 오류 자동 검증</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 2. 제도의 한계와 기술 혁신 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="limits" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">2</span>
|
|
제도의 한계와 기술 혁신
|
|
</h2>
|
|
|
|
<!-- Before/After 비교 인포그래픽 -->
|
|
<div class="aos mb-6 overflow-x-auto">
|
|
<svg viewBox="0 0 600 160" style="width:100%; max-width:600px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Before 영역 -->
|
|
<rect x="0" y="10" width="260" height="140" rx="12" fill="#f9fafb" stroke="#d1d5db" stroke-width="1"/>
|
|
<text x="130" y="34" text-anchor="middle" fill="#6b7280" font-size="12" font-weight="700">기존 방식</text>
|
|
<!-- 서류 뭉치 아이콘 -->
|
|
<rect x="30" y="50" width="36" height="44" rx="4" fill="#e5e7eb" stroke="#9ca3af" stroke-width="1"/>
|
|
<rect x="34" y="54" width="28" height="4" rx="1" fill="#9ca3af" opacity="0.5"/>
|
|
<rect x="34" y="62" width="22" height="4" rx="1" fill="#9ca3af" opacity="0.4"/>
|
|
<rect x="34" y="70" width="26" height="4" rx="1" fill="#9ca3af" opacity="0.3"/>
|
|
<text x="48" y="108" text-anchor="middle" fill="#9ca3af" font-size="7">수작업 서류</text>
|
|
<!-- 시계 아이콘 -->
|
|
<circle cx="130" cy="72" r="18" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
|
|
<line x1="130" y1="72" x2="130" y2="62" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
|
|
<line x1="130" y1="72" x2="138" y2="76" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round"/>
|
|
<text x="130" y="108" text-anchor="middle" fill="#9ca3af" font-size="7">14일 소요</text>
|
|
<!-- 에러 아이콘 -->
|
|
<circle cx="212" cy="72" r="18" fill="#fef2f2" stroke="#fca5a5" stroke-width="1"/>
|
|
<text x="212" y="77" text-anchor="middle" fill="#ef4444" font-size="16" font-weight="bold">!</text>
|
|
<text x="212" y="108" text-anchor="middle" fill="#9ca3af" font-size="7">오류 위험</text>
|
|
|
|
<!-- 중앙 번개 divider -->
|
|
<line x1="300" y1="20" x2="300" y2="140" stroke="#e2e8f0" stroke-width="1" stroke-dasharray="4 3"/>
|
|
<circle cx="300" cy="80" r="14" fill="#f0fdfa" stroke="#14b8a6" stroke-width="1.5"/>
|
|
<text x="300" y="85" text-anchor="middle" fill="#0d9488" font-size="14" font-weight="bold">⚡</text>
|
|
|
|
<!-- After 영역 -->
|
|
<rect x="340" y="10" width="260" height="140" rx="12" fill="#f0fdfa" stroke="#99f6e4" stroke-width="1"/>
|
|
<text x="470" y="34" text-anchor="middle" fill="#0d9488" font-size="12" font-weight="700">AI 자동화</text>
|
|
<!-- 모니터 아이콘 -->
|
|
<rect x="370" y="50" width="36" height="28" rx="4" fill="#ccfbf1" stroke="#5eead4" stroke-width="1"/>
|
|
<line x1="388" y1="78" x2="388" y2="86" stroke="#5eead4" stroke-width="1.5"/>
|
|
<line x1="378" y1="86" x2="398" y2="86" stroke="#5eead4" stroke-width="1.5" stroke-linecap="round"/>
|
|
<text x="388" y="108" text-anchor="middle" fill="#5eead4" font-size="7">자동 처리</text>
|
|
<!-- 속도 아이콘 -->
|
|
<circle cx="470" cy="72" r="18" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
|
|
<text x="470" y="77" text-anchor="middle" fill="#059669" font-size="10" font-weight="bold">1.4일</text>
|
|
<text x="470" y="108" text-anchor="middle" fill="#5eead4" font-size="7">90% 단축</text>
|
|
<!-- 체크 아이콘 -->
|
|
<circle cx="552" cy="72" r="18" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1"/>
|
|
<polyline points="544,72 550,78 560,66" stroke="#059669" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<text x="552" y="108" text-anchor="middle" fill="#5eead4" font-size="7">정확한 검증</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 2-1. 기존 방식의 한계 -->
|
|
<div id="limits-traditional" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
기존 방식의 한계점
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start p-4 bg-red-50 rounded-lg border border-red-100">
|
|
<svg class="w-6 h-6 text-red-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
|
<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 border border-amber-100">
|
|
<svg class="w-6 h-6 text-amber-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<div>
|
|
<p class="font-medium text-gray-800">절차의 복잡성 및 시간 소요</p>
|
|
<p class="text-sm text-gray-600 mt-1">방대한 증빙 서류 준비, 수동 작성, 관할 세무서 제출 후 통상 <strong>2개월</strong> 소요. 서류 미비 시 기간 연장.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start p-4 bg-orange-50 rounded-lg border border-orange-100">
|
|
<svg class="w-6 h-6 text-orange-500 mr-3 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
|
<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>
|
|
|
|
<!-- 2-2. 핵심 기술 -->
|
|
<div id="limits-tech" class="scroll-mt-20 mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
핵심 기술: 데이터 수집의 진화
|
|
</h3>
|
|
<div class="overflow-x-auto mb-4">
|
|
<table class="w-full text-sm border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-800 text-white">
|
|
<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 bg-white">
|
|
<tr class="hover:bg-gray-50"><td class="px-4 py-3 font-medium text-gray-700">작동 원리</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-700">속도</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-700">보안성</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-700">안정성</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-700">비용</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>
|
|
|
|
<h4 class="font-medium text-gray-800 mb-3 text-sm">AI 기반 세액 분석 알고리즘</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-500">
|
|
<p class="font-medium text-gray-800 text-sm">패턴 매칭 및 누락 탐지</p>
|
|
<p class="text-xs text-gray-600 mt-2">5년간 신고 내역을 스캔하여 누락된 세액공제를 즉시 식별한다.</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-500">
|
|
<p class="font-medium text-gray-800 text-sm">시뮬레이션 및 최적화</p>
|
|
<p class="text-xs text-gray-600 mt-2">가능한 모든 공제 조합을 시뮬레이션하여 최유리 결과를 제시한다.</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 border-l-4 border-teal-500">
|
|
<p class="font-medium text-gray-800 text-sm">OCR 활용</p>
|
|
<p class="text-xs text-gray-600 mt-2">종이 영수증, 비정형 문서를 디지털화하여 증빙 누락을 방지한다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 3. 프로세스 비교 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="process" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">3</span>
|
|
프로세스 비교
|
|
</h2>
|
|
|
|
<!-- 프로세스 타임라인 인포그래픽 -->
|
|
<div class="aos mb-6 overflow-x-auto">
|
|
<svg viewBox="0 0 640 90" style="width:100%; max-width:640px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 연결선 -->
|
|
<line x1="64" y1="32" x2="576" y2="32" stroke="#e2e8f0" stroke-width="2"/>
|
|
<!-- 노드 1 -->
|
|
<circle cx="64" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
|
|
<text x="64" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">1</text>
|
|
<text x="64" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">본인 인증</text>
|
|
<text x="64" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">간편 로그인</text>
|
|
<!-- 노드 2 -->
|
|
<circle cx="192" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
|
|
<text x="192" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">2</text>
|
|
<text x="192" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">데이터 수집</text>
|
|
<text x="192" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">자동 연동</text>
|
|
<!-- 노드 3 -->
|
|
<circle cx="320" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
|
|
<text x="320" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">3</text>
|
|
<text x="320" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">AI 검증</text>
|
|
<text x="320" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">오류 자동 탐지</text>
|
|
<!-- 노드 4 -->
|
|
<circle cx="448" cy="32" r="16" fill="#0d9488" stroke="#fff" stroke-width="2"/>
|
|
<text x="448" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">4</text>
|
|
<text x="448" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">즉시 접수</text>
|
|
<text x="448" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">원클릭 신청</text>
|
|
<!-- 노드 5 -->
|
|
<circle cx="576" cy="32" r="16" fill="#059669" stroke="#fff" stroke-width="2"/>
|
|
<text x="576" y="36" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">5</text>
|
|
<text x="576" y="62" text-anchor="middle" fill="#374151" font-size="8" font-weight="600">환급 완료</text>
|
|
<text x="576" y="76" text-anchor="middle" fill="#9ca3af" font-size="7">실시간 알림</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="text-center mb-6">
|
|
<p class="text-sm text-gray-600 mb-4">기존의 복잡한 수기 절차와 전산화된 간소화 절차를 비교해보세요.</p>
|
|
<div class="inline-flex bg-gray-200 rounded-lg p-1">
|
|
<button onclick="toggleProcess('manual')" id="btn-manual" class="px-5 py-2 rounded-md text-sm font-medium transition-all process-toggle-btn active">
|
|
기존 (수기 방식)
|
|
</button>
|
|
<button onclick="toggleProcess('digital')" id="btn-digital" class="px-5 py-2 rounded-md text-sm font-medium transition-all process-toggle-btn">
|
|
신규 (전산화)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 수기 방식 -->
|
|
<div id="process-manual" class="space-y-4 process-panel">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center border">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-700">1. 신청서 작성</p>
|
|
<p class="text-xs text-gray-500 mt-1">복잡한 법령 확인 후 수기 작성</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center border">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-700">2. 방문/우편 접수</p>
|
|
<p class="text-xs text-gray-500 mt-1">세무서 방문 또는 등기 우편</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center border">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-700">3. 담당자 배정</p>
|
|
<p class="text-xs text-gray-500 mt-1">문서 접수 후 담당자 지정 대기</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center border">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-700">4. 서류 검토</p>
|
|
<p class="text-xs text-gray-500 mt-1">종이 서류 육안 검토 및 대조</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center border">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-700">5. 수동 입력</p>
|
|
<p class="text-xs text-gray-500 mt-1">내부 시스템에 직접 입력 (오류 위험)</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 text-center border">
|
|
<div class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-700">6. 결과 통지</p>
|
|
<p class="text-xs text-gray-500 mt-1">우편으로 결과 발송 (2~3일)</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-red-50 p-4 rounded-lg border border-red-100">
|
|
<h4 class="font-medium text-red-800 mb-2 text-sm">주요 문제점 (Pain Points)</h4>
|
|
<ul class="text-xs text-red-700 space-y-1">
|
|
<li class="flex items-center gap-2"><span class="text-red-400">-</span> 서류 미비로 인한 반려율이 높음</li>
|
|
<li class="flex items-center gap-2"><span class="text-red-400">-</span> 담당자 배정까지 평균 3일 소요</li>
|
|
<li class="flex items-center gap-2"><span class="text-red-400">-</span> 수기 입력 과정에서 오타 발생 가능성 상존</li>
|
|
<li class="flex items-center gap-2"><span class="text-red-400">-</span> 복잡한 세법 규정 이해의 어려움</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 전산화 방식 -->
|
|
<div id="process-digital" class="space-y-4 process-panel is-hidden">
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
<div class="bg-teal-50 rounded-lg p-4 text-center border border-teal-200">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-teal-700">1. 본인 인증</p>
|
|
<p class="text-xs text-gray-500 mt-1">간편 인증으로 즉시 로그인</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 text-center border border-teal-200">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-teal-700">2. 데이터 자동 채움</p>
|
|
<p class="text-xs text-gray-500 mt-1">신고 내역 자동 연동 및 생성</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 text-center border border-teal-200">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-teal-700">3. AI 자동 검증</p>
|
|
<p class="text-xs text-gray-500 mt-1">오류 및 누락 사항 1차 검증</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 text-center border border-teal-200">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-teal-700">4. 즉시 접수</p>
|
|
<p class="text-xs text-gray-500 mt-1">클릭 한 번으로 세무서 등재</p>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 text-center border border-teal-200">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center text-xl mx-auto mb-2">
|
|
<svg class="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-teal-700">5. 실시간 조회</p>
|
|
<p class="text-xs text-gray-500 mt-1">카카오톡/문자 실시간 알림</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
|
|
<h4 class="font-medium text-green-800 mb-2 text-sm">개선 효과 (Benefits)</h4>
|
|
<ul class="text-xs text-green-700 space-y-1">
|
|
<li class="flex items-center gap-2"><span class="text-green-400">+</span> 데이터 자동 검증으로 반려율 0% 도전</li>
|
|
<li class="flex items-center gap-2"><span class="text-green-400">+</span> 시스템 즉시 배정으로 대기 시간 "0"</li>
|
|
<li class="flex items-center gap-2"><span class="text-green-400">+</span> 입력 불필요, 클릭만으로 신청 완료</li>
|
|
<li class="flex items-center gap-2"><span class="text-green-400">+</span> AI가 최적의 공제 항목 자동 추천</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 4. 데이터 분석 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="analytics" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">4</span>
|
|
데이터 분석
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3">단계별 소요 시간 비교 (단위: 시간)</h4>
|
|
<div class="chart-container">
|
|
<canvas id="timeChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3">연도별 운영 비용 절감 예측 (단위: 억원)</h4>
|
|
<div class="chart-container">
|
|
<canvas id="costChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3">기존 수기 방식의 주요 오류 유형</h4>
|
|
<div class="chart-container">
|
|
<canvas id="errorChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<h4 class="text-xs font-bold text-gray-500 uppercase tracking-wide mb-3">플랫폼 이용자 증가 추이 (단위: 만 명)</h4>
|
|
<div class="chart-container">
|
|
<canvas id="adoptionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-teal-50 p-5 rounded-lg border border-teal-100">
|
|
<h4 class="font-medium text-teal-800 mb-3 text-sm">데이터 분석 인사이트</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs text-gray-700">
|
|
<div>
|
|
<p class="font-medium text-teal-600 mb-1">시간 효율성</p>
|
|
<p>가장 큰 병목 구간인 '검토 및 처리' 단계가 전산 검증으로 90% 이상 단축된다.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-green-600 mb-1">비용 효율성</p>
|
|
<p>초기 시스템 구축 비용이 발생하지만, 2년 차부터 BEP(손익분기점)를 달성한다.</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-medium text-amber-600 mb-1">품질 향상</p>
|
|
<p>단순 계산 오류(45%)가 시스템 자동 계산으로 원천 차단된다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 5. 효익 분석 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="benefits" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">5</span>
|
|
효익 분석
|
|
</h2>
|
|
|
|
<!-- 3대 효익 아이콘 인포그래픽 -->
|
|
<div class="flex justify-center gap-6 mb-8" style="flex-wrap:wrap;">
|
|
<div class="aos-pop aos-delay-1 text-center" style="flex:0 0 140px;">
|
|
<svg viewBox="0 0 80 80" style="width:72px; height:72px; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="40" cy="40" r="36" fill="#f0fdfa" stroke="#14b8a6" stroke-width="1.5"/>
|
|
<circle cx="40" cy="34" r="14" fill="none" stroke="#0d9488" stroke-width="1.5"/>
|
|
<ellipse cx="40" cy="34" rx="22" ry="8" fill="none" stroke="#0d9488" stroke-width="0.8" stroke-dasharray="3 2" opacity="0.5"/>
|
|
<line x1="40" y1="20" x2="40" y2="48" stroke="#0d9488" stroke-width="0.8" opacity="0.4"/>
|
|
<line x1="26" y1="34" x2="54" y2="34" stroke="#0d9488" stroke-width="0.8" opacity="0.4"/>
|
|
<text x="40" y="66" text-anchor="middle" fill="#0d9488" font-size="8" font-weight="600">접근성</text>
|
|
</svg>
|
|
</div>
|
|
<div class="aos-pop aos-delay-2 text-center" style="flex:0 0 140px;">
|
|
<svg viewBox="0 0 80 80" style="width:72px; height:72px; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="40" cy="40" r="36" fill="#ecfdf5" stroke="#10b981" stroke-width="1.5"/>
|
|
<circle cx="40" cy="34" r="14" fill="none" stroke="#059669" stroke-width="1.5"/>
|
|
<polyline points="32,34 38,40 50,28" stroke="#059669" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<text x="40" y="66" text-anchor="middle" fill="#059669" font-size="8" font-weight="600">정확성</text>
|
|
</svg>
|
|
</div>
|
|
<div class="aos-pop aos-delay-3 text-center" style="flex:0 0 140px;">
|
|
<svg viewBox="0 0 80 80" style="width:72px; height:72px; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="40" cy="40" r="36" fill="#eff6ff" stroke="#3b82f6" stroke-width="1.5"/>
|
|
<polyline points="26,28 34,38 42,30 50,44 58,26" stroke="#3b82f6" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<polyline points="50,44 58,44" stroke="#3b82f6" stroke-width="1.8" fill="none" stroke-linecap="round"/>
|
|
<polyline points="48,50 34,50 34,26" stroke="#94a3b8" stroke-width="0.8" fill="none" opacity="0.5"/>
|
|
<text x="40" y="66" text-anchor="middle" fill="#2563eb" font-size="8" font-weight="600">비용 절감</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5-1. 접근성 혁명 -->
|
|
<div id="benefits-access" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
접근성 혁명: 세무 사각지대의 해소
|
|
</h3>
|
|
<div class="bg-teal-50 rounded-lg p-5 border border-teal-100 mb-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">가장 본질적인 변화는 <strong>'세무 서비스의 민주화'</strong>이다. 기존 세무 시장은 높은 수수료를 지불할 수 있는 법인과 고소득 개인사업자 중심이었다. 전산화된 플랫폼은 '모바일 앱'이라는 친숙한 채널과 '선 조회 후 수수료' 모델을 통해 소액 납세자들을 제도권 세무 서비스로 편입시켰다.</p>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-gray-50 rounded-lg p-4 border text-center">
|
|
<p class="text-2xl font-extrabold text-teal-600">2,300만 명</p>
|
|
<p class="text-xs text-gray-500 mt-1">삼쩜삼 가입자</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border text-center">
|
|
<p class="text-2xl font-extrabold text-teal-600">1조 6,700억</p>
|
|
<p class="text-xs text-gray-500 mt-1">누적 환급 신고액</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border text-center">
|
|
<p class="text-2xl font-extrabold text-teal-600">120만 명</p>
|
|
<p class="text-xs text-gray-500 mt-1">무료 환급 이용자</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5-2. 정확성 향상 -->
|
|
<div id="benefits-accuracy" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
정확성과 완전성: 휴먼 에러 극복
|
|
</h3>
|
|
<div class="bg-green-50 rounded-lg p-4 border border-green-100 mb-4">
|
|
<p class="text-sm text-green-900 leading-relaxed">
|
|
<strong>사례:</strong> 인천의 제조업체 A사는 매년 직원을 채용했음에도 기존 세무사의 누락으로 혜택을 받지 못하다가, 경정청구 플랫폼 진단을 통해 <strong>3년간 누락된 세액공제 1억 원</strong>을 일괄 환급받았다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5-3. 비용 절감 -->
|
|
<div id="benefits-cost" class="scroll-mt-20 mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
프로세스 혁신: 시간과 비용의 절감
|
|
</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-800 text-white">
|
|
<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 rounded-tr-lg">전산화 플랫폼</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200 bg-white">
|
|
<tr class="hover:bg-gray-50"><td class="px-4 py-3 font-medium text-gray-700">탐색 비용</td><td class="px-4 py-3 text-gray-600">세무사 수소문 및 상담</td><td class="px-4 py-3 text-teal-600 font-medium">앱 설치 후 5분</td></tr>
|
|
<tr class="hover:bg-gray-50"><td class="px-4 py-3 font-medium text-gray-700">진단 시간</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-700">수수료</td><td class="px-4 py-3 text-gray-600">착수금 + 성공보수 (20~30%)</td><td class="px-4 py-3 text-teal-600 font-medium">무료 진단 + 10~20%</td></tr>
|
|
<tr class="hover:bg-gray-50"><td class="px-4 py-3 font-medium text-gray-700">행정 절차</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-700">처리 기간</td><td class="px-4 py-3 text-gray-600">세무서 검토 2개월</td><td class="px-4 py-3 text-teal-600 font-medium">표준 데이터로 단축</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 6. 주요 쟁점 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="issues" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">6</span>
|
|
주요 쟁점
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="bg-white rounded-lg p-5 border border-gray-200">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-800 mb-1">직역 간 갈등: 세무사회 vs 택스테크</h4>
|
|
<p class="text-sm text-gray-600 leading-relaxed">한국세무사회는 플랫폼이 세무사 자격 없이 세무 대리 업무를 수행한다며 세무사법 위반으로 고발. 반면 플랫폼 업계는 "전문 세무사 서비스를 이용하기 힘든 계층에게 환급 서비스를 제공"하는 순기능을 강조.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-5 border border-gray-200">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-800 mb-1">과장 광고와 소비자 기만</h4>
|
|
<p class="text-sm text-gray-600 leading-relaxed">공정위는 실제 환급액이 0원임에도 "환급금이 도착했습니다" 메시지를 보낸 행위에 과징금 7,100만 원 부과. 소비자 오인을 유발하는 '다크 패턴'으로 지적.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-5 border border-gray-200">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-800 mb-1">부실 신고와 가산세 리스크</h4>
|
|
<p class="text-sm text-gray-600 leading-relaxed">부양가족 중복 공제, 소득금액 요건 위반 등으로 환급금 회수 및 가산세 추징 통보 사례 발생. 플랫폼은 "입력된 정보에 따른 결과"라며 납세자에게 책임 전가 경향.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-5 border border-gray-200">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-800 mb-1">개인정보 보안 및 데이터 주권</h4>
|
|
<p class="text-sm text-gray-600 leading-relaxed">개인정보보호위원회는 주민등록번호 무단 수집 행위에 대해 <strong>8억 5천만 원</strong>의 과징금 부과. 스크래핑 금지와 API 의무화로 보안 강화 추진 중.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 7. SAM의 역할 (제안 형태) --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="sam-role" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border-2 border-teal-200 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-2 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">7</span>
|
|
SAM의 역할: 경정청구 자동화 솔루션
|
|
</h2>
|
|
<p class="text-sm text-gray-500 mb-6">SAM(Smart Automation Management)이 기업의 경정청구를 어떻게 혁신하는가</p>
|
|
|
|
<div class="bg-gradient-to-r from-teal-50 to-green-50 rounded-lg p-5 border border-teal-100 mb-6">
|
|
<p class="text-sm text-teal-900 leading-relaxed">
|
|
SAM은 기업의 <strong>인사 데이터, 세무 데이터, 사업장 정보</strong>를 통합하여 경정청구에 필요한 모든 판정을 자동화한다.
|
|
실무자가 일일이 확인하지 않아도 <strong>누락 없는 최대 세액공제</strong>를 받을 수 있도록 지원한다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- SAM 아키텍처 다이어그램 -->
|
|
<div class="aos mb-6 overflow-x-auto">
|
|
<svg viewBox="0 0 440 220" style="width:100%; max-width:440px; height:auto; display:block; margin:0 auto;" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- 중앙 SAM 허브 -->
|
|
<circle cx="220" cy="100" r="48" fill="#f0fdfa" stroke="#0d9488" stroke-width="2"/>
|
|
<circle cx="220" cy="100" r="36" fill="#ccfbf1" stroke="#14b8a6" stroke-width="1" stroke-dasharray="4 2" class="hero-spin-slow" style="transform-origin:220px 100px;"/>
|
|
<text x="220" y="96" text-anchor="middle" fill="#0d9488" font-size="14" font-weight="bold">SAM</text>
|
|
<text x="220" y="112" text-anchor="middle" fill="#5eead4" font-size="8">통합 엔진</text>
|
|
|
|
<!-- 곡선 연결선 -->
|
|
<path d="M172 100 Q 100 60 80 50" stroke="#14b8a6" stroke-width="1.2" fill="none" stroke-dasharray="4 2" opacity="0.6"/>
|
|
<path d="M220 52 Q 220 20 220 16" stroke="#14b8a6" stroke-width="1.2" fill="none" stroke-dasharray="4 2" opacity="0.6"/>
|
|
<path d="M268 100 Q 340 60 360 50" stroke="#14b8a6" stroke-width="1.2" fill="none" stroke-dasharray="4 2" opacity="0.6"/>
|
|
|
|
<!-- 모듈 1: 청년자동판정 -->
|
|
<g class="hero-float">
|
|
<circle cx="64" cy="36" r="28" fill="#eff6ff" stroke="#93c5fd" stroke-width="1.2"/>
|
|
<text x="64" y="33" text-anchor="middle" fill="#2563eb" font-size="8" font-weight="600">청년</text>
|
|
<text x="64" y="44" text-anchor="middle" fill="#2563eb" font-size="7">자동판정</text>
|
|
</g>
|
|
<!-- 모듈 2: 권역판정 -->
|
|
<g class="hero-float-delay">
|
|
<circle cx="220" cy="16" r="0" fill="none"/>
|
|
<ellipse cx="220" cy="10" rx="40" ry="0" fill="none"/>
|
|
<rect x="184" y="0" width="72" height="32" rx="16" fill="#fefce8" stroke="#fde047" stroke-width="1.2"/>
|
|
<text x="220" y="14" text-anchor="middle" fill="#ca8a04" font-size="8" font-weight="600">권역판정</text>
|
|
<text x="220" y="25" text-anchor="middle" fill="#ca8a04" font-size="7">소재지 분석</text>
|
|
</g>
|
|
<!-- 모듈 3: 데이터통합 -->
|
|
<g class="hero-float-delay2">
|
|
<circle cx="376" cy="36" r="28" fill="#ecfdf5" stroke="#6ee7b7" stroke-width="1.2"/>
|
|
<text x="376" y="33" text-anchor="middle" fill="#059669" font-size="8" font-weight="600">데이터</text>
|
|
<text x="376" y="44" text-anchor="middle" fill="#059669" font-size="7">통합관리</text>
|
|
</g>
|
|
|
|
<!-- 하단 출력 화살표 -->
|
|
<line x1="220" y1="148" x2="220" y2="176" stroke="#0d9488" stroke-width="1.5"/>
|
|
<polygon points="214,176 220,184 226,176" fill="#0d9488"/>
|
|
<!-- 출력 결과 -->
|
|
<rect x="150" y="186" width="140" height="28" rx="8" fill="#0d9488"/>
|
|
<text x="220" y="204" text-anchor="middle" fill="#fff" font-size="9" font-weight="600">최대 세액공제 자동 산출</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- 7-1. 청년 자동 판정 -->
|
|
<div id="sam-youth" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
청년 여부 자동 판정
|
|
</h3>
|
|
<div class="bg-gray-50 rounded-lg p-5 border mb-4">
|
|
<div class="flex flex-col lg:flex-row gap-4">
|
|
<div class="flex-1">
|
|
<p class="text-sm text-gray-700 leading-relaxed mb-3">
|
|
세법상 <strong>'청년'</strong>은 기본적으로 만 34세 이하이다. 군 복무를 이행한 경우, 실제 나이에서 <strong>최대 6년의 군 복무 기간</strong>을 차감하여 연령을 계산한다.
|
|
</p>
|
|
<div class="bg-teal-50 rounded-lg p-3 border border-teal-100">
|
|
<p class="text-xs font-mono text-teal-800 text-center"><strong>판정 공식:</strong> (현재 연령 - 군 복무 기간) ≤ 34</p>
|
|
</div>
|
|
</div>
|
|
<div class="shrink-0 bg-teal-50 rounded-lg p-4 border border-teal-100" style="width: 280px;">
|
|
<p class="text-xs font-medium text-teal-700 mb-2">SAM 자동 판정 예시</p>
|
|
<div class="space-y-2 text-xs text-gray-600">
|
|
<div class="flex justify-between"><span>현재 나이:</span><span class="font-medium text-gray-800">만 36세</span></div>
|
|
<div class="flex justify-between"><span>군 복무 기간:</span><span class="font-medium text-gray-800">2년</span></div>
|
|
<div class="border-t border-teal-200 pt-2 flex justify-between"><span>세법상 연령:</span><span class="font-bold text-teal-600">34세 (청년)</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-4 border border-amber-100">
|
|
<p class="text-xs text-amber-800">
|
|
<strong>핵심:</strong> 청년으로 판정되면 '고용증대 세액공제'에서 일반 직원보다 <strong>더 높은 공제액</strong>을 적용받는다. SAM은 인사 데이터와 병역 정보를 자동 연동하여, 전 직원의 병적 증명서를 일일이 확인하지 않아도 정확한 판정을 수행한다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 7-2. 사업장 권역 판정 -->
|
|
<div id="sam-location" class="scroll-mt-20 mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
사업장 소재지 권역 자동 판정
|
|
</h3>
|
|
<div class="bg-gray-50 rounded-lg p-5 border mb-4">
|
|
<p class="text-sm text-gray-700 leading-relaxed mb-3">
|
|
사업장이 <strong>'수도권 과밀억제권역'</strong>인지 <strong>'성장관리권역'</strong>인지에 따라 기업이 받을 수 있는 세제 혜택 규모가 크게 달라진다.
|
|
지번 하나 차이로 결과가 바뀔 만큼 모호하여, 세무 대리인들도 보수적으로 신고하는 경향이 있다.
|
|
</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="bg-red-50 rounded-lg p-4 border border-red-100">
|
|
<p class="text-sm font-medium text-red-700">수도권 과밀억제권역</p>
|
|
<p class="text-xs text-gray-600 mt-1">세제 혜택 제한적</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-4 border border-green-100">
|
|
<p class="text-sm font-medium text-green-700">성장관리권역</p>
|
|
<p class="text-xs text-gray-600 mt-1">더 많은 세제 혜택 가능</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-teal-50 rounded-lg p-4 border border-teal-100">
|
|
<p class="text-xs text-teal-800"><strong>SAM의 해결:</strong> 사업장 주소를 기반으로 권역을 <strong>자동 판정</strong>하여, 지번 경계의 모호함으로 인한 보수적 신고를 방지하고 정당한 세제 혜택을 확보한다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 7-3. 데이터 통합 관리 -->
|
|
<div id="sam-data" class="scroll-mt-20 mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
인사-세무 데이터 통합 관리
|
|
</h3>
|
|
<div class="bg-gray-50 rounded-lg p-5 border mb-4">
|
|
<p class="text-sm text-gray-700 leading-relaxed mb-4">기업이 경정청구를 주저하는 핵심 원인은 <strong>인사 데이터와 세무 데이터의 단절</strong>이다. SAM은 이 파편화된 데이터를 하나로 통합한다.</p>
|
|
<div class="bg-white rounded-lg p-4 border">
|
|
<div class="flex flex-col items-center text-xs text-gray-600">
|
|
<div class="grid grid-cols-3 gap-4 w-full mb-4">
|
|
<div class="bg-blue-50 rounded-lg p-3 text-center border border-blue-100">
|
|
<p class="font-medium text-blue-700">인사 데이터</p>
|
|
<p class="text-gray-500 mt-1">입사/퇴사, 병역, 나이</p>
|
|
</div>
|
|
<div class="bg-purple-50 rounded-lg p-3 text-center border border-purple-100">
|
|
<p class="font-medium text-purple-700">세무 데이터</p>
|
|
<p class="text-gray-500 mt-1">신고내역, 공제현황</p>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-3 text-center border border-green-100">
|
|
<p class="font-medium text-green-700">사업장 정보</p>
|
|
<p class="text-gray-500 mt-1">주소, 권역, 업종</p>
|
|
</div>
|
|
</div>
|
|
<svg class="w-6 h-6 text-teal-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg>
|
|
<div class="bg-teal-100 rounded-lg p-4 text-center border-2 border-teal-300 w-full">
|
|
<p class="font-bold text-teal-800 text-sm">SAM 경정청구 자동화 엔진</p>
|
|
<p class="text-teal-600 mt-1">누락 없는 최대 세액공제 자동 산출</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-lg p-5 border">
|
|
<h4 class="font-medium text-gray-800 mb-3 text-sm">경정청구 저해 요인과 SAM의 해결</h4>
|
|
<div class="space-y-3">
|
|
<div class="flex items-start gap-3">
|
|
<span class="shrink-0 bg-red-100 text-red-600 px-2 py-0.5 rounded text-xs font-medium">저해</span>
|
|
<span class="text-sm text-gray-700">복잡한 세법 (군 복무 산입, 권역 경계 등 계산 어려움)</span>
|
|
<span class="shrink-0 bg-teal-100 text-teal-600 px-2 py-0.5 rounded text-xs font-medium">SAM</span>
|
|
<span class="text-sm text-teal-700 font-medium">자동 계산 및 판정</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="shrink-0 bg-red-100 text-red-600 px-2 py-0.5 rounded text-xs font-medium">저해</span>
|
|
<span class="text-sm text-gray-700">인사-세무 데이터 파편화</span>
|
|
<span class="shrink-0 bg-teal-100 text-teal-600 px-2 py-0.5 rounded text-xs font-medium">SAM</span>
|
|
<span class="text-sm text-teal-700 font-medium">ERP 통합 데이터 관리</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="shrink-0 bg-red-100 text-red-600 px-2 py-0.5 rounded text-xs font-medium">저해</span>
|
|
<span class="text-sm text-gray-700">사후관리 규정 부담 (고용 감소 시 추징)</span>
|
|
<span class="shrink-0 bg-teal-100 text-teal-600 px-2 py-0.5 rounded text-xs font-medium">SAM</span>
|
|
<span class="text-sm text-teal-700 font-medium">실시간 모니터링 알림</span>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<span class="shrink-0 bg-red-100 text-red-600 px-2 py-0.5 rounded text-xs font-medium">저해</span>
|
|
<span class="text-sm text-gray-700">세무조사/실사 두려움</span>
|
|
<span class="shrink-0 bg-teal-100 text-teal-600 px-2 py-0.5 rounded text-xs font-medium">SAM</span>
|
|
<span class="text-sm text-teal-700 font-medium">완벽한 증빙 자료 자동 생성</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- ============================================================ --}}
|
|
{{-- 8. 학습 가이드 --}}
|
|
{{-- ============================================================ --}}
|
|
<section id="quiz" class="scroll-mt-20 aos">
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-3">
|
|
<span class="w-8 h-8 bg-teal-500 text-white rounded-lg flex items-center justify-center text-sm font-bold">8</span>
|
|
학습 가이드
|
|
</h2>
|
|
|
|
<!-- 용어 해설 -->
|
|
<div class="mb-8">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
주요 용어 해설
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<p class="text-sm font-medium text-gray-800">경정청구(更正請求)</p>
|
|
<p class="text-xs text-gray-600 mt-1">세금을 더 냈거나 잘못 낸 경우, 과세관청에 환급을 요청하는 정당한 권리</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<p class="text-sm font-medium text-gray-800">고용증대 세액공제</p>
|
|
<p class="text-xs text-gray-600 mt-1">직원 고용 시 세금에서 일정 금액을 공제. 청년은 더 높은 공제액 적용</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<p class="text-sm font-medium text-gray-800">군 복무 기간 산입</p>
|
|
<p class="text-xs text-gray-600 mt-1">세법상 청년 판정 시, 실제 나이에서 군 복무 기간(최대 6년)을 차감</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<p class="text-sm font-medium text-gray-800">사후관리 규정</p>
|
|
<p class="text-xs text-gray-600 mt-1">환급 후 일정 기간 내 고용 감소 시 환급액을 다시 납부해야 하는 규정</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<p class="text-sm font-medium text-gray-800">수도권 과밀억제권역</p>
|
|
<p class="text-xs text-gray-600 mt-1">인구/산업 집중 억제 지역. 세제 혜택이 상대적으로 제한적</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border">
|
|
<p class="text-sm font-medium text-gray-800">성장관리권역</p>
|
|
<p class="text-xs text-gray-600 mt-1">과밀억제권역 외 지역. 더 많은 세제 혜택 가능</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 퀴즈 -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<span class="w-2 h-2 bg-teal-400 rounded-full"></span>
|
|
확인 퀴즈 (클릭하여 정답 확인)
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div class="bg-gray-50 rounded-lg border overflow-hidden">
|
|
<button onclick="toggleQuiz(this)" class="w-full text-left p-4 flex items-start gap-3 hover:bg-gray-100 transition-colors">
|
|
<span class="shrink-0 bg-teal-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">1</span>
|
|
<span class="text-sm text-gray-800">세법에서 '청년'을 정의하는 기본 연령 기준은 무엇이며, 군 복무는 이 기준에 어떤 영향을 미칩니까?</span>
|
|
</button>
|
|
<div class="quiz-answer bg-teal-50 px-4 border-t border-teal-100">
|
|
<div class="py-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">세법상 '청년'의 기본 연령 기준은 <strong>만 34세 이하</strong>이다. 군 복무를 이행한 경우, 실제 나이에서 최대 6년의 군 복무 기간을 차감하여 연령을 계산하므로, 청년으로 인정받을 수 있는 연령 기준이 상향 조정되는 효과가 있다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg border overflow-hidden">
|
|
<button onclick="toggleQuiz(this)" class="w-full text-left p-4 flex items-start gap-3 hover:bg-gray-100 transition-colors">
|
|
<span class="shrink-0 bg-teal-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">2</span>
|
|
<span class="text-sm text-gray-800">군 복무 기간을 반영하여 세법상 청년 여부를 판정하는 구체적인 공식을 설명하시오.</span>
|
|
</button>
|
|
<div class="quiz-answer bg-teal-50 px-4 border-t border-teal-100">
|
|
<div class="py-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">청년 여부 판정 공식은 <strong>'(현재 연령 - 군 복무 기간) ≤ 34'</strong>이다. 예를 들어 현재 36세인 직원이 군 복무를 2년 했다면, 세법상 연령은 34세로 계산되어 청년으로 분류될 수 있다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg border overflow-hidden">
|
|
<button onclick="toggleQuiz(this)" class="w-full text-left p-4 flex items-start gap-3 hover:bg-gray-100 transition-colors">
|
|
<span class="shrink-0 bg-teal-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">3</span>
|
|
<span class="text-sm text-gray-800">기업이 경정청구 행사를 주저하게 만드는 핵심적인 원인은 무엇입니까?</span>
|
|
</button>
|
|
<div class="quiz-answer bg-teal-50 px-4 border-t border-teal-100">
|
|
<div class="py-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">세법의 복잡성, 인사 및 세무 데이터의 단절, 그리고 환급 후 발생할 수 있는 <strong>추징 및 세무 실사에 대한 두려움</strong>이 핵심 원인이다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg border overflow-hidden">
|
|
<button onclick="toggleQuiz(this)" class="w-full text-left p-4 flex items-start gap-3 hover:bg-gray-100 transition-colors">
|
|
<span class="shrink-0 bg-teal-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">4</span>
|
|
<span class="text-sm text-gray-800">'사후관리 규정'이란 무엇이며, 기업에 어떤 부담을 줍니까?</span>
|
|
</button>
|
|
<div class="quiz-answer bg-teal-50 px-4 border-t border-teal-100">
|
|
<div class="py-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">경정청구로 세금을 환급받은 후, 일정 기간 내 <strong>고용 인원이 감소하면 환급액을 다시 납부</strong>해야 하는 규정이다. 이 때문에 기업들은 나중에 가산세까지 더해 추징당할 위험을 우려하여 청구 자체를 포기하기도 한다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg border overflow-hidden">
|
|
<button onclick="toggleQuiz(this)" class="w-full text-left p-4 flex items-start gap-3 hover:bg-gray-100 transition-colors">
|
|
<span class="shrink-0 bg-teal-500 text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">5</span>
|
|
<span class="text-sm text-gray-800">SAM과 같은 자동화 시스템은 기업의 세무 실무에서 어떤 문제를 해결해 줄 수 있습니까?</span>
|
|
</button>
|
|
<div class="quiz-answer bg-teal-50 px-4 border-t border-teal-100">
|
|
<div class="py-4">
|
|
<p class="text-sm text-teal-900 leading-relaxed">SAM은 인사 데이터와 병역 정보를 <strong>자동으로 연동</strong>하여, 실무자가 일일이 병적 증명서를 확인하지 않아도 청년 여부를 정확히 판정해 준다. 이를 통해 복잡한 계산 과정을 자동화하고 <strong>누락 없는 최대 공제</strong>를 받을 수 있도록 지원한다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// === AOS (Animate on Scroll) ===
|
|
(function() {
|
|
const aosObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(e) {
|
|
if (e.isIntersecting) {
|
|
e.target.classList.add('is-visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.15 });
|
|
document.querySelectorAll('.aos, .aos-pop, .aos-slide-left, .aos-slide-right').forEach(function(el) {
|
|
aosObserver.observe(el);
|
|
});
|
|
})();
|
|
|
|
// === KPI 카운트업 애니메이션 ===
|
|
(function() {
|
|
let kpiDone = false;
|
|
const kpiObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(e) {
|
|
if (e.isIntersecting && !kpiDone) {
|
|
kpiDone = true;
|
|
document.querySelectorAll('.kpi-number').forEach(function(el) {
|
|
const target = parseInt(el.getAttribute('data-target'), 10);
|
|
const suffix = el.getAttribute('data-suffix') || '';
|
|
const duration = 1500;
|
|
const start = performance.now();
|
|
el.textContent = '0' + suffix;
|
|
function step(now) {
|
|
const elapsed = now - start;
|
|
const progress = Math.min(elapsed / duration, 1);
|
|
const eased = 1 - Math.pow(1 - progress, 3);
|
|
el.textContent = Math.round(target * eased) + suffix;
|
|
if (progress < 1) requestAnimationFrame(step);
|
|
}
|
|
requestAnimationFrame(step);
|
|
});
|
|
}
|
|
});
|
|
}, { threshold: 0.3 });
|
|
const kpiSection = document.getElementById('kpi-cards');
|
|
if (kpiSection) kpiObserver.observe(kpiSection);
|
|
})();
|
|
|
|
// === TOC 활성 섹션 하이라이트 ===
|
|
(function() {
|
|
const sections = ['overview','limits','process','analytics','benefits','issues','sam-role','quiz'];
|
|
const tocLinks = document.querySelectorAll('.toc-link[data-section]');
|
|
if (!tocLinks.length) return;
|
|
const tocObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(e) {
|
|
const id = e.target.id;
|
|
const link = document.querySelector('.toc-link[data-section="' + id + '"]');
|
|
if (!link) return;
|
|
if (e.isIntersecting) {
|
|
tocLinks.forEach(function(l) { l.classList.remove('is-active'); });
|
|
link.classList.add('is-active');
|
|
}
|
|
});
|
|
}, { threshold: 0.2, rootMargin: '-10% 0px -70% 0px' });
|
|
sections.forEach(function(id) {
|
|
var el = document.getElementById(id);
|
|
if (el) tocObserver.observe(el);
|
|
});
|
|
})();
|
|
|
|
// === 프로세스 토글 (CSS 트랜지션) ===
|
|
function toggleProcess(mode) {
|
|
const manual = document.getElementById('process-manual');
|
|
const digital = document.getElementById('process-digital');
|
|
const btnManual = document.getElementById('btn-manual');
|
|
const btnDigital = document.getElementById('btn-digital');
|
|
|
|
if (mode === 'manual') {
|
|
manual.classList.remove('is-hidden');
|
|
digital.classList.add('is-hidden');
|
|
btnManual.classList.add('active');
|
|
btnDigital.classList.remove('active');
|
|
} else {
|
|
manual.classList.add('is-hidden');
|
|
digital.classList.remove('is-hidden');
|
|
btnDigital.classList.add('active');
|
|
btnManual.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
// === 퀴즈 토글 ===
|
|
function toggleQuiz(btn) {
|
|
const answer = btn.nextElementSibling;
|
|
answer.classList.toggle('is-open');
|
|
}
|
|
|
|
// === Chart.js 차트 초기화 ===
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var chartObserver = new IntersectionObserver(function(entries) {
|
|
entries.forEach(function(entry) {
|
|
if (entry.isIntersecting) {
|
|
initCharts();
|
|
chartObserver.disconnect();
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
var analyticsSection = document.getElementById('analytics');
|
|
if (analyticsSection) chartObserver.observe(analyticsSection);
|
|
});
|
|
|
|
var chartsInitialized = false;
|
|
function initCharts() {
|
|
if (chartsInitialized) return;
|
|
chartsInitialized = true;
|
|
|
|
var chartColors = {
|
|
teal: 'rgba(13, 148, 136, 0.8)',
|
|
tealLight: 'rgba(13, 148, 136, 0.1)',
|
|
red: 'rgba(239, 68, 68, 0.8)',
|
|
redLight: 'rgba(239, 68, 68, 0.1)',
|
|
amber: 'rgba(245, 158, 11, 0.8)',
|
|
green: 'rgba(34, 197, 94, 0.8)',
|
|
purple: 'rgba(168, 85, 247, 0.8)',
|
|
};
|
|
|
|
var timeCtx = document.getElementById('timeChart');
|
|
if (timeCtx) {
|
|
new Chart(timeCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['신청서 작성', '접수/이동', '담당자 배정', '검토/처리', '결과 통지'],
|
|
datasets: [
|
|
{ label: '수기 방식 (시간)', data: [4, 4, 24, 48, 48], backgroundColor: chartColors.red, borderRadius: 4 },
|
|
{ label: '전산화 (시간)', data: [0.5, 0, 0, 4, 0], backgroundColor: chartColors.teal, borderRadius: 4 }
|
|
]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }, scales: { y: { beginAtZero: true } } }
|
|
});
|
|
}
|
|
|
|
var costCtx = document.getElementById('costChart');
|
|
if (costCtx) {
|
|
new Chart(costCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['2024', '2025', '2026', '2027', '2028'],
|
|
datasets: [
|
|
{ label: '수기 비용', data: [10, 11, 12.1, 13.3, 14.6], borderColor: chartColors.red, backgroundColor: chartColors.redLight, fill: true, tension: 0.3 },
|
|
{ label: '전산화 비용', data: [3, 2.8, 2.6, 2.5, 2.4], borderColor: chartColors.teal, backgroundColor: chartColors.tealLight, fill: true, tension: 0.3 }
|
|
]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }, scales: { y: { beginAtZero: true } } }
|
|
});
|
|
}
|
|
|
|
var errorCtx = document.getElementById('errorChart');
|
|
if (errorCtx) {
|
|
new Chart(errorCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['계산 오류', '기재 누락', '증빙 미비', '법령 오적용'],
|
|
datasets: [{
|
|
data: [45, 30, 15, 10],
|
|
backgroundColor: [chartColors.teal, chartColors.amber, chartColors.green, chartColors.purple],
|
|
borderWidth: 2, borderColor: '#fff'
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } } }
|
|
});
|
|
}
|
|
|
|
var adoptCtx = document.getElementById('adoptionChart');
|
|
if (adoptCtx) {
|
|
new Chart(adoptCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
|
datasets: [{
|
|
label: '이용자 수 (만 명)',
|
|
data: [50, 200, 800, 1500, 2000, 2300],
|
|
backgroundColor: chartColors.teal, borderRadius: 4
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } }, scales: { y: { beginAtZero: true } } }
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|