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

Add Type B slide pipeline and recipe rendering updates

Browse Source
This commit is contained in:
이경민
2026-04-15 16:39:50 +09:00
parent 51548fdc41
commit 66c00924ed
22 changed files with 6260 additions and 1322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/blocks/cards/compare-detail-gradient.html
View File

@@ -84,7 +84,7 @@
/* ── 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-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;
@@ -105,7 +105,7 @@
.cdg-cell-teal { background: none; }
/* ── Section Title & Body ── */
.cdg-sec-title { font-size: 18px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
.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; }
@@ -113,7 +113,7 @@
/* ── Bullets ── */
.cdg-bullet {
position: relative; padding-left: 14px;
font-size: 14px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
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; }

193
templates/blocks/new/prerequisites-3col.html Normal file
View File

@@ -0,0 +1,193 @@
<!-- 필수요건 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>

228
templates/blocks/redesign/process-product-2col.html Normal file
View File

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