471 lines
24 KiB
HTML
471 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="ko"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>정산 및 결제 관리 - KINTEX AI System</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Geist:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary-container": "#0066b3",
|
|
"on-primary-container": "#d2e3ff",
|
|
"on-primary-fixed": "#001c38",
|
|
"secondary-fixed-dim": "#c9bfff",
|
|
"on-tertiary-fixed-variant": "#005236",
|
|
"on-error-container": "#93000a",
|
|
"on-primary": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"inverse-surface": "#293041",
|
|
"surface-container-highest": "#dbe2f9",
|
|
"primary": "#004e8b",
|
|
"background": "#f9f9ff",
|
|
"on-surface": "#141b2c",
|
|
"surface-container-high": "#e0e8ff",
|
|
"on-tertiary-fixed": "#002113",
|
|
"surface-container-low": "#f1f3ff",
|
|
"tertiary": "#00583b",
|
|
"surface-container": "#e9edff",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed-variant": "#004881",
|
|
"primary-fixed": "#d3e4ff",
|
|
"primary-fixed-dim": "#a2c9ff",
|
|
"on-background": "#141b2c",
|
|
"outline": "#717782",
|
|
"tertiary-fixed": "#8ef7c4",
|
|
"on-tertiary-container": "#8ef7c3",
|
|
"surface-container-lowest": "#ffffff",
|
|
"secondary-fixed": "#e5deff",
|
|
"secondary-container": "#6d4aff",
|
|
"on-secondary-container": "#f3edff",
|
|
"inverse-primary": "#a2c9ff",
|
|
"surface": "#f9f9ff",
|
|
"inverse-on-surface": "#edf0ff",
|
|
"on-secondary-fixed": "#1b0063",
|
|
"surface-variant": "#dbe2f9",
|
|
"on-surface-variant": "#414751",
|
|
"error-container": "#ffdad6",
|
|
"tertiary-container": "#00734e",
|
|
"outline-variant": "#c1c7d3",
|
|
"secondary": "#5427e6",
|
|
"surface-dim": "#d2daf0",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-secondary-fixed-variant": "#4500d8",
|
|
"surface-tint": "#0060a9",
|
|
"on-tertiary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"tertiary-fixed-dim": "#72daa9"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"gutter": "16px",
|
|
"base": "4px",
|
|
"container-padding": "24px",
|
|
"stack-md": "16px",
|
|
"stack-lg": "24px",
|
|
"stack-sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"label-xs": ["Geist"],
|
|
"headline-md": ["Inter"],
|
|
"display-lg-mobile": ["Inter"],
|
|
"label-md": ["Geist"],
|
|
"body-sm": ["Inter"],
|
|
"title-sm": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"display-lg": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"label-xs": ["11px", {"lineHeight": "14px", "fontWeight": "500"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"display-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.02em", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"title-sm": ["18px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "700"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.zebra-table tr:nth-child(even) {
|
|
background-color: #f1f3ff;
|
|
}
|
|
.sticky-header th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body-base">
|
|
<!-- Side Navigation -->
|
|
<aside class="h-screen w-64 flex flex-col fixed left-0 top-0 border-r border-outline-variant bg-surface-container-lowest overflow-y-auto">
|
|
<div class="px-6 py-8">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">KINTEX AI</h1>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Exhibition Management</p>
|
|
</div>
|
|
<nav class="flex-1 px-3 space-y-1">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg group" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-label-md text-label-md">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">group</span>
|
|
<span class="font-label-md text-label-md">User Management</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">settings_ethernet</span>
|
|
<span class="font-label-md text-label-md">Common Code</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">grid_view</span>
|
|
<span class="font-label-md text-label-md">Exhibition Layout</span>
|
|
</a>
|
|
<!-- Active Tab: Settlement -->
|
|
<a class="flex items-center gap-3 px-4 py-3 bg-primary-container text-on-primary-container font-semibold rounded-lg scale-[0.99] transition-transform" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">payments</span>
|
|
<span class="font-label-md text-label-md">정산 관리</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high transition-colors rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-label-md text-label-md">Settings</span>
|
|
</a>
|
|
</nav>
|
|
<div class="p-4 mt-auto border-t border-outline-variant">
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<span class="font-label-md text-label-md">Help Center</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-high rounded-lg" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-label-md text-label-md">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="ml-64 min-h-screen flex flex-col">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="h-16 w-full sticky top-0 z-40 bg-surface border-b border-outline-variant flex items-center justify-between px-gutter">
|
|
<div class="flex items-center gap-2">
|
|
<nav aria-label="Breadcrumb" class="flex text-on-surface-variant font-label-md text-label-md">
|
|
<span class="hover:text-primary cursor-pointer">정산 관리</span>
|
|
<span class="mx-2">/</span>
|
|
<span class="text-on-surface font-bold">정산 및 결제 대시보드</span>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative flex items-center px-3 py-1.5 bg-surface-container-low rounded-lg border border-outline-variant">
|
|
<span class="material-symbols-outlined text-on-surface-variant mr-2">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-48" placeholder="결제 내역 검색..." type="text"/>
|
|
</div>
|
|
<button class="material-symbols-outlined p-2 text-on-surface-variant hover:bg-surface-container rounded-full transition-colors">notifications</button>
|
|
<div class="h-8 w-px bg-outline-variant"></div>
|
|
<div class="flex items-center gap-3 pl-2">
|
|
<div class="text-right">
|
|
<p class="font-label-md text-label-md text-on-surface">Admin Profile</p>
|
|
<p class="text-[10px] text-on-surface-variant uppercase tracking-wider">System Administrator</p>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-primary-fixed border border-primary flex items-center justify-center overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A professional headshot of a corporate administrator in a modern office environment, soft cinematic lighting, neutral business professional attire, confident and reliable expression, sharp focus with a slight blur on the background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC0GA9qTc_RwaxFjjm6l8qn6GFfZNsIMaTBs9XMnAoDTsrGJbeLA7qk5x1LyltyCBlW2GJSzhoqH-9eAx5WALQdOul6HEsqlnsPqXISgBpmfVI4ny62_TBFhACXXaq_JDydAOtDzFCzaNKkO6Xam6-us0LelMo8MpfyvErUnRF01tUkwBOOH9qxk_EQprmQyylrH_PZpmIhuC2BxEGnHDNETQ1TYnocKa5V_vZOGl0m0sUlwtrUYO0Vw5SXsSxIYD4prtAHLaFWgTE"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Page Content -->
|
|
<div class="p-container-padding space-y-6">
|
|
<div class="flex items-end justify-between">
|
|
<div>
|
|
<h2 class="font-title-sm text-title-sm text-on-surface">정산 및 결제 관리</h2>
|
|
<p class="text-body-sm text-on-surface-variant">KINTEX AI 시스템의 현재 재무 상태와 결제 일정을 한눈에 확인하십시오.</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="px-4 py-2 bg-surface-container-highest text-primary font-label-md text-label-md rounded-lg border border-outline-variant hover:bg-primary-fixed transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">download</span>
|
|
엑셀 다운로드
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary text-on-primary font-label-md text-label-md rounded-lg shadow-md hover:bg-primary-container transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-sm">add</span>
|
|
신규 청구 생성
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- KPI Section -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- KPI 1 -->
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant border-l-4 border-l-primary flex flex-col justify-between h-32 transition-transform hover:scale-[1.02]">
|
|
<div class="flex justify-between items-start">
|
|
<span class="font-label-md text-label-md text-on-surface-variant">청구 총액</span>
|
|
<span class="material-symbols-outlined text-primary">account_balance_wallet</span>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<p class="font-display-lg text-display-lg text-on-surface">₩64,500,000</p>
|
|
<p class="text-xs text-on-surface-variant mt-1">총 4건의 청구 항목</p>
|
|
</div>
|
|
</div>
|
|
<!-- KPI 2 -->
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant border-l-4 border-l-tertiary flex flex-col justify-between h-32 transition-transform hover:scale-[1.02]">
|
|
<div class="flex justify-between items-start">
|
|
<span class="font-label-md text-label-md text-on-surface-variant">납부 완료</span>
|
|
<span class="material-symbols-outlined text-tertiary">check_circle</span>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<p class="font-display-lg text-display-lg text-on-surface">₩38,700,000</p>
|
|
<div class="flex items-center gap-1 mt-1">
|
|
<div class="w-full bg-surface-container-high h-1 rounded-full overflow-hidden">
|
|
<div class="bg-tertiary h-full w-[60%]"></div>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-tertiary">60%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- KPI 3 -->
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant border-l-4 border-l-error flex flex-col justify-between h-32 transition-transform hover:scale-[1.02]">
|
|
<div class="flex justify-between items-start">
|
|
<span class="font-label-md text-label-md text-on-surface-variant">미납 금액</span>
|
|
<span class="material-symbols-outlined text-error">warning</span>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<p class="font-display-lg text-display-lg text-error">₩25,800,000</p>
|
|
<p class="text-xs text-error mt-1">즉시 확인이 필요한 항목</p>
|
|
</div>
|
|
</div>
|
|
<!-- KPI 4 -->
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant border-l-4 border-l-secondary flex flex-col justify-between h-32 transition-transform hover:scale-[1.02]">
|
|
<div class="flex justify-between items-start">
|
|
<span class="font-label-md text-label-md text-on-surface-variant">다음 납부 마감</span>
|
|
<span class="material-symbols-outlined text-secondary">calendar_today</span>
|
|
</div>
|
|
<div class="mt-auto flex items-end justify-between">
|
|
<div>
|
|
<p class="font-display-lg text-display-lg text-on-surface">2026.07.15</p>
|
|
<p class="text-xs text-on-surface-variant mt-1">중도금 (30%)</p>
|
|
</div>
|
|
<span class="px-3 py-1 bg-[#FDB022] text-white font-bold text-label-md rounded-full mb-1">D-9</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Main Content Split -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Left: Table (2/3) -->
|
|
<div class="lg:col-span-2 bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden flex flex-col">
|
|
<div class="p-5 border-b border-outline-variant flex items-center justify-between">
|
|
<h3 class="font-title-sm text-title-sm text-on-surface">납부 일정 및 내역</h3>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs text-on-surface-variant">상태 필터:</span>
|
|
<select class="text-xs border-outline-variant rounded-md py-1 px-2 focus:ring-primary focus:border-primary">
|
|
<option>전체 보기</option>
|
|
<option>완료</option>
|
|
<option>미납</option>
|
|
<option>대기</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto flex-1 max-h-[400px]">
|
|
<table class="w-full text-left zebra-table border-collapse">
|
|
<thead class="sticky-header bg-surface-container-low">
|
|
<tr>
|
|
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant border-b border-outline-variant">항목</th>
|
|
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant border-b border-outline-variant">금액</th>
|
|
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant border-b border-outline-variant">기한</th>
|
|
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant border-b border-outline-variant">상태</th>
|
|
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant border-b border-outline-variant text-right">액션</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-body-base divide-y divide-outline-variant">
|
|
<tr>
|
|
<td class="px-6 py-5 font-semibold text-on-surface">계약금 (20%)</td>
|
|
<td class="px-6 py-5">₩12,900,000</td>
|
|
<td class="px-6 py-5 font-label-xs text-label-xs">2026.06.01</td>
|
|
<td class="px-6 py-5">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
|
|
완료
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-5 text-right">
|
|
<button class="text-primary hover:underline font-label-md text-label-md">[영수증]</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-5 font-semibold text-on-surface">중도금 (30%)</td>
|
|
<td class="px-6 py-5">₩19,350,000</td>
|
|
<td class="px-6 py-5 font-label-xs text-label-xs text-error">2026.07.15</td>
|
|
<td class="px-6 py-5">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 border border-red-200">
|
|
미납
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-5 text-right">
|
|
<button class="bg-primary text-on-primary px-3 py-1 rounded text-xs hover:bg-primary-container transition-colors">[결제]</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-5 font-semibold text-on-surface">잔금 (30%) + 예치금 (15%)</td>
|
|
<td class="px-6 py-5">₩29,025,000</td>
|
|
<td class="px-6 py-5 font-label-xs text-label-xs">2026.08.10</td>
|
|
<td class="px-6 py-5">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200">
|
|
대기
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-5 text-right text-on-surface-variant">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-5 font-semibold text-on-surface">유틸리티 추가 비용</td>
|
|
<td class="px-6 py-5">₩3,225,000</td>
|
|
<td class="px-6 py-5 font-label-xs text-label-xs">2026.08.20</td>
|
|
<td class="px-6 py-5">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 border border-gray-200">
|
|
대기
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-5 text-right text-on-surface-variant">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Right: Actions (1/3) -->
|
|
<div class="space-y-6">
|
|
<!-- Section 1: Payment Method -->
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant">
|
|
<h4 class="font-label-md text-label-md text-on-surface-variant mb-4">결제 수단 선택</h4>
|
|
<div class="grid grid-cols-3 gap-2 bg-surface-container-low p-1 rounded-lg">
|
|
<button class="bg-surface-container-lowest text-primary font-bold py-2 rounded shadow-sm text-xs border border-outline-variant">카드</button>
|
|
<button class="text-on-surface-variant py-2 rounded text-xs hover:bg-surface-container transition-colors">계좌이체</button>
|
|
<button class="text-on-surface-variant py-2 rounded text-xs hover:bg-surface-container transition-colors">세금계산서</button>
|
|
</div>
|
|
<div class="mt-4 p-4 border border-outline-variant rounded-lg border-dashed text-center">
|
|
<span class="material-symbols-outlined text-on-surface-variant text-3xl">add_card</span>
|
|
<p class="text-xs text-on-surface-variant mt-1">새로운 카드 등록</p>
|
|
</div>
|
|
</div>
|
|
<!-- Section 2: Deposit Summary -->
|
|
<div class="bg-surface-container-lowest p-5 rounded-xl border border-outline-variant">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="font-label-md text-label-md text-on-surface-variant">예치금 정산 요약</h4>
|
|
<span class="material-symbols-outlined text-sm text-primary">info</span>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-on-surface-variant">총 예치금</span>
|
|
<span class="font-bold text-on-surface">₩9,600,000</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-on-surface-variant">실사용 금액</span>
|
|
<span class="font-bold text-on-surface">₩7,100,000</span>
|
|
</div>
|
|
<div class="h-px bg-outline-variant w-full my-2"></div>
|
|
<div class="flex justify-between items-center text-title-sm">
|
|
<span class="text-tertiary">환급 예정액</span>
|
|
<span class="font-bold text-tertiary">₩2,500,000</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Section 3: Big CTA -->
|
|
<button class="w-full bg-[#0066B3] hover:bg-primary-container text-white font-bold py-4 rounded-xl shadow-lg transition-all flex items-center justify-center gap-3">
|
|
<span class="material-symbols-outlined">receipt_long</span>
|
|
세금계산서 발행
|
|
</button>
|
|
<!-- AI Suggestion Box -->
|
|
<div class="p-4 border border-primary/20 bg-primary/5 rounded-xl relative overflow-hidden">
|
|
<div class="absolute top-0 left-0 w-1 h-full bg-secondary-container"></div>
|
|
<div class="flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-secondary-container text-lg">auto_awesome</span>
|
|
<div>
|
|
<h5 class="text-xs font-bold text-secondary-container">AI 지출 분석</h5>
|
|
<p class="text-[11px] text-on-surface-variant mt-1 leading-relaxed">지난 행사 대비 <b>유틸리티 비용이 15% 절감</b>되었습니다. 예치금 환급 신청 시 계좌 정보를 다시 한번 확인하십시오.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Section: Detailed Table -->
|
|
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant overflow-hidden">
|
|
<div class="p-5 border-b border-outline-variant">
|
|
<h3 class="font-title-sm text-title-sm text-on-surface">사후 정산 세부 내역</h3>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead class="bg-surface-container-low">
|
|
<tr>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">항목 코드</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">세부 내역</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">단가/수량</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">합계 금액</th>
|
|
<th class="px-6 py-3 font-label-md text-label-md text-on-surface-variant">정산 상태</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant">
|
|
<tr class="hover:bg-surface-container-low transition-colors">
|
|
<td class="px-6 py-4 text-xs font-mono text-on-surface-variant">UT-2601</td>
|
|
<td class="px-6 py-4 font-semibold">전기사용료 (Primary Line)</td>
|
|
<td class="px-6 py-4 text-body-sm">₩1,500 / 1,200kWh</td>
|
|
<td class="px-6 py-4 font-bold">₩1,800,000</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-xs text-on-surface-variant flex items-center gap-1">
|
|
<span class="w-2 h-2 rounded-full bg-tertiary"></span> 산정 완료
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-low transition-colors">
|
|
<td class="px-6 py-4 text-xs font-mono text-on-surface-variant">WM-2605</td>
|
|
<td class="px-6 py-4 font-semibold">폐기물 처리비 (산업폐기물 포함)</td>
|
|
<td class="px-6 py-4 text-body-sm">₩50,000 / 15.5t</td>
|
|
<td class="px-6 py-4 font-bold">₩775,000</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-xs text-on-surface-variant flex items-center gap-1">
|
|
<span class="w-2 h-2 rounded-full bg-tertiary"></span> 산정 완료
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-surface-container-low transition-colors">
|
|
<td class="px-6 py-4 text-xs font-mono text-on-surface-variant">CS-2602</td>
|
|
<td class="px-6 py-4 font-semibold">청소 용역비 (야간/상설)</td>
|
|
<td class="px-6 py-4 text-body-sm">₩325,000 / 2회</td>
|
|
<td class="px-6 py-4 font-bold">₩650,000</td>
|
|
<td class="px-6 py-4">
|
|
<span class="text-xs text-on-surface-variant flex items-center gap-1">
|
|
<span class="w-2 h-2 rounded-full bg-outline"></span> 산정 중
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-4 bg-surface-container text-right">
|
|
<span class="text-body-sm text-on-surface-variant">상기 내역은 실제 사용량에 따라 변동될 수 있습니다.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="mt-auto p-gutter text-center border-t border-outline-variant bg-surface-container-lowest">
|
|
<p class="text-[11px] text-on-surface-variant">© 2024 KINTEX AI Exhibition Management System. All Rights Reserved. Managed by Financial Infrastructure Div.</p>
|
|
</footer>
|
|
</main>
|
|
<!-- Simple Interactivity for demo -->
|
|
<script>
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
this.classList.add('opacity-80');
|
|
setTimeout(() => this.classList.remove('opacity-80'), 100);
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |