629 lines
37 KiB
HTML
629 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>사건 시각화 대시보드 v3</title>
|
|
<style>
|
|
/* ── 기본 레이아웃 ── */
|
|
body {
|
|
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
background: #f5f5f5;
|
|
color: #333;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
color: #1a365d;
|
|
border-bottom: 3px solid #2563eb;
|
|
padding-bottom: 15px;
|
|
}
|
|
h2 {
|
|
color: #1e40af;
|
|
margin-top: 50px;
|
|
padding: 10px 15px;
|
|
background: #dbeafe;
|
|
border-left: 5px solid #2563eb;
|
|
}
|
|
.section {
|
|
background: white;
|
|
padding: 25px;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
th, td {
|
|
border: 1px solid #e2e8f0;
|
|
padding: 12px;
|
|
text-align: left;
|
|
font-size: 15px;
|
|
}
|
|
th {
|
|
background: #1e40af;
|
|
color: white;
|
|
}
|
|
tr:nth-child(even) {
|
|
background: #f8fafc;
|
|
}
|
|
.constraint-box {
|
|
background: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.goal-box {
|
|
background: #ecfdf5;
|
|
border: 1px solid #a7f3d0;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
|
|
/* ── Serpentine 타임라인 (Sections 2, 4) ── */
|
|
.serpentine-timeline {
|
|
padding: 10px 0;
|
|
}
|
|
.tl-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
.tl-row-forward {
|
|
flex-direction: row;
|
|
}
|
|
.tl-row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
.tl-item {
|
|
flex: 1;
|
|
min-width: 0;
|
|
border: 2px solid #93c5fd;
|
|
border-radius: 10px;
|
|
padding: 14px 16px;
|
|
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
|
text-align: center;
|
|
font-size: 15px;
|
|
position: relative;
|
|
transition: transform 0.15s;
|
|
}
|
|
.tl-item:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 12px rgba(37,99,235,0.2);
|
|
}
|
|
.tl-date {
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
margin-bottom: 4px;
|
|
font-weight: 500;
|
|
}
|
|
.tl-id {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: #1e40af;
|
|
margin-bottom: 4px;
|
|
}
|
|
.tl-body {
|
|
font-size: 15px;
|
|
color: #1f2937;
|
|
margin-bottom: 2px;
|
|
}
|
|
.tl-action {
|
|
font-size: 14px;
|
|
color: #4b5563;
|
|
word-break: keep-all;
|
|
}
|
|
.gap-item {
|
|
border-color: #ef4444;
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
|
}
|
|
.gap-badge {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
padding: 2px 8px;
|
|
background: #ef4444;
|
|
color: white;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.tl-cred {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
padding: 2px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
.cred-high { background: #dcfce7; color: #166534; }
|
|
.cred-medium { background: #fef9c3; color: #854d0e; }
|
|
.cred-low { background: #fee2e2; color: #991b1b; }
|
|
.cred-unknown { background: #f3f4f6; color: #6b7280; }
|
|
.tl-arrow-down {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 4px 0;
|
|
}
|
|
.tl-arrow-right { margin-left: auto; margin-right: 60px; }
|
|
.tl-arrow-left { margin-left: 60px; margin-right: auto; }
|
|
.tl-arrow-shaft {
|
|
width: 3px;
|
|
height: 24px;
|
|
background: #93c5fd;
|
|
}
|
|
.tl-arrow-head {
|
|
color: #93c5fd;
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
/* ── DAG 인과관계도 (Section 3) ── */
|
|
.dag-page {
|
|
position: relative;
|
|
padding: 10px 0 20px 0;
|
|
}
|
|
.dag-page-label {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: #6b7280;
|
|
margin-bottom: 6px;
|
|
font-weight: 600;
|
|
}
|
|
.dag-layer {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
margin: 50px 0;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
.dag-layer:first-of-type {
|
|
margin-top: 10px;
|
|
}
|
|
.dag-node {
|
|
border: 2px solid #93c5fd;
|
|
border-radius: 10px;
|
|
padding: 10px 14px;
|
|
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
|
text-align: center;
|
|
font-size: 15px;
|
|
min-width: 110px;
|
|
max-width: 180px;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: transform 0.15s;
|
|
}
|
|
.dag-node:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 4px 12px rgba(37,99,235,0.2);
|
|
}
|
|
.dag-gap {
|
|
border-color: #ef4444;
|
|
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
|
}
|
|
.dag-node-id {
|
|
font-weight: 700;
|
|
color: #1e40af;
|
|
font-size: 15px;
|
|
margin-bottom: 3px;
|
|
}
|
|
.dag-node-body {
|
|
font-size: 14px;
|
|
color: #1f2937;
|
|
word-break: keep-all;
|
|
}
|
|
.dag-cross-label {
|
|
font-size: 11px;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
margin: 2px 0;
|
|
}
|
|
.dag-in {
|
|
color: #4338ca;
|
|
background: #e0e7ff;
|
|
}
|
|
.dag-out {
|
|
color: #9333ea;
|
|
background: #f3e8ff;
|
|
}
|
|
.dag-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 숨김 SVG: 화살촉 마커 정의 -->
|
|
<svg style="position:absolute;width:0;height:0;overflow:hidden">
|
|
<defs>
|
|
<marker id="dag-arrow" viewBox="0 0 10 10"
|
|
refX="10" refY="5" markerWidth="8" markerHeight="8"
|
|
orient="auto-start-reverse">
|
|
<path d="M 0 0 L 10 5 L 0 10 z" fill="#60a5fa"/>
|
|
</marker>
|
|
</defs>
|
|
</svg>
|
|
|
|
<h1>⚖ 사건 시각화 대시보드</h1>
|
|
|
|
<!-- Section 1 -->
|
|
<h2>1. 사건 개요</h2>
|
|
<div class="section">
|
|
<div class="goal-box">
|
|
<strong>의뢰 목표 (Primary Goal):</strong>
|
|
<p>우방캐피탈과 우방신용이 회수하지 못한 대출금 및 구상금을 최대한 지급받기 위한 소송 제기</p>
|
|
</div>
|
|
<div class="constraint-box">
|
|
<strong>⚠️ 제약 사항 (Constraints):</strong>
|
|
<p>첫째, 개성금속은 완전 폐업 상태로 집행 가능한 재산이 전혀 없음. 둘째, 김수경 역시 현재 재산이 전혀 없음. 셋째, 개성금속은 향후 재기 또는 재산 취득 가능성이 전혀 없음.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 2 -->
|
|
<h2>2. 행위 타임라인 (Behavioral Objects)</h2>
|
|
<div class="section">
|
|
<div class="serpentine-timeline">
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2013-10-07</div><div class="tl-id">bh1</div><div class="tl-body">김수경</div><div class="tl-action">우방캐피탈에 용인시 공장용지 및 공장건물에 대한 근저당…</div></div>
|
|
<div class="tl-item"><div class="tl-date">2013-10-08</div><div class="tl-id">bh2</div><div class="tl-body">우방캐피탈</div><div class="tl-action">개성금속에게 10억원을 대출하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2013-10-08</div><div class="tl-id">bh3</div><div class="tl-body">김수경</div><div class="tl-action">개성금속의 우방캐피탈에 대한 대출채무를 연대보증하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2014-04-07</div><div class="tl-id">bh4</div><div class="tl-body">김수경</div><div class="tl-action">연홍보에게 개포동 아파트를 보증금 1억원에 임대하는 계…</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-right"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-reverse">
|
|
<div class="tl-item"><div class="tl-date">2014-12-01</div><div class="tl-id">bh5</div><div class="tl-body">우방신용</div><div class="tl-action">개성금속의 신한은행 대출 2억원에 대한 신용보증서를 발…</div></div>
|
|
<div class="tl-item"><div class="tl-date">2014-12-01</div><div class="tl-id">bh6</div><div class="tl-body">김수경</div><div class="tl-action">우방신용의 대위변제로 인한 구상채무를 연대보증하였다</div></div>
|
|
<div class="tl-item gap-item"><div class="tl-date">2015-11-30</div><div class="tl-id">bh7</div><div class="tl-body">김수경</div><div class="tl-action">대출만기일에 이자를 변제하고 대출기한 연장을 요청하였다</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="tl-item gap-item"><div class="tl-date">2015-11-30</div><div class="tl-id">bh8</div><div class="tl-body">우방캐피탈</div><div class="tl-action">개성금속의 대출기한 연장 요청을 거절하였다</div><span class="gap-badge">[증거공백]</span></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-left"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item gap-item"><div class="tl-date">2015-12-01</div><div class="tl-id">bh9</div><div class="tl-body">개성금속</div><div class="tl-action">부도를 내었다</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="tl-item gap-item"><div class="tl-date">2015-12-01</div><div class="tl-id">bh10</div><div class="tl-body">우방신용</div><div class="tl-action">신한은행에 개성금속의 대출원리금 2억 2천만원을 대위변…</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="tl-item"><div class="tl-date">2015-12-10</div><div class="tl-id">bh11</div><div class="tl-body">박수용</div><div class="tl-action">김수경에게 3천만원을 대여하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2015-12-22</div><div class="tl-id">bh12</div><div class="tl-body">우방신용</div><div class="tl-action">공장용지에 대한 가압류를 신청하고 등기를 마쳤다</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-right"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-reverse">
|
|
<div class="tl-item"><div class="tl-date">2016-01-31</div><div class="tl-id">bh13</div><div class="tl-body">김수경</div><div class="tl-action">여의도동 아파트를 유재석에게 대물변제로 양도하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2016-04-01</div><div class="tl-id">bh14</div><div class="tl-body">우방캐피탈</div><div class="tl-action">공장용지에 대한 임의경매를 신청하였다</div></div>
|
|
<div class="tl-item gap-item"><div class="tl-date">2017-08-23</div><div class="tl-id">bh15</div><div class="tl-body">민영우</div><div class="tl-action">개포동 아파트 경매에서 5억원에 최고가 매수신고를 하였…</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="tl-item"><div class="tl-date">2017-08-31</div><div class="tl-id">bh16</div><div class="tl-body">김수경</div><div class="tl-action">박수용과 개포동 아파트 매매계약을 체결하였다 (대금 4…</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-left"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2017-09-15</div><div class="tl-id">bh17</div><div class="tl-body">박수용</div><div class="tl-action">하나은행에 개포동 아파트 근저당 피담보채무 5천만원을 …</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-16</div><div class="tl-id">bh18</div><div class="tl-body">김수철</div><div class="tl-action">김수경에게 3억원을 대여하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-16</div><div class="tl-id">bh19</div><div class="tl-body">김수경</div><div class="tl-action">우리은행에 김포시 토지 근저당 피담보채무 3억원을 변제…</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-17</div><div class="tl-id">bh20</div><div class="tl-body">김수경</div><div class="tl-action">개포동 아파트를 박수용에게 소유권이전등기하였다</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-right"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-reverse">
|
|
<div class="tl-item"><div class="tl-date">2017-09-24</div><div class="tl-id">bh21</div><div class="tl-body">김수경</div><div class="tl-action">김포시 토지를 김수철에게 3억원에 매도하는 계약을 체결…</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-25</div><div class="tl-id">bh22</div><div class="tl-body">김수경</div><div class="tl-action">김포시 토지를 김수철에게 소유권이전등기하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-25</div><div class="tl-id">bh23</div><div class="tl-body">박수용</div><div class="tl-action">최상수에게 개포동 아파트 근저당 피담보채무 1억원을 변…</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-26</div><div class="tl-id">bh24</div><div class="tl-body">김수철</div><div class="tl-action">최종찬에게 김포시 토지에 채권최고액 3억원의 근저당권을…</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-left"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2017-11-11</div><div class="tl-id">bh25</div><div class="tl-body">박수용</div><div class="tl-action">신용보증기금에 가압류채무 2천만원을 변제하였다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2018-01-31</div><div class="tl-id">bh26</div><div class="tl-body">우방캐피탈</div><div class="tl-action">공장용지 경매에서 9억 6천만원을 배당받았다</div></div>
|
|
<div class="tl-item"><div class="tl-date">2018-07-31</div><div class="tl-id">bh27</div><div class="tl-body">박수용</div><div class="tl-action">국민은행에 개포동 아파트 근저당 피담보채무 중 3천만원…</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 3 -->
|
|
<h2>3. 인과관계도 (Causality Flow)</h2>
|
|
<div class="section">
|
|
<div class="dag-page">
|
|
<script type="application/json" class="dag-edges-data">[["bh1", "bh2"], ["bh2", "bh3"], ["bh5", "bh6"], ["bh2", "bh7"], ["bh7", "bh8"], ["bh8", "bh9"], ["bh9", "bh10"], ["bh10", "bh12"], ["bh9", "bh13"], ["bh9", "bh14"], ["bh15", "bh16"], ["bh16", "bh17"], ["bh18", "bh19"], ["bh16", "bh20"], ["bh19", "bh21"], ["bh21", "bh22"], ["bh16", "bh23"], ["bh22", "bh24"], ["bh16", "bh25"], ["bh14", "bh26"], ["bh20", "bh27"]]</script>
|
|
<div class="dag-layer">
|
|
<div class="dag-node" data-node-id="bh1"><div class="dag-node-id">bh1</div><div class="dag-node-body">김수경: 우방캐피탈에 용인시 공장용지 및 공장…</div></div>
|
|
<div class="dag-node" data-node-id="bh11"><div class="dag-node-id">bh11</div><div class="dag-node-body">박수용: 김수경에게 3천만원을 대여하였다</div></div>
|
|
<div class="dag-node dag-gap" data-node-id="bh15"><div class="dag-node-id">bh15</div><div class="dag-node-body">민영우: 개포동 아파트 경매에서 5억원에 최고…</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="dag-node" data-node-id="bh18"><div class="dag-node-id">bh18</div><div class="dag-node-body">김수철: 김수경에게 3억원을 대여하였다</div></div>
|
|
<div class="dag-node" data-node-id="bh4"><div class="dag-node-id">bh4</div><div class="dag-node-body">김수경: 연홍보에게 개포동 아파트를 보증금 1…</div></div>
|
|
<div class="dag-node" data-node-id="bh5"><div class="dag-node-id">bh5</div><div class="dag-node-body">우방신용: 개성금속의 신한은행 대출 2억원에 대…</div></div>
|
|
</div>
|
|
<div class="dag-layer">
|
|
<div class="dag-node" data-node-id="bh2"><div class="dag-node-id">bh2</div><div class="dag-node-body">우방캐피탈: 개성금속에게 10억원을 대출하였다</div></div>
|
|
<div class="dag-node" data-node-id="bh16"><div class="dag-node-id">bh16</div><div class="dag-node-body">김수경: 박수용과 개포동 아파트 매매계약을 체…</div></div>
|
|
<div class="dag-node" data-node-id="bh19"><div class="dag-node-id">bh19</div><div class="dag-node-body">김수경: 우리은행에 김포시 토지 근저당 피담보…</div></div>
|
|
<div class="dag-node" data-node-id="bh6"><div class="dag-node-id">bh6</div><div class="dag-node-body">김수경: 우방신용의 대위변제로 인한 구상채무를…</div></div>
|
|
</div>
|
|
<div class="dag-layer">
|
|
<div class="dag-node" data-node-id="bh3"><div class="dag-node-id">bh3</div><div class="dag-node-body">김수경: 개성금속의 우방캐피탈에 대한 대출채무…</div></div>
|
|
<div class="dag-node dag-gap" data-node-id="bh7"><div class="dag-node-id">bh7</div><div class="dag-node-body">김수경: 대출만기일에 이자를 변제하고 대출기한…</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="dag-node" data-node-id="bh17"><div class="dag-node-id">bh17</div><div class="dag-node-body">박수용: 하나은행에 개포동 아파트 근저당 피담…</div></div>
|
|
<div class="dag-node" data-node-id="bh20"><div class="dag-node-id">bh20</div><div class="dag-node-body">김수경: 개포동 아파트를 박수용에게 소유권이전…</div></div>
|
|
<div class="dag-node" data-node-id="bh23"><div class="dag-node-id">bh23</div><div class="dag-node-body">박수용: 최상수에게 개포동 아파트 근저당 피담…</div></div>
|
|
<div class="dag-node" data-node-id="bh25"><div class="dag-node-id">bh25</div><div class="dag-node-body">박수용: 신용보증기금에 가압류채무 2천만원을 …</div></div>
|
|
<div class="dag-node" data-node-id="bh21"><div class="dag-node-id">bh21</div><div class="dag-node-body">김수경: 김포시 토지를 김수철에게 3억원에 매…</div></div>
|
|
</div>
|
|
<div class="dag-layer">
|
|
<div class="dag-node dag-gap" data-node-id="bh8"><div class="dag-node-id">bh8</div><div class="dag-node-body">우방캐피탈: 개성금속의 대출기한 연장 요청을 거절…</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="dag-node" data-node-id="bh27"><div class="dag-node-id">bh27</div><div class="dag-node-body">박수용: 국민은행에 개포동 아파트 근저당 피담…</div></div>
|
|
<div class="dag-node" data-node-id="bh22"><div class="dag-node-id">bh22</div><div class="dag-node-body">김수경: 김포시 토지를 김수철에게 소유권이전등…</div></div>
|
|
</div>
|
|
<div class="dag-layer">
|
|
<div class="dag-node dag-gap" data-node-id="bh9"><div class="dag-node-id">bh9</div><div class="dag-node-body">개성금속: 부도를 내었다</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="dag-node" data-node-id="bh24"><div class="dag-node-id">bh24</div><div class="dag-node-body">김수철: 최종찬에게 김포시 토지에 채권최고액 …</div></div>
|
|
</div>
|
|
<div class="dag-layer">
|
|
<div class="dag-node dag-gap" data-node-id="bh10"><div class="dag-node-id">bh10</div><div class="dag-node-body">우방신용: 신한은행에 개성금속의 대출원리금 2억…</div><span class="gap-badge">[증거공백]</span></div>
|
|
<div class="dag-node" data-node-id="bh13"><div class="dag-node-id">bh13</div><div class="dag-node-body">김수경: 여의도동 아파트를 유재석에게 대물변제…</div></div>
|
|
<div class="dag-node" data-node-id="bh14"><div class="dag-node-id">bh14</div><div class="dag-node-body">우방캐피탈: 공장용지에 대한 임의경매를 신청하였다</div></div>
|
|
</div>
|
|
<div class="dag-layer">
|
|
<div class="dag-node" data-node-id="bh12"><div class="dag-node-id">bh12</div><div class="dag-node-body">우방신용: 공장용지에 대한 가압류를 신청하고 등…</div></div>
|
|
<div class="dag-node" data-node-id="bh26"><div class="dag-node-id">bh26</div><div class="dag-node-body">우방캐피탈: 공장용지 경매에서 9억 6천만원을 배…</div></div>
|
|
</div>
|
|
<svg class="dag-svg"></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 4 -->
|
|
<h2>4. 사실원장 타임라인 (Fact Ledger)</h2>
|
|
<div class="section">
|
|
<div class="serpentine-timeline">
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2013-10-07</div><div class="tl-id">F-001</div><div class="tl-action">우방캐피탈에 용인시 공장용지 및 공장건물에 대한 근저당…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2013-10-08</div><div class="tl-id">F-002</div><div class="tl-action">개성금속에게 10억원을 대출하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2013-10-08</div><div class="tl-id">F-003</div><div class="tl-action">개성금속의 우방캐피탈에 대한 대출채무를 연대보증하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2014-04-07</div><div class="tl-id">F-004</div><div class="tl-action">연홍보에게 개포동 아파트를 보증금 1억원에 임대하는 계…</div><div class="tl-cred cred-high">high</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-right"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-reverse">
|
|
<div class="tl-item"><div class="tl-date">2014-12-01</div><div class="tl-id">F-005</div><div class="tl-action">개성금속의 신한은행 대출 2억원에 대한 신용보증서를 발…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2014-12-01</div><div class="tl-id">F-006</div><div class="tl-action">우방신용의 대위변제로 인한 구상채무를 연대보증하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2015-11-30</div><div class="tl-id">F-007</div><div class="tl-action">대출만기일에 이자를 변제하고 대출기한 연장을 요청하였다</div><div class="tl-cred cred-low">low</div></div>
|
|
<div class="tl-item"><div class="tl-date">2015-11-30</div><div class="tl-id">F-008</div><div class="tl-action">개성금속의 대출기한 연장 요청을 거절하였다</div><div class="tl-cred cred-low">low</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-left"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2015-12-01</div><div class="tl-id">F-009</div><div class="tl-action">부도를 내었다</div><div class="tl-cred cred-low">low</div></div>
|
|
<div class="tl-item"><div class="tl-date">2015-12-01</div><div class="tl-id">F-010</div><div class="tl-action">신한은행에 개성금속의 대출원리금 2억 2천만원을 대위변…</div><div class="tl-cred cred-low">low</div></div>
|
|
<div class="tl-item"><div class="tl-date">2015-12-10</div><div class="tl-id">F-011</div><div class="tl-action">김수경에게 3천만원을 대여하였다</div><div class="tl-cred cred-medium">medium</div></div>
|
|
<div class="tl-item"><div class="tl-date">2015-12-22</div><div class="tl-id">F-012</div><div class="tl-action">공장용지에 대한 가압류를 신청하고 등기를 마쳤다</div><div class="tl-cred cred-medium">medium</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-right"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-reverse">
|
|
<div class="tl-item"><div class="tl-date">2016-01-31</div><div class="tl-id">F-013</div><div class="tl-action">여의도동 아파트를 유재석에게 대물변제로 양도하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-08-23</div><div class="tl-id">F-015</div><div class="tl-action">개포동 아파트 경매에서 5억원에 최고가 매수신고를 하였…</div><div class="tl-cred cred-low">low</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-08-31</div><div class="tl-id">F-016</div><div class="tl-action">박수용과 개포동 아파트 매매계약을 체결하였다 (대금 4…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-15</div><div class="tl-id">F-017</div><div class="tl-action">하나은행에 개포동 아파트 근저당 피담보채무 5천만원을 …</div><div class="tl-cred cred-high">high</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-left"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2017-09-16</div><div class="tl-id">F-018</div><div class="tl-action">김수경에게 3억원을 대여하였다</div><div class="tl-cred cred-medium">medium</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-16</div><div class="tl-id">F-019</div><div class="tl-action">우리은행에 김포시 토지 근저당 피담보채무 3억원을 변제…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-17</div><div class="tl-id">F-020</div><div class="tl-action">개포동 아파트를 박수용에게 소유권이전등기하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-24</div><div class="tl-id">F-021</div><div class="tl-action">김포시 토지를 김수철에게 3억원에 매도하는 계약을 체결…</div><div class="tl-cred cred-high">high</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-right"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-reverse">
|
|
<div class="tl-item"><div class="tl-date">2017-09-25</div><div class="tl-id">F-022</div><div class="tl-action">김포시 토지를 김수철에게 소유권이전등기하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-25</div><div class="tl-id">F-023</div><div class="tl-action">최상수에게 개포동 아파트 근저당 피담보채무 1억원을 변…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-09-26</div><div class="tl-id">F-024</div><div class="tl-action">최종찬에게 김포시 토지에 채권최고액 3억원의 근저당권을…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2017-11-11</div><div class="tl-id">F-025</div><div class="tl-action">신용보증기금에 가압류채무 2천만원을 변제하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
</div>
|
|
<div class="tl-arrow-down tl-arrow-left"><div class="tl-arrow-shaft"></div><div class="tl-arrow-head">▼</div></div>
|
|
<div class="tl-row tl-row-forward">
|
|
<div class="tl-item"><div class="tl-date">2018-01-31</div><div class="tl-id">F-026</div><div class="tl-action">공장용지 경매에서 9억 6천만원을 배당받았다</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">2018-07-31</div><div class="tl-id">F-027</div><div class="tl-action">국민은행에 개포동 아파트 근저당 피담보채무 중 3천만원…</div><div class="tl-cred cred-high">high</div></div>
|
|
<div class="tl-item"><div class="tl-date">미상</div><div class="tl-id">F-014</div><div class="tl-action">공장용지에 대한 임의경매를 신청하였다</div><div class="tl-cred cred-high">high</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section 5 -->
|
|
<h2>5. 증거 매핑표 (Evidence Index)</h2>
|
|
<div class="section">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>증거번호</th>
|
|
<th>문서유형</th>
|
|
<th>제목</th>
|
|
<th>핵심사실</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>E-001</td>
|
|
<td>등기부등본</td>
|
|
<td>등기사항전부증명서(말소사항 포함) - 토지</td>
|
|
<td>김수경→김수철 소유권이전(2017.9.25), 최종찬 근저당권 3억원</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-002</td>
|
|
<td>법원문서</td>
|
|
<td>배당표</td>
|
|
<td>용인시 공장용지, 우방캐피탈 9.6억 배당(2018.1.31)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-003</td>
|
|
<td>영수증</td>
|
|
<td>영수증</td>
|
|
<td>박수용이 2017.9.25 최상수에게 1억원 변제</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-004</td>
|
|
<td>감정평가서</td>
|
|
<td>감정평가서</td>
|
|
<td>2016.1.31 및 2017.8.31 기준 11억원 평가</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-005</td>
|
|
<td>계약서</td>
|
|
<td>신용보증약정서(개별거래용)</td>
|
|
<td>보증원금 2억원, 기간 2014.12.1~2016.11.30, 김수경 연대보증</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-006</td>
|
|
<td>영수증</td>
|
|
<td>영수증</td>
|
|
<td>박수용이 2017.11.11 신용보증기금에 2천만원 변제</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-007</td>
|
|
<td>등기부등본</td>
|
|
<td>등기사항전부증명서(말소사항 포함) - 집합건물</td>
|
|
<td>김수경→박수용 소유권이전(2017.9.17, 매매 4.3억), 국민은행 근저당권</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-008</td>
|
|
<td>금융기록</td>
|
|
<td>대출명세표</td>
|
|
<td>개성금속 10억원 대출(2013.10.8), 만기 2015.11.30, 연체이자 2.6억(26개월)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-009</td>
|
|
<td>계약서</td>
|
|
<td>근저당권설정계약서</td>
|
|
<td>채권최고액 15억원, 담보: 용인시 공장용지+공장건물</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-010</td>
|
|
<td>확인서</td>
|
|
<td>채무잔액확인서</td>
|
|
<td>2018.8.1 현재 잔액 1억원 (2018.7.31 3천만원 납입)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-011</td>
|
|
<td>계약서</td>
|
|
<td>부동산임대차계약서</td>
|
|
<td>보증금 1억원, 기간 2014.4.27~54개월, 확정일자 2017.9.25</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-012</td>
|
|
<td>계약서</td>
|
|
<td>대출거래약정서 (기업용)</td>
|
|
<td>10억원, 이자 월0.5%, 지연손해금 월1%, 만기 2015.11.30, 김수경 연대보증</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-013</td>
|
|
<td>법인등기부등본</td>
|
|
<td>등기사항전부증명서(현재사항)</td>
|
|
<td>대표이사 전영표, 본점 서울 종로구 내수로 167</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-014</td>
|
|
<td>등기부등본</td>
|
|
<td>등기사항전부증명서(말소사항 포함) - 집합건물</td>
|
|
<td>김수경→유재석 소유권이전(2016.1.31, 매매 4억원)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-015</td>
|
|
<td>주민등록등본</td>
|
|
<td>주민등록표 (등본)</td>
|
|
<td>개포동 주공아파트 203동 202호 거주, 전입일 2014.4.28</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-016</td>
|
|
<td>확인서</td>
|
|
<td>확인서</td>
|
|
<td>피담보채권 3억원, 2017.9.16 전액 변제</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-017</td>
|
|
<td>계약서</td>
|
|
<td>不動産賣買契約書</td>
|
|
<td>매매대금 4.3억원, 채무인수 조건, 중도금 3천만원은 대여금 상계</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-018</td>
|
|
<td>확인서</td>
|
|
<td>변제확인서</td>
|
|
<td>피담보채권 5천만원, 2017.9.15 박수용이 전액 변제</td>
|
|
</tr>
|
|
<tr>
|
|
<td>E-019</td>
|
|
<td>등기부등본</td>
|
|
<td>등기사항전부증명서(말소사항 포함) - 토지</td>
|
|
<td>김수경 소유, 임의경매로 민정기에게 소유권이전(2018.1.20)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
/* ── DAG 엣지(화살표) 렌더링 ── */
|
|
function drawDAGEdges() {
|
|
var pages = document.querySelectorAll('.dag-page');
|
|
pages.forEach(function(page) {
|
|
var svg = page.querySelector('.dag-svg');
|
|
if (!svg) return;
|
|
|
|
/* 기존 내용 제거 */
|
|
while (svg.firstChild) svg.removeChild(svg.firstChild);
|
|
|
|
/* SVG 크기를 컨테이너에 맞춤 */
|
|
svg.setAttribute('width', page.scrollWidth);
|
|
svg.setAttribute('height', page.scrollHeight);
|
|
|
|
/* 엣지 데이터 읽기 */
|
|
var script = page.querySelector('.dag-edges-data');
|
|
if (!script) return;
|
|
var edges = JSON.parse(script.textContent);
|
|
if (!edges.length) return;
|
|
|
|
var ns = 'http://www.w3.org/2000/svg';
|
|
var pageRect = page.getBoundingClientRect();
|
|
|
|
edges.forEach(function(edge) {
|
|
var srcEl = page.querySelector('[data-node-id="' + edge[0] + '"]');
|
|
var tgtEl = page.querySelector('[data-node-id="' + edge[1] + '"]');
|
|
if (!srcEl || !tgtEl) return;
|
|
|
|
var sR = srcEl.getBoundingClientRect();
|
|
var tR = tgtEl.getBoundingClientRect();
|
|
|
|
var x1 = sR.left + sR.width / 2 - pageRect.left;
|
|
var y1 = sR.bottom - pageRect.top;
|
|
var x2 = tR.left + tR.width / 2 - pageRect.left;
|
|
var y2 = tR.top - pageRect.top;
|
|
|
|
var midY = (y1 + y2) / 2;
|
|
var path = document.createElementNS(ns, 'path');
|
|
path.setAttribute('d',
|
|
'M ' + x1 + ' ' + y1 +
|
|
' C ' + x1 + ' ' + midY + ', ' +
|
|
x2 + ' ' + midY + ', ' +
|
|
x2 + ' ' + y2);
|
|
path.setAttribute('fill', 'none');
|
|
path.setAttribute('stroke', '#60a5fa');
|
|
path.setAttribute('stroke-width', '2');
|
|
path.setAttribute('marker-end', 'url(#dag-arrow)');
|
|
svg.appendChild(path);
|
|
});
|
|
});
|
|
}
|
|
|
|
/* 로드 완료 후 엣지 그리기 (약간의 지연으로 레이아웃 안정화) */
|
|
window.addEventListener('load', function() {
|
|
setTimeout(drawDAGEdges, 150);
|
|
});
|
|
window.addEventListener('resize', function() {
|
|
drawDAGEdges();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |