From 65103af5c03fc3fc2b5cc494fb9e3d007b6d974f Mon Sep 17 00:00:00 2001 From: hyungi Date: Tue, 16 Sep 2025 06:15:19 +0900 Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A0=88=EC=A0=A0=ED=85=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0:=20=EC=84=B8=EB=A1=9C=20=ED=94=8C=EB=A1=9C=EC=9A=B0?= =?UTF-8?q?=EC=B0=A8=ED=8A=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20?= =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=84=B8=EC=8A=A4=20=EC=B5=9C=EC=A0=81?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 외주/자체제작 프로세스를 가로에서 세로 방향으로 변경 - 이모지 제거하여 전문적인 프레젠테이션 스타일 적용 - 화살표 방향을 → 에서 ↓ 로 변경 - 불필요한 견적 요청 문구 제거 - 자체제작 프로세스 최적화: 8단계 → 7단계로 단순화 - 최종 검사를 검수 및 보관 단계에 통합 - 상세한 프로세스 내용 복원 및 가독성 향상 --- demo/styles/devonthink.css | 2299 ++++++++++++++++++++++++++++++++++++ demo/workflow-stage-1.html | 113 +- demo/workflow-stage-2.html | 514 +++++++- 3 files changed, 2870 insertions(+), 56 deletions(-) diff --git a/demo/styles/devonthink.css b/demo/styles/devonthink.css index 140b169..5e9389b 100644 --- a/demo/styles/devonthink.css +++ b/demo/styles/devonthink.css @@ -218,6 +218,2305 @@ body.workflow-page { border: 2px solid var(--dt-gray-600); } +/* 워크플로우 1단계 UI 개선 */ +.simple-note { + background: linear-gradient(135deg, #e8f5e8 0%, #f0f9ff 100%); + border-left: 4px solid var(--dt-success); + padding: 20px; + border-radius: 12px; + margin: 20px 0; + box-shadow: var(--dt-shadow-sm); +} + +.concept-explanation { + display: grid; + gap: 30px; + margin: 30px 0; +} + +.concept-step { + background: white; + border-radius: 16px; + padding: 30px; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.concept-step::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, var(--dt-primary), var(--dt-primary-light)); +} + +.concept-step:hover { + transform: translateY(-4px); + box-shadow: var(--dt-shadow-lg); +} + +.concept-step h4 { + color: var(--dt-primary); + font-size: 1.3em; + margin-bottom: 20px; + display: flex; + align-items: center; + gap: 10px; +} + +.concept-content p { + font-size: 1.1em; + color: var(--dt-gray-700); + margin-bottom: 20px; + line-height: 1.6; +} + +.concept-list { + list-style: none; + padding: 0; + margin: 20px 0; +} + +.concept-list li { + background: var(--dt-gray-50); + padding: 12px 20px; + margin: 8px 0; + border-radius: 8px; + border-left: 3px solid var(--dt-primary-light); + transition: all 0.2s ease; +} + +.concept-list li:hover { + background: var(--dt-gray-100); + transform: translateX(5px); +} + +.example-box { + background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%); + border: 2px solid var(--dt-warning); + border-radius: 12px; + padding: 20px; + margin: 20px 0; +} + +.example-box h5 { + color: #92400e; + margin-bottom: 15px; + font-size: 1.1em; +} + +.example-list { + list-style: none; + padding: 0; +} + +.example-list li { + background: white; + padding: 10px 15px; + margin: 8px 0; + border-radius: 6px; + border-left: 3px solid var(--dt-warning); + font-size: 0.95em; +} + +.process-flow { + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + margin: 25px 0; + flex-wrap: wrap; +} + +.flow-item { + background: linear-gradient(135deg, var(--dt-primary) 0%, var(--dt-primary-light) 100%); + color: white; + padding: 12px 20px; + border-radius: 25px; + font-weight: 600; + font-size: 0.9em; + box-shadow: var(--dt-shadow-sm); + transition: all 0.3s ease; + min-width: 140px; + text-align: center; +} + +.flow-item:hover { + transform: translateY(-2px); + box-shadow: var(--dt-shadow); +} + +.flow-arrow { + font-size: 1.5em; + color: var(--dt-primary); + font-weight: bold; +} + +.benefit-note { + background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + border: 2px solid var(--dt-primary-light); + border-radius: 10px; + padding: 15px 20px; + margin-top: 20px; + color: var(--dt-primary-dark); + font-weight: 500; +} + +.key-benefits { + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 16px; + padding: 30px; + margin: 40px 0; + border: 1px solid var(--dt-gray-200); +} + +.key-benefits h4 { + color: var(--dt-primary); + font-size: 1.4em; + margin-bottom: 25px; + text-align: center; +} + +.benefits-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; +} + +.benefit-item { + background: white; + border-radius: 12px; + padding: 25px; + text-align: center; + box-shadow: var(--dt-shadow-sm); + border: 1px solid var(--dt-gray-200); + transition: all 0.3s ease; +} + +.benefit-item:hover { + transform: translateY(-4px); + box-shadow: var(--dt-shadow); +} + +.benefit-icon { + font-size: 2.5em; + margin-bottom: 15px; + display: block; +} + +.benefit-content h5 { + color: var(--dt-gray-800); + font-size: 1.1em; + margin-bottom: 10px; +} + +.benefit-content p { + color: var(--dt-gray-600); + font-size: 0.95em; + line-height: 1.5; +} + +/* 의사결정 매트릭스 스타일 */ +.decision-process { + margin: 30px 0; +} + +.decision-step { + background: white; + border-radius: 16px; + padding: 30px; + margin: 25px 0; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); + position: relative; +} + +.decision-step::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #10b981, #34d399); +} + +.decision-step h4 { + color: #059669; + font-size: 1.3em; + margin-bottom: 20px; +} + +.analysis-factors { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; + margin: 20px 0; +} + +.factor-group { + background: var(--dt-gray-50); + border-radius: 12px; + padding: 20px; + border-left: 4px solid var(--dt-primary); +} + +.factor-group h5 { + color: var(--dt-primary); + margin-bottom: 15px; + font-size: 1.1em; +} + +.factor-list { + list-style: none; + padding: 0; +} + +.factor-list li { + padding: 8px 0; + color: var(--dt-gray-700); + border-bottom: 1px solid var(--dt-gray-200); + font-size: 0.95em; +} + +.factor-list li:last-child { + border-bottom: none; +} + +.matrix-example { + background: white; + border-radius: 12px; + padding: 25px; + box-shadow: var(--dt-shadow-sm); + border: 1px solid var(--dt-gray-200); +} + +.matrix-example h5 { + color: var(--dt-primary); + margin-bottom: 20px; + font-size: 1.2em; +} + +.matrix-table { + width: 100%; + border-collapse: collapse; + background: white; + border-radius: 8px; + overflow: hidden; +} + +.matrix-row { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; + gap: 1px; + background: var(--dt-gray-200); +} + +.matrix-row.header { + background: var(--dt-primary); +} + +.matrix-row.header .matrix-cell { + background: var(--dt-primary); + color: white; + font-weight: 600; + padding: 15px 10px; +} + +.matrix-row.total { + background: var(--dt-gray-300); +} + +.matrix-row.total .matrix-cell { + background: var(--dt-gray-100); + font-weight: 600; +} + +.matrix-cell { + background: white; + padding: 12px 10px; + text-align: center; + font-size: 0.9em; + display: flex; + align-items: center; + justify-content: center; +} + +.score-high { + background: #dcfce7 !important; + color: #166534; + font-weight: 600; +} + +.score-medium { + background: #fef3c7 !important; + color: #92400e; + font-weight: 600; +} + +.result-selected { + background: #dbeafe !important; + color: var(--dt-primary-dark); + font-weight: 700; +} + +.decision-result { + margin: 25px 0; +} + +.result-box { + background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + border: 2px solid var(--dt-primary); + border-radius: 16px; + padding: 25px; + margin: 20px 0; +} + +.result-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; +} + +.result-icon { + font-size: 2em; +} + +.result-header h5 { + color: var(--dt-primary-dark); + font-size: 1.3em; + margin: 0; +} + +.result-details ul { + list-style: none; + padding: 0; +} + +.result-details li { + background: white; + padding: 10px 15px; + margin: 8px 0; + border-radius: 8px; + border-left: 3px solid var(--dt-primary); + font-size: 0.95em; +} + +.alternative-option { + background: var(--dt-gray-50); + border-radius: 12px; + padding: 20px; + margin: 20px 0; + border: 1px solid var(--dt-gray-300); +} + +.alternative-option h5 { + color: var(--dt-gray-700); + margin-bottom: 15px; +} + +.alternative-list { + list-style: none; + padding: 0; +} + +.alternative-list li { + padding: 8px 0; + color: var(--dt-gray-600); + border-bottom: 1px solid var(--dt-gray-200); + font-size: 0.9em; +} + +.decision-impact { + margin: 30px 0; +} + +.impact-comparison { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 25px; + margin: 25px 0; +} + +.impact-item { + background: white; + border-radius: 16px; + padding: 25px; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); +} + +.impact-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 2px solid var(--dt-gray-200); +} + +.impact-icon { + font-size: 2em; +} + +.impact-header h5 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0; +} + +.action-list { + list-style: none; + padding: 0; +} + +.action-list li { + background: var(--dt-gray-50); + padding: 12px 15px; + margin: 10px 0; + border-radius: 8px; + border-left: 3px solid var(--dt-primary-light); + font-size: 0.95em; + line-height: 1.5; +} + +/* 워크플로우 2단계 추가 스타일 */ +.highlight-step { + background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%) !important; + border: 2px solid var(--dt-warning) !important; + font-weight: 600 !important; + color: #92400e !important; +} + +.system-banner { + background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); + border: 2px solid var(--dt-primary); + border-radius: 16px; + padding: 25px; + margin: 30px 0; + display: flex; + align-items: center; + gap: 20px; + box-shadow: var(--dt-shadow); +} + +.banner-icon { + font-size: 3em; + flex-shrink: 0; +} + +.banner-content { + flex: 1; +} + +.banner-content h3 { + color: var(--dt-primary-dark); + margin: 0 0 10px 0; + font-size: 1.4em; +} + +.banner-content p { + color: var(--dt-gray-700); + margin: 0; + font-size: 1.1em; +} + +.btn-banner { + background: linear-gradient(135deg, var(--dt-primary) 0%, var(--dt-primary-light) 100%); + color: white; + border: none; + padding: 12px 24px; + border-radius: 25px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: var(--dt-shadow-sm); +} + +.btn-banner:hover { + transform: translateY(-2px); + box-shadow: var(--dt-shadow); +} + +.inspection-steps { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; + margin: 25px 0; +} + +.inspection-step { + background: white; + border-radius: 16px; + padding: 25px; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); + transition: all 0.3s ease; +} + +.inspection-step:hover { + transform: translateY(-4px); + box-shadow: var(--dt-shadow-lg); +} + +.inspection-step .step-icon { + font-size: 2.5em; + margin-bottom: 15px; + display: block; +} + +.inspection-step h5 { + color: var(--dt-primary); + font-size: 1.2em; + margin-bottom: 15px; +} + +.step-details { + list-style: none; + padding: 0; +} + +.step-details li { + background: var(--dt-gray-50); + padding: 8px 12px; + margin: 6px 0; + border-radius: 6px; + border-left: 3px solid var(--dt-primary-light); + font-size: 0.9em; +} + +.storage-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 30px; + margin: 25px 0; +} + +.storage-feature { + background: white; + border-radius: 16px; + padding: 25px; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); +} + +.feature-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 2px solid var(--dt-gray-200); +} + +.feature-icon { + font-size: 2em; +} + +.feature-header h5 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0; +} + +.zone-layout { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; +} + +.zone-item { + background: var(--dt-gray-50); + padding: 15px; + border-radius: 10px; + border-left: 4px solid var(--dt-primary); + display: flex; + flex-direction: column; + gap: 8px; +} + +.zone-capacity { + font-size: 0.9em; + color: var(--dt-gray-600); +} + +.qr-benefits { + list-style: none; + padding: 0; +} + +.qr-benefits li { + background: var(--dt-gray-50); + padding: 12px 15px; + margin: 10px 0; + border-radius: 8px; + border-left: 3px solid var(--dt-success); + font-size: 0.95em; +} + +.tracking-system-overview { + margin: 30px 0; +} + +.tracking-banner { + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); + border-radius: 16px; + padding: 25px; + margin-bottom: 30px; + border: 1px solid var(--dt-gray-200); + text-align: center; +} + +.tracking-title h4 { + color: var(--dt-primary); + font-size: 1.4em; + margin-bottom: 10px; +} + +.tracking-title p { + color: var(--dt-gray-700); + font-size: 1.1em; + margin: 0; +} + +.tracking-stages { + display: flex; + align-items: center; + justify-content: center; + gap: 20px; + margin: 30px 0; + flex-wrap: wrap; +} + +.tracking-stage { + background: white; + border-radius: 16px; + padding: 20px; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); + min-width: 200px; + transition: all 0.3s ease; +} + +.tracking-stage:hover { + transform: translateY(-4px); + box-shadow: var(--dt-shadow-lg); +} + +.stage-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 15px; +} + +.stage-number { + background: var(--dt-primary); + color: white; + width: 30px; + height: 30px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; +} + +.stage-header h5 { + color: var(--dt-gray-800); + font-size: 1.1em; + margin: 0; +} + +.stage-status { + background: var(--dt-success); + color: white; + padding: 6px 12px; + border-radius: 15px; + font-size: 0.85em; + font-weight: 600; + margin-bottom: 12px; + display: inline-block; +} + +.stage-details p { + margin: 5px 0; + font-size: 0.9em; + color: var(--dt-gray-600); +} + +.tracking-arrow { + font-size: 2em; + color: var(--dt-primary); + font-weight: bold; +} + +.benefits-comparison { + margin: 25px 0; +} + +.before-after { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 30px; +} + +.before, .after { + background: white; + border-radius: 16px; + padding: 25px; + box-shadow: var(--dt-shadow); + border: 1px solid var(--dt-gray-200); +} + +.before h5 { + color: var(--dt-danger); + margin-bottom: 20px; + font-size: 1.2em; +} + +.after h5 { + color: var(--dt-success); + margin-bottom: 20px; + font-size: 1.2em; +} + +.problem-list, .solution-list { + list-style: none; + padding: 0; +} + +.problem-list li { + background: #fef2f2; + border-left: 3px solid var(--dt-danger); + padding: 10px 15px; + margin: 8px 0; + border-radius: 6px; + font-size: 0.95em; +} + +.solution-list li { + background: #f0fdf4; + border-left: 3px solid var(--dt-success); + padding: 10px 15px; + margin: 8px 0; + border-radius: 6px; + font-size: 0.95em; +} + +.alert-types { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin: 25px 0; +} + +.alert-type { + background: white; + border-radius: 12px; + padding: 20px; + box-shadow: var(--dt-shadow-sm); + border: 1px solid var(--dt-gray-200); + text-align: center; + transition: all 0.3s ease; +} + +.alert-type:hover { + transform: translateY(-4px); + box-shadow: var(--dt-shadow); +} + +.alert-icon { + font-size: 2.5em; + margin-bottom: 15px; + display: block; +} + +.alert-content h5 { + color: var(--dt-gray-800); + font-size: 1.1em; + margin-bottom: 10px; +} + +.alert-content p { + color: var(--dt-gray-600); + font-size: 0.95em; + margin: 0; +} + +/* 현대적 UI 개선 스타일 */ +.modern-section { + background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%); + border-radius: 20px; + padding: 35px; + margin: 30px 0; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); +} + +.section-header { + display: flex; + align-items: center; + gap: 20px; + margin-bottom: 35px; + padding-bottom: 20px; + border-bottom: 2px solid #e2e8f0; +} + +.header-icon { + font-size: 3.5em; + background: linear-gradient(135deg, var(--dt-primary) 0%, var(--dt-primary-light) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.header-content { + flex: 1; +} + +.header-content h3 { + color: var(--dt-gray-800); + font-size: 1.8em; + margin: 0 0 8px 0; + font-weight: 700; +} + +.header-content p { + color: var(--dt-gray-600); + font-size: 1.1em; + margin: 0; + font-weight: 400; +} + +.modern-btn { + padding: 14px 28px; + border: none; + border-radius: 50px; + font-weight: 600; + font-size: 1em; + cursor: pointer; + transition: all 0.3s ease; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +.modern-btn.primary { + background: linear-gradient(135deg, var(--dt-primary) 0%, #4f46e5 100%); + color: white; +} + +.modern-btn.primary:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); +} + +.process-flow-modern { + display: flex; + align-items: center; + justify-content: center; + gap: 25px; + margin: 30px 0; + flex-wrap: wrap; +} + +.process-card { + background: white; + border-radius: 20px; + padding: 25px 20px; + text-align: center; + min-width: 180px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + border: 1px solid #f1f5f9; + transition: all 0.3s ease; + position: relative; +} + +.process-card:hover { + transform: translateY(-8px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); +} + +.card-number { + position: absolute; + top: -15px; + left: 50%; + transform: translateX(-50%); + background: linear-gradient(135deg, var(--dt-primary) 0%, #4f46e5 100%); + color: white; + width: 35px; + height: 35px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1.1em; + box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3); +} + +.card-icon { + font-size: 2.5em; + margin: 15px 0 10px 0; + display: block; +} + +.process-card h5 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0 0 15px 0; + font-weight: 600; +} + +.card-highlights { + display: flex; + flex-wrap: wrap; + gap: 6px; + justify-content: center; +} + +.highlight { + background: #f1f5f9; + color: var(--dt-gray-700); + padding: 4px 10px; + border-radius: 12px; + font-size: 0.8em; + font-weight: 500; + border: 1px solid #e2e8f0; +} + +.highlight.success { + background: #dcfce7; + color: #16a34a; + border-color: #bbf7d0; +} + +.highlight.warning { + background: #fef3c7; + color: #d97706; + border-color: #fed7aa; +} + +.highlight.danger { + background: #fecaca; + color: #dc2626; + border-color: #fca5a5; +} + +.flow-arrow { + font-size: 2em; + color: var(--dt-primary); + font-weight: bold; + opacity: 0.7; +} + +.storage-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin: 25px 0; +} + +.storage-zones, .qr-tracking { + background: white; + border-radius: 16px; + padding: 25px; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06); + border: 1px solid #f1f5f9; +} + +.storage-zones h5, .qr-tracking h5 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0 0 20px 0; + font-weight: 600; +} + +.zones-compact { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 12px; +} + +.zone-badge { + padding: 12px 16px; + border-radius: 12px; + font-size: 0.9em; + font-weight: 600; + text-align: center; + border: 2px solid; + transition: all 0.3s ease; +} + +.zone-badge:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); +} + +.zone-badge.pipe { + background: #eff6ff; + color: #2563eb; + border-color: #bfdbfe; +} + +.zone-badge.valve { + background: #f0fdf4; + color: #16a34a; + border-color: #bbf7d0; +} + +.zone-badge.fitting { + background: #fef3c7; + color: #d97706; + border-color: #fed7aa; +} + +.zone-badge.special { + background: #fdf2f8; + color: #c026d3; + border-color: #f9a8d4; +} + +.qr-features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 15px; +} + +.qr-feature { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + padding: 15px 10px; + background: #f8fafc; + border-radius: 12px; + text-align: center; + transition: all 0.3s ease; +} + +.qr-feature:hover { + background: #f1f5f9; + transform: translateY(-2px); +} + +.qr-icon { + font-size: 1.8em; +} + +.qr-feature span:last-child { + font-size: 0.85em; + color: var(--dt-gray-700); + font-weight: 500; +} + +.tracking-timeline { + position: relative; + padding: 20px 0; +} + +.tracking-timeline::before { + content: ''; + position: absolute; + left: 30px; + top: 0; + bottom: 0; + width: 3px; + background: linear-gradient(to bottom, var(--dt-primary) 0%, #e2e8f0 100%); + border-radius: 2px; +} + +.timeline-item { + display: flex; + align-items: flex-start; + gap: 25px; + margin-bottom: 30px; + position: relative; +} + +.timeline-marker { + background: white; + border: 3px solid #e2e8f0; + color: var(--dt-gray-500); + width: 60px; + height: 60px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1.2em; + flex-shrink: 0; + z-index: 2; + transition: all 0.3s ease; +} + +.timeline-item.active .timeline-marker { + background: linear-gradient(135deg, var(--dt-primary) 0%, #4f46e5 100%); + border-color: var(--dt-primary); + color: white; + box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); +} + +.timeline-content { + background: white; + border-radius: 16px; + padding: 20px 25px; + flex: 1; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06); + border: 1px solid #f1f5f9; + transition: all 0.3s ease; +} + +.timeline-item.active .timeline-content { + border-color: var(--dt-primary-light); + box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1); +} + +.timeline-content h5 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0 0 8px 0; + font-weight: 600; +} + +.timeline-content p { + color: var(--dt-gray-600); + margin: 0 0 12px 0; + font-size: 0.95em; +} + +.status-badge { + display: inline-block; + padding: 6px 14px; + border-radius: 20px; + font-size: 0.8em; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.status-badge.completed { + background: #dcfce7; + color: #16a34a; + border: 1px solid #bbf7d0; +} + +.status-badge.pending { + background: #fef3c7; + color: #d97706; + border: 1px solid #fed7aa; +} + +.benefits-grid-modern { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + margin: 25px 0; +} + +.benefit-card { + background: white; + border-radius: 16px; + padding: 25px 20px; + text-align: center; + box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06); + border: 1px solid #f1f5f9; + transition: all 0.3s ease; +} + +.benefit-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + border-color: var(--dt-primary-light); +} + +.benefit-icon { + font-size: 2.5em; + margin-bottom: 15px; + display: block; +} + +.benefit-card h5 { + color: var(--dt-gray-800); + font-size: 1.1em; + margin: 0 0 10px 0; + font-weight: 600; +} + +.benefit-card p { + color: var(--dt-gray-600); + font-size: 0.9em; + margin: 0; + line-height: 1.4; +} + +/* V2 개선된 UI 스타일 */ +.process-overview-v2 { + margin: 30px 0; +} + +.process-overview-v2 h4 { + color: var(--dt-gray-800); + font-size: 1.3em; + margin-bottom: 25px; + font-weight: 600; + text-align: center; +} + +.process-steps-horizontal { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 25px; + margin: 25px 0; +} + +.step-card { + background: white; + border-radius: 16px; + padding: 25px 20px; + box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08); + border: 2px solid transparent; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.step-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #3b82f6, #8b5cf6); + opacity: 0.8; +} + +.step-card.step-1::before { + background: linear-gradient(90deg, #3b82f6, #06b6d4); +} + +.step-card.step-2::before { + background: linear-gradient(90deg, #10b981, #34d399); +} + +.step-card.step-3::before { + background: linear-gradient(90deg, #f59e0b, #f97316); +} + +.step-card:hover { + transform: translateY(-6px); + box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15); + border-color: var(--dt-primary-light); +} + +.step-header { + display: flex; + align-items: center; + gap: 15px; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 1px solid #f1f5f9; +} + +.step-num { + background: linear-gradient(135deg, var(--dt-primary), #4f46e5); + color: white; + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1.2em; + box-shadow: 0 3px 15px rgba(59, 130, 246, 0.3); +} + +.step-header h5 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0; + font-weight: 600; +} + +.step-features { + display: flex; + flex-direction: column; + gap: 10px; +} + +.feature-item { + background: #f8fafc; + padding: 10px 15px; + border-radius: 10px; + font-size: 0.9em; + font-weight: 500; + color: var(--dt-gray-700); + border-left: 3px solid #e2e8f0; + transition: all 0.3s ease; +} + +.feature-item:hover { + background: #f1f5f9; + border-left-color: var(--dt-primary); + transform: translateX(5px); +} + +.feature-item.pass { + background: #f0fdf4; + border-left-color: #22c55e; + color: #16a34a; +} + +.feature-item.conditional { + background: #fffbeb; + border-left-color: #f59e0b; + color: #d97706; +} + +.feature-item.fail { + background: #fef2f2; + border-left-color: #ef4444; + color: #dc2626; +} + +.storage-system-v2 { + margin: 30px 0; +} + +.storage-header h4 { + color: var(--dt-gray-800); + font-size: 1.3em; + margin-bottom: 25px; + font-weight: 600; + text-align: center; +} + +.storage-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 30px; +} + +.zones-section, .qr-section { + background: white; + border-radius: 16px; + padding: 25px; + box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08); + border: 1px solid #f1f5f9; +} + +.section-title { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 2px solid #f1f5f9; + font-weight: 600; + color: var(--dt-gray-800); + font-size: 1.1em; +} + +.title-icon { + font-size: 1.4em; +} + +.zones-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 15px; +} + +.zone-item { + padding: 18px 15px; + border-radius: 12px; + text-align: center; + border: 2px solid; + transition: all 0.3s ease; + cursor: pointer; +} + +.zone-item:hover { + transform: translateY(-4px); + box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1); +} + +.zone-label { + font-weight: bold; + font-size: 1em; + margin-bottom: 5px; +} + +.zone-type { + font-size: 0.85em; + opacity: 0.8; +} + +.zone-a { + background: linear-gradient(135deg, #dbeafe, #bfdbfe); + border-color: #3b82f6; + color: #1e40af; +} + +.zone-b { + background: linear-gradient(135deg, #dcfce7, #bbf7d0); + border-color: #22c55e; + color: #15803d; +} + +.zone-c { + background: linear-gradient(135deg, #fef3c7, #fed7aa); + border-color: #f59e0b; + color: #d97706; +} + +.zone-d { + background: linear-gradient(135deg, #fce7f3, #f9a8d4); + border-color: #ec4899; + color: #be185d; +} + +.qr-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 15px; +} + +.qr-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 20px 15px; + background: #f8fafc; + border-radius: 12px; + text-align: center; + transition: all 0.3s ease; + border: 1px solid #e2e8f0; +} + +.qr-item:hover { + background: #f1f5f9; + transform: translateY(-4px); + box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1); + border-color: var(--dt-primary-light); +} + +.qr-icon { + font-size: 2em; + margin-bottom: 5px; +} + +.qr-text { + font-size: 0.9em; + color: var(--dt-gray-700); + font-weight: 500; +} + +.tracking-flow-v2 { + margin: 30px 0; +} + +.flow-steps { + display: flex; + align-items: center; + justify-content: center; + gap: 0; + flex-wrap: wrap; + padding: 20px 0; +} + +.flow-step { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-width: 200px; + padding: 20px 15px; + position: relative; +} + +.step-circle { + width: 60px; + height: 60px; + border-radius: 50%; + background: white; + border: 3px solid #e2e8f0; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 15px; + transition: all 0.3s ease; + position: relative; + z-index: 2; +} + +.flow-step.completed .step-circle { + background: linear-gradient(135deg, var(--dt-primary), #4f46e5); + border-color: var(--dt-primary); + box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3); +} + +.step-number { + font-weight: bold; + font-size: 1.2em; + color: var(--dt-gray-500); +} + +.flow-step.completed .step-number { + color: white; +} + +.step-info h5 { + color: var(--dt-gray-800); + font-size: 1.1em; + margin: 0 0 8px 0; + font-weight: 600; +} + +.step-info p { + color: var(--dt-gray-600); + font-size: 0.9em; + margin: 0 0 10px 0; + line-height: 1.4; +} + +.status-tag { + display: inline-block; + padding: 4px 12px; + border-radius: 15px; + font-size: 0.75em; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.status-tag.done { + background: #dcfce7; + color: #16a34a; + border: 1px solid #bbf7d0; +} + +.status-tag.waiting { + background: #fef3c7; + color: #d97706; + border: 1px solid #fed7aa; +} + +.flow-connector { + width: 60px; + height: 3px; + background: #e2e8f0; + position: relative; + margin: 0 -15px; + z-index: 1; +} + +.flow-connector.completed { + background: linear-gradient(90deg, var(--dt-primary), #4f46e5); +} + +/* 간단한 프로세스 비교 */ +.process-comparison { + margin: 30px 0; + background: white; + border-radius: 16px; + padding: 30px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); +} + +.comparison-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 40px; +} + +.process-column h3 { + font-size: 1.5em; + font-weight: 600; + color: var(--dt-gray-800); + margin-bottom: 20px; + text-align: center; + padding-bottom: 15px; + border-bottom: 2px solid #f1f5f9; +} + +.process-steps { + display: flex; + flex-direction: column; + gap: 12px; +} + +.step { + background: #f8fafc; + padding: 15px 20px; + border-radius: 12px; + font-size: 1.1em; + font-weight: 500; + color: var(--dt-gray-700); + border-left: 4px solid #e2e8f0; + transition: all 0.3s ease; +} + +.step:hover { + background: #f1f5f9; + border-left-color: var(--dt-primary); + transform: translateX(5px); +} + +.step.highlight { + background: linear-gradient(135deg, #fef3c7, #fed7aa); + border-left-color: #f59e0b; + color: #d97706; + font-weight: 600; +} + +/* 발표용 프레젠테이션 스타일 */ +.presentation-section { + background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); + border-radius: 24px; + padding: 50px 40px; + margin: 40px 0; + border: 1px solid #e2e8f0; + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12); +} + +.presentation-header { + text-align: center; + margin-bottom: 50px; + padding-bottom: 30px; + border-bottom: 3px solid #e2e8f0; +} + +.big-icon { + font-size: 5em; + margin-bottom: 20px; + display: block; + background: linear-gradient(135deg, var(--dt-primary) 0%, #8b5cf6 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.presentation-header h2 { + color: var(--dt-gray-800); + font-size: 2.5em; + font-weight: 700; + margin: 0 0 15px 0; + line-height: 1.2; +} + +.subtitle { + color: var(--dt-gray-600); + font-size: 1.3em; + font-weight: 400; + margin: 0; + line-height: 1.4; +} + +/* 플로우차트 스타일 */ +.flowchart-container { + margin: 50px 0; +} + +.flowchart-container h3 { + color: var(--dt-gray-800); + font-size: 1.8em; + font-weight: 600; + text-align: center; + margin-bottom: 40px; +} + +.flowchart { + display: flex; + align-items: stretch; + justify-content: center; + gap: 30px; + flex-wrap: wrap; + padding: 30px 0; +} + +.flow-box { + background: white; + border-radius: 20px; + padding: 30px 25px; + min-width: 280px; + box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); + border: 3px solid transparent; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.flow-box::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 6px; +} + +.flow-box.step1::before { + background: linear-gradient(90deg, #3b82f6, #06b6d4); +} + +.flow-box.step2::before { + background: linear-gradient(90deg, #10b981, #34d399); +} + +.flow-box.step3::before { + background: linear-gradient(90deg, #f59e0b, #f97316); +} + +.flow-box:hover { + transform: translateY(-10px); + box-shadow: 0 12px 50px rgba(0, 0, 0, 0.2); +} + +.box-number { + background: linear-gradient(135deg, var(--dt-primary), #4f46e5); + color: white; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1.4em; + margin: 0 auto 20px auto; + box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); +} + +.box-title { + color: var(--dt-gray-800); + font-size: 1.4em; + font-weight: 600; + text-align: center; + margin-bottom: 25px; +} + +.box-content { + display: flex; + flex-direction: column; + gap: 12px; +} + +.key-point { + background: #f8fafc; + padding: 12px 18px; + border-radius: 12px; + font-size: 1em; + font-weight: 500; + color: var(--dt-gray-700); + border-left: 4px solid #e2e8f0; + transition: all 0.3s ease; +} + +.key-point:hover { + background: #f1f5f9; + border-left-color: var(--dt-primary); + transform: translateX(8px); +} + +.key-point.pass { + background: #f0fdf4; + border-left-color: #22c55e; + color: #15803d; +} + +.key-point.warning { + background: #fffbeb; + border-left-color: #f59e0b; + color: #d97706; +} + +.key-point.danger { + background: #fef2f2; + border-left-color: #ef4444; + color: #dc2626; +} + +.flow-arrow-big { + font-size: 3em; + color: var(--dt-primary); + font-weight: bold; + display: flex; + align-items: center; + opacity: 0.8; +} + +/* 인포그래픽 스타일 */ +.storage-infographic { + margin: 50px 0; +} + +.storage-infographic h3 { + color: var(--dt-gray-800); + font-size: 1.8em; + font-weight: 600; + text-align: center; + margin-bottom: 40px; +} + +.infographic-content { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 40px; + align-items: start; +} + +.warehouse-visual { + background: white; + border-radius: 20px; + padding: 30px; + box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); +} + +.warehouse-title { + color: var(--dt-gray-800); + font-size: 1.3em; + font-weight: 600; + text-align: center; + margin-bottom: 25px; +} + +.warehouse-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; +} + +.warehouse-zone { + display: flex; + align-items: center; + gap: 15px; + padding: 20px; + border-radius: 16px; + border: 2px solid; + transition: all 0.3s ease; +} + +.warehouse-zone:hover { + transform: translateY(-5px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); +} + +.zone-icon { + font-size: 2.5em; +} + +.zone-name { + font-weight: bold; + font-size: 1.1em; + margin-bottom: 3px; +} + +.zone-desc { + font-size: 0.9em; + opacity: 0.8; + margin-bottom: 3px; +} + +.zone-capacity { + font-size: 0.8em; + opacity: 0.7; +} + +.warehouse-zone.zone-a { + background: linear-gradient(135deg, #dbeafe, #bfdbfe); + border-color: #3b82f6; + color: #1e40af; +} + +.warehouse-zone.zone-b { + background: linear-gradient(135deg, #dcfce7, #bbf7d0); + border-color: #22c55e; + color: #15803d; +} + +.warehouse-zone.zone-c { + background: linear-gradient(135deg, #fef3c7, #fed7aa); + border-color: #f59e0b; + color: #d97706; +} + +.warehouse-zone.zone-d { + background: linear-gradient(135deg, #fce7f3, #f9a8d4); + border-color: #ec4899; + color: #be185d; +} + +.qr-benefits { + background: white; + border-radius: 20px; + padding: 30px; + box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); +} + +.qr-title { + color: var(--dt-gray-800); + font-size: 1.3em; + font-weight: 600; + text-align: center; + margin-bottom: 25px; +} + +.benefits-list { + display: flex; + flex-direction: column; + gap: 20px; +} + +.benefit-big { + display: flex; + align-items: center; + gap: 20px; + padding: 20px; + background: #f8fafc; + border-radius: 16px; + border-left: 5px solid var(--dt-primary); + transition: all 0.3s ease; +} + +.benefit-big:hover { + background: #f1f5f9; + transform: translateX(10px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +.benefit-big .benefit-icon { + font-size: 2.5em; + flex-shrink: 0; +} + +.benefit-title { + font-weight: 600; + font-size: 1.1em; + color: var(--dt-gray-800); + margin-bottom: 5px; +} + +.benefit-desc { + font-size: 0.9em; + color: var(--dt-gray-600); + line-height: 1.4; +} + +/* 대시보드 스타일 */ +.tracking-dashboard { + margin: 50px 0; + background: white; + border-radius: 20px; + padding: 40px; + box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); +} + +.dashboard-title { + color: var(--dt-gray-800); + font-size: 1.6em; + font-weight: 600; + text-align: center; + margin-bottom: 35px; +} + +.tracking-pipeline { + display: flex; + align-items: center; + justify-content: center; + gap: 0; + flex-wrap: wrap; +} + +.pipeline-step { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-width: 220px; + padding: 25px 20px; + position: relative; +} + +.step-badge { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + margin-bottom: 20px; +} + +.badge-number { + background: white; + border: 4px solid #e2e8f0; + color: var(--dt-gray-500); + width: 70px; + height: 70px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + font-size: 1.5em; + transition: all 0.3s ease; +} + +.pipeline-step.completed .badge-number { + background: linear-gradient(135deg, var(--dt-primary), #4f46e5); + border-color: var(--dt-primary); + color: white; + box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4); +} + +.pipeline-step.active .badge-number { + background: linear-gradient(135deg, #f59e0b, #f97316); + border-color: #f59e0b; + color: white; + box-shadow: 0 6px 25px rgba(245, 158, 11, 0.4); + animation: pulse 2s infinite; +} + +@keyframes pulse { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.05); } +} + +.badge-status { + padding: 4px 12px; + border-radius: 12px; + font-size: 0.8em; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.pipeline-step.completed .badge-status { + background: #dcfce7; + color: #16a34a; +} + +.pipeline-step.active .badge-status { + background: #fef3c7; + color: #d97706; +} + +.step-details h4 { + color: var(--dt-gray-800); + font-size: 1.2em; + margin: 0 0 10px 0; + font-weight: 600; +} + +.step-meta { + color: var(--dt-gray-600); + font-size: 0.9em; + margin-bottom: 8px; +} + +.step-highlight { + font-size: 0.85em; + font-weight: 600; + padding: 6px 12px; + border-radius: 10px; + background: #f0fdf4; + color: #16a34a; +} + +.step-highlight.active { + background: #fef3c7; + color: #d97706; +} + +.pipeline-connector { + width: 80px; + height: 4px; + background: #e2e8f0; + margin: 0 -20px; + z-index: 1; +} + +.pipeline-connector.completed { + background: linear-gradient(90deg, var(--dt-primary), #4f46e5); +} + +.pipeline-connector.active { + background: linear-gradient(90deg, #f59e0b, #f97316); +} + +/* 임팩트 쇼케이스 */ +.impact-showcase { + margin: 50px 0; +} + +.impact-title { + color: var(--dt-gray-800); + font-size: 1.8em; + font-weight: 600; + text-align: center; + margin-bottom: 40px; +} + +.impact-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 25px; +} + +.impact-card { + background: white; + border-radius: 20px; + padding: 35px 25px; + text-align: center; + box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1); + border: 3px solid transparent; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.impact-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 6px; +} + +.impact-card.primary::before { + background: linear-gradient(90deg, #3b82f6, #8b5cf6); +} + +.impact-card.success::before { + background: linear-gradient(90deg, #10b981, #34d399); +} + +.impact-card.warning::before { + background: linear-gradient(90deg, #f59e0b, #f97316); +} + +.impact-card.info::before { + background: linear-gradient(90deg, #06b6d4, #3b82f6); +} + +.impact-card:hover { + transform: translateY(-10px); + box-shadow: 0 12px 50px rgba(0, 0, 0, 0.2); +} + +.impact-number { + font-size: 3em; + font-weight: 700; + color: var(--dt-primary); + margin-bottom: 15px; + background: linear-gradient(135deg, var(--dt-primary), #8b5cf6); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.impact-label { + color: var(--dt-gray-800); + font-size: 1.2em; + font-weight: 600; + margin-bottom: 12px; +} + +.impact-desc { + color: var(--dt-gray-600); + font-size: 0.95em; + line-height: 1.5; +} + +@media (max-width: 768px) { + .comparison-row { + grid-template-columns: 1fr; + gap: 30px; + } + + .process-column h3 { + font-size: 1.3em; + } + + .step { + font-size: 1em; + padding: 12px 18px; + } + + .flow-steps { + flex-direction: column; + gap: 20px; + } + + .flow-connector { + width: 3px; + height: 40px; + margin: -10px 0; + } + + .process-steps-horizontal { + grid-template-columns: 1fr; + } + + .storage-content { + grid-template-columns: 1fr; + } + + .flowchart { + flex-direction: column; + align-items: center; + } + + .flow-arrow-big { + transform: rotate(90deg); + margin: 10px 0; + } + + .infographic-content { + grid-template-columns: 1fr; + } + + .warehouse-grid { + grid-template-columns: 1fr; + } + + .tracking-pipeline { + flex-direction: column; + gap: 20px; + } + + .pipeline-connector { + width: 4px; + height: 40px; + margin: -10px 0; + } + + .presentation-section { + padding: 30px 20px; + } + + .presentation-header h2 { + font-size: 2em; + } + + .big-icon { + font-size: 4em; + } +} + /* 사이드바 */ .sidebar { width: 280px; diff --git a/demo/workflow-stage-1.html b/demo/workflow-stage-1.html index 478c23b..6b304c0 100644 --- a/demo/workflow-stage-1.html +++ b/demo/workflow-stage-1.html @@ -5,7 +5,118 @@ 1단계: 준비 단계 - TK Project - + +
diff --git a/demo/workflow-stage-2.html b/demo/workflow-stage-2.html index 9871a12..ad4ccc7 100644 --- a/demo/workflow-stage-2.html +++ b/demo/workflow-stage-2.html @@ -4,67 +4,471 @@ 2단계: 프로젝트 진행 단계 - TK Project - - + - -
-
- ← 프레젠테이션으로 돌아가기 -

🔄 2단계: 프로젝트 진행 단계 (발주)

-

외주 및 자체제작 프로세스 관리

+ + ← 돌아가기 + +
+
+

2단계: 프로젝트 진행

+

외주 vs 자체제작 프로세스

-
-
-

🏢 외주의 경우

-
-
도면 업로드
-
→
-
견적진행
-
→
-
발주
-
→
-
관리페이지 (납기, 검사포인트 등)
+ +
+
+
+

외주 프로세스

+
+
+
1
+
+

도면 업로드

+

설계 도면 및 사양서 올리기

+
    +
  • • 설계 도면 파일 (2D/3D)
    • +
  • • 재료 종류와 크기 정보
    • +
  • • 품질 기준과 검사 방법
    • +
  • • 언제까지 몇 개 필요한지
    • +
+
+
+
+
+
2
+
+

견적 진행

+

여러 외주업체 견적 받고 비교하기

+
    +
  • • 가격, 품질, 납기일 종합 평가
    • +
  • • 업체 기술력과 믿을 수 있는지 확인
    • +
  • • 과거 거래 기록과 평가 반영
    • +
+
+
+
+
+
3
+
+

발주

+

가장 좋은 업체 골라 계약하기

+
    +
  • • 평가 점수 높은 업체 선정
    • +
  • • 계약서 쓰고 법적으로 문제 없는지 확인
    • +
  • • 품질 보증서와 보험 확인
    • +
  • • 발주서 보내고 계약금 주기
    • +
+
+
+
+
+
4
+
+

관리페이지

+

실시간으로 진행 상황과 품질 확인하기

+
    +
  • • 제작 진행률 실시간으로 보기
    • +
  • • 중간중간 검사할 부분 관리
    • +
  • • 납기일 늦어지면 자동으로 알려주기
    • +
  • • 마지막 검사와 물건 받기
    • +
+
+
+
+
+ +
+

자체제작 프로세스

+
+
+
1
+
+

자재 명세서 업로드

+

필요한 모든 자재 목록 정리

+
    +
  • • 파이프, 밸브, 피팅 등 자재 목록
    • +
  • • 각 자재별 규격과 수량
    • +
  • • 재질 정보와 품질 기준
    • +
  • • 프로젝트별 필요 시기
    • +
+
+
+
+
+
2
+
+

자재 분류

+

자재 종류별로 체계적 분류

+
    +
  • • 파이프류 (탄소강, 스테인리스)
    • +
  • • 밸브류 (볼밸브, 체크밸브)
    • +
  • • 피팅류 (엘보, 티, 플랜지)
    • +
  • • 특수자재 (가스켓, 볼트)
    • +
+
+
+
+
+
3
+
+

구매 신청

+

분류된 자재별 구매 요청서 작성

+
    +
  • • 자재별 상세 사양서 작성
    • +
  • • 필요 수량과 납기일 명시
    • +
  • • 예산 범위 및 품질 요구사항
    • +
  • • 부서장 승인 및 구매팀 전달
    • +
+
+
+
+
+
4
+
+

견적 및 발주

+

공급업체 선정 및 주문 처리

+
    +
  • • 여러 업체 견적 비교 검토
    • +
  • • 가격, 품질, 납기 종합 평가
    • +
  • • 최적 업체 선정 및 계약
    • +
  • • 발주서 발행 및 일정 확정
    • +
+
+
+
+
+
5
+
+

자재 입고

+

주문한 자재 입고 및 기본 확인

+
    +
  • • 납품서와 주문서 대조 확인
    • +
  • • 수량 및 외관 상태 점검
    • +
  • • 포장 상태 및 손상 여부
    • +
  • • 입고 일시 및 담당자 기록
    • +
+
+
+
+
+
6
+
+

검수 및 보관

+

철저한 품질 검사 후 체계적 보관

+
    +
  • • 규격 및 재질 정밀 검사
    • +
  • • 품질 기준 적합성 확인
    • +
  • • 생산 일정에 맞춰 재검사
    • +
  • • 보관 중 손상 여부 확인
    • +
  • • 필요시 추가 성능 테스트
    • +
  • • 최종 합격 판정 및 승인
    • +
  • • 구역별 체계적 보관 배치
    • +
  • • 위치 정보 시스템 등록
    • +
+
+
+
+
+
7
+
+

생산 불출

+

생산라인으로 자재 공급

+
    +
  • • 생산 계획에 따른 불출 일정
    • +
  • • 필요 수량만큼 정확히 불출
    • +
  • • 불출 기록 및 재고 업데이트
    • +
  • • 생산팀 인수 확인 완료
    • +
+
+
+
- -
-

🏭 자체제작의 경우

-
-
도면(BOM) 업로드
-
↓
-
분류
-
↓
-
구매신청
-
↓
-
견적/발주
-
↓
-
입고
-
↓
-
검수 및 보관
-
↓
-
검사
-
↓
-
불출
+
+ + +
+

🔍 검수 및 보관 관리 시스템

+

Zero Defect를 위한 완벽한 품질 관리

+ +
+
+
✓
+

3단계 검수

+

입고확인 → 품질검수 → 최종판정
체계적인 검수 프로세스

-
- -
-

📝 중요 사항

-
-
-

보관 단계

-

입고 위치 정보 입력 필수

-
-
-

추가분 발생시

-

리비전 로직으로 진행

-
-
-

긴급/가공건

-

구두로 신청(근거는 남겨야됨) → 긴급 진행 → 사후 처리(발주 담당자)

-
+ +
+
✓
+

QR 추적 시스템

+

실시간 위치 추적
3초 내 즉시 확인

+
+ +
+
✓
+

실시간 모니터링

+

24/7 자동 알림
95% 재고 정확도