cleanup: legacy templates/blocks + figma_to_html_agent block-tests / 옛 docs 정리
전체 561 files, 32464 deletions. Phase Z runtime 의존성 0 — 모두 옛 작업 흔적.
대상:
- templates/blocks/ (104) — 옛 design_agent block library (BEPs, cards, structures,
emphasis, headers, media, svg, visuals, tables 등). Phase Z 가 templates/phase_z2/
로 이전 후 outdated.
- templates/catalog.yaml — 위 block library 의 catalog (의존성과 같이 폐기).
- figma_to_html_agent/block-tests/ (301) — figma 옛 변환 시도들 (renders, assets,
html, png, json, txt, md). 새 figma_to_html_agent/blocks/ 가 대체.
- figma_to_html_agent/templates_staging/ (49) — 옛 staging 시도.
- figma_to_html_agent/figma-{assets,screenshots,analysis,_ref}/ — 옛 figma 자료.
- figma_to_html_agent/previews/ (3) — 옛 preview.
- figma_to_html_agent/{FIGMA-*.md, PLAN.md, RESEARCH.md, PHASE-FIGMA-BLOCKS.md} (7)
— outdated docs (figma 통합 axis 가 끝난 후 polluting).
- figma_to_html_agent/{block_index.faiss, block_metadata.json, figma_*.json} (6)
— 옛 FAISS index + metadata.
Phase Z runtime / V4 catalog 영향 0 (의존성 grep 으로 사전 검증).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,29 +0,0 @@
|
||||
<!-- 상세보기 버튼: 그라데이션 배경 + 둥근 모서리 -->
|
||||
<!--
|
||||
📋 detail-button
|
||||
─────────────────
|
||||
용도: 팝업 또는 상세 페이지로 이동하는 버튼
|
||||
슬롯: label (기본: "상세보기")
|
||||
Figma 원본: Frame 1171276068
|
||||
색상: 배경 그라데이션 #fff → #e3d8bf, 텍스트 #ffffff
|
||||
-->
|
||||
<div class="block-detail-btn">
|
||||
<span class="db-label">{{ label | default('상세보기') }}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-detail-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(90deg, #ffffff, #e3d8bf);
|
||||
border-radius: 7px;
|
||||
padding: 4px 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.db-label {
|
||||
font-size: var(--font-caption, 11px);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<!-- Engn. Solution / DfMA 설명 + 정책 달성 -->
|
||||
<!--
|
||||
📋 engn-solution-dfma
|
||||
─────────────────
|
||||
용도: Engn. Solution과 DfMA 개념 설명 + 정책 달성 연결
|
||||
슬롯:
|
||||
items[]: 항목 목록
|
||||
- title: 제목 (예: "Engn. Solution", "DfMA")
|
||||
- description: 설명 텍스트
|
||||
- color: 제목 색상 (예: "#217581")
|
||||
main_text: 하단 메인 텍스트
|
||||
policy_label: 정책 달성 라벨
|
||||
Figma 원본: Frame 1171276070
|
||||
-->
|
||||
<div class="block-engn">
|
||||
<div class="engn-items">
|
||||
{% for item in items %}
|
||||
<div class="engn-item">
|
||||
<div class="engn-title" style="color: {{ item.color | default('#217581') }}">{{ item.title }}</div>
|
||||
<div class="engn-desc">{{ item.description }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if main_text %}
|
||||
<div class="engn-main">{{ main_text }}</div>
|
||||
{% endif %}
|
||||
{% if policy_label %}
|
||||
<div class="engn-policy">{{ policy_label }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-engn {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.engn-items {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.engn-item {
|
||||
flex: 1;
|
||||
}
|
||||
.engn-title {
|
||||
font-size: var(--font-subtitle, 16px);
|
||||
font-weight: 900;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.engn-desc {
|
||||
font-size: var(--font-caption, 12px);
|
||||
font-weight: 700;
|
||||
color: #217581;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
}
|
||||
.engn-main {
|
||||
font-size: var(--font-body, 14px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.engn-policy {
|
||||
background: #1a365d;
|
||||
color: #fff;
|
||||
font-size: var(--font-body, 14px);
|
||||
font-weight: 700;
|
||||
padding: 8px 20px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<!-- 이미지 플레이스홀더: 이미지 슬롯만 있는 프레임 -->
|
||||
<!--
|
||||
📋 image-placeholder
|
||||
─────────────────
|
||||
용도: 이미지만 배치되는 프레임 (텍스트 없음)
|
||||
슬롯: src (이미지 경로), alt (대체 텍스트), width, height
|
||||
Figma 원본: Frame 1171276071 (949x275, 이미지만)
|
||||
-->
|
||||
<div class="block-img-ph">
|
||||
<img src="{{ src }}" alt="{{ alt | default('') }}" style="width:100%;height:100%;object-fit:contain;">
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-img-ph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.block-img-ph img {
|
||||
border-radius: var(--radius, 6px);
|
||||
}
|
||||
</style>
|
||||
@@ -1,87 +0,0 @@
|
||||
<!-- 정책방향: 좌측 설명 + 우측 항목/이미지 -->
|
||||
<!--
|
||||
📋 policy-direction
|
||||
─────────────────
|
||||
용도: 인프라 건설산업의 정책방향 설명 (좌측 텍스트 + 우측 구조도)
|
||||
슬롯:
|
||||
title: 대제목 (예: "인프라 건설산업의 정책방향")
|
||||
description: 설명 텍스트
|
||||
sub_sections[]: 하위 섹션 목록
|
||||
- title: 섹션 제목
|
||||
- bullets[]: 불릿
|
||||
questions[]: 질문 목록 (좌하단)
|
||||
- text: 질문 텍스트
|
||||
Figma 원본: Frame 1171276067
|
||||
-->
|
||||
<div class="block-policy">
|
||||
<div class="pol-header">
|
||||
<div class="pol-title">{{ title }}</div>
|
||||
{% if description %}
|
||||
<div class="pol-desc">{{ description }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="pol-content">
|
||||
{% for section in sub_sections %}
|
||||
<div class="pol-section">
|
||||
<div class="pol-section-title">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="pol-bullet">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if questions %}
|
||||
<div class="pol-questions">
|
||||
{% for q in questions %}
|
||||
<div class="pol-q">{{ q.text }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-policy {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
.pol-header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.pol-title {
|
||||
font-size: var(--font-subtitle, 16px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pol-desc {
|
||||
font-size: var(--font-caption, 12px);
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
}
|
||||
.pol-section {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pol-section-title {
|
||||
font-size: var(--font-body, 13px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pol-bullet {
|
||||
font-size: var(--font-caption, 11px);
|
||||
color: #333;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
padding-left: 8px;
|
||||
}
|
||||
.pol-questions {
|
||||
margin-top: 16px;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.pol-q {
|
||||
font-size: var(--font-body, 13px);
|
||||
font-weight: 700;
|
||||
color: #c41e3a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,187 +0,0 @@
|
||||
<!-- Process/Product 2단 비교: 좌측 과정의 혁신 + 우측 결과의 혁신 -->
|
||||
<!--
|
||||
📋 process-product-2col
|
||||
─────────────────
|
||||
용도: Process 혁신과 Product 변화를 좌우 2단으로 비교
|
||||
슬롯:
|
||||
left_title, right_title: 좌/우 제목
|
||||
left_sections[], right_sections[]: 섹션 목록 (title + bullets[])
|
||||
left_compare: As-is → To-be 비교 (선택, title + left_items[] + right_items[])
|
||||
Figma 원본: Frame 1171276073 (3848x1487 → 1280x495)
|
||||
색상 (Figma에서 추출):
|
||||
좌 배경: linear-gradient(180deg, #ffffff 46%, #39311e 100%)
|
||||
우 배경: linear-gradient(0deg, #296b55 0%, #ffffff 56%)
|
||||
좌 제목바: linear-gradient(270deg, #a4a096, #39311e)
|
||||
우 제목바: linear-gradient(0deg, #296b55, #022017)
|
||||
좌 제목텍스트: gradient(#296b55→#123328) + solid #3e3523
|
||||
우 제목텍스트: gradient(#296b55→#123328) + solid #225e4a
|
||||
좌 중제목: #5c3614, 16.6px/900
|
||||
우 중제목: #084c56, 16.6px/900
|
||||
본문: #000000, 13.3px/700, lineH=23.3px
|
||||
-->
|
||||
<div class="block-pp2">
|
||||
<div class="pp2-col pp2-left">
|
||||
<div class="pp2-header-bar pp2-header-bar--left">
|
||||
<span class="pp2-header-text pp2-header-text--left">{{ left_title }}</span>
|
||||
</div>
|
||||
<div class="pp2-body">
|
||||
{% if left_compare %}
|
||||
<div class="pp2-mid-title pp2-mid-title--left">{{ left_compare.title }}</div>
|
||||
<div class="pp2-compare">
|
||||
<div class="pp2-compare-col">
|
||||
{% for item in left_compare.left_items %}
|
||||
<div class="pp2-body-text">• {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pp2-compare-arrow">
|
||||
<img src="{{ arrow_image | default('') }}" alt="→" class="pp2-arrow-img">
|
||||
</div>
|
||||
<div class="pp2-compare-col">
|
||||
{% for item in left_compare.right_items %}
|
||||
<div class="pp2-body-text">• {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% for section in left_sections %}
|
||||
<div class="pp2-mid-title pp2-mid-title--left">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pp2-col pp2-right">
|
||||
<div class="pp2-header-bar pp2-header-bar--right">
|
||||
<span class="pp2-header-text pp2-header-text--right">{{ right_title }}</span>
|
||||
</div>
|
||||
<div class="pp2-body">
|
||||
{% for section in right_sections %}
|
||||
<div class="pp2-mid-title pp2-mid-title--right">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-pp2 {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pp2-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 495px;
|
||||
}
|
||||
|
||||
/* 좌측 배경: Figma gradient 180deg #fff 46% → #39311e 100% */
|
||||
.pp2-left {
|
||||
background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
|
||||
}
|
||||
|
||||
/* 우측 배경: Figma gradient 0deg #296b55 0% → #fff 56% */
|
||||
.pp2-right {
|
||||
background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
|
||||
}
|
||||
|
||||
/* 제목 바: height=47.2px, top=20.6px → padding-top으로 처리 */
|
||||
.pp2-header-bar {
|
||||
height: 47px;
|
||||
margin-top: 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 좌 제목바: 우측 둥글게, 그라데이션 우→좌 */
|
||||
.pp2-header-bar--left {
|
||||
background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
|
||||
border-radius: 0 24px 24px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 우 제목바: 좌측 둥글게, 그라데이션 좌→우 */
|
||||
.pp2-header-bar--right {
|
||||
background: linear-gradient(90deg, #296b55 0%, #022017 100%);
|
||||
border-radius: 24px 0 0 24px;
|
||||
padding-left: 71px;
|
||||
}
|
||||
|
||||
/* 제목 텍스트: 23.3px/900, letterSpacing=1.2px */
|
||||
.pp2-header-text {
|
||||
font-size: 23.3px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 1.2px;
|
||||
line-height: 33.7px;
|
||||
}
|
||||
|
||||
/* 좌 제목: Figma solid fill #3e3523 */
|
||||
.pp2-header-text--left {
|
||||
color: #3e3523;
|
||||
}
|
||||
|
||||
/* 우 제목: Figma solid fill #225e4a */
|
||||
.pp2-header-text--right {
|
||||
color: #225e4a;
|
||||
}
|
||||
|
||||
/* 본문 영역 */
|
||||
.pp2-body {
|
||||
padding: 10px 27px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* 중제목: 16.6px/900, lineH=31.6px */
|
||||
.pp2-mid-title {
|
||||
font-size: 16.6px;
|
||||
font-weight: 900;
|
||||
line-height: 31.6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.pp2-mid-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pp2-mid-title--left {
|
||||
color: #5c3614;
|
||||
}
|
||||
.pp2-mid-title--right {
|
||||
color: #084c56;
|
||||
}
|
||||
|
||||
/* 본문: 13.3px/700, lineH=23.3px */
|
||||
.pp2-body-text {
|
||||
font-size: 13.3px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
line-height: 23.3px;
|
||||
}
|
||||
|
||||
/* As-is → To-be 비교 */
|
||||
.pp2-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pp2-compare-col {
|
||||
flex: 1;
|
||||
}
|
||||
.pp2-compare-arrow {
|
||||
flex-shrink: 0;
|
||||
width: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pp2-arrow-img {
|
||||
width: 84px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -1,76 +0,0 @@
|
||||
<!-- Solution 제작 목표: 5개 목표 카드 + 중앙 텍스트 -->
|
||||
<!--
|
||||
📋 solution-goals
|
||||
─────────────────
|
||||
용도: Solution 제작의 5가지 핵심 목표 (Easy, Convenient, Quality, Cost, Speed)
|
||||
슬롯:
|
||||
main_text: 중앙 메인 텍스트
|
||||
goals[]: 목표 카드 목록
|
||||
- en: 영문 라벨 (예: "Easy Like Breath")
|
||||
- ko: 한글 라벨 (예: "(쉬운 이해)")
|
||||
- icon: 아이콘 이미지 경로 (선택)
|
||||
Figma 원본: Frame 1171276072
|
||||
색상: 제목 #ffffff on dark, 본문 #000000, 영문 gradient text
|
||||
-->
|
||||
<div class="block-sol-goals">
|
||||
<div class="sg-title">Solution 제작 목표</div>
|
||||
<div class="sg-main">{{ main_text }}</div>
|
||||
<div class="sg-grid" style="--sg-count: {{ goals|length }}">
|
||||
{% for g in goals %}
|
||||
<div class="sg-card">
|
||||
{% if g.icon %}<img class="sg-icon" src="{{ g.icon }}" alt="{{ g.en }}">{% endif %}
|
||||
<div class="sg-en">{{ g.en }}</div>
|
||||
<div class="sg-ko">{{ g.ko }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-sol-goals {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.sg-title {
|
||||
font-size: var(--font-subtitle, 16px);
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
background: #1a365d;
|
||||
display: inline-block;
|
||||
padding: 6px 20px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sg-main {
|
||||
font-size: var(--font-body, 14px);
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
line-height: var(--line-height-ko, 1.7);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sg-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--sg-count, 5), 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.sg-card {
|
||||
text-align: center;
|
||||
}
|
||||
.sg-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.sg-en {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
color: #1a365d;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.sg-ko {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
@@ -1,104 +0,0 @@
|
||||
# 블록 라이브러리 인덱스 (38개)
|
||||
|
||||
디자인 팀장이 콘텐츠에 맞는 블록을 선택할 때 참조하는 라이브러리.
|
||||
각 카테고리 안에 변형이 여러 개 있으며, 콘텐츠 성격에 따라 적절한 변형을 선택한다.
|
||||
|
||||
**시각화(visuals/)는 SVG로 제작한다** — CSS/AI 이미지 금지.
|
||||
|
||||
---
|
||||
|
||||
## 📁 headers/ (5개) — 타이틀, 꼭지 헤더
|
||||
|
||||
| 파일 | 설명 | 언제 사용 |
|
||||
|------|------|---------|
|
||||
| `section-title-with-bg.html` | 배경 이미지 위 영문+한글 타이틀 (500px) | 페이지 맨 첫 화면, 배경 이미지 있을 때 |
|
||||
| `section-header-bar.html` | 파란 바 + 중앙 흰 제목 (컴팩트) | 섹션 시작 가볍게, 주제 전환 |
|
||||
| `topic-left-right.html` | 좌:파란 제목 + 우:설명 | 질문+답변 구조, 주장+근거 |
|
||||
| `topic-center.html` | 중앙 정렬 대제목 + 서브+설명 | 단독 강조, 주제 선언 |
|
||||
| `topic-numbered.html` | 번호 원형 + 제목 + 구분선 + 설명 | 순서 있는 꼭지 (1번, 2번, 3번) |
|
||||
|
||||
---
|
||||
|
||||
## 📁 cards/ (9개) — 카드 계열
|
||||
|
||||
| 파일 | 설명 | 언제 사용 |
|
||||
|------|------|---------|
|
||||
| `card-image-3col.html` | 이미지(160px) + 색상 제목 + 영문 + 불릿 (3열) | 단계별 설명에 이미지 핵심 |
|
||||
| `card-dark-overlay.html` | 다크 이미지 배경 + 흰 제목 + 짧은 설명 (3~5열) | 키워드 시각 강조, 임팩트 |
|
||||
| `card-tag-image.html` | 색상 태그 라벨 + 이미지 + 제목 + 설명 (3열) | 카테고리별 분류 (제조/건축/토목) |
|
||||
| `card-icon-desc.html` | 큰 이모지 아이콘 + 제목 + 설명 (2~4열) | 기능/특성/장점 아이콘 나열 |
|
||||
| `card-compare-3col.html` | 색상 헤더 카드 3열 + 불릿 | 3개 카테고리 비교 (상용/범용/전문) |
|
||||
| `card-step-vertical.html` | 좌 색상 마커 + 우 콘텐츠 (세로, 연결선) | 생애주기 단계별 (이미지+설명) |
|
||||
| `card-image-round.html` | 원형 이미지(140px) + 제목 + 설명 (2~3열) | 포트폴리오형, 비전/가치 |
|
||||
| `card-stat-number.html` | 큰 숫자(36px) + 단위 + 라벨 (2~4열) | KPI, 성과 수치, 비용 절감율 |
|
||||
| `card-numbered.html` | 색상 원형 번호 + 제목 + 설명 (세로) | 순서 있는 항목 (실행 단계, 조건) |
|
||||
|
||||
---
|
||||
|
||||
## 📁 tables/ (3개) — 표/비교 계열
|
||||
|
||||
| 파일 | 설명 | 언제 사용 |
|
||||
|------|------|---------|
|
||||
| `compare-3col-badge.html` | A \| VS배지 \| B 3단 비교 (행별) | 두 개념 다항목 비교 (BIM vs DX) |
|
||||
| `compare-2col-split.html` | 파란 헤더 좌/구분/우 + 행별 비교 | 두 기술 항목별 상세 비교 (GIS vs BIM) |
|
||||
| `table-simple-striped.html` | 남색 헤더 + 줄무늬 행. 범용 | 스펙표, 일정표, 수치 목록 |
|
||||
|
||||
---
|
||||
|
||||
## 📁 visuals/ (6개) — 시각 요소 (**SVG**)
|
||||
|
||||
**SVG 노하우:**
|
||||
- `<text>` = 원 좌표와 같은 공간 → 위치 100% 정확
|
||||
- `radialGradient`/`linearGradient` → 고급 그라데이션
|
||||
- `filter` → 글로우/그림자
|
||||
- 수학적 계산 (cos/sin) → N개 자동 배치 (Phase 2)
|
||||
- **AI 이미지로 시각화 만들면 안 됨** — 원 위치 맞출 수 없음
|
||||
|
||||
| 파일 | 설명 | 언제 사용 |
|
||||
|------|------|---------|
|
||||
| `venn-diagram.html` | **SVG premium** 벤 다이어그램 (그라데이션+글로우) | 포함 관계, 기술 융합 (**★단독 배치**) |
|
||||
| `circle-gradient.html` | 파란 그라데이션 원 + 중앙 텍스트 | 섹션 전환 키워드 강조 |
|
||||
| `compare-pill-pair.html` | 이중 테두리 둥근 박스 2개 + VS | 2개 개념 시각 대비 (표 위 헤더) |
|
||||
| `process-horizontal.html` | 파란 번호 원 + 카드 + → 화살표 (가로) | 논리적 프로세스 흐름 |
|
||||
| `flow-arrow-horizontal.html` | 색상 캡슐 + 화살표 (SVG, 컴팩트) | 기술 발전/전환 흐름 간결하게 |
|
||||
| `keyword-circle-row.html` | SVG 원형 안 큰 글자 + 라벨 + 설명 | 약어 풀이 (G-S-I-M) |
|
||||
|
||||
---
|
||||
|
||||
## 📁 emphasis/ (10개) — 강조, 인용, 결론
|
||||
|
||||
| 파일 | 설명 | 언제 사용 |
|
||||
|------|------|---------|
|
||||
| `quote-big-mark.html` | ❝❞ 큰따옴표 장식 + 인용+출처 | 임팩트 인용, 핵심 발언 |
|
||||
| `quote-question.html` | 파란 배경+테두리 + 큰 질문 텍스트 | 독자에게 질문, 전환점 |
|
||||
| `comparison-2col.html` | 좌 파란 vs 우 빨간 헤더 + 본문 | A vs B 직접 비교 |
|
||||
| `banner-gradient.html` | 파란 그라데이션 배너 + 중앙 흰 텍스트 | 섹션 구분, 핵심 선언 |
|
||||
| `dark-bullet-list.html` | 짙은 남색 배경 + 파란 제목 + 흰 불릿 | 핵심 포인트 강조 (무게감) |
|
||||
| `highlight-strip.html` | 가로 색상 구간 + 흰 라벨 | 카테고리 색상 분류 바 |
|
||||
| `callout-solution.html` | 파란 배경+테두리 + 아이콘 + 제목+설명 | 해결책, 솔루션, 방향성 |
|
||||
| `callout-warning.html` | 빨간 배경+테두리 + 아이콘 + 제목+설명 | 문제점, 주의, 잘못된 접근 |
|
||||
| `tab-label-row.html` | 가로 탭 버튼 (선택됨=색상, 나머지=회색) | 카테고리 전환/분류 표시 |
|
||||
| `divider-text.html` | 좌우 회색 선 + 중앙 텍스트 | 가벼운 섹션 구분, 휴식점 |
|
||||
|
||||
---
|
||||
|
||||
## 📁 media/ (5개) — 이미지/미디어
|
||||
|
||||
| 파일 | 설명 | 언제 사용 |
|
||||
|------|------|---------|
|
||||
| `image-row-2col.html` | 이미지 2장 나란히 (354px) | 시공 사진 2장, 현장 비교 |
|
||||
| `image-grid-2x2.html` | 이미지 4장 2x2 격자 (200px) | 현장 사진 4장, 갤러리 |
|
||||
| `image-side-text.html` | 좌:이미지(320px) + 우:제목+설명+불릿 | 이미지 설명, 시스템 소개 |
|
||||
| `image-full-caption.html` | 전체 너비 이미지 1장 + 캡션 | 핵심 도표, 대형 다이어그램 |
|
||||
| `image-before-after.html` | Before(회색) + → + After(파란) | 변화 전후 비교 |
|
||||
|
||||
---
|
||||
|
||||
## 추가 규칙
|
||||
|
||||
1. **이름 규칙:** `{유형}-{특징}.html`
|
||||
2. **모든 변형은 catalog.yaml에 등록** — 미등록 = 팀장이 모름
|
||||
3. **각 파일 상단에 HTML 주석으로 용도/슬롯 명시**
|
||||
4. **디자인 토큰 사용** — 하드코딩 색상 금지 (가능한 범위에서)
|
||||
5. **높이 고정 금지** — 모드 독립적 (슬라이드/웹 겸용)
|
||||
6. **visuals/는 SVG로 제작** — CSS 원/AI 이미지 금지
|
||||
@@ -1,74 +0,0 @@
|
||||
<!-- 3단 비교 카드: 각각 다른 색상 헤더 + 아이콘/이미지 + 불릿 -->
|
||||
<!--
|
||||
📋 card-compare-3col
|
||||
─────────────────
|
||||
용도: 3개 카테고리 비교 (예: 상용SW / 3rd Party / 전문SW)
|
||||
슬롯: cards[] (각 카드에 title, subtitle, color, image, bullets[])
|
||||
Figma 원본: 2-2_03 "상용 / 3rd Party(범용) / 전문·전용 S/W"
|
||||
-->
|
||||
<div class="block-compare-3" style="--cc-count: {{ cards|length }}">
|
||||
{% for card in cards %}
|
||||
<div class="cc-card">
|
||||
<div class="cc-header" style="background: {{ card.color | default('#2563eb') }}">
|
||||
<div class="cc-title">{{ card.title }}</div>
|
||||
{% if card.subtitle %}<div class="cc-sub">{{ card.subtitle }}</div>{% endif %}
|
||||
</div>
|
||||
{% if card.image %}
|
||||
<img class="cc-img" src="{{ card.image }}" alt="{{ card.title }}">
|
||||
{% endif %}
|
||||
{% if card.bullets %}
|
||||
<ul class="cc-list">
|
||||
{% for item in card.bullets %}
|
||||
<li>{{ item }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-compare-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cc-count, 3), 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
.cc-card {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
.cc-header {
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.cc-title {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.cc-sub {
|
||||
font-size: 11px;
|
||||
opacity: 0.85;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.cc-img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: contain;
|
||||
background: #f8fafc;
|
||||
padding: 8px;
|
||||
}
|
||||
.cc-list {
|
||||
list-style: disc;
|
||||
padding: 12px 16px 14px 30px;
|
||||
font-size: 13px;
|
||||
color: #334155;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.cc-list li {
|
||||
margin-bottom: 3px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,77 +0,0 @@
|
||||
<!-- 다크 오버레이 카드: 배경 이미지 + 흰 텍스트 오버레이 -->
|
||||
<!--
|
||||
📋 card-dark-overlay
|
||||
─────────────────
|
||||
용도: 키워드+짧은 설명을 시각적으로 강조. 이미지 위에 다크 오버레이 + 흰 텍스트.
|
||||
슬롯: cards[] (각 카드에 image, title, description)
|
||||
Figma 원본: 2-2_01 > 아이콘 카드 5열 (협업지원, 오류감소, 생산성향상 등)
|
||||
-->
|
||||
<div class="block-card-dark" style="--cd-count: {{ cards|length }}">
|
||||
{% for card in cards %}
|
||||
<div class="cd-card">
|
||||
{% if card.image %}
|
||||
<img class="cd-bg" src="{{ card.image }}" alt="">
|
||||
{% else %}
|
||||
<div class="cd-bg cd-bg-default"></div>
|
||||
{% endif %}
|
||||
<div class="cd-overlay">
|
||||
<div class="cd-title">{{ card.title }}</div>
|
||||
{% if card.description %}<div class="cd-desc">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-dark {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cd-count, 3), 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
.cd-card {
|
||||
position: relative;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
}
|
||||
.cd-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
.cd-bg-default {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||||
}
|
||||
.cd-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.cd-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 6px;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
.cd-desc {
|
||||
white-space: pre-line;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
opacity: 0.9;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!-- card-icon-desc variant: compact -->
|
||||
<!--
|
||||
📋 card-icon-desc--compact
|
||||
─────────────────
|
||||
용도: 높이가 부족할 때 아이콘 카드를 축소 렌더링
|
||||
슬롯: cards[] (기존과 동일 — icon, title, description)
|
||||
기존 card-icon-desc의 색상/구조 유지, 패딩/아이콘 축소
|
||||
-->
|
||||
<div class="block-card-icon-compact" style="--ci-count: {{ column_override | default(cards|length) }}">
|
||||
{% for card in cards %}
|
||||
<div class="cid-card-c">
|
||||
{% if card.icon %}<div class="cid-icon-c">{{ card.icon }}</div>{% endif %}
|
||||
<div class="cid-title-c">{{ card.title }}</div>
|
||||
{% if card.description %}<div class="cid-desc-c">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-icon-compact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.cid-card-c {
|
||||
text-align: center;
|
||||
padding: 8px 8px;
|
||||
background: #f8fafc;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.cid-icon-c {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.cid-title-c {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cid-desc-c {
|
||||
font-size: 10px;
|
||||
color: #475569;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!-- 아이콘 설명 카드: 아이콘 + 제목 + 설명 (2~4열) -->
|
||||
<!--
|
||||
📋 card-icon-desc
|
||||
─────────────────
|
||||
용도: 기능/특성/장점을 아이콘과 함께 나열. 시각적으로 분류.
|
||||
슬롯: cards[] (각 카드에 icon, title, description)
|
||||
Figma 원본: 2-3_01 아이콘 3열 설명
|
||||
-->
|
||||
<div class="block-card-icon" style="--ci-count: {{ column_override | default(cards|length) }}">
|
||||
{% for card in cards %}
|
||||
<div class="cid-card">
|
||||
{% if card.icon %}<div class="cid-icon">{{ card.icon }}</div>{% endif %}
|
||||
<div class="cid-title">{{ card.title }}</div>
|
||||
{% if card.description %}<div class="cid-desc">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-icon {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.cid-card {
|
||||
text-align: center;
|
||||
padding: 20px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.cid-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cid-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cid-desc {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,96 +0,0 @@
|
||||
<!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
|
||||
<!--
|
||||
📋 card-image
|
||||
─────────────────
|
||||
용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
|
||||
슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
|
||||
Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
|
||||
-->
|
||||
<div class="block-card-image" style="--ci-count: {{ cards|length }}">
|
||||
{% for card in cards %}
|
||||
<div class="ci-card">
|
||||
{% if card.image %}
|
||||
<img class="ci-img" src="{{ card.image }}" alt="{{ card.title }}">
|
||||
{% endif %}
|
||||
<div class="ci-body">
|
||||
<div class="ci-title" style="color: {{ card.color | default('var(--color-accent, #006aff)') }}">{{ card.title }}</div>
|
||||
{% if card.title_en %}<div class="ci-title-en">{{ card.title_en }}</div>{% endif %}
|
||||
<div class="ci-divider"></div>
|
||||
<ul class="ci-list">
|
||||
{% for item in card.bullets %}
|
||||
<li>{{ item }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% if card.source %}<div class="ci-source">{{ card.source }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-image {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.ci-card {
|
||||
background: var(--color-bg, #ffffff);
|
||||
border-radius: var(--radius, 8px);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ci-img {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
object-fit: contain;
|
||||
background: #f8f9fb;
|
||||
padding: 10px;
|
||||
}
|
||||
.ci-body {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ci-title {
|
||||
font-size: 14px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.ci-title-en {
|
||||
font-size: 12px;
|
||||
font-weight: var(--weight-normal, 400);
|
||||
color: var(--color-text-secondary, #666);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ci-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ci-list {
|
||||
white-space: pre-line;
|
||||
list-style: disc;
|
||||
padding-left: 18px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--color-text, #000);
|
||||
flex: 1;
|
||||
}
|
||||
.ci-list li {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.ci-source {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-light, #94a3b8);
|
||||
font-style: italic;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid var(--color-border, #e2e8f0);
|
||||
padding-top: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!-- 원형 이미지 카드: 원형 이미지 + 하단 제목/설명 -->
|
||||
<!--
|
||||
📋 card-image-round
|
||||
─────────────────
|
||||
용도: 포트폴리오형, 팀 소개, 가치/비전 표현 (원형 이미지가 핵심)
|
||||
슬롯: cards[] (각 카드에 image, title, description)
|
||||
Figma 원본: 1장_가치 하단 3열 원형 이미지 + 설명
|
||||
-->
|
||||
<div class="block-card-round" style="--cr-count: {{ cards|length }}">
|
||||
{% for card in cards %}
|
||||
<div class="cr-card">
|
||||
{% if card.image %}
|
||||
<div class="cr-img-wrap">
|
||||
<img src="{{ card.image }}" alt="{{ card.title | default('') }}">
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="cr-title">{{ card.title }}</div>
|
||||
{% if card.description %}<div class="cr-desc">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-round {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cr-count, 3), 1fr);
|
||||
gap: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.cr-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.cr-img-wrap {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid #e2e8f0;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.cr-img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.cr-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cr-desc {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
white-space: pre-line;
|
||||
max-width: 200px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!-- card-numbered variant: horizontal -->
|
||||
<!--
|
||||
📋 card-numbered--horizontal
|
||||
─────────────────
|
||||
용도: 같은 구조의 항목 2-3개를 가로로 나란히 비교
|
||||
슬롯: items[] (기존과 동일 — title, description)
|
||||
기존 card-numbered의 색상/스타일 유지, 배치만 가로
|
||||
-->
|
||||
<div class="block-card-num-h" style="--cn-count: {{ items|length }}">
|
||||
{% for item in items %}
|
||||
<div class="cn-item-h">
|
||||
<div class="cn-number-h" style="background: {{ item.color | default('#2563eb') }}">{{ loop.index }}</div>
|
||||
<div class="cn-body-h">
|
||||
<div class="cn-title-h">{{ item.title }}</div>
|
||||
<div class="cn-desc-h">{{ item.description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-num-h {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cn-count, 2), 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.cn-item-h {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
padding: 10px 14px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.cn-number-h {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cn-title-h {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cn-desc-h {
|
||||
font-size: 11px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!-- 번호 카드: 순서 번호 + 제목 + 설명 (세로 나열) -->
|
||||
<!--
|
||||
📋 card-numbered
|
||||
─────────────────
|
||||
용도: 순서가 있는 항목 나열 (1. 2. 3.), 실행 조건, 요구사항
|
||||
슬롯: items[] (각 항목에 title, description)
|
||||
card-icon-desc와 다른 점: 아이콘 대신 순서 번호, 세로 나열
|
||||
-->
|
||||
<div class="block-card-num">
|
||||
{% for item in items %}
|
||||
<div class="cn-item">
|
||||
<div class="cn-number" style="background: {{ item.color | default('#2563eb') }}">{{ loop.index }}</div>
|
||||
<div class="cn-body">
|
||||
<div class="cn-title">{{ item.title }}</div>
|
||||
{% if item.description %}<div class="cn-desc">{{ item.description }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-num {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.cn-item {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
padding: 12px 16px;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.cn-number {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cn-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cn-desc {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!-- 통계 숫자 카드: 큰 숫자 + 라벨 + 설명 -->
|
||||
<!--
|
||||
📋 card-stat-number
|
||||
─────────────────
|
||||
용도: KPI, 성과 수치, 목표 달성률, 비용 절감율 등 핵심 지표 강조
|
||||
슬롯: stats[] (각 항목에 number, unit, label, description, color)
|
||||
Figma 참고: 건설 정책 수치 (30% 절감, 40% 감소 등)
|
||||
-->
|
||||
<div class="block-stat" style="--st-count: {{ stats|length }}">
|
||||
{% for stat in stats %}
|
||||
<div class="st-card">
|
||||
<div class="st-number" style="color: {{ stat.color | default('#2563eb') }}">
|
||||
{{ stat.number }}<span class="st-unit">{{ stat.unit | default('') }}</span>
|
||||
</div>
|
||||
<div class="st-label">{{ stat.label }}</div>
|
||||
{% if stat.description %}<div class="st-desc">{{ stat.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-stat {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--st-count, 3), 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.st-card {
|
||||
text-align: center;
|
||||
padding: 20px 12px;
|
||||
background: #f8fafc;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.st-number {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.st-unit {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.st-label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.st-desc {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,93 +0,0 @@
|
||||
<!-- 세로 단계 카드: 좌측 단계 마커 + 우측 이미지/텍스트 -->
|
||||
<!--
|
||||
📋 card-step-vertical
|
||||
─────────────────
|
||||
용도: 생애주기 단계별 설명, 시간순 프로세스 (설계→시공→운영→유지관리)
|
||||
슬롯: steps[] (각 단계에 phase, title, description, image, color)
|
||||
Figma 원본: 2-3_04 "건설 생애주기와 정보모델 연계" (설계단계/시공단계/운영관리/유지관리)
|
||||
-->
|
||||
<div class="block-step-v">
|
||||
{% for step in steps %}
|
||||
<div class="sv-step">
|
||||
<div class="sv-marker" style="background: {{ step.color | default('#2563eb') }}">
|
||||
<div class="sv-phase">{{ step.phase }}</div>
|
||||
</div>
|
||||
<div class="sv-content">
|
||||
<div class="sv-title">{{ step.title }}</div>
|
||||
{% if step.image %}
|
||||
<img class="sv-img" src="{{ step.image }}" alt="{{ step.title }}">
|
||||
{% endif %}
|
||||
{% if step.description %}<div class="sv-desc">{{ step.description }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if not loop.last %}
|
||||
<div class="sv-connector">
|
||||
<div class="sv-line" style="background: {{ step.color | default('#2563eb') }}"></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-step-v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
.sv-step {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.sv-marker {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.sv-phase {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sv-content {
|
||||
flex: 1;
|
||||
background: #f8fafc;
|
||||
border-radius: 8px;
|
||||
padding: 14px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.sv-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sv-img {
|
||||
width: 100%;
|
||||
max-height: 150px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sv-desc {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.sv-connector {
|
||||
display: flex;
|
||||
justify-content: 50px;
|
||||
padding-left: 48px;
|
||||
height: 20px;
|
||||
}
|
||||
.sv-line {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
</style>
|
||||
@@ -1,63 +0,0 @@
|
||||
<!-- 태그 카드: 상단 태그 라벨 + 이미지 + 설명 -->
|
||||
<!--
|
||||
📋 card-tag-image
|
||||
─────────────────
|
||||
용도: 카테고리별 분류 (제조/건축/토목 등), 태그로 구분되는 항목
|
||||
슬롯: cards[] (각 카드에 tag, tag_color, image, title, description)
|
||||
Figma 원본: 2-3_01 "산업별 특성과 현장의 모습" (제조, 건축, 인프라/토목)
|
||||
-->
|
||||
<div class="block-card-tag" style="--ct-count: {{ column_override | default(cards|length) }}">
|
||||
{% for card in cards %}
|
||||
<div class="ct-card">
|
||||
<div class="ct-tag" style="background: {{ card.tag_color | default('#2563eb') }}">{{ card.tag }}</div>
|
||||
{% if card.image %}
|
||||
<img class="ct-img" src="{{ card.image }}" alt="{{ card.title | default('') }}">
|
||||
{% endif %}
|
||||
{% if card.title %}<div class="ct-title">{{ card.title }}</div>{% endif %}
|
||||
{% if card.description %}<div class="ct-desc">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-card-tag {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ct-count, 3), 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.ct-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ct-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
border-radius: 0 0 8px 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.ct-img {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ct-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
padding: 10px 14px 4px;
|
||||
}
|
||||
.ct-desc {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.7;
|
||||
padding: 0 14px 14px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,114 +0,0 @@
|
||||
<!-- 카테고리 컬러 스트립 테이블: 좌측 색상 바 + 제목/본문 × N열 × M행 -->
|
||||
<!--
|
||||
📋 category-strip-table
|
||||
─────────────────
|
||||
용도: 카테고리별 필수조건/요건을 N열로 나열. 각 열에 색상 바 + 제목 + 본문 반복.
|
||||
슬롯: columns[] (각 열에 color, label, label_sub, rows[{title, body}])
|
||||
Figma 원본: Page 2 / 001_개요 우측 하단 "필수조건" (기술/사람/자연 3열)
|
||||
수학적 계산:
|
||||
table 2123x595, scale=1200/2123=0.5652
|
||||
col_w=390px, strip_w=86px, content_w=304px
|
||||
title: 22px/700, body: 16px/500(#3E3523)
|
||||
strip label: 24px/700 white 세로쓰기
|
||||
-->
|
||||
<div class="block-cst" style="--cst-count: {{ columns|length }}">
|
||||
{% for col in columns %}
|
||||
<div class="cst-col">
|
||||
<div class="cst-strip" style="background: {{ col.color | default('#4a7fb5') }}">
|
||||
{% if col.label %}<span class="cst-strip-label">{{ col.label }}</span>{% endif %}
|
||||
{% if col.label_sub %}<span class="cst-strip-label">{{ col.label_sub }}</span>{% endif %}
|
||||
</div>
|
||||
<div class="cst-content">
|
||||
{% for row in col.rows %}
|
||||
{% if not loop.first %}<div class="cst-divider"></div>{% endif %}
|
||||
<div class="cst-row">
|
||||
<div class="cst-title">{{ row.title }}</div>
|
||||
{% if row.body %}<div class="cst-body">{{ row.body }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
수학적 계산 (Figma 원본):
|
||||
table 2123x595, scale = 1200/2123 = 0.5652
|
||||
col: 690px → 390px, strip: 152px → 86px
|
||||
title: 45px → 22px, body: 35px → 16px
|
||||
N열 동적: col_w = (1200 - gap*(N-1)) / N
|
||||
*/
|
||||
.block-cst {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cst-count, 3), 1fr);
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ── Column ── */
|
||||
.cst-col {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
/* ── Color Strip (좌측 바) ── */
|
||||
.cst-strip {
|
||||
width: 40px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 4px;
|
||||
}
|
||||
.cst-strip-label {
|
||||
font-size: 20px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: #ffffff;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
/* ── Content (제목 + 본문 반복) ── */
|
||||
.cst-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Row (제목 + 본문) ── */
|
||||
.cst-row {
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.cst-title {
|
||||
font-size: 18px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: #ffffff;
|
||||
line-height: 1.4;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.cst-body {
|
||||
font-size: 14px;
|
||||
font-weight: var(--weight-medium, 500);
|
||||
color: rgba(255,255,255,0.7);
|
||||
line-height: 1.6;
|
||||
word-break: keep-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
/* ── Divider (행 구분선) ── */
|
||||
.cst-divider {
|
||||
height: 1px;
|
||||
background: rgba(255,255,255,0.15);
|
||||
margin: 0 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,106 +0,0 @@
|
||||
<!-- 배지 헤더 2열 비교: 3D 리본 탭 + 좌/우 비교 + 선택적 하단 문구 -->
|
||||
<!--
|
||||
📋 compare-2col-badge
|
||||
─────────────────
|
||||
용도: 두 개념/전략/기술을 나란히 비교. 3D 리본 탭이 컨테이너 위에 걸침.
|
||||
슬롯: badge_title, left_title, left_body, right_title, right_body, statement(선택)
|
||||
Figma 원본: Frame 3 (정책 달성 — 틸 리본 + 흰 둥근 컨테이너 + 2열 비교)
|
||||
수학적 계산:
|
||||
badge 517x88 at y=929, box at y=947, frame_w=1807
|
||||
scale = 1200/1807 = 0.6641
|
||||
ribbon: 343x58px, fold_offset: 12px, ribbon_below_fold: 46px
|
||||
box padding-top: 52px
|
||||
-->
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-main">
|
||||
{% if badge_title %}
|
||||
<div class="c2b-ribbon">
|
||||
<img src="{{ ribbon_image | default('svg/badge_policy.png') }}" class="c2b-ribbon-img" alt="">
|
||||
<span class="c2b-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: {{ left_color | default('var(--color-teal, #227582)') }}">
|
||||
{{ left_title }}
|
||||
</div>
|
||||
<div class="c2b-body" style="color: {{ left_color | default('var(--color-teal, #227582)') }}">
|
||||
{{ left_body }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c2b-divider"></div>
|
||||
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: {{ right_color | default('var(--color-teal, #227582)') }}">
|
||||
{{ right_title }}
|
||||
</div>
|
||||
<div class="c2b-body" style="color: {{ right_color | default('var(--color-teal, #227582)') }}">
|
||||
{{ right_body }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if statement %}
|
||||
<div class="c2b-statement">{{ statement }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-c2b { display: flex; flex-direction: column; width: 100%; }
|
||||
|
||||
/*
|
||||
리본+박스 수학적 계산 (Figma 원본):
|
||||
badge 517x88 at y=929, box at y=947
|
||||
접힘선 = 18px = 이미지 높이의 20.5%
|
||||
scale(1200/1807) → ribbon 343x58, fold top에서 12px, 아래 46px
|
||||
*/
|
||||
.c2b-main { position: relative; }
|
||||
|
||||
/* ── 3D 리본 배지 ── */
|
||||
.c2b-ribbon {
|
||||
position: absolute;
|
||||
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 2; width: 343px; text-align: center;
|
||||
}
|
||||
.c2b-ribbon-img { width: 100%; height: auto; display: block; }
|
||||
.c2b-ribbon-text {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
font-size: 22px; font-weight: 700; color: #fff;
|
||||
letter-spacing: 0.03em; white-space: nowrap;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* ── 틸 테두리 흰 박스 ── */
|
||||
.c2b-container {
|
||||
display: grid; grid-template-columns: 1fr auto 1fr;
|
||||
background: #fff;
|
||||
border: 2px solid #5a9ea8;
|
||||
border-radius: 20px;
|
||||
padding: 52px 40px 36px; /* top: ribbon_below(46) + 6px 여유 */
|
||||
}
|
||||
.c2b-divider { width: 1px; background: var(--color-border, #e2e8f0); margin: 0 32px; align-self: stretch; }
|
||||
.c2b-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
|
||||
.c2b-title { font-size: 36px; font-weight: var(--weight-black, 900); line-height: 1.2; word-break: keep-all; }
|
||||
.c2b-body { font-size: 22px; font-weight: var(--weight-bold, 700); line-height: 1.9; white-space: pre-line; word-break: keep-all; }
|
||||
|
||||
/* ── Statement ── */
|
||||
.c2b-statement {
|
||||
margin-top: 24px; text-align: center; font-size: 28px; font-weight: var(--weight-bold, 700);
|
||||
color: var(--color-primary, #1e293b); line-height: 1.6; word-break: keep-all; padding: 0 20px;
|
||||
}
|
||||
.c2b-statement strong { font-weight: 900; font-size: 1.15em; }
|
||||
.c2b-statement em { color: #dc2626; font-style: normal; font-weight: 900; font-size: 1.2em; }
|
||||
|
||||
/* ── Responsive: 좁은 컨테이너 ── */
|
||||
@container (max-width: 500px) {
|
||||
.c2b-container { grid-template-columns: 1fr; gap: 20px; }
|
||||
.c2b-divider { width: 100%; height: 1px; margin: 0; }
|
||||
.c2b-title { font-size: 24px; }
|
||||
.c2b-body { font-size: 16px; }
|
||||
.c2b-statement { font-size: 20px; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,125 +0,0 @@
|
||||
<!-- 그라디언트 상세 2열 비교: 비대칭 라운드 헤더 + 행 공유 + As-Is/To-Be -->
|
||||
<!--
|
||||
📋 compare-detail-gradient
|
||||
─────────────────
|
||||
용도: 두 카테고리의 상세 비교 (각각 N개 하위 섹션, 행 공유 정렬)
|
||||
슬롯: left_header, right_header, sections[] (각 row에 left + right)
|
||||
Figma 원본: Frame 4 (과정의 혁신 vs 결과의 혁신)
|
||||
디자인:
|
||||
- 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
|
||||
- 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
|
||||
- CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
|
||||
- 첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능
|
||||
수학적 계산:
|
||||
좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
|
||||
-->
|
||||
<div class="block-cdg">
|
||||
<!-- Row 0: Headers -->
|
||||
<div class="cdg-header cdg-header-warm">
|
||||
<span class="cdg-header-text">{{ left_header }}</span>
|
||||
</div>
|
||||
<div class="cdg-header cdg-header-teal">
|
||||
<span class="cdg-header-text">{{ right_header }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Rows: sections (행 공유로 좌/우 Y선 자동 정렬) -->
|
||||
{% for row in sections %}
|
||||
<div class="cdg-cell cdg-cell-warm">
|
||||
<div class="cdg-sec-title cdg-title-warm">{{ row.left.title }}</div>
|
||||
{% if row.left.asis is defined %}
|
||||
<div class="cdg-asis-tobe">
|
||||
<div class="cdg-asis">
|
||||
{% for b in row.left.asis %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
<img src="{{ arrow_image | default('svg/arrow_asis_tobe.png') }}" class="cdg-arrow" alt="→">
|
||||
<div class="cdg-tobe">
|
||||
{% for b in row.left.tobe %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% elif row.left.bullets is defined %}
|
||||
<div class="cdg-sec-body">
|
||||
{% for b in row.left.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="cdg-sec-body">{{ row.left.body }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="cdg-cell cdg-cell-teal">
|
||||
<div class="cdg-sec-title cdg-title-teal">{{ row.right.title }}</div>
|
||||
{% if row.right.bullets is defined %}
|
||||
<div class="cdg-sec-body">
|
||||
{% for b in row.right.bullets %}<div class="cdg-bullet">{{ b }}</div>{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="cdg-sec-body">{{ row.right.body }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
CSS Grid: 2열 × (1+N)행
|
||||
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
|
||||
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
|
||||
*/
|
||||
/*
|
||||
B안: Grid 배경에 좌/우 절반씩 연속 그라디언트
|
||||
→ 셀 경계가 안 보이고 Figma처럼 자연스러운 배경
|
||||
→ Grid 행 공유로 Y선 정렬도 유지
|
||||
*/
|
||||
.block-cdg {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255,255,255,0.4) 0%,
|
||||
rgba(57,50,30,0.12) 50%,
|
||||
rgba(41,107,85,0.06) 50%,
|
||||
rgba(255,255,255,0.4) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Headers (비대칭 라운드 — 자체 배경 유지) ── */
|
||||
.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
|
||||
.cdg-header-text { font-size: var(--cdg-heading-font, 26px); font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
|
||||
.cdg-header-warm {
|
||||
background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
|
||||
border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
|
||||
}
|
||||
.cdg-header-teal {
|
||||
background: linear-gradient(90deg, rgba(3,33,24,0.85), rgba(41,107,85,0.15));
|
||||
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── Grid Cells (배경 제거 → Grid 배경이 투과) ── */
|
||||
.cdg-cell {
|
||||
padding: 14px 20px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
align-self: start;
|
||||
background: none;
|
||||
}
|
||||
.cdg-cell-warm { background: none; }
|
||||
.cdg-cell-teal { background: none; }
|
||||
|
||||
/* ── Section Title & Body ── */
|
||||
.cdg-sec-title { font-size: var(--cdg-body-font, 18px); font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
|
||||
.cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
|
||||
.cdg-title-teal { color: var(--color-dark-teal, #084C56); }
|
||||
.cdg-sec-body { padding-left: 8px; }
|
||||
|
||||
/* ── Bullets ── */
|
||||
.cdg-bullet {
|
||||
position: relative; padding-left: 14px;
|
||||
font-size: var(--cdg-body-font, 14px); font-weight: var(--weight-bold, 700); color: #1a1a1a;
|
||||
line-height: 1.7; word-break: keep-all;
|
||||
}
|
||||
.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
|
||||
|
||||
/* ── As-Is → To-Be 수평 레이아웃 ── */
|
||||
.cdg-asis-tobe { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
|
||||
.cdg-asis, .cdg-tobe { flex: 1; padding-left: 8px; }
|
||||
.cdg-arrow { width: 60px; height: auto; flex-shrink: 0; opacity: 0.7; }
|
||||
</style>
|
||||
@@ -1,98 +0,0 @@
|
||||
<!-- 히어로 문구 + 아이콘 카드: 큰 선언문 + 3D 리본 배지 + N열 아이콘 카드 -->
|
||||
<!--
|
||||
📋 hero-icon-cards
|
||||
─────────────────
|
||||
용도: 핵심 목표/가치를 선언하고 N개 키워드 카드로 시각화
|
||||
슬롯: statement, badge_title, cards[] (icon, title, subtitle)
|
||||
Figma 원본: Frame 2 (Solution 제작 목표 — 다크 테마, 빨간 리본+테두리, 5열 카드)
|
||||
수학적 계산:
|
||||
badge 508x94 at y=1431, box at y=1449, frame_w=1808
|
||||
scale = 1200/1808 = 0.6637
|
||||
ribbon: 337x62px, fold_offset: 12px, ribbon_below_fold: 50px
|
||||
box padding-top: 56px
|
||||
-->
|
||||
<div class="block-hic">
|
||||
{% if statement %}
|
||||
<div class="hic-statement">{{ statement }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-card-area">
|
||||
{% if badge_title %}
|
||||
<div class="hic-ribbon">
|
||||
<img src="{{ ribbon_image | default('svg/badge_solution.png') }}" class="hic-ribbon-img" alt="">
|
||||
<span class="hic-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-box">
|
||||
<div class="hic-cards">
|
||||
{% for card in cards %}
|
||||
<div class="hic-card">
|
||||
{% if card.icon %}<div class="hic-icon">{{ card.icon }}</div>{% endif %}
|
||||
<div class="hic-title">{{ card.title }}</div>
|
||||
{% if card.subtitle %}<div class="hic-sub">({{ card.subtitle }})</div>{% endif %}
|
||||
</div>
|
||||
{% if not loop.last %}<div class="hic-sep"></div>{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-hic {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
width: 100%; border-radius: 16px;
|
||||
padding: 36px 32px 28px; overflow: visible;
|
||||
}
|
||||
|
||||
/* ── Hero Statement ── */
|
||||
.hic-statement {
|
||||
text-align: center; font-size: 28px; font-weight: var(--weight-bold, 700);
|
||||
color: #1a1a1a; line-height: 1.6; word-break: keep-all;
|
||||
margin-bottom: 28px; padding: 0 24px;
|
||||
}
|
||||
.hic-statement strong { font-weight: 900; font-size: 1.1em; }
|
||||
.hic-statement em { color: #ef4444; font-style: normal; font-weight: 900; font-size: 1.15em; }
|
||||
|
||||
/*
|
||||
리본+박스 수학적 계산 (Figma 원본):
|
||||
badge 508x94 at y=1431, box at y=1449
|
||||
접힘선 = 18px = 이미지 높이의 19.1%
|
||||
scale(1200/1808) → ribbon 337x62, fold top에서 12px, 아래 50px
|
||||
*/
|
||||
.hic-card-area { position: relative; width: 100%; margin-top: 20px; }
|
||||
|
||||
.hic-ribbon {
|
||||
position: absolute;
|
||||
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 2; width: 337px; text-align: center;
|
||||
}
|
||||
.hic-ribbon-img { width: 100%; height: auto; display: block; }
|
||||
.hic-ribbon-text {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
font-size: 20px; font-weight: 700; color: #fff;
|
||||
letter-spacing: 0.03em; white-space: nowrap;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 빨간 테두리 흰 박스 */
|
||||
.hic-box {
|
||||
position: relative; background: #fff;
|
||||
border: 6px solid #9b1b1b; border-radius: 20px;
|
||||
padding: 56px 8px 8px; /* top: ribbon_below(50) + 6px 여유 */
|
||||
}
|
||||
|
||||
.hic-cards { display: flex; align-items: stretch; width: 100%; }
|
||||
.hic-card {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; text-align: center;
|
||||
padding: 16px 12px 20px; gap: 8px;
|
||||
}
|
||||
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 8px 0; }
|
||||
.hic-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
|
||||
.hic-icon img { width: 64px; height: 64px; object-fit: contain; }
|
||||
.hic-title { font-size: 20px; font-weight: var(--weight-black, 900); color: #1a1a1a; line-height: 1.3; }
|
||||
.hic-sub { font-size: 15px; font-weight: var(--weight-medium, 500); color: #666; }
|
||||
</style>
|
||||
@@ -1,176 +0,0 @@
|
||||
<!-- 중앙 라벨 2열 시스템 구성: 좌(H/W) / 중앙 원형 라벨 / 우(S/W) -->
|
||||
<!--
|
||||
📋 system-2col-center
|
||||
─────────────────
|
||||
용도: 시스템 구성요소를 좌/우 카테고리로 나열. 중앙에 원형 라벨.
|
||||
슬롯: center_title, center_sub, left_label, right_label, left_items[], right_items[]
|
||||
Figma 원본: Page 3 / f8 (System 구성 BIG Room, 2446x1943)
|
||||
수학적 계산:
|
||||
scale = 1200/2446 = 0.4906
|
||||
H/W 영역: 561px, S/W 영역: 549px
|
||||
중앙 원: 329px → 실사용 120px
|
||||
tab: 164x43px, tab font: 22px
|
||||
item font: 15px, item title: 16px bold
|
||||
-->
|
||||
<div class="block-s2c">
|
||||
<!-- 좌측 헤더 탭 -->
|
||||
<div class="s2c-tab s2c-tab-left" style="background: {{ left_color | default('#838486') }}">
|
||||
{{ left_label }}
|
||||
</div>
|
||||
<!-- 우측 헤더 탭 -->
|
||||
<div class="s2c-tab s2c-tab-right" style="background: {{ right_color | default('#d16013') }}">
|
||||
{{ right_label }}
|
||||
</div>
|
||||
|
||||
<!-- 좌측 항목 -->
|
||||
<div class="s2c-col s2c-left">
|
||||
{% for item in left_items %}
|
||||
<div class="s2c-item">
|
||||
{% if item.icon %}<span class="s2c-icon">{{ item.icon }}</span>{% endif %}
|
||||
<div class="s2c-item-content">
|
||||
<div class="s2c-item-title">{{ item.title }}</div>
|
||||
{% if item.body %}<div class="s2c-item-body">{{ item.body }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- 중앙 원형 라벨 -->
|
||||
<div class="s2c-center">
|
||||
<div class="s2c-circle">
|
||||
<div class="s2c-center-title">{{ center_title }}</div>
|
||||
{% if center_sub %}<div class="s2c-center-sub">{{ center_sub }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 우측 항목 -->
|
||||
<div class="s2c-col s2c-right">
|
||||
{% for item in right_items %}
|
||||
<div class="s2c-item">
|
||||
{% if item.icon %}<span class="s2c-icon">{{ item.icon }}</span>{% endif %}
|
||||
<div class="s2c-item-content">
|
||||
<div class="s2c-item-title">{{ item.title }}</div>
|
||||
{% if item.body %}<div class="s2c-item-body">{{ item.body }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
수학적 계산 (Figma 원본):
|
||||
frame 2446x1943, scale = 1200/2446 = 0.4906
|
||||
H/W: 1144 → 561px, S/W: 1119 → 549px
|
||||
center circle: 671 → 329px → 실사용 120px
|
||||
tab: 335x88 → 164x43px
|
||||
*/
|
||||
.block-s2c {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
width: 100%;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* ── Header Tabs ── */
|
||||
.s2c-tab {
|
||||
padding: 8px 20px;
|
||||
font-size: 20px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: #ffffff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.s2c-tab-left {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
justify-self: start;
|
||||
}
|
||||
.s2c-tab-right {
|
||||
grid-column: 3;
|
||||
grid-row: 1;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* ── Columns ── */
|
||||
.s2c-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px 12px;
|
||||
}
|
||||
.s2c-left {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
.s2c-right {
|
||||
grid-column: 3;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
/* ── Center Circle ── */
|
||||
.s2c-center {
|
||||
grid-column: 2;
|
||||
grid-row: 1 / 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.s2c-circle {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #2a8a8a, #1a6060);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.s2c-center-title {
|
||||
font-size: 18px;
|
||||
font-weight: var(--weight-black, 900);
|
||||
color: #ffffff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.s2c-center-sub {
|
||||
font-size: 13px;
|
||||
font-weight: var(--weight-medium, 500);
|
||||
color: rgba(255,255,255,0.7);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* ── Items ── */
|
||||
.s2c-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.s2c-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.s2c-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.s2c-item-title {
|
||||
font-size: 16px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: var(--color-primary, #1e293b);
|
||||
line-height: 1.4;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.s2c-item-body {
|
||||
font-size: 14px;
|
||||
font-weight: var(--weight-medium, 500);
|
||||
color: var(--color-text-secondary, #64748b);
|
||||
line-height: 1.6;
|
||||
word-break: keep-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,169 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>compare-2col-badge 테스트</title>
|
||||
<link rel="stylesheet" href="../../../static/tokens.css">
|
||||
<link rel="stylesheet" href="../../../static/base.css">
|
||||
<style>
|
||||
body { background: #f0f0f0; padding: 40px; }
|
||||
h2 { margin: 40px 0 16px; font-size: 18px; color: #333; }
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
background: #fff; padding: 40px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||||
margin-bottom: 40px;
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Test 1: Figma Frame 3 원본 (Engn. Solution vs DfMA)</h2>
|
||||
<div class="slide" style="grid-template-rows: auto 1fr auto;">
|
||||
|
||||
<!-- compare-2col-badge 블록 시작 -->
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-badge">
|
||||
<span class="c2b-badge-text">정책 달성</span>
|
||||
</div>
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">Engn. Solution</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">목적 시설물에 대한 설계, 시공, 유지관리 정보를 고객이 쉽고 편리하게 사용하고, 편익이 발생하도록 제공하는 다양한 형태의 정보물과 이를 구현할 수 있는 S/W 및 H/W와 그 기술을 포함하는 서비스</div>
|
||||
</div>
|
||||
<div class="c2b-divider"></div>
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">DfMA</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">Design for Manufacture and Assembly는 공장 생산, 현장조립이 가능한 설계를 의미하며, 현장 중심의 건설에서 공장 생산 방식으로 전환하는 OSC(Off Site Construction) 시스템을 위한 핵심기술</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c2b-statement">디지털전환은 <strong>사용자</strong>(발주자, 수급자, 엔지니어)가<br><strong>쉽고, 편하고, 편익</strong>이 있어야만 한다.</div>
|
||||
</div>
|
||||
<!-- 블록 끝 -->
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Test 2: 다른 콘텐츠 (범용성 확인)</h2>
|
||||
<div class="slide" style="grid-template-rows: auto 1fr;">
|
||||
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-badge">
|
||||
<span class="c2b-badge-text">디지털 전환 전략</span>
|
||||
</div>
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: var(--color-warm-brown, #5C3714)">As-Is (현재)</div>
|
||||
<div class="c2b-body" style="color: var(--color-warm-brown, #5C3714)">종이 도면 기반의 업무 프로세스
|
||||
수작업 검증과 품질 관리
|
||||
분절된 단계별 정보 전달
|
||||
개인 경험에 의존하는 의사결정</div>
|
||||
</div>
|
||||
<div class="c2b-divider"></div>
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: var(--color-dark-teal, #084C56)">To-Be (미래)</div>
|
||||
<div class="c2b-body" style="color: var(--color-dark-teal, #084C56)">3D 모델 기반의 통합 프로세스
|
||||
자동화된 검증과 품질 관리
|
||||
연속적인 디지털 정보 흐름
|
||||
데이터 기반의 의사결정 지원</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Test 3: 짧은 콘텐츠 (최소 케이스)</h2>
|
||||
<div class="slide" style="grid-template-rows: auto 1fr;">
|
||||
|
||||
<div class="block-c2b">
|
||||
<div class="c2b-badge">
|
||||
<span class="c2b-badge-text">비교</span>
|
||||
</div>
|
||||
<div class="c2b-container">
|
||||
<div class="c2b-col c2b-left">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">BIM</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">건축정보모델링</div>
|
||||
</div>
|
||||
<div class="c2b-divider"></div>
|
||||
<div class="c2b-col c2b-right">
|
||||
<div class="c2b-title" style="color: var(--color-teal, #227582)">GIS</div>
|
||||
<div class="c2b-body" style="color: var(--color-teal, #227582)">지리정보시스템</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 블록 자체 스타일 -->
|
||||
<style>
|
||||
.block-c2b {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.c2b-badge {
|
||||
background: linear-gradient(135deg, var(--color-dark-teal, #084C56), var(--color-teal, #227582));
|
||||
border-radius: 12px 12px 0 0;
|
||||
padding: 10px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.c2b-badge-text {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.c2b-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-top: none;
|
||||
border-radius: 0 0 16px 16px;
|
||||
padding: 24px 28px;
|
||||
gap: 0;
|
||||
}
|
||||
.c2b-divider {
|
||||
width: 1px;
|
||||
background: #e2e8f0;
|
||||
margin: 0 24px;
|
||||
align-self: stretch;
|
||||
}
|
||||
.c2b-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
.c2b-title {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.c2b-body {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
word-break: keep-all;
|
||||
opacity: 0.85;
|
||||
}
|
||||
.c2b-statement {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
line-height: 1.6;
|
||||
word-break: keep-all;
|
||||
padding: 0 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,33 +0,0 @@
|
||||
<!-- 그라데이션 배너 바: 전체 너비 파란 그라데이션 + 중앙 텍스트 -->
|
||||
<!--
|
||||
📋 banner-gradient
|
||||
─────────────────
|
||||
용도: 섹션 구분, 핵심 선언, 강조 문구를 전체 너비 배너로
|
||||
슬롯: text (필수), sub_text (선택)
|
||||
Figma 원본: 2-2_01 하단, 2-2_03 분류 바
|
||||
-->
|
||||
<div class="block-banner-grad">
|
||||
<div class="bg-text">{{ text }}</div>
|
||||
{% if sub_text %}<div class="bg-sub">{{ sub_text }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-banner-grad {
|
||||
background: linear-gradient(135deg, #006aff 0%, #00aaff 100%);
|
||||
border-radius: 8px;
|
||||
padding: 16px 30px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.bg-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bg-sub {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<!-- 솔루션 콜아웃: 강조 배경 + 아이콘 + 제목 + 설명 -->
|
||||
<!--
|
||||
📋 callout-solution
|
||||
─────────────────
|
||||
용도: 핵심 해결책/솔루션/방향성 강조. 눈에 띄는 콜아웃 박스.
|
||||
슬롯: icon (선택), title (필수), description (필수), source (선택)
|
||||
Figma 원본: 2-3_05 "Solution 제시 포인트"
|
||||
-->
|
||||
<div class="block-callout-sol">
|
||||
{% if icon %}<div class="cs-icon">{{ icon }}</div>{% endif %}
|
||||
<div class="cs-body">
|
||||
<div class="cs-title">{{ title }}</div>
|
||||
<div class="cs-desc">{{ description }}</div>
|
||||
{% if source %}<div class="cs-source">{{ source }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-callout-sol {
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border: 2px solid #93c5fd;
|
||||
border-radius: var(--radius);
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.cs-icon {
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.cs-body {
|
||||
flex: 1;
|
||||
}
|
||||
.cs-title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: #1e40af;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cs-desc {
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.cs-source {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!-- 경고 콜아웃: 주의/경고/문제점 강조 -->
|
||||
<!--
|
||||
📋 callout-warning
|
||||
─────────────────
|
||||
용도: 문제점 지적, 주의사항, 잘못된 접근 경고
|
||||
슬롯: title (필수), description (필수), icon (선택)
|
||||
callout-solution과 다른 점: 경고 톤 (빨간/주황), 문제 지적용
|
||||
-->
|
||||
<div class="block-callout-warn">
|
||||
{% if icon %}<div class="cw-icon">{{ icon }}</div>{% endif %}
|
||||
<div class="cw-body">
|
||||
<div class="cw-title">{{ title }}</div>
|
||||
<div class="cw-desc">{{ description }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-callout-warn {
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
||||
border: 2px solid #fca5a5;
|
||||
border-radius: var(--radius);
|
||||
padding: 20px 24px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.cw-icon {
|
||||
font-size: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cw-body { flex: 1; }
|
||||
.cw-title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: #991b1b;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cw-desc {
|
||||
font-size: 14px;
|
||||
color: #7f1d1d;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +0,0 @@
|
||||
<!-- 체크리스트 다크: 체크 아이콘 + 제목:설명 N행, 다크 배경 -->
|
||||
<!--
|
||||
📋 checklist-dark
|
||||
─────────────────
|
||||
용도: 핵심 요건/원칙을 체크박스 스타일로 나열. 제목:설명 구조.
|
||||
슬롯: items[] (각 항목에 title, description)
|
||||
Figma 원본: Page 3 / f5 (개발 패러다임 체크리스트, 1770x553)
|
||||
수학적 계산:
|
||||
scale = 1200/1770 = 0.6780
|
||||
icon: 31x24px, 행 간격: 64px
|
||||
font: 42px → 16px
|
||||
-->
|
||||
<div class="block-cld">
|
||||
{% for item in items %}
|
||||
<div class="cld-row">
|
||||
<div class="cld-check">☑</div>
|
||||
<div class="cld-text">
|
||||
<span class="cld-title">{{ item.title }}</span>
|
||||
{% if item.description %}<span class="cld-sep"> : </span><span class="cld-desc">{{ item.description }}</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
수학적 계산 (Figma 원본):
|
||||
frame 1770x553, scale = 1200/1770 = 0.6780
|
||||
icon 45x36 → 31x24, row gap 94 → 64px
|
||||
font 42px → 16px
|
||||
*/
|
||||
.block-cld {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
background: #1a1a1a;
|
||||
border-radius: 10px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.cld-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* ── Check Icon ── */
|
||||
.cld-check {
|
||||
font-size: 18px;
|
||||
color: #d4722a;
|
||||
flex-shrink: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ── Text (title : description) ── */
|
||||
.cld-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #ffffff;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.cld-title {
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: #ffffff;
|
||||
}
|
||||
.cld-sep {
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.cld-desc {
|
||||
font-weight: var(--weight-medium, 500);
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<!-- comparison-2col variant: cards-in-container -->
|
||||
<!--
|
||||
📋 comparison-2col--cards-in-container
|
||||
─────────────────
|
||||
용도: 포함 관계 시각화 (A 안에 B, C, D가 포함됨)
|
||||
슬롯: container_label, container_desc, cards[] (각 카드에 letter, label, description)
|
||||
기존 comparison-2col의 색상 계열 활용
|
||||
-->
|
||||
<div class="block-container-cards">
|
||||
<div class="cc-outer">
|
||||
<div class="cc-badge">{{ container_label }}</div>
|
||||
{% if container_desc %}<div class="cc-desc">{{ container_desc }}</div>{% endif %}
|
||||
<div class="cc-grid" style="--cc-count: {{ cards|length }}">
|
||||
{% for card in cards %}
|
||||
<div class="cc-card">
|
||||
{% if card.letter %}
|
||||
<div class="cc-icon">{{ card.letter }}</div>
|
||||
{% endif %}
|
||||
<div class="cc-label">{{ card.label }}</div>
|
||||
{% if card.description %}<div class="cc-text">{{ card.description }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-container-cards {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.cc-outer {
|
||||
width: 100%;
|
||||
border: 3px solid #2563eb;
|
||||
border-radius: 14px;
|
||||
padding: 16px 14px 12px;
|
||||
background: linear-gradient(180deg, #eff6ff, #dbeafe);
|
||||
position: relative;
|
||||
}
|
||||
.cc-badge {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
padding: 3px 18px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cc-desc {
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: #1e40af;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.cc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--cc-count, 3), 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.cc-card {
|
||||
background: #ffffff;
|
||||
border: 2px solid #93c5fd;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.cc-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #93c5fd, #2563eb);
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 6px;
|
||||
}
|
||||
.cc-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.cc-text {
|
||||
font-size: 10px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!-- 비교 블록: 2단 병렬 레이아웃 -->
|
||||
<div class="block-comparison">
|
||||
<div class="comparison-left">
|
||||
<div class="comparison-header comparison-header--left">{{ left_title }}</div>
|
||||
{% if left_subtitle %}<div class="comparison-subtitle">{{ left_subtitle }}</div>{% endif %}
|
||||
<div class="comparison-content">{{ left_content }}</div>
|
||||
</div>
|
||||
<div class="comparison-divider"></div>
|
||||
<div class="comparison-right">
|
||||
<div class="comparison-header comparison-header--right">{{ right_title }}</div>
|
||||
{% if right_subtitle %}<div class="comparison-subtitle">{{ right_subtitle }}</div>{% endif %}
|
||||
<div class="comparison-content">{{ right_content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: var(--spacing-inner);
|
||||
height: 100%;
|
||||
}
|
||||
.comparison-divider {
|
||||
width: 1px;
|
||||
background: var(--color-border);
|
||||
}
|
||||
.comparison-header {
|
||||
font-size: var(--font-subtitle);
|
||||
font-weight: var(--weight-bold);
|
||||
padding-bottom: var(--spacing-small);
|
||||
margin-bottom: var(--spacing-small);
|
||||
border-bottom: var(--accent-border) solid;
|
||||
}
|
||||
.comparison-header--left {
|
||||
border-color: var(--color-accent);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.comparison-header--right {
|
||||
border-color: var(--color-danger);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
.comparison-subtitle {
|
||||
font-size: var(--font-caption);
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: var(--spacing-small);
|
||||
}
|
||||
.comparison-content {
|
||||
white-space: pre-line;
|
||||
font-size: var(--font-body);
|
||||
line-height: var(--line-height-ko);
|
||||
}
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
<!-- dark-bullet-list variant: before-after -->
|
||||
<!--
|
||||
📋 dark-bullet-list--before-after
|
||||
─────────────────
|
||||
용도: 기존 방식 → 새 방식 전환/변화를 보여줄 때
|
||||
슬롯: title (선택), changes[] (각 항목에 label, before, after)
|
||||
기존 dark-bullet-list의 색상/배경/radius 그대로 사용
|
||||
-->
|
||||
<div class="block-dark-bullets">
|
||||
{% if title %}<div class="db-title">{{ title }}</div>{% endif %}
|
||||
<div class="db-changes">
|
||||
{% for item in changes %}
|
||||
<div class="db-change">
|
||||
<div class="db-change-label">{{ item.label }}</div>
|
||||
<div class="db-change-before">{{ item.before }}</div>
|
||||
<div class="db-change-after">→ {{ item.after }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 기존 dark-bullet-list CSS 재사용 */
|
||||
.block-dark-bullets {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-radius: 8px;
|
||||
padding: 14px 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.db-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #93c5fd;
|
||||
}
|
||||
/* variant: before-after 2열 구조 */
|
||||
.db-changes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
.db-change {
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 6px;
|
||||
padding: 8px 10px;
|
||||
border-left: 3px solid #60a5fa;
|
||||
}
|
||||
.db-change-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #93c5fd;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.db-change-before {
|
||||
font-size: 10px;
|
||||
color: #94a3b8;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.db-change-after {
|
||||
font-size: 11px;
|
||||
color: #e2e8f0;
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!-- 다크 배경 불릿 리스트: 짙은 배경 + 흰 텍스트 불릿 목록 -->
|
||||
<!--
|
||||
📋 dark-bullet-list
|
||||
─────────────────
|
||||
용도: 핵심 포인트를 짙은 배경 위에 강조. 시각적 무게감.
|
||||
슬롯: title (선택), bullets[] (필수)
|
||||
Figma 원본: 2-2_01 하단, 2-3_01 하단 다크 섹션
|
||||
-->
|
||||
<div class="block-dark-bullets">
|
||||
{% if title %}<div class="db-title">{{ title }}</div>{% endif %}
|
||||
<ul class="db-list">
|
||||
{% for item in bullets %}
|
||||
<li>{{ item }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-dark-bullets {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
border-radius: 8px;
|
||||
padding: 20px 28px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.db-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
color: #93c5fd;
|
||||
}
|
||||
.db-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.db-list li {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.db-list li::before {
|
||||
content: '•';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #60a5fa;
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!-- 텍스트 구분선: 좌우 선 + 중앙 텍스트 -->
|
||||
<!--
|
||||
📋 divider-text
|
||||
─────────────────
|
||||
용도: 섹션 구분, 주제 전환, 시각적 휴식점
|
||||
슬롯: text (필수)
|
||||
-->
|
||||
<div class="block-divider-text">
|
||||
<div class="dt-line"></div>
|
||||
<div class="dt-text">{{ text }}</div>
|
||||
<div class="dt-line"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-divider-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.dt-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: #cbd5e1;
|
||||
}
|
||||
.dt-text {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +0,0 @@
|
||||
<!-- 강조 스트립: 3구간 색상 분류 바 -->
|
||||
<!--
|
||||
📋 highlight-strip
|
||||
─────────────────
|
||||
용도: 카테고리별 색상 분류 (예: 상용/범용/전문), 비교 카드 상단 헤더
|
||||
슬롯: segments[] (각 구간에 label, color)
|
||||
Figma 원본: 2-2_03 "상용 | 3rd Party(범용) | 전문·전용 S/W" 색상 바
|
||||
-->
|
||||
<div class="block-strip">
|
||||
{% for seg in segments %}
|
||||
<div class="strip-seg" style="background: {{ seg.color | default('#2563eb') }}; flex: {{ seg.flex | default(1) }}">
|
||||
{{ seg.label }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-strip {
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.strip-seg {
|
||||
padding: 10px 16px;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!-- 큰따옴표 장식 인용: ❝❞ 큰따옴표 + 인용 텍스트 -->
|
||||
<!--
|
||||
📋 quote-big-mark
|
||||
─────────────────
|
||||
용도: 문제 제기, 핵심 발언, 임팩트 있는 인용
|
||||
슬롯: quote_text (필수), source (선택)
|
||||
Figma 원본: DX와 BIM 슬라이드 상단 인용 박스 (큰따옴표 장식)
|
||||
-->
|
||||
<div class="block-quote-big">
|
||||
<div class="qb-mark qb-open">❝</div>
|
||||
<div class="qb-content">
|
||||
<div class="qb-text">{{ quote_text }}</div>
|
||||
{% if source %}<div class="qb-source">— {{ source }}</div>{% endif %}
|
||||
</div>
|
||||
<div class="qb-mark qb-close">❞</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-quote-big {
|
||||
background: #f8fafc;
|
||||
border-radius: var(--radius);
|
||||
padding: 24px 28px;
|
||||
position: relative;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.qb-mark {
|
||||
font-size: 3rem;
|
||||
color: #cbd5e1;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
}
|
||||
.qb-open {
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
}
|
||||
.qb-close {
|
||||
bottom: -8px;
|
||||
right: 16px;
|
||||
}
|
||||
.qb-content {
|
||||
padding: 10px 30px 0;
|
||||
}
|
||||
.qb-text {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #1e293b;
|
||||
line-height: 1.8;
|
||||
word-break: keep-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.qb-source {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
font-style: italic;
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +0,0 @@
|
||||
<!-- 질문형 강조 박스: 큰 질문 텍스트 + 부연 설명 -->
|
||||
<!--
|
||||
📋 quote-question
|
||||
─────────────────
|
||||
용도: 독자에게 질문 던지기, 문제 인식 유도, 전환점 강조
|
||||
슬롯: question (필수), description (선택)
|
||||
Figma 원본: 2-3_05 "지금의 방식으로도 가능할까?"
|
||||
-->
|
||||
<div class="block-quote-q">
|
||||
<div class="qq-question">{{ question }}</div>
|
||||
{% if description %}<div class="qq-desc">{{ description }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-quote-q {
|
||||
background: linear-gradient(135deg, #f0f7ff 0%, #e8f1fb 100%);
|
||||
border: 2px solid #b8d4f0;
|
||||
border-radius: var(--radius);
|
||||
padding: 28px 36px;
|
||||
text-align: center;
|
||||
}
|
||||
.qq-question {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: #1e3a5f;
|
||||
line-height: 1.5;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.qq-desc {
|
||||
white-space: pre-line;
|
||||
font-size: 14px;
|
||||
color: #4a6b8a;
|
||||
margin-top: 10px;
|
||||
line-height: 1.7;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!-- 탭 라벨 행: 가로로 나열된 탭 버튼 형태 -->
|
||||
<!--
|
||||
📋 tab-label-row
|
||||
─────────────────
|
||||
용도: 카테고리 전환, 분류 표시, 선택된 항목 강조
|
||||
슬롯: tabs[] (각 탭에 label, active, color)
|
||||
Figma 원본: 2-3_02 상단 "건축과 인프라의 건설프로세스 특성" 탭, 2-2_01 탭
|
||||
-->
|
||||
<div class="block-tab-row">
|
||||
{% for tab in tabs %}
|
||||
<div class="tr-tab {% if tab.active %}tr-active{% endif %}" style="{% if tab.active %}background: {{ tab.color | default('#2563eb') }}{% endif %}">
|
||||
{{ tab.label }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-tab-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: #f1f5f9;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
}
|
||||
.tr-tab {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #64748b;
|
||||
border-radius: 6px;
|
||||
cursor: default;
|
||||
}
|
||||
.tr-active {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!-- 섹션 헤더 바: 파란 배경 + 흰 텍스트 제목 -->
|
||||
<!--
|
||||
📋 section-header-bar
|
||||
─────────────────
|
||||
용도: 섹션 시작부 강조 헤더. 전체 너비 파란 바 + 흰 대제목.
|
||||
슬롯: title (필수), subtitle (선택)
|
||||
Figma 원본: 2-2_01 "Eng. S/W의 구성", "Eng. S/W의 특성"
|
||||
-->
|
||||
<div class="block-section-bar">
|
||||
<div class="sb-title">{{ title }}</div>
|
||||
{% if subtitle %}<div class="sb-sub">{{ subtitle }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-section-bar {
|
||||
background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
|
||||
border-radius: 6px;
|
||||
padding: 14px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.sb-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.sb-sub {
|
||||
font-size: 12px;
|
||||
color: rgba(255,255,255,0.8);
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,69 +0,0 @@
|
||||
<!-- 섹션 타이틀: 배경 헤더 위 영문+한글 타이틀 오버레이 -->
|
||||
<!--
|
||||
📋 section-title
|
||||
─────────────────
|
||||
용도: 자세히보기 페이지 상단, 배경 이미지 위에 타이틀 표시
|
||||
슬롯: title_ko (필수), title_en (선택), breadcrumb (선택), bg_image (선택)
|
||||
Figma 원본: 공통 > section_title + bg 컴포넌트
|
||||
-->
|
||||
<div class="block-section-title">
|
||||
{% if bg_image %}
|
||||
<img class="st-bg" src="{{ bg_image }}" alt="">
|
||||
{% else %}
|
||||
<div class="st-bg st-bg-default"></div>
|
||||
{% endif %}
|
||||
{% if breadcrumb %}
|
||||
<div class="st-breadcrumb">{{ breadcrumb }}</div>
|
||||
{% endif %}
|
||||
<div class="st-text">
|
||||
{% if title_en %}<div class="st-en">{{ title_en }}</div>{% endif %}
|
||||
<div class="st-ko">{{ title_ko }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-section-title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.st-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
.st-bg-default {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #4dc4ff 100%);
|
||||
}
|
||||
.st-breadcrumb {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 89px;
|
||||
z-index: 5;
|
||||
font-size: 13px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.st-text {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 89px;
|
||||
z-index: 5;
|
||||
}
|
||||
.st-en {
|
||||
font-size: 15px;
|
||||
font-weight: var(--weight-normal, 400);
|
||||
color: #ffffff;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.st-ko {
|
||||
font-size: 35px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: #ffffff;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!-- 중앙 정렬 꼭지 헤더: 대제목 + 하단 설명 -->
|
||||
<!--
|
||||
📋 topic-center
|
||||
─────────────────
|
||||
용도: 단독 강조 꼭지, 페이지 중심 주제 선언
|
||||
슬롯: title (필수), subtitle (선택), description (선택)
|
||||
Figma 원본: 2-2_02 "디지털전환을 위한 S/W 필요성"
|
||||
-->
|
||||
<div class="block-topic-center">
|
||||
<div class="tc-title">{{ title }}</div>
|
||||
{% if subtitle %}<div class="tc-sub">{{ subtitle }}</div>{% endif %}
|
||||
{% if description %}<div class="tc-desc">{{ description }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-topic-center {
|
||||
text-align: center;
|
||||
padding: 20px 40px;
|
||||
}
|
||||
.tc-title {
|
||||
font-size: 26px;
|
||||
font-weight: 900;
|
||||
color: #1e293b;
|
||||
line-height: 1.4;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.tc-sub {
|
||||
font-size: 14px;
|
||||
color: #2563eb;
|
||||
font-weight: 600;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.tc-desc {
|
||||
font-size: 15px;
|
||||
color: #475569;
|
||||
line-height: 1.7;
|
||||
margin-top: 12px;
|
||||
word-break: keep-all;
|
||||
white-space: pre-line;
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
|
||||
<!--
|
||||
📋 topic-header
|
||||
─────────────────
|
||||
용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
|
||||
슬롯: title (필수), description (필수)
|
||||
비율: 좌 240px : 우 나머지
|
||||
Figma 원본: sub_제목,내용 (742x68~78)
|
||||
-->
|
||||
<div class="block-topic-header">
|
||||
<div class="th-title">{{ title }}</div>
|
||||
<div class="th-desc">{{ description }}</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-topic-header {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.th-title {
|
||||
width: 240px;
|
||||
flex-shrink: 0;
|
||||
font-size: 24px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
color: var(--color-accent-deep, #004cbe);
|
||||
line-height: 1.4;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.th-desc {
|
||||
white-space: pre-line;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: var(--weight-normal, 400);
|
||||
color: var(--color-text, #000000);
|
||||
line-height: 1.7;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!-- 번호 꼭지 헤더: 번호 원형 + 제목 + 구분선 + 설명 -->
|
||||
<!--
|
||||
📋 topic-numbered
|
||||
─────────────────
|
||||
용도: 순서가 있는 꼭지 시작, 단계별 섹션 헤더
|
||||
슬롯: number, title, description (선택), color (선택)
|
||||
topic-left-right와 다른 점: 좌우 배치가 아닌 번호+세로 배치
|
||||
-->
|
||||
<div class="block-topic-num">
|
||||
<div class="tn-header">
|
||||
<div class="tn-number" style="background: {{ color | default('#2563eb') }}">{{ number }}</div>
|
||||
<div class="tn-title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="tn-divider" style="background: {{ color | default('#2563eb') }}"></div>
|
||||
{% if description %}<div class="tn-desc">{{ description }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-topic-num {
|
||||
padding: 8px 0;
|
||||
}
|
||||
.tn-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.tn-number {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tn-title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #1e293b;
|
||||
}
|
||||
.tn-divider {
|
||||
height: 2px;
|
||||
margin: 8px 0 10px;
|
||||
border-radius: 1px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.tn-desc {
|
||||
font-size: 15px;
|
||||
color: #475569;
|
||||
line-height: 1.7;
|
||||
white-space: pre-line;
|
||||
word-break: keep-all;
|
||||
}
|
||||
</style>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!-- Before/After 이미지: 좌측 Before + 우측 After + 화살표 -->
|
||||
<!--
|
||||
📋 image-before-after
|
||||
─────────────────
|
||||
용도: 변화 전후 비교, 공정 전후, 디지털 전환 전후
|
||||
슬롯: before_src, before_label, after_src, after_label, caption (선택)
|
||||
-->
|
||||
<div class="block-ba">
|
||||
<div class="ba-item">
|
||||
<div class="ba-label ba-before">{{ before_label | default('Before') }}</div>
|
||||
<img src="{{ before_src }}" alt="before">
|
||||
</div>
|
||||
<div class="ba-arrow">→</div>
|
||||
<div class="ba-item">
|
||||
<div class="ba-label ba-after">{{ after_label | default('After') }}</div>
|
||||
<img src="{{ after_src }}" alt="after">
|
||||
</div>
|
||||
</div>
|
||||
{% if caption %}<div class="ba-caption">{{ caption }}</div>{% endif %}
|
||||
|
||||
<style>
|
||||
.block-ba {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
.ba-item {
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
.ba-label {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ba-before { background: #6b7280; }
|
||||
.ba-after { background: #2563eb; }
|
||||
.ba-item img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.ba-arrow {
|
||||
font-size: 2rem;
|
||||
color: #2563eb;
|
||||
font-weight: 900;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ba-caption {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!-- 전체 너비 이미지 + 캡션 -->
|
||||
<!--
|
||||
📋 image-full-caption
|
||||
─────────────────
|
||||
용도: 핵심 도표, 대형 다이어그램, 전경 사진을 전체 너비로 표시
|
||||
슬롯: src (필수), alt (선택), caption (선택)
|
||||
Figma 원본: 2-3_05 하단 전경 사진, 2-3_03 하단 항공 사진
|
||||
-->
|
||||
<div class="block-img-full">
|
||||
<img src="{{ src }}" alt="{{ alt | default('') }}">
|
||||
{% if caption %}<div class="if-caption">{{ caption }}</div>{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-img-full {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.block-img-full img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.if-caption {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
padding: 6px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
</style>
|
||||
@@ -1,42 +0,0 @@
|
||||
<!-- 이미지 2x2 그리드: 4장 이미지 격자 배치 -->
|
||||
<!--
|
||||
📋 image-grid-2x2
|
||||
─────────────────
|
||||
용도: 현장 사진 4장, 참고 이미지 4장, 사례 이미지 갤러리
|
||||
슬롯: images[] (4개, 각각 src, alt, caption)
|
||||
Figma 원본: 2-1_03 GIS 항공/위성/현장 사진
|
||||
-->
|
||||
<div class="block-img-2x2">
|
||||
{% for img in images %}
|
||||
<div class="ig-item">
|
||||
<img src="{{ img.src }}" alt="{{ img.alt | default('') }}">
|
||||
{% if img.caption %}<div class="ig-caption">{{ img.caption }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-img-2x2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
.ig-item {
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.ig-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
background: var(--color-bg-subtle, #f8fafc);
|
||||
}
|
||||
.ig-caption {
|
||||
font-size: 11px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
background: #f8f9fb;
|
||||
}
|
||||
</style>
|
||||
@@ -1,40 +0,0 @@
|
||||
<!-- 이미지 행: 2~4장 이미지 나란히 -->
|
||||
<!--
|
||||
📋 image-row
|
||||
─────────────────
|
||||
용도: 시공 사진, 근거 자료, 현장 이미지 나란히 배치
|
||||
슬롯: images[] 배열 (각 이미지에 src, alt, caption)
|
||||
Figma 원본: 2-1_02 > image grid (460x354 x 2)
|
||||
-->
|
||||
<div class="block-image-row" style="--ir-count: {{ images|length }}">
|
||||
{% for img in images %}
|
||||
<div class="ir-item">
|
||||
<img src="{{ img.src }}" alt="{{ img.alt | default('') }}">
|
||||
{% if img.caption %}<div class="ir-caption">{{ img.caption }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-image-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--ir-count, 2), 1fr);
|
||||
gap: 0;
|
||||
}
|
||||
.ir-item {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ir-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
background: var(--color-bg-subtle, #f8fafc);
|
||||
}
|
||||
.ir-caption {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-light, #94a3b8);
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<!-- 이미지+텍스트 가로 배치: 좌측 이미지 + 우측 텍스트 -->
|
||||
<!--
|
||||
📋 image-side-text
|
||||
─────────────────
|
||||
용도: 이미지에 대한 설명, 제품/시스템 소개, 참고 자료 설명
|
||||
슬롯: image_src, image_alt, title, description, bullets[]
|
||||
Figma 원본: 2-2_01 하단 이미지+텍스트 영역
|
||||
-->
|
||||
<div class="block-img-side">
|
||||
<div class="is-image">
|
||||
<img src="{{ image_src }}" alt="{{ image_alt | default('') }}">
|
||||
</div>
|
||||
<div class="is-text">
|
||||
{% if title %}<div class="is-title">{{ title }}</div>{% endif %}
|
||||
{% if description %}<div class="is-desc">{{ description }}</div>{% endif %}
|
||||
{% if bullets %}
|
||||
<ul class="is-bullets">
|
||||
{% for item in bullets %}
|
||||
<li>{{ item }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-img-side {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.is-image {
|
||||
flex-shrink: 0;
|
||||
width: 320px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.is-image img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
.is-text {
|
||||
flex: 1;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.is-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.is-desc {
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
line-height: 1.7;
|
||||
word-break: keep-all;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.is-bullets {
|
||||
list-style: disc;
|
||||
padding-left: 18px;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.is-bullets li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,117 +0,0 @@
|
||||
<!-- 3열 페르소나 카드: CSS overlay + 이미지(bg, badge, icon, photo) -->
|
||||
<!--
|
||||
📋 cards-3col-persona
|
||||
─────────────────
|
||||
용도: 3개 역할/관점별 목표를 나란히 비교. 뱃지+불릿+사진 3단 구성.
|
||||
슬롯:
|
||||
personas[3]:
|
||||
bg_img — 컬럼 배경 텍스처 (이미지, 실사)
|
||||
overlay_color — 오버레이 색상 (CSS, 기본값 제공)
|
||||
badge_outer_img, badge_inner_img — 원형 뱃지 (이미지, 일러스트)
|
||||
label_line1, label_line2, label_color
|
||||
bullet_icon — 체크 아이콘 (이미지)
|
||||
bullets[] (text, compact: bool)
|
||||
photo_img — 하단 사진 (이미지, 실사)
|
||||
Figma 원본: Frame 1171281191 (node 45:16, 2601×1927)
|
||||
수학적 계산:
|
||||
scale = 1280 / 2601 = 0.49213
|
||||
badge: 396×397 → 195×195, inner offset (12%,14%), size 76%
|
||||
overlay: 단색 opacity 0.8, radius ~30px (MCP opacity-80 확인)
|
||||
left=#d6e7c4, mid=#e1efe1, right=#d0c0ad (픽셀 분석)
|
||||
label: 65px/50px Bold (MCP 확인)
|
||||
bullet icon: 32.4×32.5 → 16×16 (이미지, 아이콘)
|
||||
bullet text: 40px/85px Medium #000 (MCP 확인)
|
||||
photo: radius=50px→25px, opacity=0.7 (MCP opacity-70 확인)
|
||||
CSS 요소: overlay 단색+opacity+radius
|
||||
이미지 요소: bg(텍스처), badge(일러스트), icon(아이콘), photo(실사)
|
||||
인사이트: I-2(컬럼 동일 top/bottom, space-between), R13(marker+text flex pair)
|
||||
-->
|
||||
<div class="block-c3p">
|
||||
{% for p in personas %}
|
||||
<div class="c3p-col">
|
||||
{% if p.bg_img %}<img src="{{ p.bg_img }}" class="c3p-bg" alt="">{% endif %}
|
||||
<div class="c3p-overlay" style="background: {{ p.overlay_color|default('#d6e7c4') }};"></div>
|
||||
|
||||
<div class="c3p-badge">
|
||||
{% if p.badge_outer_img %}<img src="{{ p.badge_outer_img }}" class="c3p-badge-outer" alt="">{% endif %}
|
||||
{% if p.badge_inner_img %}<img src="{{ p.badge_inner_img }}" class="c3p-badge-inner" alt="">{% endif %}
|
||||
<div class="c3p-badge-label" style="color: {{ p.label_color|default('#285b4a') }};">
|
||||
{% if p.label_line1 %}<span class="c3p-ln1">{{ p.label_line1 }}</span>{% endif %}
|
||||
{% if p.label_line2 %}<span class="c3p-ln2">{{ p.label_line2 }}</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c3p-bullets">
|
||||
{% for b in p.bullets %}
|
||||
<div class="c3p-bullet {{ 'c3p-bullet--compact' if b.compact }}">
|
||||
{% if p.bullet_icon %}<span class="c3p-bullet-icon"><img src="{{ p.bullet_icon }}" alt=""></span>{% endif %}
|
||||
<span class="c3p-bullet-text">{{ b.text|safe }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if p.photo_img %}
|
||||
<div class="c3p-photo"><img src="{{ p.photo_img }}" alt=""></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-c3p {
|
||||
display: flex; gap: 4px;
|
||||
width: 100%; height: 100%; word-break: keep-all;
|
||||
}
|
||||
|
||||
.c3p-col {
|
||||
flex: 1; position: relative;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.c3p-bg {
|
||||
position: absolute; inset: 0;
|
||||
width: 100%; height: 100%; object-fit: cover; z-index: 0;
|
||||
}
|
||||
|
||||
/* overlay: CSS 단색 (MCP opacity-80, 픽셀 분석 색상) */
|
||||
.c3p-overlay {
|
||||
position: absolute; top: 10%; left: 5%;
|
||||
width: 90%; height: 70%;
|
||||
opacity: 0.8; border-radius: 30px; z-index: 1;
|
||||
}
|
||||
|
||||
.c3p-badge {
|
||||
position: relative; z-index: 2;
|
||||
width: 120px; height: 120px; flex: none; margin-bottom: 8px;
|
||||
}
|
||||
.c3p-badge-outer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
|
||||
.c3p-badge-inner { position: absolute; left: 12%; top: 14%; width: 76%; height: 76%; object-fit: contain; }
|
||||
.c3p-badge-label {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
font-weight: 700; text-align: center; letter-spacing: -0.02em; z-index: 3;
|
||||
}
|
||||
.c3p-ln1 { font-size: 20px; line-height: 1.1; }
|
||||
.c3p-ln2 { font-size: 16px; line-height: 1.2; }
|
||||
|
||||
/* bullets: I-2 space-between, R13 flex pair */
|
||||
.c3p-bullets {
|
||||
position: relative; z-index: 2;
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
justify-content: space-between; width: 90%; padding: 4px 0;
|
||||
}
|
||||
.c3p-bullet { display: flex; align-items: flex-start; }
|
||||
.c3p-bullet--compact .c3p-bullet-text { line-height: 1.3; }
|
||||
.c3p-bullet-icon { flex: none; width: 16px; height: 16px; margin-top: 0.35em; margin-right: 6px; }
|
||||
.c3p-bullet-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.c3p-bullet-text { flex: 1; font-size: 15px; font-weight: 500; color: #000; line-height: 1.6; }
|
||||
|
||||
/* photo: MCP opacity-70, radius=50px→25px */
|
||||
.c3p-photo {
|
||||
position: relative; z-index: 2;
|
||||
width: 95%; border-radius: 16px;
|
||||
overflow: hidden; opacity: 0.7; margin-top: auto;
|
||||
}
|
||||
.c3p-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
|
||||
</style>
|
||||
@@ -1,122 +0,0 @@
|
||||
<!-- VS 비교 행: CSS gradient pills + 좌/우 텍스트 비교 -->
|
||||
<!--
|
||||
📋 compare-vs-rows
|
||||
─────────────────
|
||||
용도: A vs B를 카테고리별로 좌/우 비교. CSS gradient pill, 하단 결론 박스.
|
||||
슬롯:
|
||||
header (icon, title) — 선택
|
||||
main_labels (left, center, right)
|
||||
rows[] (category, left_text, right_text)
|
||||
conclusion (arrow_img, text — HTML with <em>)
|
||||
Figma 원본: Frame 1171281195 (node 45:20, 1868×1908)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1868 = 0.685225
|
||||
main pill: 1803×75, radius=50px, grid 748|242|813
|
||||
cat pill: 242px, radius=10px
|
||||
left: #5c3714 Bold, right: #285b4a Bold (MCP 확인)
|
||||
conclusion: SVG 분석 bg=#FAEDCB mix-blend-mode:multiply
|
||||
CSS 요소: main pill gradient, cat pill gradient, conclusion bg, header gradient text
|
||||
이미지 요소: header icon, conclusion arrow
|
||||
-->
|
||||
<div class="block-cvr">
|
||||
{% if header %}
|
||||
<div class="cvr-header">
|
||||
{% if header.icon %}<div class="cvr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
|
||||
<div class="cvr-header-title">{{ header.title }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if main_labels %}
|
||||
<div class="cvr-main-pill">
|
||||
<div>{{ main_labels.left }}</div>
|
||||
<div>{{ main_labels.center|default('vs.') }}</div>
|
||||
<div>{{ main_labels.right }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="cvr-rows">
|
||||
{% for row in rows %}
|
||||
<div class="cvr-row">
|
||||
<div class="cvr-left">{{ row.left_text|safe }}</div>
|
||||
<div class="cvr-cat">{{ row.category }}</div>
|
||||
<div class="cvr-right">{{ row.right_text|safe }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if conclusion %}
|
||||
<div class="cvr-conclusion">
|
||||
{% if conclusion.arrow_img %}<img src="{{ conclusion.arrow_img | default('svg/arrow_conclusion.svg') }}" class="cvr-conclusion-arrow" alt="">{% endif %}
|
||||
<div class="cvr-conclusion-bg"></div>
|
||||
<div class="cvr-conclusion-text">{{ conclusion.text|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-cvr {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%; word-break: keep-all;
|
||||
}
|
||||
|
||||
.cvr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
|
||||
.cvr-header-icon { width: 24px; height: 24px; flex: none; }
|
||||
.cvr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.cvr-header-title {
|
||||
font-weight: 700; font-size: 28px;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
text-shadow: 0 0 4px #322c1e;
|
||||
}
|
||||
|
||||
/* main pill: CSS gradient (MCP 확인) */
|
||||
.cvr-main-pill {
|
||||
display: grid; grid-template-columns: 40fr 13fr 47fr;
|
||||
align-items: center; height: 36px; border-radius: 24px;
|
||||
background: linear-gradient(270deg, #285b4a 0%, rgba(40,91,74,0.8) 30%, rgba(74,64,38,0.8) 70%, #4a4026 100%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cvr-main-pill > div { font-weight: 700; font-size: 22px; color: #fff; text-align: center; white-space: nowrap; }
|
||||
|
||||
.cvr-rows { display: flex; flex-direction: column; flex: 1; }
|
||||
.cvr-row {
|
||||
display: grid; grid-template-columns: 40fr 13fr 47fr;
|
||||
align-items: center; min-height: 36px;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||
}
|
||||
.cvr-left {
|
||||
font-weight: 700; font-size: 16px; color: #5c3714;
|
||||
text-align: right; padding: 6px 12px; line-height: 1.3;
|
||||
}
|
||||
.cvr-right {
|
||||
font-weight: 700; font-size: 16px; color: #285b4a;
|
||||
text-align: left; padding: 6px 12px; line-height: 1.3;
|
||||
}
|
||||
.cvr-left .sub, .cvr-right .sub { font-size: 14px; }
|
||||
|
||||
/* cat pill: CSS gradient */
|
||||
.cvr-cat {
|
||||
font-weight: 700; font-size: 16px; color: #fff;
|
||||
text-align: center; white-space: nowrap; padding: 6px 8px; border-radius: 6px;
|
||||
background: linear-gradient(270deg, rgba(40,91,74,0.8) 0%, rgba(40,91,74,0.64) 30%, rgba(74,64,38,0.64) 70%, rgba(74,64,38,0.8) 100%);
|
||||
}
|
||||
|
||||
/* conclusion: CSS bg (SVG 분석 #FAEDCB + multiply) */
|
||||
.cvr-conclusion {
|
||||
position: relative; display: flex; align-items: center;
|
||||
gap: 12px; margin-top: 8px; padding: 8px 16px; min-height: 60px;
|
||||
}
|
||||
.cvr-conclusion-arrow {
|
||||
flex: none; width: 80px; height: 60px;
|
||||
object-fit: contain; transform: rotate(180deg);
|
||||
}
|
||||
.cvr-conclusion-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: #FAEDCB; mix-blend-mode: multiply; z-index: 0;
|
||||
}
|
||||
.cvr-conclusion-text {
|
||||
position: relative; z-index: 1;
|
||||
font-weight: 700; font-size: 18px; color: #000; line-height: 1.5;
|
||||
}
|
||||
.cvr-conclusion-text em { font-style: normal; color: #ae3607; font-size: 20px; }
|
||||
</style>
|
||||
@@ -1,162 +0,0 @@
|
||||
<!-- 3원 교차 다이어그램: CSS circles/gradient + 이미지(arc, texture) -->
|
||||
<!--
|
||||
📋 cycle-3way-intersect
|
||||
─────────────────
|
||||
용도: 3가지 목표/가치가 서로 교차하는 벤 다이어그램
|
||||
슬롯:
|
||||
bg_texture_img — 하단 배경 텍스처 (이미지, 실사)
|
||||
arc_img — 연결 아크 (이미지, 곡선 CSS 불가)
|
||||
circles[3]:
|
||||
label (HTML), text_shadow
|
||||
outer_gradient, ring_gradient — CSS gradient (gradient_math.py 계산값)
|
||||
accents[6]:
|
||||
char (한자 1글자)
|
||||
outer_gradient, inner_gradient — CSS gradient
|
||||
side_labels[6]:
|
||||
title, title_color, desc (HTML)
|
||||
Figma 원본: Frame 1171281211 (node 66:310, 2062×957)
|
||||
수학적 계산:
|
||||
scale = 1280 / 2062 = 0.620694
|
||||
gradient_math.py self-test 검증 완료:
|
||||
safety outer: 145.28deg, prod outer: 218.84deg, trust outer: 145.90deg
|
||||
main circle: 17% width, 역삼각형 배치
|
||||
ring: 14.1% width, border 4px white, box-shadow 0 0 10px
|
||||
accent outer: 6.35% opacity 0.3, inner: 4.0% border 2px white
|
||||
blend: mix-blend-mode: multiply (R10: plus-darker→multiply)
|
||||
CSS 요소: 모든 원/gradient/shadow/blend (순수 CSS, bim-goals-3circles.html에서 검증 완료)
|
||||
이미지 요소: bg_texture(실사), arc(곡선 3개)
|
||||
-->
|
||||
<div class="block-c3i">
|
||||
{% if bg_texture_img %}
|
||||
<div class="c3i-bg"><img src="{{ bg_texture_img | default('svg/bg_texture.png') }}" alt=""></div>
|
||||
{% endif %}
|
||||
|
||||
{% if arc_img %}
|
||||
<div class="c3i-arc c3i-arc--top"><img src="{{ arc_img | default('svg/arc_top.png') }}" alt=""></div>
|
||||
<div class="c3i-arc c3i-arc--left"><img src="{{ arc_img | default('svg/arc_side.png') }}" alt=""></div>
|
||||
<div class="c3i-arc c3i-arc--right"><img src="{{ arc_img | default('svg/arc_side.png') }}" alt=""></div>
|
||||
{% endif %}
|
||||
|
||||
{% for c in circles %}
|
||||
<div class="c3i-main c3i-main--{{ loop.index }}" style="background: {{ c.outer_gradient }};"></div>
|
||||
<div class="c3i-ring c3i-ring--{{ loop.index }}" style="background: {{ c.ring_gradient }};"></div>
|
||||
<div class="c3i-label c3i-label--{{ loop.index }}"
|
||||
{% if c.text_shadow %}style="text-shadow: 0 0 5px {{ c.text_shadow }};"{% endif %}>
|
||||
{{ c.label|safe }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for a in accents %}
|
||||
<div class="c3i-acc-outer c3i-acc-outer--{{ loop.index }}" style="background: {{ a.outer_gradient }};"></div>
|
||||
<div class="c3i-acc-inner c3i-acc-inner--{{ loop.index }}" style="background: {{ a.inner_gradient }};"></div>
|
||||
<div class="c3i-acc-char c3i-acc-char--{{ loop.index }}">{{ a.char }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for s in side_labels %}
|
||||
<div class="c3i-side c3i-side--{{ loop.index }}">
|
||||
<div class="c3i-side-title" style="color: {{ s.title_color|default('#cc5200') }};">{{ s.title }}</div>
|
||||
{% if s.desc %}<div class="c3i-side-desc">{{ s.desc|safe }}</div>{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-c3i {
|
||||
position: relative; width: 100%;
|
||||
aspect-ratio: 2.154 / 1; overflow: hidden; word-break: keep-all;
|
||||
}
|
||||
|
||||
.c3i-bg {
|
||||
position: absolute; left: 7%; bottom: 0; width: 86%; height: 29%;
|
||||
mix-blend-mode: multiply; pointer-events: none;
|
||||
}
|
||||
.c3i-bg img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* arc: 이미지 유지 (곡선 CSS 불가) */
|
||||
.c3i-arc { position: absolute; z-index: 2; }
|
||||
.c3i-arc img { display: block; }
|
||||
.c3i-arc--top { left: 44.9%; top: 14%; width: 10.1%; height: 10.3%; }
|
||||
.c3i-arc--top img { width: 100%; height: 100%; transform: rotate(180deg); }
|
||||
.c3i-arc--left { left: 30.4%; top: 57.4%; width: 4.8%; height: 21.8%; }
|
||||
.c3i-arc--left img { width: 218%; height: 47.4%; transform: rotate(90deg); transform-origin: center; }
|
||||
.c3i-arc--right { left: 64.5%; top: 57.4%; width: 4.8%; height: 21.8%; }
|
||||
.c3i-arc--right img { width: 218%; height: 47.4%; transform: rotate(-90deg); transform-origin: center; }
|
||||
|
||||
/* main 3원: CSS gradient + blend multiply (R10) */
|
||||
.c3i-main {
|
||||
position: absolute; width: 17%; aspect-ratio: 1;
|
||||
border-radius: 50%; mix-blend-mode: multiply; z-index: 3;
|
||||
}
|
||||
.c3i-main--1 { left: 41.4%; top: 21.5%; }
|
||||
.c3i-main--2 { left: 33.7%; top: 50.2%; }
|
||||
.c3i-main--3 { left: 48.9%; top: 50.2%; }
|
||||
|
||||
/* ring: CSS gradient + white border + shadow */
|
||||
.c3i-ring {
|
||||
position: absolute; width: 14.1%; aspect-ratio: 1;
|
||||
border-radius: 50%; border: 4px solid #fff;
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,1); z-index: 4;
|
||||
}
|
||||
.c3i-ring--1 { left: 42.8%; top: 24.5%; }
|
||||
.c3i-ring--2 { left: 35.3%; top: 53.7%; }
|
||||
.c3i-ring--3 { left: 50.6%; top: 53.7%; }
|
||||
|
||||
.c3i-label {
|
||||
position: absolute; width: 12.8%;
|
||||
font-weight: 700; font-size: 24px; color: #fff;
|
||||
text-align: center; line-height: 1; letter-spacing: -0.05em;
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; z-index: 5;
|
||||
}
|
||||
.c3i-label--1 { left: 43.5%; top: 34.5%; }
|
||||
.c3i-label--2 { left: 35.8%; top: 63.2%; }
|
||||
.c3i-label--3 { left: 51.1%; top: 62.4%; }
|
||||
|
||||
/* accent 6원 */
|
||||
.c3i-acc-outer {
|
||||
position: absolute; width: 6.35%; aspect-ratio: 1;
|
||||
border-radius: 50%; opacity: 0.3; mix-blend-mode: multiply; z-index: 6;
|
||||
}
|
||||
.c3i-acc-inner {
|
||||
position: absolute; width: 4.0%; aspect-ratio: 1;
|
||||
border-radius: 50%; border: 2px solid #fff;
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,1); z-index: 7;
|
||||
}
|
||||
.c3i-acc-outer--1 { left: 41.7%; top: 2.3%; }
|
||||
.c3i-acc-outer--2 { left: 51.9%; top: 2.3%; }
|
||||
.c3i-acc-outer--3 { left: 26.9%; top: 50.5%; }
|
||||
.c3i-acc-outer--4 { left: 26.9%; top: 72.0%; }
|
||||
.c3i-acc-outer--5 { left: 66.5%; top: 50.5%; }
|
||||
.c3i-acc-outer--6 { left: 66.5%; top: 72.0%; }
|
||||
.c3i-acc-inner--1 { left: 42.8%; top: 4.7%; }
|
||||
.c3i-acc-inner--2 { left: 53.0%; top: 4.7%; }
|
||||
.c3i-acc-inner--3 { left: 28.1%; top: 52.9%; }
|
||||
.c3i-acc-inner--4 { left: 28.1%; top: 74.4%; }
|
||||
.c3i-acc-inner--5 { left: 67.7%; top: 52.9%; }
|
||||
.c3i-acc-inner--6 { left: 67.7%; top: 74.4%; }
|
||||
|
||||
.c3i-acc-char {
|
||||
position: absolute; width: 4.8%;
|
||||
font-weight: 700; font-size: 22px; color: #fff;
|
||||
text-align: center; letter-spacing: -0.05em;
|
||||
text-shadow: 0 0 5px #cc5200;
|
||||
display: flex; align-items: center; justify-content: center; z-index: 8;
|
||||
}
|
||||
.c3i-acc-char--1 { left: 42.4%; top: 6.6%; }
|
||||
.c3i-acc-char--2 { left: 52.7%; top: 6.6%; }
|
||||
.c3i-acc-char--3 { left: 27.7%; top: 54.8%; }
|
||||
.c3i-acc-char--4 { left: 27.7%; top: 76.3%; }
|
||||
.c3i-acc-char--5 { left: 67.3%; top: 54.8%; }
|
||||
.c3i-acc-char--6 { left: 67.3%; top: 76.3%; }
|
||||
|
||||
/* side labels */
|
||||
.c3i-side { position: absolute; z-index: 5; }
|
||||
.c3i-side-title { font-weight: 700; font-size: 20px; line-height: 1.8; white-space: nowrap; }
|
||||
.c3i-side-desc { font-weight: 500; font-size: 15px; color: #525151; line-height: 1.3; }
|
||||
.c3i-side--1 { right: 60%; top: 0; text-align: right; }
|
||||
.c3i-side--2 { left: 60%; top: 0; }
|
||||
.c3i-side--3 { right: 74%; top: 47.6%; text-align: right; }
|
||||
.c3i-side--4 { right: 74%; top: 69.1%; text-align: right; }
|
||||
.c3i-side--5 { left: 73.6%; top: 47.6%; }
|
||||
.c3i-side--6 { left: 73.6%; top: 69.4%; }
|
||||
</style>
|
||||
@@ -1,135 +0,0 @@
|
||||
<!-- 이슈 쌍 행: 좌/우 pill(두루마리 이미지) + 2열 텍스트 박스 -->
|
||||
<!--
|
||||
📋 issues-paired-rows
|
||||
─────────────────
|
||||
용도: 좌/우 대비되는 이슈를 쌍으로 나열. pill(두루마리)이 박스 위/아래로 걸침.
|
||||
슬롯:
|
||||
header (icon, title) — 선택
|
||||
pill_bg — 두루마리 배경 이미지 (R16 프레임 배치, crop 대상이므로 이미지 유지)
|
||||
rows[] (left {label, text}, right {label, text}, pills_bottom: bool)
|
||||
Figma 원본: Frame 1171281194 (node 45:19, 1857×1326)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1857 = 0.68933
|
||||
pill: 458×95.6, width=24.7% of row
|
||||
pill R16 이미지 프레임: left:-45.3% width:145.3% (좌), left:0 width:151.25% (우)
|
||||
bottom pill: rotate(180deg) + 이미지 반전
|
||||
text: 36px → 25px, lh 65px → 45px
|
||||
pill label: 40px → 28px
|
||||
box: border 3px #60a451, radius 30px, bg rgba(250,237,203,0.15) (MCP 확인)
|
||||
divider: 1px dashed rgba(96,164,81,0.4)
|
||||
CSS 요소: box border/bg/radius, divider, header gradient text
|
||||
이미지 요소: pill_bg (두루마리, R16 crop), header icon
|
||||
-->
|
||||
<div class="block-ipr">
|
||||
{% if header %}
|
||||
<div class="ipr-header">
|
||||
{% if header.icon %}<div class="ipr-header-icon"><img src="{{ header.icon | default('svg/icon_header.png') }}" alt=""></div>{% endif %}
|
||||
<div class="ipr-header-title">{{ header.title }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="ipr-rows">
|
||||
{% for row in rows %}
|
||||
<div class="ipr-row">
|
||||
{% if not row.pills_bottom %}
|
||||
<div class="ipr-pills ipr-pills--top">
|
||||
<div class="ipr-pill ipr-pill--left">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.left.label }}</span>
|
||||
</div>
|
||||
<div class="ipr-pill ipr-pill--right">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.right.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="ipr-text-row">
|
||||
<div class="ipr-text">{{ row.left.text|safe }}</div>
|
||||
<div class="ipr-divider"></div>
|
||||
<div class="ipr-text ipr-text--right">{{ row.right.text|safe }}</div>
|
||||
</div>
|
||||
|
||||
{% if row.pills_bottom %}
|
||||
<div class="ipr-pills ipr-pills--bottom">
|
||||
<div class="ipr-pill ipr-pill--left">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.left.label }}</span>
|
||||
</div>
|
||||
<div class="ipr-pill ipr-pill--right">
|
||||
{% if pill_bg %}<img src="{{ pill_bg | default('svg/pill_scroll.png') }}" alt="">{% endif %}
|
||||
<span class="ipr-pill-label">{{ row.right.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-ipr {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%; word-break: keep-all; padding: 12px 16px;
|
||||
}
|
||||
|
||||
/* header: MCP 확인 gradient(#cc5200→#883700) */
|
||||
.ipr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
.ipr-header-icon { width: 28px; height: 28px; flex: none; }
|
||||
.ipr-header-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.ipr-header-title {
|
||||
font-weight: 700; font-size: 32px;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
text-shadow: 0 0 4px rgba(50,44,30,0.4);
|
||||
}
|
||||
|
||||
.ipr-rows { display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
/* box: MCP 확인 border=#60a451, radius=30px, bg=rgba(250,237,203,0.15) */
|
||||
.ipr-row {
|
||||
border: 2px solid #60a451; border-radius: 16px;
|
||||
background: rgba(250,237,203,0.15);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
/* pill 배치: 두루마리 이미지(R16 crop) */
|
||||
.ipr-pills { display: flex; justify-content: space-between; }
|
||||
.ipr-pills--top { margin-top: -1.8rem; }
|
||||
.ipr-pills--bottom { margin-bottom: -1.8rem; }
|
||||
|
||||
.ipr-pill {
|
||||
position: relative; width: 25%; height: 3.8rem;
|
||||
overflow: hidden; flex: none;
|
||||
}
|
||||
/* R16: 좌pill 우측 곡선만 보임, 우pill 좌측 곡선만 보임 */
|
||||
.ipr-pill--left img {
|
||||
position: absolute; top: 0; height: 100%;
|
||||
left: -45.3%; width: 145.3%;
|
||||
}
|
||||
.ipr-pill--right img {
|
||||
position: absolute; top: 0; height: 100%;
|
||||
left: 0; width: 151.25%;
|
||||
}
|
||||
/* bottom: rotate(180) + 이미지 반전 */
|
||||
.ipr-pills--bottom .ipr-pill { transform: rotate(180deg); }
|
||||
.ipr-pills--bottom .ipr-pill--left img { left: 0; width: 151.25%; }
|
||||
.ipr-pills--bottom .ipr-pill--right img { left: -45.3%; width: 145.3%; }
|
||||
|
||||
.ipr-pill-label {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; font-size: 20px; color: #fff;
|
||||
white-space: nowrap; z-index: 2;
|
||||
}
|
||||
.ipr-pills--bottom .ipr-pill-label { transform: rotate(180deg); }
|
||||
|
||||
/* 텍스트: 2열 grid */
|
||||
.ipr-text-row { display: grid; grid-template-columns: 1fr 1px 1fr; padding: 8px 12px; }
|
||||
.ipr-divider { border-left: 1px dashed rgba(96,164,81,0.4); margin: 4px 0; }
|
||||
.ipr-text {
|
||||
font-weight: 500; font-size: 18px; line-height: 1.8;
|
||||
color: #0c271e; padding: 4px 10px;
|
||||
}
|
||||
.ipr-text--right { text-align: right; }
|
||||
</style>
|
||||
@@ -1,193 +0,0 @@
|
||||
<!-- 필수요건 3열 비교: 3개 카테고리 세로 색상바 + 한자 + 제목/설명 2단 -->
|
||||
<!--
|
||||
📋 prerequisites-3col
|
||||
─────────────────
|
||||
용도: 3개 필수요건/카테고리를 나란히 비교. 각 카테고리에 색상 바 + 한자 + 세로 라벨 + 2개 하위 항목(제목+설명).
|
||||
슬롯:
|
||||
columns[3]:
|
||||
name — 세로 라벨 (예: "기술")
|
||||
sub — 세로 부제 (예: "디지털")
|
||||
kanji_top, kanji_bottom — 한자 2글자 (예: 技, 術)
|
||||
bar_gradient — 색상 바 CSS gradient
|
||||
heading_gradient_top, heading_gradient_bottom — 제목 gradient text
|
||||
items[2]: (heading, desc)
|
||||
Figma 원본: Frame 1171281190 (node 45:15, 2123×724)
|
||||
수학적 계산:
|
||||
scale = 1280 / 2123.13 = 0.60290
|
||||
col width: 690→416px, bar width: 152.5→92px
|
||||
title font: 45px × S = 27px, desc font: 35px × S = 21px
|
||||
kanji font: 50px × S = 30px
|
||||
CSS 요소: gradient bar, gradient text, border/dashed lines (전부 CSS)
|
||||
이미지 의존: 없음 (순수 CSS)
|
||||
-->
|
||||
<div class="block-p3c">
|
||||
{% for col in columns %}
|
||||
<div class="p3c-col">
|
||||
<!-- gradient 색상 바 -->
|
||||
<div class="p3c-bar"></div>
|
||||
|
||||
<!-- 세로 라벨 영역 -->
|
||||
<div class="p3c-vlabel-area">
|
||||
<div class="p3c-vlabel">{{ col.name }}</div>
|
||||
<div class="p3c-vlabel-sub">{{ col.sub }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 한자 -->
|
||||
{% if col.kanji_top %}
|
||||
<div class="p3c-kanji p3c-kanji--top">{{ col.kanji_top }}</div>
|
||||
{% endif %}
|
||||
{% if col.kanji_bottom %}
|
||||
<div class="p3c-kanji p3c-kanji--bottom">{{ col.kanji_bottom }}</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 상단 항목 -->
|
||||
<div class="p3c-section p3c-section--top">
|
||||
<div class="p3c-heading">
|
||||
{{ col.entries[0].heading|safe }}
|
||||
</div>
|
||||
<div class="p3c-desc">
|
||||
{% if col.entries[0].bullets is defined and col.entries[0].bullets %}
|
||||
{% for b in col.entries[0].bullets %}<div class="bul">• {{ b }}</div>{% endfor %}
|
||||
{% else %}
|
||||
{{ col.entries[0].desc|safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 중간 구분선 -->
|
||||
<div class="p3c-mid-line"></div>
|
||||
|
||||
<!-- 하단 항목 -->
|
||||
<div class="p3c-section p3c-section--bottom">
|
||||
<div class="p3c-heading">
|
||||
{{ col.entries[1].heading|safe }}
|
||||
</div>
|
||||
<div class="p3c-desc">
|
||||
{% if col.entries[1].bullets is defined and col.entries[1].bullets %}
|
||||
{% for b in col.entries[1].bullets %}<div class="bul">• {{ b }}</div>{% endfor %}
|
||||
{% else %}
|
||||
{{ col.entries[1].desc|safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 테두리 -->
|
||||
<div class="p3c-border-top"></div>
|
||||
<div class="p3c-border-bottom"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-p3c {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.p3c-col {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
border-top: 1.2px solid #000;
|
||||
border-bottom: 1.2px solid #000;
|
||||
}
|
||||
|
||||
/*
|
||||
gradient 색상 바: Figma 152.5×595
|
||||
→ 비율 7.2% of col width → flex none 72px (or %)
|
||||
3가지 색상: 파랑(#0D78D0→#023056), 주황(#FF9A23→#CC5200), 초록(#39BE49→#23742C)
|
||||
*/
|
||||
.p3c-bar {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 56px; height: 100%; /* 슬라이드 적용: 72→56px */
|
||||
}
|
||||
/* Figma 원본 열별 색상 */
|
||||
.p3c-col:nth-child(1) .p3c-bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||||
.p3c-col:nth-child(2) .p3c-bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||
.p3c-col:nth-child(3) .p3c-bar { background: linear-gradient(180deg, #39BE49 0%, #23742C 100%); }
|
||||
|
||||
/* 세로 라벨: 바 좌측 절반에 세로 글자 */
|
||||
.p3c-vlabel-area {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 56px; height: 100%; /* 슬라이드 적용: 36→56px (bar와 동일) */
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 3;
|
||||
}
|
||||
.p3c-vlabel, .p3c-vlabel-sub {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
font-weight: 700; font-size: 14px; /* 슬라이드 적용 */
|
||||
color: #fff;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.p3c-vlabel-sub { font-size: 12px; }
|
||||
|
||||
/* 한자: 바 우측 절반 */
|
||||
.p3c-kanji {
|
||||
position: absolute;
|
||||
left: 36px; width: 36px;
|
||||
font-weight: 700; font-size: 24px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
.p3c-kanji--top { top: 15%; height: 30%; }
|
||||
.p3c-kanji--bottom { top: 55%; height: 30%; }
|
||||
|
||||
/* 제목+설명 영역: 슬라이드 적용 */
|
||||
.p3c-section {
|
||||
position: absolute;
|
||||
left: 60px; right: 6px; /* 슬라이드 적용: 80→60px */
|
||||
}
|
||||
.p3c-section--top { top: 3%; height: 47%; }
|
||||
.p3c-section--bottom { top: 53%; height: 47%; }
|
||||
|
||||
/*
|
||||
제목: gradient text
|
||||
Figma 45px × S = 27px → block 18px
|
||||
*/
|
||||
.p3c-heading {
|
||||
font-weight: 700; font-size: 12px; /* 슬라이드 적용: 18→12px */
|
||||
line-height: 1.5;
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
/* Figma 원본 열별 heading 색상 */
|
||||
.p3c-col:nth-child(1) .p3c-heading { background-image: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); }
|
||||
.p3c-col:nth-child(2) .p3c-heading { background-image: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||
.p3c-col:nth-child(3) .p3c-heading { background-image: linear-gradient(180deg, #39BE49 0%, #23742C 100%); }
|
||||
|
||||
/*
|
||||
설명: Figma 35px × S = 21px → block 14px
|
||||
#3E3523
|
||||
*/
|
||||
.p3c-desc {
|
||||
font-weight: 500; font-size: 11px; /* 슬라이드 적용: 14→11px */
|
||||
line-height: 1.6;
|
||||
color: #3E3523;
|
||||
}
|
||||
.p3c-desc .bul {
|
||||
padding-left: 12px;
|
||||
text-indent: -12px;
|
||||
}
|
||||
|
||||
/* 중간 구분선: dashed */
|
||||
.p3c-mid-line {
|
||||
position: absolute;
|
||||
left: 56px; right: 0; /* bar width와 동일 */
|
||||
top: 50%;
|
||||
border-top: 1.2px dashed #000;
|
||||
}
|
||||
|
||||
/* 테두리 (상하 실선은 col border로 처리) */
|
||||
</style>
|
||||
@@ -1,119 +0,0 @@
|
||||
<!-- 2×2 사분면 이슈: CSS gradient ribbon + CSS card-bg + 중앙 인용구(이미지) -->
|
||||
<!--
|
||||
📋 quadrant-2x2-issues
|
||||
─────────────────
|
||||
용도: 4개 카테고리 이슈를 2×2 사분면으로 배치, 중앙에 인용구 원형 배지
|
||||
슬롯:
|
||||
quadrants[4] (ribbon_title, sections[{headline, bullets[]}])
|
||||
center_quote (bg_img — 원형 일러스트 이미지 유지, text — HTML)
|
||||
Figma 원본: Frame 1171281193 (node 45:18, 2226×1766)
|
||||
수학적 계산:
|
||||
scale = 1280 / 2226 = 0.575022
|
||||
ribbon: 1080×119, radius=50px (SVG path r=50)
|
||||
SVG gradient_math.py:
|
||||
TL/BL: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%)
|
||||
TR/BR: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%)
|
||||
card-bg: 픽셀 분석 gradient(180deg, #f2f2f2→#ffffff)
|
||||
headline: #ff0000 Bold, body: #000 Regular (MCP 확인)
|
||||
CSS 요소: ribbon gradient, card-bg gradient, headline/body text
|
||||
이미지 요소: center_quote bg (원형 일러스트, 복잡한 radial gradient)
|
||||
-->
|
||||
<div class="block-q2i">
|
||||
<div class="q2i-grid">
|
||||
{% for q in quadrants %}
|
||||
<div class="q2i-quad q2i-quad--{{ loop.index }}">
|
||||
<div class="q2i-card-bg {{ 'q2i-card-bg--bottom' if loop.index > 2 }}"></div>
|
||||
|
||||
<div class="q2i-ribbon {{ 'q2i-ribbon--warm' if loop.index in [1,3] else 'q2i-ribbon--teal' }} {{ 'q2i-ribbon--bottom' if loop.index > 2 }}">
|
||||
<div class="q2i-ribbon-text">{{ q.ribbon_title }}</div>
|
||||
</div>
|
||||
|
||||
<div class="q2i-content">
|
||||
{% for sec in q.sections %}
|
||||
<div class="q2i-section">
|
||||
{% if sec.headline %}<div class="q2i-headline">{{ sec.headline }}</div>{% endif %}
|
||||
{% if sec.bullets %}
|
||||
<ul class="q2i-bullets">
|
||||
{% for b in sec.bullets %}<li>{{ b }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if center_quote %}
|
||||
<div class="q2i-center">
|
||||
{% if center_quote.bg_img %}<img src="{{ center_quote.bg_img | default('svg/circle_quote.png') }}" class="q2i-center-bg" alt="">{% endif %}
|
||||
<div class="q2i-center-text">{{ center_quote.text|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-q2i { position: relative; width: 100%; word-break: keep-all; }
|
||||
|
||||
.q2i-grid { display: grid; grid-template-columns: 1fr 1fr; }
|
||||
|
||||
.q2i-quad {
|
||||
position: relative; display: flex; flex-direction: column;
|
||||
padding: 4px 8px; min-height: 200px;
|
||||
}
|
||||
|
||||
/* 우측 사분면: 우정렬 */
|
||||
.q2i-quad--2 .q2i-headline, .q2i-quad--4 .q2i-headline { text-align: right; }
|
||||
.q2i-quad--2 .q2i-bullets, .q2i-quad--4 .q2i-bullets { text-align: right; list-style-position: inside; padding-left: 0; }
|
||||
|
||||
/* card-bg: CSS gradient (픽셀 분석) */
|
||||
.q2i-card-bg {
|
||||
width: 100%; height: 80px;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
|
||||
}
|
||||
.q2i-card-bg--bottom {
|
||||
border-radius: 0 0 18px 18px; order: 10;
|
||||
background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
/* ribbon: CSS gradient (SVG gradient_math.py 계산) */
|
||||
.q2i-ribbon {
|
||||
width: 100%; height: 44px; border-radius: 18px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.q2i-ribbon--bottom { order: 10; }
|
||||
.q2i-ribbon--warm { background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%); }
|
||||
.q2i-ribbon--teal { background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%); }
|
||||
|
||||
.q2i-ribbon-text {
|
||||
font-weight: 900; font-size: 22px; color: #fff;
|
||||
text-shadow: 0 0 4px #322c1e; white-space: nowrap;
|
||||
}
|
||||
|
||||
.q2i-content { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
|
||||
|
||||
/* headline: MCP 확인 #ff0000 Bold */
|
||||
.q2i-headline { font-weight: 700; font-size: 18px; color: #ff0000; line-height: 1.3; }
|
||||
|
||||
/* body: MCP 확인 #000 Regular */
|
||||
.q2i-bullets {
|
||||
list-style: disc; margin: 0; padding-left: 28px;
|
||||
font-weight: 400; font-size: 15px; color: #000; line-height: 1.5;
|
||||
}
|
||||
.q2i-bullets li { word-break: keep-all; }
|
||||
|
||||
/* center quote: 이미지 유지 (원형 일러스트) */
|
||||
.q2i-center {
|
||||
position: absolute; top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 200px; height: 180px;
|
||||
display: flex; align-items: center; justify-content: center; z-index: 5;
|
||||
}
|
||||
.q2i-center-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
|
||||
.q2i-center-text {
|
||||
position: relative; z-index: 1;
|
||||
font-weight: 700; font-size: 20px; color: #fff;
|
||||
text-align: center; line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
@@ -1,172 +0,0 @@
|
||||
<!-- 분할 패널: 좌측 카테고리 + 우측 번호 설명 -->
|
||||
<!--
|
||||
📋 split-panel-numbered
|
||||
─────────────────
|
||||
용도: 좌측 카테고리별 항목 + 우측 번호 설명 2단 배치
|
||||
슬롯:
|
||||
title_icon — 아이콘 이미지
|
||||
title (HTML — <span class="model">, <span class="sub">)
|
||||
left_bg_color — 좌측 셰브론 배경 CSS gradient (기본값 제공)
|
||||
categories[] (name, color, items[])
|
||||
mid_arrow_img — 중간 화살표 이미지
|
||||
right_items[] (number, text, badge_img)
|
||||
arrow_img — 우측 화살표 이미지
|
||||
Figma 원본: Frame 1171281202 (node 45:27, 1863×834)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1863 = 0.68706
|
||||
title: Model=70px gradient(#cc5200→#883700), sub=50px gradient(#296b55→#000) (MCP 확인)
|
||||
cat bar: 단색 #417d38, #008e52, #008970 (픽셀 분석, MCP=이미지)
|
||||
right bar: #e8ede3 단색 (픽셀 분석)
|
||||
left-bg: 셰브론 형태 + alpha gradient (픽셀 분석)
|
||||
CSS 요소: title gradient text, cat bars, right bars, left-bg, mid-deco
|
||||
이미지 요소: title icon, 3D badge(일러스트), arrow(아이콘), mid arrow
|
||||
-->
|
||||
<div class="block-spn">
|
||||
{% if title_icon or title %}
|
||||
<div class="spn-header">
|
||||
{% if title_icon %}<div class="spn-title-icon"><img src="{{ title_icon | default('svg/icon_title.png') }}" alt=""></div>{% endif %}
|
||||
{% if title %}<div class="spn-title">{{ title|safe }}</div>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="spn-body">
|
||||
<!-- 좌측 패널 -->
|
||||
<div class="spn-left">
|
||||
<div class="spn-left-bg"></div>
|
||||
<div class="spn-categories">
|
||||
{% for cat in categories %}
|
||||
<div class="spn-cat">
|
||||
<div class="spn-cat-bar" style="background: {{ cat.color|default('#417d38') }};"></div>
|
||||
<div class="spn-cat-title">{{ cat.name }}</div>
|
||||
<div class="spn-cat-items">
|
||||
{% for item in cat.items %}
|
||||
<div class="spn-cat-item">· {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 중간 장식 -->
|
||||
<div class="spn-mid">
|
||||
<div class="spn-mid-deco"></div>
|
||||
{% if mid_arrow_img %}<img src="{{ mid_arrow_img | default('svg/arrow_mid.png') }}" class="spn-mid-arrow" alt="">{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 우측 패널 -->
|
||||
<div class="spn-right">
|
||||
{% for item in right_items %}
|
||||
<div class="spn-row">
|
||||
{% if item.badge_img %}<div class="spn-badge"><img src="{{ item.badge_img }}" alt=""></div>
|
||||
{% elif loop.index <= 5 %}<div class="spn-badge"><img src="svg/badge_num_0{{ loop.index }}.png" alt=""></div>{% endif %}
|
||||
<div class="spn-row-bar">
|
||||
<div class="spn-row-text">{{ item.text }}</div>
|
||||
{% if arrow_img %}<img src="{{ arrow_img | default('svg/arrow_right.png') }}" class="spn-row-arrow" alt="">{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-spn {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%; height: 100%;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.spn-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.spn-title-icon { flex: none; width: 26px; height: 27px; }
|
||||
.spn-title-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
|
||||
/* title: MCP 확인 gradient text */
|
||||
.spn-title { font-weight: 900; line-height: 1.1; white-space: nowrap; }
|
||||
.spn-title .model {
|
||||
font-size: 34px;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.spn-title .sub {
|
||||
font-size: 24px;
|
||||
background-image: linear-gradient(180deg, #296b55 0%, #000 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
|
||||
.spn-body { display: flex; flex: 1; }
|
||||
|
||||
/* 좌측: 셰브론 배경 (CSS clip-path + gradient) */
|
||||
.spn-left { position: relative; flex: 52; overflow: hidden; }
|
||||
.spn-left-bg {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(192,213,208,0.19) 0%, rgba(195,214,209,0.66) 50%, rgba(211,227,226,1) 95%);
|
||||
clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
|
||||
border-radius: 20px 0 0 20px;
|
||||
}
|
||||
|
||||
.spn-categories {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; flex-direction: column;
|
||||
justify-content: space-between; flex: 1;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.spn-cat { display: flex; flex-direction: column; }
|
||||
|
||||
/* cat bar: CSS 단색 (픽셀 분석, Figma=이미지) */
|
||||
.spn-cat-bar {
|
||||
height: 34px; border-radius: 5px;
|
||||
background: linear-gradient(90deg, currentColor 0%, currentColor 85%, transparent 100%);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.spn-cat-title {
|
||||
position: relative; z-index: 1; margin-top: -30px;
|
||||
font-size: 20px; font-weight: 700; color: #fff;
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
padding-left: 12px; line-height: 34px;
|
||||
}
|
||||
.spn-cat-items { padding: 4px 12px; }
|
||||
.spn-cat-item {
|
||||
font-size: 16px; font-weight: 500; color: #000;
|
||||
line-height: 1.6; text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* 중간 장식: CSS radial-gradient */
|
||||
.spn-mid {
|
||||
position: relative; flex: none; width: 8%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.spn-mid-deco {
|
||||
position: absolute; inset: 10% 0;
|
||||
background: radial-gradient(ellipse 60% 50% at 100% 50%,
|
||||
rgba(217,217,217,0.8) 0%, rgba(217,217,217,0.13) 60%, transparent 100%);
|
||||
}
|
||||
.spn-mid-arrow { position: relative; z-index: 1; width: 50px; height: 108px; object-fit: contain; }
|
||||
|
||||
/* 우측: 번호 + 설명 */
|
||||
.spn-right {
|
||||
flex: 40; display: flex; flex-direction: column;
|
||||
justify-content: space-between; padding: 4px 0;
|
||||
}
|
||||
.spn-row { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
/* badge: 3D 큐브 일러스트 → 이미지 유지 */
|
||||
.spn-badge { flex: none; width: 42px; height: 44px; z-index: 2; }
|
||||
.spn-badge img { width: 100%; height: 100%; object-fit: contain; }
|
||||
|
||||
/* right bar: CSS #e8ede3 (픽셀 분석) */
|
||||
.spn-row-bar {
|
||||
flex: 1; display: flex; align-items: center;
|
||||
min-height: 48px; padding: 8px 16px;
|
||||
background: #e8ede3; border-radius: 10px;
|
||||
}
|
||||
.spn-row-text {
|
||||
flex: 1; font-size: 18px; font-weight: 500;
|
||||
color: #11231d; line-height: 1.4;
|
||||
}
|
||||
.spn-row-arrow {
|
||||
flex: none; width: 22px; height: 21px;
|
||||
transform: rotate(180deg); object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
@@ -1,133 +0,0 @@
|
||||
<!-- 적층 화살표 리스트: CSS title bar + 좌측 아크(이미지) + 다이아몬드형 행 -->
|
||||
<!--
|
||||
📋 stacked-arrow-list
|
||||
─────────────────
|
||||
용도: 핵심 항목 N개를 다이아몬드(원호) 형태로 적층 표시
|
||||
슬롯:
|
||||
title (HTML — <em>으로 강조)
|
||||
left_label (HTML — <br>로 줄바꿈)
|
||||
left_arc_img — 좌측 곡선 장식 (이미지, CSS 곡선 불가)
|
||||
arrow_img — 화살표 아이콘 (이미지)
|
||||
items[] (text, border_color)
|
||||
Figma 원본: Frame 1171281180 (node 45:5, 1153×592)
|
||||
수학적 계산:
|
||||
scale = 1280 / 1153 = 1.11014 (확대)
|
||||
title bar: Figma bg=#fbd5b9, radius=5px, shadow=0 4px 4px rgba(0,0,0,0.25) (MCP 확인)
|
||||
title: 43px Bold #144838, highlight: 50px gradient(#cc5200) (MCP 확인)
|
||||
row: bg=rgba(255,255,255,0.5), radius=30px, shadow=2px 4px 5px rgba(0,0,0,0.5) (MCP 확인)
|
||||
border 색상: #fb5915, #e79000, #e9a804, #919f00, #0d6361 (MCP 확인)
|
||||
행 다이아몬드 indent: [0%, 6%, 9%, 6%, 0%]
|
||||
CSS 요소: title bar, row bg/border/shadow
|
||||
이미지 요소: arc(곡선), arrow(아이콘)
|
||||
-->
|
||||
<div class="block-sal">
|
||||
{% if title %}
|
||||
<div class="sal-header">
|
||||
<div class="sal-title-bar"></div>
|
||||
<div class="sal-title">{{ title|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sal-body">
|
||||
{% if left_arc_img or left_label %}
|
||||
<div class="sal-deco">
|
||||
{% if left_arc_img %}<img src="{{ left_arc_img | default('svg/arc_left.svg') }}" class="sal-arc" alt="">{% endif %}
|
||||
{% if left_label %}<div class="sal-label">{{ left_label|safe }}</div>{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="sal-rows">
|
||||
{% for item in items %}
|
||||
<div class="sal-row" style="--bc: {{ item.border_color|default('#fb5915') }};">
|
||||
{% if arrow_img %}
|
||||
<div class="sal-arrow"><img src="{{ arrow_img | default('svg/arrow_down.svg') }}" alt=""></div>
|
||||
{% endif %}
|
||||
<div class="sal-text">{{ item.text }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-sal {
|
||||
display: flex; flex-direction: column;
|
||||
width: 100%;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
/* ── 헤더 ── */
|
||||
.sal-header { position: relative; margin-bottom: 12px; }
|
||||
|
||||
/* title bar: MCP 확인 bg=#fbd5b9, radius=5px, shadow */
|
||||
.sal-title-bar {
|
||||
position: absolute;
|
||||
left: 1%; top: 50%;
|
||||
width: 98%; height: 32px;
|
||||
background: #fbd5b9;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
|
||||
/* title: MCP 확인 #144838, highlight gradient(#cc5200) */
|
||||
.sal-title {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 26px; font-weight: 700;
|
||||
color: #144838;
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
.sal-title em {
|
||||
font-style: normal; font-weight: 900; font-size: 30px;
|
||||
background-image: linear-gradient(90deg, #cc5200 0%, #cc5200 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
|
||||
.sal-body { display: flex; align-items: stretch; flex: 1; }
|
||||
|
||||
/* 좌측: arc 이미지 + 세로 라벨 */
|
||||
.sal-deco {
|
||||
position: relative; flex: none; width: 14%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.sal-arc {
|
||||
position: absolute; right: 0; top: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain; object-position: right center;
|
||||
}
|
||||
.sal-label {
|
||||
position: relative; z-index: 1;
|
||||
font-size: 26px; font-weight: 700; color: #144838;
|
||||
text-align: center; line-height: 1.5;
|
||||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* 행: MCP 확인 bg, radius, shadow, border-bottom */
|
||||
.sal-rows {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
justify-content: space-between; gap: 8px; padding: 8px 0;
|
||||
}
|
||||
.sal-row {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 12px 20px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: 30px;
|
||||
box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
|
||||
border-bottom: 3px solid var(--bc, #fb5915);
|
||||
}
|
||||
.sal-row:nth-child(1) { margin-left: 0; }
|
||||
.sal-row:nth-child(2) { margin-left: 6%; }
|
||||
.sal-row:nth-child(3) { margin-left: 9%; }
|
||||
.sal-row:nth-child(4) { margin-left: 6%; }
|
||||
.sal-row:nth-child(5) { margin-left: 0; }
|
||||
|
||||
.sal-arrow { flex: none; width: 19px; height: 25px; transform: rotate(-90deg); }
|
||||
.sal-arrow img { width: 100%; height: 100%; }
|
||||
|
||||
.sal-text {
|
||||
flex: 1; font-size: 22px; font-weight: 500;
|
||||
color: #000; line-height: 1.5; letter-spacing: -0.03em;
|
||||
}
|
||||
</style>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!-- 선언문 pill 강조: CSS gradient 캡슐 배경 + 센터 텍스트 + 하이라이트 -->
|
||||
<!--
|
||||
📋 statement-pill-highlight
|
||||
─────────────────
|
||||
용도: 핵심 선언/결론 메시지를 캡슐형 배경 위에 한 줄로 강조
|
||||
슬롯: text (HTML — <em>으로 하이라이트)
|
||||
Figma 원본: Frame 1171281207 (node 51:170, 3547×163)
|
||||
수학적 계산:
|
||||
scale = 1280 / 3547 = 0.36087
|
||||
pill height: 163 × S ≈ 59px → padding 기반 (텍스트 양 대응)
|
||||
font: 80px × S ≈ 29px, line-height: 90/80 = 1.125
|
||||
border-radius: 97px (Figma) → capsule (999px)
|
||||
색상 (CSS — AI 조정 가능):
|
||||
배경 gradient: 픽셀 분석 #3b3523(5%)→#263a2a(50%)→#113f31(95%)
|
||||
텍스트: #ffffff, Bold 700
|
||||
하이라이트(<em>): #ffee33
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5)
|
||||
이미지 의존: 없음 (순수 CSS)
|
||||
-->
|
||||
<div class="block-sph">
|
||||
<div class="sph-pill">
|
||||
<div class="sph-text">{{ text|safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-sph {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
캡슐: Figma 3547×163, border-radius 97 → 999px
|
||||
배경: 픽셀 분석 기반 CSS gradient (원본에 미세 네트워크 텍스처 있었으나 생략)
|
||||
*/
|
||||
.sph-pill {
|
||||
width: 100%;
|
||||
min-height: 59px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 14px 48px;
|
||||
}
|
||||
|
||||
/* 텍스트: Figma 80px/90px Bold white → scaled 29px */
|
||||
.sph-text {
|
||||
font-size: 29px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 1.125;
|
||||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
/* <em> 하이라이트: Figma #ffee33 */
|
||||
.sph-text em {
|
||||
color: #ffee33;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
@@ -1,104 +0,0 @@
|
||||
<!-- 히어로 카드 변형1: 3D 리본 배지 + N열 카드 (제목+소제목+불릿 계층) -->
|
||||
<!--
|
||||
📋 hero-icon-cards_1
|
||||
─────────────────
|
||||
용도: 핵심 요건/목표를 N열 카드로 시각화. 각 카드에 제목+소제목+불릿 계층.
|
||||
슬롯: statement(선택), badge_title, cards[] (title, sections[{title, bullets[]}])
|
||||
변형 원본: hero-icon-cards
|
||||
변경점:
|
||||
- icon/subtitle → sections[{title, bullets[]}] 계층으로 변경
|
||||
- 배경 #0a0a0a 제거
|
||||
- 슬라이드(1280x720) 기준 글씨 크기
|
||||
수학적 계산 (답안지 PNG 기준):
|
||||
상단 블록 영역: 약 280px
|
||||
중제목: 16px, 소제목: 13px, 불릿: 12px
|
||||
리본: 원본 비율 유지, 텍스트 14px
|
||||
박스 padding-top: 36px (리본 공간)
|
||||
-->
|
||||
<div class="block-hic">
|
||||
{% if statement %}
|
||||
<div class="hic-statement">{{ statement }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-card-area">
|
||||
{% if badge_title %}
|
||||
<div class="hic-ribbon">
|
||||
<img src="{{ ribbon_image | default('svg/badge_solution.png') }}" class="hic-ribbon-img" alt="">
|
||||
<span class="hic-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="hic-box">
|
||||
<div class="hic-cards">
|
||||
{% for card in cards %}
|
||||
<div class="hic-card">
|
||||
<div class="hic-title">{{ card.title }}</div>
|
||||
{% for section in card.sections %}
|
||||
<div class="hic-sec-title">{{ section.title }}</div>
|
||||
{% for bullet in section.bullets %}
|
||||
<div class="hic-bullet">{{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if not loop.last %}<div class="hic-sep"></div>{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-hic {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
width: 100%; overflow: visible;
|
||||
}
|
||||
|
||||
.hic-statement {
|
||||
text-align: center; font-size: 16px; font-weight: var(--weight-bold, 700);
|
||||
color: #1e293b; line-height: 1.6; word-break: keep-all;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hic-card-area { position: relative; width: 100%; margin-top: 4px; }
|
||||
|
||||
.hic-ribbon {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%; transform: translateX(-50%);
|
||||
z-index: 2; width: 337px; text-align: center;
|
||||
}
|
||||
.hic-ribbon-img { width: 100%; height: auto; display: block; }
|
||||
.hic-ribbon-text {
|
||||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
font-size: 14px; font-weight: 700; color: #fff;
|
||||
letter-spacing: 0.03em; white-space: nowrap;
|
||||
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.hic-box {
|
||||
position: relative; background: #fff;
|
||||
border: 6px solid #9b1b1b; border-radius: 20px;
|
||||
padding: 36px 8px 10px;
|
||||
}
|
||||
|
||||
.hic-cards { display: flex; align-items: stretch; width: 100%; }
|
||||
.hic-card {
|
||||
flex: 1; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: flex-start; text-align: center;
|
||||
padding: 8px 16px 12px; gap: 0;
|
||||
}
|
||||
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 6px 0; }
|
||||
|
||||
.hic-title { font-size: 16px; font-weight: var(--weight-black, 900); color: #1a1a1a; line-height: 1.3; margin-bottom: 10px; }
|
||||
.hic-sec-title {
|
||||
font-size: 13px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
|
||||
line-height: 1.4; margin-top: 8px; margin-bottom: 3px; text-align: left; width: 100%;
|
||||
}
|
||||
.hic-sec-title:first-of-type { margin-top: 0; }
|
||||
.hic-bullet {
|
||||
position: relative; padding-left: 14px; text-align: left; width: 100%;
|
||||
font-size: 11px; font-weight: var(--weight-medium, 500); color: #444;
|
||||
line-height: 1.65; word-break: keep-all;
|
||||
}
|
||||
.hic-bullet::before { content: '•'; position: absolute; left: 0; color: #999; }
|
||||
</style>
|
||||
@@ -1,228 +0,0 @@
|
||||
<!-- Process/Product 2단 비교: 좌측 과정의 혁신 + 우측 결과의 혁신 -->
|
||||
<!--
|
||||
📋 process-product-2col
|
||||
─────────────────
|
||||
용도: Process 혁신과 Product 변화를 좌우 2단으로 비교 (redesign: 슬라이드 적용 크기)
|
||||
원본: BEPs/process-product-2col.html (Figma 크기)
|
||||
슬라이드 적용: header 13px, mid_title 12px, body 11px (참고: mdx03_final 기준)
|
||||
슬롯:
|
||||
left_title, right_title: 좌/우 제목
|
||||
left_sections[], right_sections[]: 섹션 목록 (title + bullets[])
|
||||
left_compare: As-is → To-be 비교 (선택, title + left_items[] + right_items[])
|
||||
Figma 원본: Frame 1171276073 (3848x1487 → 1280x495)
|
||||
색상 (Figma에서 추출):
|
||||
좌 배경: linear-gradient(180deg, #ffffff 46%, #39311e 100%)
|
||||
우 배경: linear-gradient(0deg, #296b55 0%, #ffffff 56%)
|
||||
좌 제목바: linear-gradient(270deg, #a4a096, #39311e)
|
||||
우 제목바: linear-gradient(0deg, #296b55, #022017)
|
||||
좌 제목텍스트: gradient(#296b55→#123328) + solid #3e3523
|
||||
우 제목텍스트: gradient(#296b55→#123328) + solid #225e4a
|
||||
좌 중제목: #5c3614, 16.6px/900
|
||||
우 중제목: #084c56, 16.6px/900
|
||||
본문: #000000, 13.3px/700, lineH=23.3px
|
||||
-->
|
||||
<div class="block-pp2">
|
||||
<!-- 좌/우 배경 gradient (absolute) -->
|
||||
<div class="pp2-bg pp2-bg--left"></div>
|
||||
<div class="pp2-bg pp2-bg--right"></div>
|
||||
|
||||
<!-- 헤더 행 -->
|
||||
<div class="pp2-header-bar pp2-header-bar--left">
|
||||
<span class="pp2-header-text pp2-header-text--left">{{ left_title }}</span>
|
||||
</div>
|
||||
<div class="pp2-header-bar pp2-header-bar--right">
|
||||
<span class="pp2-header-text pp2-header-text--right">{{ right_title }}</span>
|
||||
</div>
|
||||
|
||||
<!-- compare 행 (좌측에만) -->
|
||||
{% if left_compare %}
|
||||
<div class="pp2-cell pp2-cell--left">
|
||||
<div class="pp2-mid-title pp2-mid-title--left">{{ left_compare.title }}</div>
|
||||
<div class="pp2-compare">
|
||||
<div class="pp2-compare-col">
|
||||
{% for item in left_compare.left_items %}
|
||||
<div class="pp2-body-text">• {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="pp2-compare-arrow">
|
||||
{% if arrow_image %}<img src="{{ arrow_image }}" alt="→" class="pp2-arrow-img">
|
||||
{% else %}<span class="pp2-arrow-text">➠</span>{% endif %}
|
||||
</div>
|
||||
<div class="pp2-compare-col">
|
||||
{% for item in left_compare.right_items %}
|
||||
<div class="pp2-body-text">• {{ item }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pp2-cell pp2-cell--right">
|
||||
{% if paired_rows and paired_rows|length > 0 %}
|
||||
<div class="pp2-mid-title pp2-mid-title--right">{{ paired_rows[0].right.title }}</div>
|
||||
{% for bullet in paired_rows[0].right.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- 나머지 행들 (좌/우 행 정렬) -->
|
||||
{% for row in paired_rows %}
|
||||
{% if loop.index0 > 0 or not left_compare %}
|
||||
<div class="pp2-cell pp2-cell--left">
|
||||
{% if row.left %}
|
||||
<div class="pp2-mid-title pp2-mid-title--left">{{ row.left.title }}</div>
|
||||
{% for bullet in row.left.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="pp2-cell pp2-cell--right">
|
||||
{% if row.right %}
|
||||
<div class="pp2-mid-title pp2-mid-title--right">{{ row.right.title }}</div>
|
||||
{% for bullet in row.right.bullets %}
|
||||
<div class="pp2-body-text">• {{ bullet }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-pp2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 좌/우 배경 (absolute로 깔기) */
|
||||
.pp2-bg {
|
||||
position: absolute;
|
||||
top: 0; height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
.pp2-bg--left {
|
||||
left: 0; width: 50%;
|
||||
background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
|
||||
}
|
||||
.pp2-bg--right {
|
||||
left: 50%; width: 50%;
|
||||
background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
|
||||
}
|
||||
|
||||
/* grid cell 공통 */
|
||||
.pp2-cell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
.pp2-cell--left { grid-column: 1; }
|
||||
.pp2-cell--right { grid-column: 2; }
|
||||
|
||||
/* 제목 바: redesign 축소 */
|
||||
.pp2-header-bar {
|
||||
height: 30px;
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 좌 제목바: 우측 둥글게, 그라데이션 우→좌 */
|
||||
.pp2-header-bar--left {
|
||||
grid-column: 1;
|
||||
background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
|
||||
border-radius: 0 24px 24px 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 우 제목바: 좌측 둥글게, 그라데이션 좌→우 */
|
||||
.pp2-header-bar--right {
|
||||
grid-column: 2;
|
||||
background: linear-gradient(90deg, #296b55 0%, #022017 100%);
|
||||
border-radius: 24px 0 0 24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
/* 제목 텍스트: redesign 13px */
|
||||
.pp2-header-text {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.5px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 좌 제목: Figma solid fill #3e3523 */
|
||||
.pp2-header-text--left {
|
||||
color: #3e3523;
|
||||
}
|
||||
|
||||
/* 우 제목: 흰색 (gradient 배경 위 가독성) */
|
||||
.pp2-header-text--right {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 본문 영역 (flex 방식 호환) */
|
||||
.pp2-body {
|
||||
padding: 4px 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 중제목: redesign 12px */
|
||||
.pp2-mid-title {
|
||||
font-size: 12px;
|
||||
font-weight: 900;
|
||||
line-height: 1.5;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.pp2-mid-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pp2-mid-title--left {
|
||||
color: #5c3614;
|
||||
}
|
||||
.pp2-mid-title--right {
|
||||
color: #084c56;
|
||||
}
|
||||
|
||||
/* 본문: redesign 11px + 소제목 대비 들여쓰기 + hanging indent */
|
||||
.pp2-body-text {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
line-height: 1.6;
|
||||
padding-left: 14px;
|
||||
text-indent: -14px;
|
||||
}
|
||||
|
||||
/* As-is → To-be 비교 */
|
||||
.pp2-compare {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pp2-compare-col {
|
||||
flex: 1;
|
||||
}
|
||||
.pp2-compare-arrow {
|
||||
flex-shrink: 0;
|
||||
width: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.pp2-arrow-img {
|
||||
width: 84px;
|
||||
height: 30px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.pp2-arrow-text {
|
||||
font-size: 24px;
|
||||
color: #5c3614;
|
||||
}
|
||||
</style>
|
||||
@@ -1,75 +0,0 @@
|
||||
<!-- 슬라이드 배경 (고정) — 모든 블록의 공통 래퍼 -->
|
||||
<!--
|
||||
📋 slide-base
|
||||
─────────────────
|
||||
용도: 16:9 슬라이드의 고정 배경. 상단 제목 + 구분선 + 본문 영역 + 하단 결론 pill.
|
||||
각 블록(new/, cards/, emphasis/ 등)은 본문 영역(.slide-body) 안에 들어간다.
|
||||
Figma 원본: Frame 1171281207 (node 107:22, 3848×2165, Page 2)
|
||||
CSS: styles/tokens/ + styles/base/slide-base.css 로 분리됨.
|
||||
슬롯:
|
||||
title — 슬라이드 제목 (gradient text)
|
||||
body — {% block body %}{% endblock %} 또는 include 대상
|
||||
footer_text — 하단 pill 결론 메시지 (HTML, <em> 노란 하이라이트) (선택)
|
||||
이미지:
|
||||
svg/bg_slide_texture.png — 배경 텍스처 (opacity 2%)
|
||||
svg/line_divider.svg — 구분선
|
||||
svg/pill_scroll.png — 하단 pill 배경 (두루마리, 이미지 유지)
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>{{ title|default("슬라이드") }}</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
|
||||
<!--
|
||||
CSS 로딩 순서:
|
||||
1. tokens (typography, spacing, colors) — 변수 정의
|
||||
2. base (slide-base.css) — 프레임 스타일
|
||||
3. blocks (블록별 CSS) — 블록 스타일
|
||||
4. themes (선택) — 톤 변형
|
||||
-->
|
||||
<style>
|
||||
{% include "styles/tokens/typography.css" %}
|
||||
{% include "styles/tokens/spacing.css" %}
|
||||
{% include "styles/tokens/colors.css" %}
|
||||
{% include "styles/base/slide-base.css" %}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="slide">
|
||||
<!-- 배경 -->
|
||||
<div class="slide-bg">
|
||||
<img src="svg/bg_slide_texture.png" class="slide-bg-texture" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 상단 제목 -->
|
||||
<div class="slide-title">{{ title|default("슬라이드 제목") }}</div>
|
||||
|
||||
<!-- 구분선 -->
|
||||
<div class="slide-divider">
|
||||
<img src="svg/line_divider.svg" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 본문 영역 — 블록들이 여기에 들어감 -->
|
||||
<div class="slide-body">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<!-- 하단 결론 pill -->
|
||||
{% if footer_text %}
|
||||
<div class="slide-footer">
|
||||
{% if footer_pill_bg %}
|
||||
<img src="{{ footer_pill_bg }}" class="slide-footer-bg" alt="">
|
||||
{% else %}
|
||||
<div class="slide-footer-bg slide-footer--css"></div>
|
||||
{% endif %}
|
||||
<div class="slide-footer-text">{{ footer_text|safe }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 210.699 489.919" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Mask group" filter="url(#filter0_d_106_321)">
|
||||
<mask id="mask0_106_321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="201" height="475">
|
||||
<path id="Intersect" d="M0 58.1721C0 62.7691 3.14483 66.7452 7.5533 68.0482C80.6773 89.662 134.036 157.329 134.036 237.46C134.036 317.59 80.677 385.255 7.55332 406.868C3.14484 408.171 0 412.148 0 416.745V465.118C0 471.337 5.62415 476.059 11.6872 474.677C119.925 450.01 200.699 353.169 200.699 237.46C200.699 121.751 119.925 24.9083 11.6872 0.241745C5.62413 -1.13998 0 3.58191 0 9.80042V58.1721Z" fill="url(#paint0_linear_106_321)"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_106_321)">
|
||||
<rect id="Rectangle 43991" y="-0.00117085" width="270" height="95" fill="var(--fill-0, #FD9164)" fill-opacity="0.8"/>
|
||||
<rect id="Rectangle 43992" y="94.9988" width="270" height="95" fill="var(--fill-0, #F29700)" fill-opacity="0.8"/>
|
||||
<rect id="Rectangle 43993" x="-54" y="189.999" width="270" height="95" fill="var(--fill-0, #FCC948)" fill-opacity="0.8"/>
|
||||
<rect id="Rectangle 43994" y="284.999" width="270" height="95" fill="var(--fill-0, #C3D601)" fill-opacity="0.8"/>
|
||||
<rect id="Rectangle 43995" y="379.999" width="270" height="95" fill="var(--fill-0, #65C6C4)" fill-opacity="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_106_321" x="0" y="0" width="210.699" height="489.919" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dx="5" dy="10"/>
|
||||
<feGaussianBlur stdDeviation="2.5"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_106_321"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_106_321" result="shape"/>
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_106_321" x1="121.177" y1="-3.68723" x2="22.5301" y2="487.856" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#6FD6D8"/>
|
||||
<stop offset="1" stop-color="#14706E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
@@ -1,9 +0,0 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 192 169" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M192 169L179.022 154.254C168.646 142.474 159.023 133.381 145.754 127.296C133.472 121.666 118.062 118.732 97.6292 118.185V165.326L0 82.663L97.6292 0V47.3981C131.266 48.7758 156.328 59.8343 172.195 80.3485C185.335 97.3587 192 120.867 192 150.291V169Z" fill="url(#paint0_linear_101_190)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_101_190" x1="0" y1="84.5" x2="192" y2="84.5" gradientUnits="userSpaceOnUse">
|
||||
<stop/>
|
||||
<stop offset="1" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 677 B |
@@ -1,3 +0,0 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.4 16.8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Vector" d="M21.4629 0.5L11.1191 15.8984L0.930664 0.5H21.4629Z" fill="var(--fill-0, black)" stroke="var(--stroke-0, white)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 316 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 3553 5" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line id="Line 1" y1="2.5" x2="3553" y2="2.5" stroke="var(--stroke-0, #0F2E25)" stroke-width="5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 277 B |
Binary file not shown.
|
Before Width: | Height: | Size: 531 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 485 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 534 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
@@ -1,71 +0,0 @@
|
||||
<!-- 2단 분할 비교: 좌측 GIS / 우측 BIM 같은 상세 비교 -->
|
||||
<!--
|
||||
📋 compare-2col-split
|
||||
─────────────────
|
||||
용도: 두 개념/기술의 상세 항목별 비교 (좌우 나란히, 중앙 기준 라벨)
|
||||
슬롯: left_title, right_title, rows[] (각 행에 criteria, left, right)
|
||||
Figma 원본: 2-3_03 GIS vs BIM 비교 (개념/분석/도면/발전 등)
|
||||
-->
|
||||
<div class="block-split-compare">
|
||||
<div class="sc-header">
|
||||
<div class="sc-h-left">{{ left_title }}</div>
|
||||
<div class="sc-h-center">구분</div>
|
||||
<div class="sc-h-right">{{ right_title }}</div>
|
||||
</div>
|
||||
{% for row in rows %}
|
||||
<div class="sc-row {% if loop.index is odd %}sc-row-odd{% endif %}">
|
||||
<div class="sc-left">{{ row.left }}</div>
|
||||
<div class="sc-center">{{ row.criteria }}</div>
|
||||
<div class="sc-right">{{ row.right }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-split-compare {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sc-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 100px 1fr;
|
||||
background: linear-gradient(135deg, #0d47a1, #1565c0);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
.sc-h-left, .sc-h-right, .sc-h-center {
|
||||
padding: 12px;
|
||||
}
|
||||
.sc-h-center {
|
||||
background: rgba(0,0,0,0.15);
|
||||
font-size: 13px;
|
||||
}
|
||||
.sc-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 100px 1fr;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
.sc-row-odd {
|
||||
background: #f8fafc;
|
||||
}
|
||||
.sc-left, .sc-right {
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: #334155;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.sc-center {
|
||||
padding: 10px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: #1565c0;
|
||||
text-align: center;
|
||||
background: #f0f7ff;
|
||||
border-left: 1px solid #e2e8f0;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,110 +0,0 @@
|
||||
<!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
|
||||
<!--
|
||||
📋 comparison-table
|
||||
─────────────────
|
||||
용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
|
||||
슬롯: headers[] (3개), rows[][] (각 행 3칸)
|
||||
Figma 원본: 2-1_02 > BIM VS D/X 테이블
|
||||
특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
|
||||
-->
|
||||
<div class="block-table-figma">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{% for header in headers %}
|
||||
<th class="{% if loop.index == 1 %}th-left{% elif loop.index == 2 %}th-center{% else %}th-right{% endif %}">
|
||||
{% if loop.index == 2 %}<span class="th-badge">{{ header }}</span>{% else %}{{ header }}{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in rows %}
|
||||
<tr>
|
||||
{% for cell in row %}
|
||||
<td class="{% if loop.index == 1 %}td-left{% elif loop.index == 2 %}td-center{% else %}td-right{% endif %}">{{ cell }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-table-figma {
|
||||
overflow: auto;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.block-table-figma table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* 헤더 */
|
||||
.block-table-figma thead th {
|
||||
padding: 14px 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid #e8edf2;
|
||||
}
|
||||
.th-left {
|
||||
text-align: center;
|
||||
color: #6bcdff;
|
||||
}
|
||||
.th-center {
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
}
|
||||
.th-badge {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
|
||||
color: #ffffff;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
padding: 8px 28px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.th-right {
|
||||
text-align: center;
|
||||
color: #006eff;
|
||||
}
|
||||
|
||||
/* 본문 */
|
||||
.block-table-figma tbody td {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.td-left {
|
||||
white-space: pre-line;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
}
|
||||
.td-center {
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
background: #f6f8fb;
|
||||
font-size: 13px;
|
||||
}
|
||||
.td-right {
|
||||
white-space: pre-line;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
}
|
||||
/* container query: 좁은 영역(sidebar 등)에서 폰트 자동 축소 */
|
||||
@container (max-width: 40rem) {
|
||||
.block-table-figma table { font-size: var(--font-caption, 0.8rem); }
|
||||
.block-table-figma thead th { font-size: 14px; padding: 10px 8px; }
|
||||
.block-table-figma tbody td { padding: 8px 10px; }
|
||||
}
|
||||
@container (max-width: 25rem) {
|
||||
.block-table-figma table { font-size: var(--font-small, 0.7rem); }
|
||||
.block-table-figma thead th { font-size: 12px; padding: 8px 6px; }
|
||||
.block-table-figma tbody td { padding: 6px 8px; }
|
||||
.th-badge { padding: 4px 14px; font-size: 12px; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!-- 심플 줄무늬 테이블: 범용 데이터 테이블 -->
|
||||
<!--
|
||||
📋 table-simple-striped
|
||||
─────────────────
|
||||
용도: 스펙, 수치, 일정, 항목별 데이터 나열
|
||||
슬롯: headers[], rows[][]
|
||||
compare-3col-badge와 다른 점: VS 배지 없음, 범용 데이터용
|
||||
-->
|
||||
<div class="block-table-striped">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{% for h in headers %}
|
||||
<th>{{ h }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in rows %}
|
||||
<tr>
|
||||
{% for cell in row %}
|
||||
<td>{{ cell }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-table-striped table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.block-table-striped thead th {
|
||||
background: #1e293b;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
.block-table-striped tbody td {
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
white-space: pre-line;
|
||||
color: #334155;
|
||||
}
|
||||
.block-table-striped tbody tr:nth-child(even) {
|
||||
background: #f8fafc;
|
||||
}
|
||||
.block-table-striped tbody td:first-child {
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
|
||||
<!--
|
||||
📋 circle-label
|
||||
─────────────────
|
||||
용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
|
||||
슬롯: label (필수), sub_label (선택)
|
||||
Figma 원본: 2-1_02 > Group 1171281590 (190x190)
|
||||
-->
|
||||
<div class="block-circle-label">
|
||||
<div class="cl-outer">
|
||||
<div class="cl-inner">
|
||||
<div class="cl-text">{{ label }}</div>
|
||||
{% if sub_label %}<div class="cl-sub">{{ sub_label }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-circle-label {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
min-height: 0;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.cl-outer {
|
||||
width: 190px;
|
||||
height: 190px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
|
||||
box-shadow: 0 0 30px rgba(0, 106, 255, 0.25);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.cl-inner {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
.cl-text {
|
||||
font-size: 20px;
|
||||
font-weight: var(--weight-bold, 700);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.cl-sub {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +0,0 @@
|
||||
<!-- 비교 박스: 이중 테두리 둥근 박스 2개 + VS -->
|
||||
<!--
|
||||
📋 compare-pill-pair
|
||||
─────────────────
|
||||
용도: 2개 개념 시각적 대비 (비교 테이블 위 헤더)
|
||||
슬롯: left_label, left_sub, right_label, right_sub
|
||||
Figma 원본: 이중 테두리 (바깥 얇은 선 + 안쪽 둥근 박스)
|
||||
-->
|
||||
<div class="block-compare-pill">
|
||||
<div class="cp-item">
|
||||
<div class="cp-outer">
|
||||
<div class="cp-inner">
|
||||
<div class="cp-label">{{ left_label }}</div>
|
||||
{% if left_sub %}<div class="cp-sub">{{ left_sub }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-vs">VS</div>
|
||||
<div class="cp-item">
|
||||
<div class="cp-outer">
|
||||
<div class="cp-inner">
|
||||
<div class="cp-label">{{ right_label }}</div>
|
||||
{% if right_sub %}<div class="cp-sub">{{ right_sub }}</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.block-compare-pill {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.cp-item {
|
||||
width: 350px;
|
||||
}
|
||||
.cp-outer {
|
||||
border: 2px solid #a8d8f0;
|
||||
border-radius: 60px;
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
.cp-inner {
|
||||
border: 2px solid #7ec8f0;
|
||||
border-radius: 55px;
|
||||
background: linear-gradient(135deg, #e8f4fd 0%, #d6edfa 100%);
|
||||
padding: 18px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.cp-label {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #0088cc;
|
||||
line-height: 1.4;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.cp-sub {
|
||||
font-size: 12px;
|
||||
color: #0088cc;
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-line;
|
||||
font-weight: 500;
|
||||
}
|
||||
.cp-vs {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,94 +0,0 @@
|
||||
<!-- 순환 궤도 다이어그램: 3D 원 Z축 기울임 → 2D 투영, N개 노드 순환 -->
|
||||
<!--
|
||||
📋 cycle-orbit
|
||||
─────────────────
|
||||
용도: N개 요소가 순환 관계를 이루는 다이어그램. 3D 원 투영 궤도 + 노드 + 화살표.
|
||||
슬롯: title, nodes[] (각 노드에 icon, label, sub_label, desc_title, bullets[])
|
||||
+ 파이프라인이 계산해서 전달하는 값: ellipse, node_positions[], arrow_positions[]
|
||||
Figma 원본: Page 4 / Frame 1 (DX 시행을 위한 필수 요건, 1076x292)
|
||||
|
||||
핵심 수학 (파이프라인에서 계산):
|
||||
3D 원: R=400, Z축 기울임 θ=80°
|
||||
투영: project(α) = (cx + R×cos(α), cy + R×sin(α)×cos(80°))
|
||||
타원: cx=500, cy=200, rx=400, ry=69
|
||||
N개 노드: 하단 중심(90°) 기준 ±(360/N × 1/3)으로 배치, 사람(270°) 고정
|
||||
사이각 축소: 기본 간격의 2/3 → 앞쪽 노드들이 가까워짐
|
||||
화살표: 호 위 1/3, 2/3 지점에 » 마커, 접선 방향으로 회전
|
||||
|
||||
텍스트 배치 규칙 (Figma 원본 분석):
|
||||
좌측 노드 (node_x < cx): 설명이 이름 좌측에 (text-anchor: end)
|
||||
우측/상단 노드 (node_x >= cx): 설명이 이름 우측에 (text-anchor: start)
|
||||
설명 제목은 노드 라벨과 같은 Y 높이, 불릿은 제목 아래 들여쓰기
|
||||
-->
|
||||
<div class="block-co">
|
||||
{% if title %}
|
||||
<div class="co-title">{{ title }}</div>
|
||||
{% endif %}
|
||||
|
||||
<svg class="co-svg" viewBox="0 0 {{ viewbox_w | default(1000) }} {{ viewbox_h | default(380) }}" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<marker id="co-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="5" markerHeight="5" orient="auto">
|
||||
<path d="M0,1 L9,5 L0,9" fill="none" stroke="#aaa" stroke-width="1.5"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- 타원 궤도 (3D원 투영) -->
|
||||
<ellipse cx="{{ ellipse.cx }}" cy="{{ ellipse.cy }}" rx="{{ ellipse.rx }}" ry="{{ ellipse.ry }}"
|
||||
fill="none" stroke="#c0c0c0" stroke-width="1.5"/>
|
||||
|
||||
<!-- 화살표 >> (접선 방향 회전) -->
|
||||
{% for arrow in arrows %}
|
||||
<text x="{{ arrow.x }}" y="{{ arrow.y + 4 }}" text-anchor="middle" font-size="14" fill="#999"
|
||||
transform="rotate({{ arrow.rotation }},{{ arrow.x }},{{ arrow.y }})">»</text>
|
||||
{% endfor %}
|
||||
|
||||
<!-- 노드들 -->
|
||||
{% for node in nodes %}
|
||||
<!-- 노드: {{ node.label }} ({{ node.angle }}°) ({{ node.x }}, {{ node.y }}) -->
|
||||
<circle cx="{{ node.x }}" cy="{{ node.y }}" r="26" fill="#e9e8e8" stroke="#818181" stroke-width="2.5"/>
|
||||
{% if node.icon %}<text x="{{ node.x }}" y="{{ node.y + 6 }}" text-anchor="middle" font-size="18">{{ node.icon }}</text>{% endif %}
|
||||
<text x="{{ node.x }}" y="{{ node.y + 44 }}" text-anchor="middle" font-size="13" font-weight="900" fill="#1e293b">{{ node.label }}</text>
|
||||
{% if node.sub_label %}<text x="{{ node.x }}" y="{{ node.y + 58 }}" text-anchor="middle" font-size="9" fill="#64748b">({{ node.sub_label }})</text>{% endif %}
|
||||
|
||||
<!-- 설명 텍스트 (좌측 노드→좌측에, 우측/상단 노드→우측에) -->
|
||||
{% if node.desc_title %}
|
||||
<text x="{{ node.desc_x }}" y="{{ node.desc_y }}" text-anchor="{{ node.desc_anchor }}" font-size="12" font-weight="700" fill="#1e293b">{{ node.desc_title }}</text>
|
||||
{% endif %}
|
||||
{% if node.bullets is defined %}
|
||||
{% for b in node.bullets %}
|
||||
<text x="{{ node.bullet_x }}" y="{{ node.desc_y + 15 * (loop.index) }}" text-anchor="{{ node.desc_anchor }}" font-size="10" fill="#64748b">• {{ b }}</text>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/*
|
||||
3D 원 투영 순환 궤도
|
||||
파이프라인에서 모든 좌표를 계산하여 전달
|
||||
이 템플릿은 좌표를 받아 SVG로 렌더링만 함
|
||||
*/
|
||||
.block-co {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.co-title {
|
||||
font-size: 18px;
|
||||
font-weight: var(--weight-black, 900);
|
||||
color: var(--color-primary, #1e293b);
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid var(--color-accent, #2563eb);
|
||||
}
|
||||
|
||||
.co-svg {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user