f6e127dfb8
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
161 lines
4.3 KiB
HTML
161 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
|
|
<style>
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
width: 720pt;
|
|
height: 405pt;
|
|
font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
|
|
background: #ffffff;
|
|
}
|
|
p, h1, h2, h3 { margin: 0; }
|
|
|
|
.header {
|
|
background: #1e293b;
|
|
padding: 12pt 20pt;
|
|
}
|
|
.header p {
|
|
font-size: 16pt;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
.content {
|
|
padding: 16pt 20pt;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12pt;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
gap: 16pt;
|
|
}
|
|
.section {
|
|
flex: 1;
|
|
}
|
|
.section-title {
|
|
font-size: 11pt;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 8pt;
|
|
}
|
|
.purpose-box {
|
|
background: #f1f5f9;
|
|
padding: 12pt;
|
|
border-radius: 4pt;
|
|
min-height: 80pt;
|
|
}
|
|
.purpose-box p {
|
|
font-size: 9pt;
|
|
color: #1e293b;
|
|
line-height: 1.5;
|
|
}
|
|
.feature-item {
|
|
margin-bottom: 4pt;
|
|
}
|
|
.feature-item p {
|
|
font-size: 8pt;
|
|
color: #1e293b;
|
|
}
|
|
.effects-row {
|
|
display: flex;
|
|
gap: 12pt;
|
|
}
|
|
.effect-card {
|
|
flex: 1;
|
|
background: #f1f5f9;
|
|
border: 1pt solid #0d9488;
|
|
border-radius: 4pt;
|
|
padding: 10pt;
|
|
text-align: center;
|
|
}
|
|
.effect-icon {
|
|
font-size: 20pt;
|
|
margin-bottom: 4pt;
|
|
}
|
|
.effect-title {
|
|
font-size: 9pt;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 4pt;
|
|
}
|
|
.effect-desc {
|
|
font-size: 7pt;
|
|
color: #64748b;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<p>01. 프로젝트 개요</p>
|
|
</div>
|
|
<div class="content">
|
|
<div class="row">
|
|
<div class="section">
|
|
<p class="section-title">프로젝트 목적</p>
|
|
<div class="purpose-box">
|
|
<p>방화셔터 견적의 세부 계산 로직을
|
|
AI 기반으로 자동화하여
|
|
규격 산출 → 단가 계산 → 견적서 생성
|
|
전 과정을 시스템화</p>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<p class="section-title">주요 기능</p>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 개구부 → 제작 규격 자동 변환 (W+0.1m, H+0.6m)</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 최소 면적 5㎡ 할증 자동 적용</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 재질/두께별 단가 자동 계산</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 하중 기반 모터 사양 자동 매칭</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 부대비용 (철거/폐기물/양중비) 자동 가산</p>
|
|
</div>
|
|
|
|
<div class="feature-item">
|
|
<p>✓ 마진율 적용 및 만원단위 절삭</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="section-title">기대 효과</p>
|
|
<div class="effects-row">
|
|
|
|
<div class="effect-card">
|
|
<p class="effect-icon">🧮</p>
|
|
<p class="effect-title">정확한 계산</p>
|
|
<p class="effect-desc">복잡한 수식 자동화</p>
|
|
</div>
|
|
|
|
<div class="effect-card">
|
|
<p class="effect-icon">⚡</p>
|
|
<p class="effect-title">즉시 견적</p>
|
|
<p class="effect-desc">실시간 금액 산출</p>
|
|
</div>
|
|
|
|
<div class="effect-card">
|
|
<p class="effect-icon">📋</p>
|
|
<p class="effect-title">표준 양식</p>
|
|
<p class="effect-desc">필수 문구 자동 삽입</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |