2026-01-16 18:52:34 +09:00
<! DOCTYPE html >
< html lang = " ko " >
< head >
< meta charset = " UTF-8 " >
< meta name = " viewport " content = " width=device-width, initial-scale=1.0 " >
< title > 채권추심 프로세스 가이드 | SAM SaaS </ title >
2026-01-31 18:47:01 +09:00
<!-- Favicon -->
< link rel = " apple-touch-icon " sizes = " 180x180 " href = " ../img/apple-touch-icon.png " >
< link rel = " icon " type = " image/png " sizes = " 32x32 " href = " ../img/favicon-32x32.png " >
< link rel = " icon " type = " image/png " sizes = " 16x16 " href = " ../img/favicon-16x16.png " >
< link rel = " shortcut icon " href = " ../img/favicon.png " >
2026-01-16 18:52:34 +09:00
< script src = " https://cdn.tailwindcss.com " ></ script >
< script src = " https://unpkg.com/lucide@latest " ></ script >
< link href = " https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap " rel = " stylesheet " >
< style >
* { font - family : 'Noto Sans KR' , sans - serif ; }
. tab - content { display : none ; }
. tab - content . active { display : block ; }
. nav - active { background - color : #4f46e5; color: white; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
. fade - in { animation : fadeIn 0.5 s ease - out forwards ; }
@ keyframes fadeIn {
from { opacity : 0 ; transform : translateY ( 10 px ); }
to { opacity : 1 ; transform : translateY ( 0 ); }
}
. progress - line :: before {
content : '' ;
position : absolute ;
top : 50 % ;
left : 0 ;
right : 0 ;
height : 2 px ;
background : #e2e8f0;
z - index : - 1 ;
}
</ style >
</ head >
2026-01-31 18:59:40 +09:00
< body class = " min-h-screen bg-slate-50 " >
<!-- Navigation -->
< nav class = " sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-slate-200 " >
< div class = " max-w-6xl mx-auto px-6 " >
< div class = " flex justify-between items-center h-16 " >
< a href = " ../index.php " class = " flex items-center gap-3 cursor-pointer " >
< img src = " ../img/favicon-32x32.png " alt = " SAM " class = " w-10 h-10 rounded-xl " >
< div class = " flex flex-col " >
< span class = " text-lg font-bold text-slate-800 leading-tight " > SAM </ span >
< span class = " text-xs text-slate-500 leading-tight " > Smart Automation Management </ span >
</ div >
</ a >
< div class = " flex items-center gap-4 " >
< a href = " ../index.php " class = " text-sm font-medium text-slate-600 hover:text-indigo-600 transition-colors " > 홈 </ a >
</ div >
</ div >
</ div >
</ nav >
< div class = " max-w-6xl mx-auto p-6 " >
2026-01-16 18:52:34 +09:00
<!-- Header & Dashboard Summary -->
< div class = " bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-6 fade-in " >
< div class = " flex flex-col md:flex-row md:items-center justify-between gap-6 " >
< div class = " flex items-center gap-4 " >
< div class = " w-14 h-14 bg-indigo-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-200 text-white " >
< i data - lucide = " gavel " class = " w-7 h-7 " ></ i >
</ div >
< div >
< h1 class = " text-2xl font-bold text-slate-900 " > 채권추심 프로세스 관리 </ h1 >
< p class = " text-slate-500 text-sm " > 변호사와 기업 담당자의 실시간 협업 워크플로우 </ p >
</ div >
</ div >
< div class = " flex gap-4 " >
< div class = " px-4 py-2 bg-emerald-50 border border-emerald-100 rounded-lg " >
< p class = " text-[10px] text-emerald-600 font-bold uppercase tracking-wider " > 회수 성공률 </ p >
< p class = " text-xl font-bold text-emerald-700 " > 84.2 %</ p >
</ div >
< div class = " px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-lg " >
< p class = " text-[10px] text-indigo-600 font-bold uppercase tracking-wider " > 평균 회수 기간 </ p >
< p class = " text-xl font-bold text-indigo-700 " > 62 일 </ p >
</ div >
</ div >
</ div >
</ div >
<!-- Progress Tracking -->
< div class = " bg-white rounded-2xl shadow-sm border border-slate-200 p-8 mb-6 fade-in " style = " animation-delay: 0.1s " >
< div class = " flex items-center justify-between mb-3 " >
< span class = " text-base font-bold text-slate-700 " > 전체 공정 진행률 </ span >
< span id = " progress-text " class = " text-lg font-black text-indigo-600 " > 0 %</ span >
</ div >
< div class = " w-full bg-slate-100 rounded-full h-3 overflow-hidden mb-8 " >
< div id = " progress-bar " class = " bg-gradient-to-r from-indigo-500 to-blue-600 h-full transition-all duration-700 ease-out " style = " width: 0% " ></ div >
</ div >
<!-- Phase Specific Progress -->
< div class = " grid grid-cols-2 md:grid-cols-4 gap-6 border-t border-slate-50 pt-6 " >
< div class = " space-y-2 " >
< div class = " flex justify-between items-center " >
< span class = " text-[11px] font-bold text-slate-400 uppercase tracking-tighter " > Phase 1. 기초조사 </ span >
< span id = " phase1-text " class = " text-xs font-bold text-indigo-500 " > 0 %</ span >
</ div >
< div class = " w-full bg-slate-50 rounded-full h-1.5 overflow-hidden " >
< div id = " phase1-bar " class = " bg-indigo-400 h-full transition-all duration-500 " style = " width: 0% " ></ div >
</ div >
</ div >
< div class = " space-y-2 " >
< div class = " flex justify-between items-center " >
< span class = " text-[11px] font-bold text-slate-400 uppercase tracking-tighter " > Phase 2. 보전처분 </ span >
< span id = " phase2-text " class = " text-xs font-bold text-amber-500 " > 0 %</ span >
</ div >
< div class = " w-full bg-slate-50 rounded-full h-1.5 overflow-hidden " >
< div id = " phase2-bar " class = " bg-amber-400 h-full transition-all duration-500 " style = " width: 0% " ></ div >
</ div >
</ div >
< div class = " space-y-2 " >
< div class = " flex justify-between items-center " >
< span class = " text-[11px] font-bold text-slate-400 uppercase tracking-tighter " > Phase 3. 집행권원 </ span >
< span id = " phase3-text " class = " text-xs font-bold text-blue-500 " > 0 %</ span >
</ div >
< div class = " w-full bg-slate-50 rounded-full h-1.5 overflow-hidden " >
< div id = " phase3-bar " class = " bg-blue-400 h-full transition-all duration-500 " style = " width: 0% " ></ div >
</ div >
</ div >
< div class = " space-y-2 " >
< div class = " flex justify-between items-center " >
< span class = " text-[11px] font-bold text-slate-400 uppercase tracking-tighter " > Phase 4. 강제집행 </ span >
< span id = " phase4-text " class = " text-xs font-bold text-emerald-500 " > 0 %</ span >
</ div >
< div class = " w-full bg-slate-50 rounded-full h-1.5 overflow-hidden " >
< div id = " phase4-bar " class = " bg-emerald-400 h-full transition-all duration-500 " style = " width: 0% " ></ div >
</ div >
</ div >
</ div >
< p class = " text-[11px] text-slate-400 mt-6 text-center italic " >* 각 상세 단계의 체크박스를 완료하면 해당 단계 및 전체 진행률에 반영됩니다 .</ p >
</ div >
<!-- Workflow Tab Navigation -->
< div class = " flex gap-2 mb-6 overflow-x-auto pb-2 " >
< button onclick = " showTab('phase1') " id = " tab-phase1 " class = " tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap nav-active flex items-center gap-2 " >
< span class = " w-5 h-5 rounded-full bg-white/20 flex items-center justify-center text-[10px] " > 1 </ span >
기초조사 및 독촉
</ button >
< button onclick = " showTab('phase2') " id = " tab-phase2 " class = " tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2 " >
< span class = " w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px] " > 2 </ span >
보전 처분
</ button >
< button onclick = " showTab('phase3') " id = " tab-phase3 " class = " tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2 " >
< span class = " w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px] " > 3 </ span >
집행권원 확보
</ button >
< button onclick = " showTab('phase4') " id = " tab-phase4 " class = " tab-btn px-6 py-3 rounded-xl font-semibold transition-all whitespace-nowrap bg-white text-slate-600 hover:bg-slate-100 flex items-center gap-2 " >
< span class = " w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-[10px] " > 4 </ span >
강제집행 및 회수
</ button >
</ div >
< div class = " grid grid-cols-1 lg:grid-cols-3 gap-6 " >
<!-- Main Content Area -->
< div class = " lg:col-span-2 space-y-6 " >
< div class = " bg-white rounded-2xl shadow-sm border border-slate-200 p-6 min-h-[500px] " >
<!-- Phase 1 Content -->
< div id = " phase1 " class = " tab-content active space-y-6 " >
< div class = " flex items-center justify-between mb-2 " >
< h2 class = " text-lg font-bold text-slate-800 " > Phase 1. 기초 조사 및 독촉 ( Preparation ) </ h2 >
< div class = " flex gap-2 " >
< span class = " px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1 " >
< i data - lucide = " clock " size = " 12 " ></ i > 1 ~ 2 주 소요
</ span >
< span class = " px-2.5 py-1 bg-indigo-100 text-indigo-700 rounded-full text-xs font-bold " > 목표 : 기초 조사 </ span >
</ div >
</ div >
< div class = " border rounded-xl overflow-hidden " >
< table class = " w-full text-sm " >
< thead class = " bg-slate-50 border-b " >
< tr >
< th class = " p-4 text-left font-semibold text-slate-600 w-12 " > 체크 </ th >
< th class = " p-4 text-left font-semibold text-slate-600 " > 세부 항목 </ th >
< th class = " p-4 text-center font-semibold text-slate-600 " > 담당 </ th >
</ tr >
</ thead >
< tbody class = " divide-y divide-slate-100 " >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 원인 서류 확보 </ span >< br >< span class = " text-xs text-slate-500 " > 계약서 , 세금계산서 , 거래명세서 등 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-1 bg-blue-50 text-blue-600 rounded text-[11px] font-bold " > 기업 </ span ></ td >
</ tr >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 채무자 소재 조사 </ span >< br >< span class = " text-xs text-slate-500 " > 사업자 등록증 , 휴 / 폐업 여부 확인 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold " > 변호사 </ span ></ td >
</ tr >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 신용 상태 조사 </ span >< br >< span class = " text-xs text-slate-500 " > 주거래은행 및 신용 등급 파악 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold " > 변호사 </ span ></ td >
</ tr >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 내용증명 발송 </ span >< br >< span class = " text-xs text-slate-500 " > 최후 독촉 및 증거력 확보 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-1 bg-indigo-50 text-indigo-600 rounded text-[11px] font-bold " > 변호사 </ span ></ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
<!-- Phase 2 Content -->
< div id = " phase2 " class = " tab-content space-y-6 " >
< div class = " flex items-center justify-between mb-2 " >
< h2 class = " text-lg font-bold text-slate-800 " > Phase 2. 보전 처분 ( Provisional Attachment ) </ h2 >
< div class = " flex gap-2 " >
< span class = " px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1 " >
< i data - lucide = " clock " size = " 12 " ></ i > 1 ~ 2 주 소요
</ span >
< span class = " px-2.5 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-bold " > 목표 : 자산 은닉 방지 </ span >
</ div >
</ div >
< div class = " border rounded-xl overflow-hidden " >
< table class = " w-full text-sm " >
< thead class = " bg-slate-50 border-b " >
< tr >
< th class = " p-4 text-left font-semibold text-slate-600 w-12 " > 체크 </ th >
< th class = " p-4 text-left font-semibold text-slate-600 " > 절차 항목 </ th >
< th class = " p-4 text-center font-semibold text-slate-600 " > 상태 </ th >
</ tr >
</ thead >
< tbody class = " divide-y divide-slate-100 " >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 가압류 대상 목적물 특정 </ span >< br >< span class = " text-xs text-slate-500 " > 부동산 , 채권 ( 은행 ), 유체동산 등 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold " > 변호사 </ span ></ td >
</ tr >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 가압류 신청서 접수 </ span >< br >< span class = " text-xs text-slate-500 " > 관할 법원 전자 접수 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold " > 변호사 </ span ></ td >
</ tr >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 공탁금 납부 ( 현금 / 보증보험 ) </ span >< br >< span class = " text-xs text-slate-500 " > 법원 결정에 따른 담보 제공 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-0.5 bg-blue-50 text-blue-600 rounded text-[10px] font-bold " > 기업 </ span ></ td >
</ tr >
< tr class = " hover:bg-slate-50 transition-colors " >
< td class = " p-4 text-center " >< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " ></ td >
< td class = " p-4 " >< span class = " font-medium text-slate-800 " > 가압류 결정문 수령 </ span >< br >< span class = " text-xs text-slate-500 " > 결정 통지 및 효력 발생 확인 </ span ></ td >
< td class = " p-4 text-center " >< span class = " px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-[10px] font-bold " > 변호사 </ span ></ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
<!-- Phase 3 Content -->
< div id = " phase3 " class = " tab-content space-y-6 " >
< div class = " flex items-center justify-between mb-2 " >
< h2 class = " text-lg font-bold text-slate-800 " > Phase 3. 집행권원 확보 ( Litigation ) </ h2 >
< div class = " flex gap-2 " >
< span class = " px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1 " >
< i data - lucide = " clock " size = " 12 " ></ i > 2 주 ~ 1 년 소요
</ span >
< span class = " px-2.5 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-bold " > 목표 : 법적 권리 확정 </ span >
</ div >
</ div >
< div class = " grid grid-cols-1 md:grid-cols-2 gap-4 " >
< div class = " p-5 border rounded-2xl hover:border-indigo-300 transition-all group relative " >
< div class = " absolute top-4 right-4 " >
< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " >
</ div >
< h3 class = " font-bold text-slate-800 mb-1 flex items-center gap-2 " >
< i data - lucide = " Zap " size = " 18 " class = " text-amber-500 " ></ i >
지급명령 신청
</ h3 >
< div class = " flex items-center gap-1 text-[10px] text-amber-600 font-bold mb-2 " >
< i data - lucide = " timer " size = " 10 " ></ i > 평균 2 ~ 4 주 소요
</ div >
< p class = " text-xs text-slate-500 mb-4 pr-8 leading-relaxed " > 채무자가 빚을 인정할 때 유리 . 가장 신속한 집행권원 확보 방법 .</ p >
< div class = " flex items-center gap-2 text-[10px] font-bold text-indigo-600 uppercase tracking-wider " >
< span class = " px-2 py-0.5 bg-indigo-50 rounded " > 변호사 담당 </ span >
</ div >
</ div >
< div class = " p-5 border rounded-2xl hover:border-indigo-300 transition-all group relative " >
< div class = " absolute top-4 right-4 " >
< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " >
</ div >
< h3 class = " font-bold text-slate-800 mb-1 flex items-center gap-2 " >
< i data - lucide = " Scale " size = " 18 " class = " text-slate-600 " ></ i >
민사소송 접수
</ h3 >
< div class = " flex items-center gap-1 text-[10px] text-slate-500 font-bold mb-2 " >
< i data - lucide = " timer " size = " 10 " ></ i > 약 6 ~ 12 개월 소요
</ div >
< p class = " text-xs text-slate-500 mb-4 pr-8 leading-relaxed " > 채권채무 다툼이 있거나 지급명령 이의신청 시 본안 소송 진행 .</ p >
< div class = " flex items-center gap-2 text-[10px] font-bold text-slate-500 uppercase tracking-wider " >
< span class = " px-2 py-0.5 bg-slate-100 rounded " > 변호사 담당 </ span >
</ div >
</ div >
</ div >
</ div >
<!-- Phase 4 Content -->
< div id = " phase4 " class = " tab-content space-y-6 " >
< div class = " flex items-center justify-between mb-2 " >
< h2 class = " text-lg font-bold text-slate-800 " > Phase 4. 강제 집행 및 회수 ( Execution ) </ h2 >
< div class = " flex gap-2 " >
< span class = " px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold flex items-center gap-1 " >
< i data - lucide = " clock " size = " 12 " ></ i > 1 ~ 3 개월 소요
</ span >
< span class = " px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-bold " > 목표 : 실제 회수 완료 </ span >
</ div >
</ div >
< div class = " space-y-3 " >
< div class = " p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between hover:border-indigo-200 transition-colors " >
< div class = " flex items-center gap-4 " >
< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " >
< div >
< div class = " flex items-center gap-2 mb-0.5 " >
< h4 class = " text-sm font-bold text-slate-800 " > 재산 명시 및 재산 조회 신청 </ h4 >
< span class = " text-[10px] font-medium text-slate-400 bg-slate-50 px-1.5 rounded " > 1 ~ 2 개월 </ span >
</ div >
< p class = " text-[11px] text-slate-500 " > 법원을 통해 채무자의 숨겨진 재산을 찾아내는 단계 </ p >
</ div >
</ div >
< span class = " hidden md:block text-[10px] font-bold text-slate-400 " > Phase 4 - 1 </ span >
</ div >
< div class = " p-4 bg-white border border-slate-200 rounded-2xl flex items-center justify-between hover:border-indigo-200 transition-colors " >
< div class = " flex items-center gap-4 " >
< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-5 h-5 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500 " >
< div >
< div class = " flex items-center gap-2 mb-0.5 " >
< h4 class = " text-sm font-bold text-slate-800 " > 강제 집행 ( 압류 / 경매 ) 실시 </ h4 >
< span class = " text-[10px] font-medium text-slate-400 bg-slate-50 px-1.5 rounded " > 집행 대상별 상이 </ span >
</ div >
< p class = " text-[11px] text-slate-500 " > 통장 압류 , 유체동산 압류 ( 빨간딱지 ), 부동산 경매 등 </ p >
</ div >
</ div >
< span class = " hidden md:block text-[10px] font-bold text-slate-400 " > Phase 4 - 2 </ span >
</ div >
< div class = " p-4 bg-emerald-50 border border-emerald-100 rounded-2xl flex items-center justify-between " >
< div class = " flex items-center gap-4 " >
< input type = " checkbox " onchange = " updateProgress() " class = " step-checkbox w-5 h-5 text-emerald-600 rounded border-slate-300 focus:ring-emerald-500 " >
< div >
< h4 class = " text-sm font-bold text-emerald-800 " > 회수 완료 및 성공보수 정산 </ h4 >
< p class = " text-[11px] text-emerald-600 " > 실제 금액 입금 확인 후 사건 최종 종결 </ p >
</ div >
</ div >
< i data - lucide = " Party-Popper " class = " w-5 h-5 text-emerald-400 " ></ i >
</ div >
</ div >
</ div >
</ div >
</ div >
<!-- Sidebar Content -->
< div class = " space-y-6 " >
<!-- Financial Summary Card -->
< div class = " bg-slate-900 rounded-3xl p-6 text-white shadow-xl shadow-slate-200 fade-in " style = " animation-delay: 0.3s " >
< div class = " flex items-center gap-3 mb-6 " >
< div class = " w-10 h-10 bg-indigo-500/20 rounded-xl flex items-center justify-center text-indigo-400 " >
< i data - lucide = " Credit-Card " size = " 22 " ></ i >
</ div >
< h3 class = " text-lg font-bold " > 채무 및 상환 현황 </ h3 >
</ div >
< div class = " space-y-4 " >
<!-- Amount Info -->
< div class = " p-4 bg-white/5 rounded-2xl border border-white/10 " >
< div class = " flex justify-between items-center mb-1 " >
< span class = " text-xs text-slate-400 " > 총 청구 금액 ( 원금 ) </ span >
< span class = " text-sm font-bold " > 50 , 000 , 000 원 </ span >
</ div >
< div class = " flex justify-between items-center " >
< span class = " text-xs text-slate-400 " > 법정 이율 ( 연 12 % ) </ span >
< span class = " text-sm font-bold text-amber-400 " >+ 6 , 000 , 000 원 </ span >
</ div >
< div class = " mt-3 pt-3 border-t border-white/10 flex justify-between items-center " >
< span class = " text-sm font-bold " > 최종 회수 목표액 </ span >
< span class = " text-lg font-black text-indigo-400 " > 56 , 000 , 000 원 </ span >
</ div >
</ div >
<!-- Repayment Plan -->
< div class = " space-y-4 " >
< label class = " text-[10px] font-bold text-slate-500 uppercase tracking-widest pl-1 " > 상환 방식 및 시작일 설정 </ label >
<!-- Start Date Selection -->
< div class = " p-3 bg-white/5 rounded-xl border border-white/10 flex items-center justify-between group " >
< span class = " text-[11px] text-slate-400 " > 회수 시작일 </ span >
< input type = " date " id = " recovery-start-date " onchange = " generateSchedule() "
class = " bg-transparent text-xs font-bold text-indigo-400 border-none outline-none focus:ring-0 p-0 text-right w-28 " >
</ div >
< div class = " grid grid-cols-2 gap-2 " >
< button onclick = " setPaymentType('full') " id = " btn-pay-full " class = " p-3 bg-white/5 rounded-xl border border-white/10 flex flex-col items-center gap-1 group transition-all hover:bg-white/10 " >
< span class = " text-[11px] text-slate-400 " > 일시납 </ span >
< span class = " text-xs font-bold font-mono " > FULL PAID </ span >
</ button >
< button onclick = " setPaymentType('split') " id = " btn-pay-split " class = " p-3 bg-indigo-500/20 rounded-xl border border-indigo-500/30 flex flex-col items-center gap-1 transition-all " >
< span class = " text-[11px] text-indigo-300 " > 분할 납부 </ span >
< span class = " text-xs font-bold font-mono text-white " id = " display-months " > 12 회 분할 </ span >
</ button >
</ div >
<!-- Months Slider ( Visible when split is selected ) -->
< div id = " slider-container " class = " space-y-2 px-1 " >
< div class = " flex justify-between text-[10px] text-slate-500 font-bold " >
< span > 분할 기간 설정 </ span >
< span id = " slider-val " class = " text-indigo-400 " > 12 개월 </ span >
</ div >
< input type = " range " id = " months-slider " min = " 2 " max = " 36 " value = " 12 " oninput = " updateMonths(this.value) "
class = " w-full h-1 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500 " >
< div class = " flex justify-between text-[9px] text-slate-600 " >
< span > 2 개월 </ span >
< span > 36 개월 </ span >
</ div >
</ div >
</ div >
<!-- Monthly Repayment ( Visible when split is selected ) -->
< div id = " monthly-info " class = " p-4 bg-indigo-500/5 rounded-2xl border border-indigo-500/10 " >
< div class = " flex justify-between items-center " >
< span class = " text-xs text-slate-400 " > 월 예상 상환액 </ span >
< span id = " monthly-amount " class = " text-sm font-bold text-indigo-300 " > 4 , 666 , 667 원 </ span >
</ div >
</ div >
<!-- Repayment Schedule List ( Dynamic ) -->
< div id = " schedule-container " class = " space-y-2 mt-4 max-h-[300px] overflow-y-auto pr-2 custom-scrollbar hidden " >
< label class = " text-[10px] font-bold text-slate-500 uppercase tracking-widest pl-1 " > 납부 일정 체크리스트 </ label >
< div id = " schedule-list " class = " space-y-2 " >
<!-- Dynamic items here -->
</ div >
</ div >
<!-- Settlement Options -->
< div class = " p-4 bg-amber-500/5 rounded-2xl border border-amber-500/20 " >
< div class = " flex items-center gap-2 mb-2 " >
< i data - lucide = " Handshake " size = " 14 " class = " text-amber-400 " ></ i >
< span class = " text-xs font-bold text-amber-200 " > 할인 및 합의 처리 </ span >
</ div >
< div class = " flex items-center justify-between " >
< span class = " text-[11px] text-slate-400 leading-tight " > 합의 목표가 : < span id = " settlement-target-display " > 51 , 000 , 000 </ span > 원 < br > 수수료 면제 협의 가능 </ span >
< button onclick = " openSettlementModal() " class = " px-3 py-1.5 bg-amber-500/20 text-amber-400 text-[10px] font-bold rounded-lg hover:bg-amber-500/30 transition-colors " >
합의안 작성
</ button >
</ div >
</ div >
</ div >
< div class = " mt-8 pt-6 border-t border-white/10 " >
< div class = " flex items-center justify-between mb-2 " >
< span class = " text-xs text-slate-400 " > 현재 회수 진행 상태 </ span >
< span class = " text-xs font-bold text-emerald-400 px-2 py-0.5 bg-emerald-500/10 rounded-full " > 정상 상환 중 </ span >
</ div >
< div class = " w-full bg-white/5 rounded-full h-1.5 overflow-hidden " >
< div class = " bg-emerald-500 w-[45%] h-full rounded-full shadow-[0_0_8px_rgba(16,185,129,0.5)] " ></ div >
</ div >
</ div >
</ div >
<!-- Helper Card -->
< div class = " bg-white rounded-3xl p-6 shadow-sm border border-slate-100 fade-in " style = " animation-delay: 0.4s " >
< div class = " flex items-center gap-3 mb-4 " >
< div class = " w-10 h-10 bg-blue-50 rounded-xl flex items-center justify-center text-blue-500 " >
< i data - lucide = " Help-Circle " size = " 22 " ></ i >
</ div >
< h3 class = " text-lg font-bold text-slate-800 " > 도움말 </ h3 >
</ div >
< p class = " text-sm text-slate-500 leading-relaxed mb-6 " >
설정된 상환 계획은 법적 효력이 있는 합의서를 기반으로 합니다 . 분할 납부 지연 시 < span class = " font-bold text-rose-500 " > 기한의 이익 </ span > 이 상실되어 즉시 강제집행 절차로 전환될 수 있습니다 .
</ p >
< button class = " w-full py-3 border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-50 transition-colors flex items-center justify-center gap-2 " >
채무 합의서 양식 다운로드
< i data - lucide = " Download " size = " 14 " ></ i >
</ button >
</ div >
<!-- Quote Card -->
< div class = " bg-slate-50 rounded-3xl p-6 border border-slate-100 fade-in " style = " animation-delay: 0.5s " >
< p class = " text-sm text-slate-600 italic text-center leading-relaxed " >
" 성공적인 채권 회수는 철저한<br>
< span class = " font-bold text-indigo-600 " > 심리적 전술 </ span > 과 < span class = " font-bold text-indigo-600 " > 법적 타이밍 </ span > 의 결합입니다 . "
</ p >
< div class = " mt-4 flex items-center justify-center gap-2 " >
< div class = " w-6 h-6 bg-indigo-100 rounded-full " ></ div >
< span class = " text-xs font-bold text-slate-400 " > Antigravity Advisor </ span >
</ div >
</ div >
</ div >
</ div >
<!-- Footer -->
< div class = " mt-8 text-center " >
< p class = " text-[11px] text-slate-400 " > © 2026 SAM SaaS System . For Legal Professional Collaboration .</ p >
</ div >
</ div >
<!-- Settlement Modal -->
< div id = " settlementModal " class = " fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4 " >
< div class = " bg-white rounded-3xl w-full max-w-md shadow-2xl overflow-hidden fade-in " >
< div class = " p-6 border-b flex justify-between items-center " >
< h3 class = " text-lg font-bold text-slate-800 " > 채무 합의안 작성 </ h3 >
< button onclick = " closeSettlementModal() " class = " text-slate-400 hover:text-slate-600 transition-colors " >
< i data - lucide = " X " size = " 24 " ></ i >
</ button >
</ div >
< div class = " p-8 space-y-6 " >
< div >
< label class = " block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 " > 현재 최종 목표액 </ label >
< div class = " text-2xl font-black text-slate-900 " > 56 , 000 , 000 원 </ div >
</ div >
< div >
< label class = " block text-xs font-bold text-indigo-600 uppercase tracking-wider mb-2 " > 합의 제안 금액 ( 원 ) </ label >
< input type = " number " id = " settlement-input " value = " 51000000 "
class = " w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-lg font-bold focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all " >
< p class = " mt-2 text-[11px] text-slate-400 leading-relaxed " >
* 합의 금액 수정 시 원금 대비 감면율이 자동으로 계산됩니다 .< br >
* 변호사 검토 후 최종 합의안이 발송됩니다 .
</ p >
</ div >
< div class = " bg-amber-50 border border-amber-100 p-4 rounded-2xl flex items-start gap-3 " >
< i data - lucide = " Alert-Triangle " class = " text-amber-500 mt-1 flex-shrink-0 " size = " 18 " ></ i >
< p class = " text-xs text-amber-700 leading-relaxed " >
합의 처리 시 법정 이율 전액 감면 및 원금의 일부가 조정될 수 있습니다 . 신중하게 결정해 주시기 바랍니다 .
</ p >
</ div >
</ div >
< div class = " p-6 bg-slate-50 flex gap-3 " >
< button onclick = " closeSettlementModal() " class = " flex-1 py-3 bg-white border border-slate-200 rounded-xl text-sm font-bold text-slate-600 hover:bg-slate-100 transition-colors " > 취소 </ button >
< button onclick = " saveSettlement() " class = " flex-1 py-3 bg-indigo-600 text-white rounded-xl text-sm font-bold shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-colors " > 합의안 저장 </ button >
</ div >
</ div >
</ div >
< script >
// Lucide 아이콘 렌더링
lucide . createIcons ();
let currentPaymentType = 'full' ;
let currentMonths = 12 ;
const totalAmount = 56000000 ;
function setPaymentType ( type ) {
currentPaymentType = type ;
const btnFull = document . getElementById ( 'btn-pay-full' );
const btnSplit = document . getElementById ( 'btn-pay-split' );
const sliderCont = document . getElementById ( 'slider-container' );
const monthlyInfo = document . getElementById ( 'monthly-info' );
if ( type === 'full' ) {
btnFull . classList . remove ( 'bg-white/5' , 'border-white/10' );
btnFull . classList . add ( 'bg-indigo-500/20' , 'border-indigo-500/30' );
btnFull . querySelector ( 'span:first-child' ) . classList . replace ( 'text-slate-400' , 'text-indigo-300' );
btnSplit . classList . add ( 'bg-white/5' , 'border-white/10' );
btnSplit . classList . remove ( 'bg-indigo-500/20' , 'border-indigo-500/30' );
btnSplit . querySelector ( 'span:first-child' ) . classList . replace ( 'text-indigo-300' , 'text-slate-400' );
btnSplit . querySelector ( '#display-months' ) . classList . replace ( 'text-white' , 'text-slate-400' );
sliderCont . classList . add ( 'opacity-30' , 'pointer-events-none' );
monthlyInfo . classList . add ( 'hidden' );
} else {
btnSplit . classList . remove ( 'bg-white/5' , 'border-white/10' );
btnSplit . classList . add ( 'bg-indigo-500/20' , 'border-indigo-500/30' );
btnSplit . querySelector ( 'span:first-child' ) . classList . replace ( 'text-slate-400' , 'text-indigo-300' );
btnSplit . querySelector ( '#display-months' ) . classList . replace ( 'text-slate-400' , 'text-white' );
btnFull . classList . add ( 'bg-white/5' , 'border-white/10' );
btnFull . classList . remove ( 'bg-indigo-500/20' , 'border-indigo-500/30' );
btnFull . querySelector ( 'span:first-child' ) . classList . replace ( 'text-indigo-300' , 'text-slate-400' );
sliderCont . classList . remove ( 'opacity-30' , 'pointer-events-none' );
monthlyInfo . classList . remove ( 'hidden' );
}
calculateRepayment ();
}
function updateMonths ( val ) {
currentMonths = val ;
document . getElementById ( 'slider-val' ) . innerText = val + '개월' ;
document . getElementById ( 'display-months' ) . innerText = val + '회 분할' ;
calculateRepayment ();
}
function generateSchedule () {
const list = document . getElementById ( 'schedule-list' );
const container = document . getElementById ( 'schedule-container' );
const startDateInput = document . getElementById ( 'recovery-start-date' );
if ( ! startDateInput . value ) {
const today = new Date ();
startDateInput . value = today . toISOString () . split ( 'T' )[ 0 ];
}
container . classList . remove ( 'hidden' );
list . innerHTML = '' ;
const baseDate = new Date ( startDateInput . value );
if ( currentPaymentType === 'full' ) {
const item = document . createElement ( 'div' );
item . className = 'p-4 bg-indigo-500/10 rounded-2xl border border-indigo-500/20 flex items-center justify-between group fade-in' ;
item . innerHTML = `
< div class = " flex items-center gap-3 " >
< input type = " checkbox " onchange = " toggleScheduleRow(this) " class = " w-5 h-5 rounded border-indigo-400/30 bg-transparent text-indigo-500 focus:ring-indigo-500 " >
< div >
< div class = " text-[10px] font-bold text-indigo-300 uppercase tracking-widest " > 일시납 총액 </ div >
< div class = " text-sm font-black text-white " > $ { totalAmount . toLocaleString ()} 원 </ div >
</ div >
</ div >
< div class = " text-right " >
< div class = " text-[11px] text-indigo-200 font-mono font-bold " > $ { startDateInput . value } </ div >
< div class = " text-[10px] text-indigo-400 font-bold status-label " > 미납 </ div >
</ div >
` ;
list . appendChild ( item );
return ;
}
const monthly = Math . round ( totalAmount / currentMonths );
for ( let i = 1 ; i <= currentMonths ; i ++ ) {
const dueDate = new Date ( baseDate );
dueDate . setMonth ( baseDate . getMonth () + ( i - 1 )); // i-1 because first payment is usually on start date or 1 month after. Let's make it 1 month after as per standard.
dueDate . setMonth ( baseDate . getMonth () + i );
const dateStr = dueDate . toISOString () . split ( 'T' )[ 0 ];
const item = document . createElement ( 'div' );
item . className = 'p-3 bg-white/5 rounded-xl border border-white/5 flex items-center justify-between group hover:bg-white/10 transition-all' ;
item . innerHTML = `
< div class = " flex items-center gap-3 " >
< input type = " checkbox " onchange = " toggleScheduleRow(this) " class = " w-4 h-4 rounded border-white/20 bg-transparent text-indigo-500 focus:ring-indigo-500 " >
< div >
< div class = " text-[10px] font-bold text-slate-400 " > $ { i } 회차 </ div >
< div class = " text-xs font-mono text-white " > $ { monthly . toLocaleString ()} 원 </ div >
</ div >
</ div >
< div class = " text-right " >
< div class = " text-[10px] text-slate-400 font-mono " > $ { dateStr } </ div >
< div class = " text-[9px] text-slate-600 font-bold status-label " > 미납 </ div >
</ div >
` ;
list . appendChild ( item );
}
}
function toggleScheduleRow ( cb ) {
const row = cb . closest ( '.group' );
const statusLabel = row . querySelector ( '.status-label' );
if ( cb . checked ) {
row . classList . add ( 'bg-emerald-500/10' , 'border-emerald-500/20' );
row . classList . remove ( 'bg-white/5' , 'border-white/5' );
statusLabel . innerText = '입금완료' ;
statusLabel . classList . add ( 'text-emerald-400' );
statusLabel . classList . remove ( 'text-slate-600' );
} else {
row . classList . remove ( 'bg-emerald-500/10' , 'border-emerald-500/20' );
row . classList . add ( 'bg-white/5' , 'border-white/5' );
statusLabel . innerText = '미납' ;
statusLabel . classList . remove ( 'text-emerald-400' );
statusLabel . classList . add ( 'text-slate-600' );
}
}
function calculateRepayment () {
if ( currentPaymentType === 'split' ) {
const monthly = Math . round ( totalAmount / currentMonths );
document . getElementById ( 'monthly-amount' ) . innerText = monthly . toLocaleString () + '원' ;
}
generateSchedule ();
}
// Modal Functions
function openSettlementModal () {
document . getElementById ( 'settlementModal' ) . classList . remove ( 'hidden' );
}
function closeSettlementModal () {
document . getElementById ( 'settlementModal' ) . classList . add ( 'hidden' );
}
function saveSettlement () {
const newVal = document . getElementById ( 'settlement-input' ) . value ;
document . getElementById ( 'settlement-target-display' ) . innerText = parseInt ( newVal ) . toLocaleString ();
closeSettlementModal ();
// 시각적 효과
const targetEl = document . getElementById ( 'settlement-target-display' ) . parentElement ;
targetEl . classList . add ( 'text-indigo-400' , 'scale-110' , 'transition-all' );
setTimeout (() => {
targetEl . classList . remove ( 'scale-110' );
}, 300 );
}
// Tab Management
function showTab ( tabId ) {
document . querySelectorAll ( '.tab-content' ) . forEach ( tab => {
tab . classList . remove ( 'active' );
});
document . getElementById ( tabId ) . classList . add ( 'active' );
document . querySelectorAll ( '.tab-btn' ) . forEach ( btn => {
btn . classList . remove ( 'nav-active' );
btn . classList . add ( 'bg-white' , 'text-slate-600' , 'hover:bg-slate-100' );
const badge = btn . querySelector ( 'span' );
if ( badge ) {
badge . classList . remove ( 'bg-white/20' );
badge . classList . add ( 'bg-slate-200' );
}
});
const activeBtn = document . getElementById ( 'tab-' + tabId );
activeBtn . classList . add ( 'nav-active' );
activeBtn . classList . remove ( 'bg-white' , 'text-slate-600' , 'hover:bg-slate-100' );
const activeBadge = activeBtn . querySelector ( 'span' );
if ( activeBadge ) {
activeBadge . classList . add ( 'bg-white/20' );
activeBadge . classList . remove ( 'bg-slate-200' );
}
}
// Progress Tracking Function
function updateProgress () {
// Overall calculation
const allCheckboxes = document . querySelectorAll ( '.step-checkbox' );
const total = allCheckboxes . length ;
const checked = Array . from ( allCheckboxes ) . filter ( cb => cb . checked ) . length ;
const overallPercentage = total > 0 ? Math . round (( checked / total ) * 100 ) : 0 ;
document . getElementById ( 'progress-bar' ) . style . width = overallPercentage + '%' ;
document . getElementById ( 'progress-text' ) . innerText = overallPercentage + '%' ;
// Individual Phase calculation
[ 'phase1' , 'phase2' , 'phase3' , 'phase4' ] . forEach ( phaseId => {
const phaseSection = document . getElementById ( phaseId );
const phaseCheckboxes = phaseSection . querySelectorAll ( '.step-checkbox' );
const pTotal = phaseCheckboxes . length ;
const pChecked = Array . from ( phaseCheckboxes ) . filter ( cb => cb . checked ) . length ;
const pPercentage = pTotal > 0 ? Math . round (( pChecked / pTotal ) * 100 ) : 0 ;
const textElem = document . getElementById ( phaseId + '-text' );
const barElem = document . getElementById ( phaseId + '-bar' );
if ( textElem ) textElem . innerText = pPercentage + '%' ;
if ( barElem ) barElem . style . width = pPercentage + '%' ;
});
}
// Initialize on load
window . onload = function () {
updateProgress ();
setPaymentType ( 'full' ); // Set Initial UI state
};
</ script >
</ body >
</ html >
