블록 템플릿 업데이트: 수정 3개 + 신규 17개 + catalog.yaml 재정비
수정: - compare-2col-badge, compare-detail-gradient, hero-icon-cards 개선 신규 블록: - cards: category-strip-table, system-2col-center, hero-icon-cards_1 - emphasis: checklist-dark - visuals: cycle-orbit - new/: cards-3col-persona, compare-vs-rows, cycle-3way-intersect 등 8개 - redesign/: card_hero-icon-cards_1 - svg/: arc_left, arrow_conclusion, arrow_down, line_divider - BEPs: process-product-2col SVG + 테스트 catalog.yaml 전면 재정비 (슬롯 스키마, height_cost, 카테고리 정리) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
114
templates/blocks/cards/category-strip-table.html
Normal file
114
templates/blocks/cards/category-strip-table.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!-- 카테고리 컬러 스트립 테이블: 좌측 색상 바 + 제목/본문 × 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>
|
||||
@@ -15,7 +15,7 @@
|
||||
<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="">
|
||||
<img src="{{ ribbon_image | default('svg/badge_policy.png') }}" class="c2b-ribbon-img" alt="">
|
||||
<span class="c2b-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
- 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
|
||||
- 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
|
||||
- CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
|
||||
- 첫 번째 섹션: As-Is → 화살표 → To-Be 수평 배치 가능
|
||||
- 첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능
|
||||
수학적 계산:
|
||||
좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
|
||||
-->
|
||||
@@ -31,7 +31,7 @@
|
||||
<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="→">
|
||||
<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>
|
||||
@@ -64,16 +64,27 @@
|
||||
행 공유 → 좌/우 섹션 제목이 같은 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: 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; }
|
||||
/* ── Headers (비대칭 라운드 — 자체 배경 유지) ── */
|
||||
.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
|
||||
.cdg-header-text { font-size: 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;
|
||||
@@ -83,17 +94,18 @@
|
||||
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
|
||||
/* ── Grid Cells (배경 제거 → Grid 배경이 투과) ── */
|
||||
.cdg-cell {
|
||||
padding: 8px 14px;
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
padding: 14px 20px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
align-self: start;
|
||||
background: none;
|
||||
}
|
||||
.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)); }
|
||||
.cdg-cell-warm { background: none; }
|
||||
.cdg-cell-teal { background: none; }
|
||||
|
||||
/* ── 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-sec-title { font-size: 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; }
|
||||
@@ -101,7 +113,7 @@
|
||||
/* ── Bullets ── */
|
||||
.cdg-bullet {
|
||||
position: relative; padding-left: 14px;
|
||||
font-size: 11px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
|
||||
font-size: 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; }
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<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="">
|
||||
<img src="{{ ribbon_image | default('svg/badge_solution.png') }}" class="hic-ribbon-img" alt="">
|
||||
<span class="hic-ribbon-text">{{ badge_title }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -42,14 +42,14 @@
|
||||
<style>
|
||||
.block-hic {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
width: 100%; background: #0a0a0a; border-radius: 16px;
|
||||
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;
|
||||
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; }
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
<!-- 히어로 카드 변형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>
|
||||
176
templates/blocks/cards/system-2col-center.html
Normal file
176
templates/blocks/cards/system-2col-center.html
Normal file
@@ -0,0 +1,176 @@
|
||||
<!-- 중앙 라벨 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,149 +0,0 @@
|
||||
<!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>
|
||||
@@ -1,162 +0,0 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 204 KiB |
Reference in New Issue
Block a user