Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: hero-icon-cards_1 블록 + 오답노트 + figma 관련 파일

Browse Source 
- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층)
- compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반)
- 오답노트.md: 절대 하지 말아야 하는 실수 목록
- figma_to_html.py: Figma→HTML 변환 스크립트
- static/figma-assets/: Figma export 이미지 (배지, 화살표)
- 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
이경민
2026-04-07 17:14:09 +09:00
parent 076aeb0403
commit 05703c8e72
37 changed files with 3536 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
templates/blocks/cards/compare-2col-badge.html Normal file
View File

@@ -0,0 +1,106 @@
<!-- 배지 헤더 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('/static/figma-assets/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>

113
templates/blocks/cards/compare-detail-gradient.html Normal file
View File

@@ -0,0 +1,113 @@
<!-- 그라디언트 상세 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('../../../static/figma-assets/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가 해결
*/
.block-cdg {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
overflow: hidden;
}
/* ── Headers (비대칭 라운드) ── */
.cdg-header { padding: 8px 20px; display: flex; min-height: 36px; align-items: center; }
.cdg-header-text { font-size: 15px; 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 (행 공유 → 좌우 Y선 정렬) ── */
.cdg-cell {
padding: 8px 14px;
display: flex; flex-direction: column; gap: 4px;
align-self: start;
}
.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
/* ── Section Title & Body ── */
.cdg-sec-title { font-size: 12px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 2px; }
.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: 11px; 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>

98
templates/blocks/cards/hero-icon-cards.html Normal file
View File

@@ -0,0 +1,98 @@
<!-- 히어로 문구 + 아이콘 카드: 큰 선언문 + 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('/static/figma-assets/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%; background: #0a0a0a; 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: #fff; 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>

111
templates/blocks/cards/hero-icon-cards_1.html Normal file
View File

@@ -0,0 +1,111 @@
<!-- 히어로 카드 변형1: 3D 리본 배지 + N열 카드 (제목+중제목+불릿 계층) -->
<!--
📋 hero-icon-cards_1
─────────────────
용도: 핵심 요건/목표를 N열 카드로 시각화. 각 카드에 제목+중제목+불릿 계층.
슬롯: statement(선택), badge_title, cards[] (title, sections[{title, bullets[]}])
변형 원본: hero-icon-cards
변경점: icon/title/subtitle → sections[{title, bullets[]}] 계층으로 변경
수학적 계산: hero-icon-cards와 동일
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('../../../static/figma-assets/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;
}
/* ── Hero Statement ── */
.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; 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%; }
.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: 1px solid #e2e8f0; border-radius: 8px;
padding: 36px 8px 8px;
}
.hic-cards { display: flex; align-items: stretch; width: 100%; }
.hic-card {
flex: 1; display: flex; flex-direction: column;
padding: 8px 10px 10px; gap: 0;
}
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 4px 0; }
/* ── 카드 내부 (변형: icon → 소제목+불릿 계층) ── */
/* 중제목 (카드 헤더: 기술/사람/자연): 중앙 정렬 */
.hic-title { font-size: 14px; font-weight: var(--weight-black, 900); color: #0d7377; line-height: 1.3; text-align: center; margin-bottom: 6px; }
/* 소제목 (D1): 12px/700, 들여쓰기 1단 */
.hic-sec-title { font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-top: 6px; margin-bottom: 2px; padding-left: 8px; }
.hic-sec-title:first-of-type { margin-top: 0; }
/* 불릿 (D2): 11px/500, 들여쓰기 2단 */
.hic-bullet {
position: relative; padding-left: 24px;
font-size: 11px; font-weight: 500; color: #334155;
line-height: 1.7; word-break: keep-all;
}
.hic-bullet::before { content: '•'; position: absolute; left: 14px; color: #666; }
</style>

169
templates/blocks/cards/test-compare-2col-badge.html Normal file
View File

@@ -0,0 +1,169 @@
<!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>

149
templates/blocks/cards/test-compare-detail-gradient_1.html Normal file
View File

@@ -0,0 +1,149 @@
<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#f0f0f0;padding:20px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
</style></head><body>
<div style="width:1280px;background:#fff;padding:40px;">
<!-- 그라디언트 상세 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">과정 (Process)의 혁신</span>
</div>
<div class="cdg-header cdg-header-teal">
<span class="cdg-header-text">결과 (Products)의 변화</span>
</div>
<!-- Rows: sections (행 공유로 좌/우 Y선 자동 정렬) -->
<div class="cdg-cell cdg-cell-warm">
<div class="cdg-sec-title cdg-title-warm">Analogue 기반 업무의 Digital Transformation</div>
<div class="cdg-asis-tobe">
<div class="cdg-asis">
<div class="cdg-bullet">개념·문서·행정 절차 중심</div><div class="cdg-bullet">2D 도면, 전문가, 규정</div><div class="cdg-bullet">업무 구분(단절), 책임</div>
</div>
<img src="/static/figma-assets/arrow_asis_tobe.png" class="cdg-arrow" alt="→">
<div class="cdg-tobe">
<div class="cdg-bullet">시각화된 목적물, 소통, 투명성 중심</div><div class="cdg-bullet">3D 모델, 참여자, 실체</div><div class="cdg-bullet">협업(융·복합), 창의성</div>
</div>
</div>
</div>
<div class="cdg-cell cdg-cell-teal">
<div class="cdg-sec-title cdg-title-teal">Copy & Paste로 인한 하향 평준화된 기존 성과물의 품질 향상</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div><div class="cdg-bullet">정확한 Data에 기반한 계획으로 고품질 성과물 도출</div>
</div>
</div>
<div class="cdg-cell cdg-cell-warm">
<div class="cdg-sec-title cdg-title-warm">위치기반의 3D 모델을 사용하는 Process 혁신</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신</div>
</div>
</div>
<div class="cdg-cell cdg-cell-teal">
<div class="cdg-sec-title cdg-title-teal">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가</div>
</div>
</div>
<div class="cdg-cell cdg-cell-warm">
<div class="cdg-sec-title cdg-title-warm">사용자 중심의 Solution(S/W) 제공</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공</div>
</div>
</div>
<div class="cdg-cell cdg-cell-teal">
<div class="cdg-sec-title cdg-title-teal">Solution을 활용한 업무 효율화</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성</div><div class="cdg-bullet">건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리</div>
</div>
</div>
</div>
<style>
/*
CSS Grid: 2열 × (1+N)행
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
*/
.block-cdg {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
overflow: hidden;
}
/* ── Headers (비대칭 라운드) ── */
.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
.cdg-header-text { font-size: 23.3px; 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 (행 공유 → 좌우 Y선 정렬) ── */
.cdg-cell {
padding: 14px 20px;
display: flex; flex-direction: column; gap: 6px;
align-self: start;
}
.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
/* ── Section Title & Body ── */
.cdg-sec-title { font-size: 16.6px; 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: 13.3px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
line-height: 23.3px; 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>
</div>
</body></html>

162
templates/blocks/cards/test-hero-icon-cards_1.html Normal file
View File

@@ -0,0 +1,162 @@
<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#f0f0f0;padding:20px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
</style></head><body>
<div style="width:1280px;background:#fff;padding:40px;">
<!-- 히어로 카드 변형1: 3D 리본 배지 + N열 카드 (제목+중제목+불릿 계층) -->
<!--
📋 hero-icon-cards_1
─────────────────
용도: 핵심 요건/목표를 N열 카드로 시각화. 각 카드에 제목+중제목+불릿 계층.
슬롯: statement(선택), badge_title, cards[] (title, sections[{title, bullets[]}])
변형 원본: hero-icon-cards
변경점: icon/title/subtitle → sections[{title, bullets[]}] 계층으로 변경
수학적 계산: hero-icon-cards와 동일
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">
<div class="hic-card-area">
<div class="hic-ribbon">
<img src="../../../static/figma-assets/badge_solution.png" class="hic-ribbon-img" alt="">
<span class="hic-ribbon-text">DX 시행을 위한 필수 요건</span>
</div>
<div class="hic-box">
<div class="hic-cards">
<div class="hic-card">
<div class="hic-title">기술(디지털)</div>
<div class="hic-sec-title">Digital 기술(S/W, H/W)과 업무 Process의 통합</div>
<div class="hic-bullet">기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행</div>
<div class="hic-bullet">프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율</div>
<div class="hic-sec-title">분야별 전문 지식(설계, 시공, 유지관리 등) 보유</div>
<div class="hic-bullet">건설 전 단계에 대한 근본적인 이해와 지식 및 경험</div>
<div class="hic-bullet">최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식</div>
</div>
<div class="hic-sep"></div>
<div class="hic-card">
<div class="hic-title">사람(역량)</div>
<div class="hic-sec-title">혁신적 사고방식과 창의적 문제 해결 능력</div>
<div class="hic-bullet">기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피</div>
<div class="hic-bullet">디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시</div>
<div class="hic-sec-title">사용자 중심 사고와 DX 수행 경험</div>
<div class="hic-bullet">사용자의 요구와 기대를 충족시키는 설계 및 구현</div>
<div class="hic-bullet">시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시</div>
</div>
<div class="hic-sep"></div>
<div class="hic-card">
<div class="hic-title">자연(여건)</div>
<div class="hic-sec-title">지속적인 투자 및 실행 의지</div>
<div class="hic-bullet">기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자</div>
<div class="hic-bullet">기술 고도화를 위한 지속적인 개선 및 투자 체계 구축</div>
<div class="hic-bullet">변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력</div>
</div>
</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: #fff; 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;
padding: 16px 12px 20px; gap: 0;
}
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 8px 0; }
/* ── 카드 내부 (변형: icon → 소제목+불릿 계층) ── */
/* 중제목 (카드 헤더: 기술/사람/자연): 중앙 정렬 */
.hic-title { font-size: 20px; font-weight: var(--weight-black, 900); color: #1a1a1a; line-height: 1.3; text-align: center; margin-bottom: 12px; }
/* 소제목 (D1): 16.6px/900, 들여쓰기 1단 = 16px */
.hic-sec-title { font-size: 16.6px; font-weight: 900; color: #1a1a1a; line-height: 1.4; margin-top: 8px; margin-bottom: 3px; padding-left: 16px; }
.hic-sec-title:first-of-type { margin-top: 0; }
/* 불릿 (D2): 13.3px/700, 들여쓰기 2단 = 36px, lineH=23.3px */
.hic-bullet {
position: relative; padding-left: 36px;
font-size: 13.3px; font-weight: 700; color: #334155;
line-height: 23.3px; word-break: keep-all;
}
.hic-bullet::before { content: '•'; position: absolute; left: 24px; color: #666; }
</style>
</div>
</body></html>

BIN
templates/blocks/cards/test-hero-icon-cards_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 204 KiB