Add Phase Z runtime templates
- add slide base template for Phase Z rendering - add family partials for F13, F29, and F16 frames
This commit is contained in:
223
templates/phase_z2/families/bim_issues_quadrant_four.html
Normal file
223
templates/phase_z2/families/bim_issues_quadrant_four.html
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
<!-- Phase Z-2 frame-derived adapted block.
|
||||||
|
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
|
||||||
|
{#
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
Visual Provenance — figma_to_html_agent/blocks/1171281193/index.html
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
PROMOTED (Figma 1:1 변환물 → 그대로 사용):
|
||||||
|
- card-bg gradient (TL/TR top→bottom) : line 49 → linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%)
|
||||||
|
- card-bg gradient (BL/BR bottom→top) : line 53-54 → linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%)
|
||||||
|
- header-ribbon (TL/BL — 갈색) : line 75, 79 → linear-gradient(270deg, rgba(165,161,150,0.5), #39321E 73%)
|
||||||
|
- header-ribbon (TR/BR — 청록) : line 83, 87 → linear-gradient(90deg, rgba(41,107,85,0.5), #032118)
|
||||||
|
- red headline color : line 127 → #ff0000
|
||||||
|
- body-text color : line 136 → #000
|
||||||
|
- center-quote (Rome wasn't Built in a day!) : line 233 (decorative, MDX 4-2.2 의 핵심 메시지로 대체 가능)
|
||||||
|
- bullet marker : line 241 → "•"
|
||||||
|
- card 모서리 radius : line 51-54 → 50px (top corners TL/TR, bottom corners BL/BR)
|
||||||
|
|
||||||
|
NOT PROMOTED (Figma 데코지만 MDX 04-2.2 에 없는 콘텐츠):
|
||||||
|
- center-quote 의 영문 ("Rome wasn't Built in a day!") — slot_payload.center_quote 로 동적 (없으면 omit)
|
||||||
|
|
||||||
|
ADAPTED (Figma px / native size 무시, zone-compatible):
|
||||||
|
- 2226×1766 inner + zoom 0.575 → CSS grid 2×2 (no zoom, no fixed inner)
|
||||||
|
- Figma 60px ribbon font / 55px headline / 42px body → token-fixed (zone-title 13 / sub-title 12 / body 11)
|
||||||
|
- 1080px card width / 119px ribbon height → grid 1fr 1fr / 22px ribbon
|
||||||
|
- 644×584 center 원 → 90px 원 (zone-fit)
|
||||||
|
- absolute positioning (4 quadrants) → grid-template-areas
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body}
|
||||||
|
- quadrant 1 = TL (정책 집행)
|
||||||
|
- quadrant 2 = TR (수행 개념)
|
||||||
|
- quadrant 3 = BL (근본 취지의 이해부족)
|
||||||
|
- quadrant 4 = BR (지속적 투자 의지 부재)
|
||||||
|
- body 형식 = text-line family 호환 HTML (text_lines list 또는 pre-rendered string)
|
||||||
|
#}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.f16b {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||||
|
word-break: keep-all;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.f16b__title {
|
||||||
|
font-size: var(--font-zone-title);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: var(--lh-zone-title);
|
||||||
|
color: #1e293b;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 4 quadrants — 2×2 grid (CSS grid-template-areas) */
|
||||||
|
.f16b__quadrants {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 6px;
|
||||||
|
position: relative;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f16b__quadrant {
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
padding: 0 8px 6px;
|
||||||
|
/* PROMOTED — card-bg gradient */
|
||||||
|
}
|
||||||
|
.f16b__quadrant--tl {
|
||||||
|
background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
|
||||||
|
border-radius: 14px 14px 0 0; /* PROMOTED 50px → adapted 14px */
|
||||||
|
}
|
||||||
|
.f16b__quadrant--tr {
|
||||||
|
background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
|
||||||
|
border-radius: 14px 14px 0 0;
|
||||||
|
}
|
||||||
|
.f16b__quadrant--bl {
|
||||||
|
background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
|
||||||
|
border-radius: 0 0 14px 14px;
|
||||||
|
}
|
||||||
|
.f16b__quadrant--br {
|
||||||
|
background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
|
||||||
|
border-radius: 0 0 14px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header ribbon — PROMOTED gradient + token font */
|
||||||
|
.f16b__ribbon {
|
||||||
|
height: 22px;
|
||||||
|
margin: 0 -4px 4px;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: var(--font-sub-title);
|
||||||
|
font-weight: 900;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow: 0 0 3px #322c1e;
|
||||||
|
flex-shrink: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
/* PROMOTED ribbon gradient — TL/BL 갈색, TR/BR 청록 (figma line 75,79,83,87) */
|
||||||
|
.f16b__quadrant--tl .f16b__ribbon,
|
||||||
|
.f16b__quadrant--bl .f16b__ribbon {
|
||||||
|
background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
|
||||||
|
}
|
||||||
|
.f16b__quadrant--tr .f16b__ribbon,
|
||||||
|
.f16b__quadrant--br .f16b__ribbon {
|
||||||
|
background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body — red headline + text-line bullets */
|
||||||
|
.f16b__body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
font-size: var(--font-body);
|
||||||
|
line-height: var(--lh-body);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
.f16b__headline {
|
||||||
|
color: #ff0000; /* PROMOTED line 127 */
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--font-sub-title);
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
/* text-line family 은 slide_base.html 의 공통 contract 사용 */
|
||||||
|
|
||||||
|
/* Center quote (옵션 — MDX 에 있을 때만) */
|
||||||
|
.f16b__center {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%; top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 80px; height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, rgba(60,50,30,0.85), rgba(20,15,5,0.92));
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.f16b__center-quote {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="f16b" data-frame-id="1171281193" data-template-id="bim_issues_quadrant_four">
|
||||||
|
{% if slot_payload.title %}
|
||||||
|
<div class="f16b__title">{{ slot_payload.title }}</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="f16b__quadrants">
|
||||||
|
|
||||||
|
{# Quadrant 1 (TL) — 정책 집행 (갈색 ribbon) #}
|
||||||
|
<div class="f16b__quadrant f16b__quadrant--tl">
|
||||||
|
{% if slot_payload.quadrant_1_label %}
|
||||||
|
<div class="f16b__ribbon">{{ slot_payload.quadrant_1_label | safe }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if slot_payload.quadrant_1_headline or slot_payload.quadrant_1_body %}
|
||||||
|
<div class="f16b__body">
|
||||||
|
{% if slot_payload.quadrant_1_headline %}<div class="f16b__headline">{{ slot_payload.quadrant_1_headline | safe }}</div>{% endif %}
|
||||||
|
{% for line in slot_payload.quadrant_1_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Quadrant 2 (TR) — 수행 개념 (청록 ribbon) #}
|
||||||
|
<div class="f16b__quadrant f16b__quadrant--tr">
|
||||||
|
{% if slot_payload.quadrant_2_label %}
|
||||||
|
<div class="f16b__ribbon">{{ slot_payload.quadrant_2_label | safe }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if slot_payload.quadrant_2_headline or slot_payload.quadrant_2_body %}
|
||||||
|
<div class="f16b__body">
|
||||||
|
{% if slot_payload.quadrant_2_headline %}<div class="f16b__headline">{{ slot_payload.quadrant_2_headline | safe }}</div>{% endif %}
|
||||||
|
{% for line in slot_payload.quadrant_2_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Quadrant 3 (BL) — 근본 취지의 이해부족 (갈색 ribbon) #}
|
||||||
|
<div class="f16b__quadrant f16b__quadrant--bl">
|
||||||
|
{% if slot_payload.quadrant_3_label %}
|
||||||
|
<div class="f16b__ribbon">{{ slot_payload.quadrant_3_label | safe }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if slot_payload.quadrant_3_headline or slot_payload.quadrant_3_body %}
|
||||||
|
<div class="f16b__body">
|
||||||
|
{% if slot_payload.quadrant_3_headline %}<div class="f16b__headline">{{ slot_payload.quadrant_3_headline | safe }}</div>{% endif %}
|
||||||
|
{% for line in slot_payload.quadrant_3_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Quadrant 4 (BR) — 지속적 투자 의지 부재 (청록 ribbon) #}
|
||||||
|
<div class="f16b__quadrant f16b__quadrant--br">
|
||||||
|
{% if slot_payload.quadrant_4_label %}
|
||||||
|
<div class="f16b__ribbon">{{ slot_payload.quadrant_4_label | safe }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if slot_payload.quadrant_4_headline or slot_payload.quadrant_4_body %}
|
||||||
|
<div class="f16b__body">
|
||||||
|
{% if slot_payload.quadrant_4_headline %}<div class="f16b__headline">{{ slot_payload.quadrant_4_headline | safe }}</div>{% endif %}
|
||||||
|
{% for line in slot_payload.quadrant_4_body %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Center quote — 옵션 #}
|
||||||
|
{% if slot_payload.center_quote %}
|
||||||
|
<div class="f16b__center">
|
||||||
|
<div class="f16b__center-quote">{{ slot_payload.center_quote | safe }}</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
286
templates/phase_z2/families/process_product_two_way.html
Normal file
286
templates/phase_z2/families/process_product_two_way.html
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
|
||||||
|
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt. -->
|
||||||
|
{#
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
Visual Provenance — figma_to_html_agent/blocks/1171281210/index.html
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
PROMOTED (Figma 1:1 변환물 → 그대로 사용):
|
||||||
|
- banner-left text gradient : lines 101-104 → linear-gradient(90deg, rgb(62,53,35), rgb(62,53,35)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40))
|
||||||
|
- banner-right text gradient : lines 110-113 → linear-gradient(90deg, rgb(34,95,74), rgb(34,95,74)) on linear-gradient(180deg, rgb(41,107,85), rgb(18,51,40))
|
||||||
|
- section-title-left color : line 125 → #5C3714 (갈)
|
||||||
|
- section-title-right color : line 126 → #084C56 (짙은 청록)
|
||||||
|
- bullets text : line 136 → 700 / #000 / list-disc
|
||||||
|
- banner SVG asset (left) : line 196 → assets/header_left_bg.svg (좌측 180° rotate)
|
||||||
|
- banner SVG asset (right) : line 197 → assets/header_right_bg.svg
|
||||||
|
- body bg SVG asset : line 193 → assets/body_bg.svg (3845×933 상단)
|
||||||
|
- arrow PNG asset : line 220 → assets/arrow.png (AS-IS → TO-BE)
|
||||||
|
- footnote (＊) inline : lines 144, 281-283 → 25.8px small + indent
|
||||||
|
|
||||||
|
ADAPTED (Figma px / native 무시, zone flex 재구성):
|
||||||
|
- 3848×1388 inner + zoom 0.33270 → flex layout (no zoom, no fixed inner)
|
||||||
|
- 70px banner / 50px section / 40px body→ var(--font-sub-title) / 8-10px / var(--font-caption)
|
||||||
|
- absolute left/top px → flex grid (no absolute)
|
||||||
|
- banner heights 142px + body 933px → 비율 기반 flex (banner ~28%, body ~72%)
|
||||||
|
- assets 1921×142 / 3845×933 sizes → object-fit cover, 비율 유지
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
slots: title (omitted), banner_left, banner_right,
|
||||||
|
process.sections[3] (s[0]: AS-IS/TO-BE, s[1-2]: bullets),
|
||||||
|
product.sections[3] (bullets, optional footnote/sub_title)
|
||||||
|
#}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.f29b {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
position: relative;
|
||||||
|
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||||
|
word-break: keep-all;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.f29b__title {
|
||||||
|
font-size: var(--font-zone-title); /* 13px — frame 13 의 f13b__title 과 동일 위계 */
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: var(--lh-zone-title);
|
||||||
|
background-image: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||||
|
-webkit-background-clip: text; background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* banners — top */
|
||||||
|
.f29b__banners {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 4px;
|
||||||
|
position: relative;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
.f29b__banner {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.f29b__banner-bg {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
object-fit: fill;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.f29b__banner--left .f29b__banner-bg { transform: rotate(180deg); } /* PROMOTED line 71 (좌 180° rotate) */
|
||||||
|
.f29b__banner-text {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
font-size: var(--font-sub-title);
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1;
|
||||||
|
text-shadow: 0 0 2px #322C1E;
|
||||||
|
-webkit-background-clip: text; background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
/* PROMOTED gradient — lines 101-104 / 110-113 */
|
||||||
|
.f29b__banner--left .f29b__banner-text {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgb(62,53,35) 0%, rgb(62,53,35) 100%),
|
||||||
|
linear-gradient(180deg, rgb(41,107,85) 0%, rgb(18,51,40) 100%);
|
||||||
|
}
|
||||||
|
.f29b__banner--right .f29b__banner-text {
|
||||||
|
background-image:
|
||||||
|
linear-gradient(90deg, rgb(34,95,74) 0%, rgb(34,95,74) 100%),
|
||||||
|
linear-gradient(180deg, rgb(41,107,85) 0%, rgb(18,51,40) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* body — 6 cell grid (3 rows × 2 cols) — 좌우 row divider Y 정렬 */
|
||||||
|
.f29b__body {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
min-height: 0;
|
||||||
|
padding-top: 4px;
|
||||||
|
}
|
||||||
|
.f29b__body-bg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0;
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
object-fit: fill;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.85;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 6 cell grid: 3 rows (section 1/2/3), 2 cols (process/product). 각 row 의 height = max(좌, 우) */
|
||||||
|
.f29b__grid {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-auto-rows: auto;
|
||||||
|
gap: 6px 10px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
height: 100%;
|
||||||
|
align-content: start;
|
||||||
|
}
|
||||||
|
.f29b__cell {
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
/* row 2/3 (3 번째 cell 이후) 위에 dashed divider — 좌우 같은 Y */
|
||||||
|
.f29b__cell:nth-child(n+3) {
|
||||||
|
border-top: 1px dashed rgba(0,0,0,0.15);
|
||||||
|
padding-top: 6px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
/* feedback-3: section title 에 border-left accent 로 hierarchy 강화 */
|
||||||
|
.f29b__section-title {
|
||||||
|
font-size: var(--font-zone-title); /* 13px */
|
||||||
|
font-weight: 900;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding-left: 6px;
|
||||||
|
border-left: 3px solid currentColor;
|
||||||
|
}
|
||||||
|
.f29b__cell--left .f29b__section-title { color: #5C3714; } /* PROMOTED line 125 */
|
||||||
|
.f29b__cell--right .f29b__section-title { color: #084C56; } /* PROMOTED line 126 */
|
||||||
|
.f29b__section-title__sub {
|
||||||
|
font-size: var(--font-caption); /* 10px */
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
/* f29b 의 본문 = .text-line 공통 contract 사용. bullet color override. */
|
||||||
|
.f29b__cell .text-line--bullet { color: #000; font-weight: 700; }
|
||||||
|
|
||||||
|
/* AS-IS/TO-BE 좌우 + arrow (PROMOTED 구조) */
|
||||||
|
.f29b__transform {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto 1fr;
|
||||||
|
gap: 4px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.f29b__transform__list {
|
||||||
|
/* .text-line 공통 contract 그대로. wrapper 만 grid 안의 cell 역할 */
|
||||||
|
}
|
||||||
|
.f29b__transform__arrow {
|
||||||
|
align-self: center;
|
||||||
|
width: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.f29b__transform__arrow img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f29b__footnote {
|
||||||
|
font-size: var(--font-caption); /* 10px */
|
||||||
|
line-height: var(--lh-caption);
|
||||||
|
color: #333;
|
||||||
|
padding-left: 14px;
|
||||||
|
margin-top: 1px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.f29b__aster-small { font-size: 9px; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="f29b" data-frame-id="1171281210" data-template-id="process_product_two_way">
|
||||||
|
|
||||||
|
{# H2 mid-heading — section.title 렌더 (frame 13 의 f13b__title 과 동일 위계) #}
|
||||||
|
<div class="f29b__title">{{ slot_payload.title }}</div>
|
||||||
|
|
||||||
|
{# Banners (PROMOTED 구조 + assets line 196,197 + gradient lines 101-113) #}
|
||||||
|
<div class="f29b__banners">
|
||||||
|
<div class="f29b__banner f29b__banner--left">
|
||||||
|
<img class="f29b__banner-bg" src="assets/process_product_two_way/header_left_bg.svg" alt="">
|
||||||
|
<div class="f29b__banner-text">{{ slot_payload.banner_left }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="f29b__banner f29b__banner--right">
|
||||||
|
<img class="f29b__banner-bg" src="assets/process_product_two_way/header_right_bg.svg" alt="">
|
||||||
|
<div class="f29b__banner-text">{{ slot_payload.banner_right }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# Body — 6 cell grid (row-major: row 1 좌/우, row 2 좌/우, row 3 좌/우).
|
||||||
|
row 별 height = max(좌, 우) → divider Y 정렬 #}
|
||||||
|
<div class="f29b__body">
|
||||||
|
<img class="f29b__body-bg" src="assets/process_product_two_way/body_bg.svg" alt="">
|
||||||
|
|
||||||
|
<div class="f29b__grid">
|
||||||
|
|
||||||
|
{# ───── Row 1: section 1 ───── #}
|
||||||
|
{% set s1 = slot_payload.process.sections[0] %}
|
||||||
|
<div class="f29b__cell f29b__cell--left">
|
||||||
|
{% if s1.title %}
|
||||||
|
<div class="f29b__section-title">{{ s1.title | safe }}</div>
|
||||||
|
{% if s1.transforms %}
|
||||||
|
<div class="transform-block">
|
||||||
|
<div class="transform-block__header">
|
||||||
|
<span class="transform-block__label--from">AS-IS</span>
|
||||||
|
<span></span>
|
||||||
|
<span class="transform-block__label--to">TO-BE</span>
|
||||||
|
</div>
|
||||||
|
<div class="transform-rows">
|
||||||
|
{% for t in s1.transforms %}
|
||||||
|
<div class="transform-row">
|
||||||
|
<div class="transform-row__from">{{ t.from | safe }}</div>
|
||||||
|
<div class="transform-row__arrow">➜</div>
|
||||||
|
<div class="transform-row__to">{{ t.to | safe }}</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% elif s1.text_lines %}
|
||||||
|
{% for line in s1.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% set p1 = slot_payload.product.sections[0] %}
|
||||||
|
<div class="f29b__cell f29b__cell--right">
|
||||||
|
{% if p1.title %}
|
||||||
|
<div class="f29b__section-title">{{ p1.title | safe }}</div>
|
||||||
|
{% for line in p1.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# ───── Row 2: section 2 ───── #}
|
||||||
|
{% set s2 = slot_payload.process.sections[1] %}
|
||||||
|
<div class="f29b__cell f29b__cell--left">
|
||||||
|
{% if s2.title %}
|
||||||
|
<div class="f29b__section-title">{{ s2.title | safe }}</div>
|
||||||
|
{% for line in s2.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% set p2 = slot_payload.product.sections[1] %}
|
||||||
|
<div class="f29b__cell f29b__cell--right">
|
||||||
|
{% if p2.title %}
|
||||||
|
<div class="f29b__section-title">{{ p2.title | safe }}</div>
|
||||||
|
{% for line in p2.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
{% if p2.footnote %}
|
||||||
|
<div class="f29b__footnote"><span class="f29b__aster-small">＊</span> {{ p2.footnote | safe }}</div>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{# ───── Row 3: section 3 ───── #}
|
||||||
|
{% set s3 = slot_payload.process.sections[2] %}
|
||||||
|
<div class="f29b__cell f29b__cell--left">
|
||||||
|
{% if s3.title %}
|
||||||
|
<div class="f29b__section-title">{{ s3.title | safe }}</div>
|
||||||
|
{% for line in s3.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% set p3 = slot_payload.product.sections[2] %}
|
||||||
|
<div class="f29b__cell f29b__cell--right">
|
||||||
|
{% if p3.title %}
|
||||||
|
<div class="f29b__section-title">{{ p3.title | safe }}{% if p3.sub_title %}<span class="f29b__section-title__sub">{{ p3.sub_title | safe }}</span>{% endif %}</div>
|
||||||
|
{% for line in p3.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
158
templates/phase_z2/families/three_parallel_requirements.html
Normal file
158
templates/phase_z2/families/three_parallel_requirements.html
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
<!-- Phase Z-2 MVP-1.5b frame-derived adapted block.
|
||||||
|
§17 룰 — Figma 시각 언어 promote, geometry 만 zone-compatible adapt.
|
||||||
|
Legacy templates/blocks/structures/prerequisites-3col.html 의 token-fixed font 접근 학습. -->
|
||||||
|
{#
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
Visual Provenance — figma_to_html_agent/blocks/1171281190/index.html
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
PROMOTED (Figma 1:1 변환물 → 그대로 사용):
|
||||||
|
- tech bar gradient : line 71 → linear-gradient(180deg, #0D78D0 0%, #023056 100%)
|
||||||
|
- people bar gradient : line 72 → linear-gradient(180deg, #FF9A23 0%, #CC5200 100%)
|
||||||
|
- nature bar gradient : line 73 → linear-gradient(180deg, #39BE49 21%, #23742C 100%)
|
||||||
|
- tech heading text : line 123 → linear-gradient(180deg, #0D78D0, #134D7F)
|
||||||
|
- people heading text : line 124 → linear-gradient(180deg, #FE900C, #D18B37)
|
||||||
|
- nature heading text : line 125 → linear-gradient(180deg, #3CA649, #23742C)
|
||||||
|
- title gradient : line 40 → linear-gradient(180deg, #000, #883700)
|
||||||
|
- desc color : line 118 → #3E3523
|
||||||
|
- col 외곽 border : line 57 → 2px solid #000 (top + bottom)
|
||||||
|
- col-section divider : line 103 → 2px dashed #000
|
||||||
|
|
||||||
|
NOT PROMOTED (Figma 데코지만 MDX 에 없으므로 주입 X):
|
||||||
|
- 한자 (技/術 / 人/材 / 天/地) ← MDX 에 없는 content. Figma frame 의 visual 데코일 뿐.
|
||||||
|
|
||||||
|
ADAPTED:
|
||||||
|
- Figma px / native size 무시, flex layout
|
||||||
|
- Figma 70/50/45/35px fonts → token-fixed (zone-title 13 / sub-title 12 / body 11 / caption 10)
|
||||||
|
- desc <br>-joined → nested <ul><li> (구조 보존)
|
||||||
|
─────────────────────────────────────────────────────────────────────────────
|
||||||
|
slots: title, pillars[].{label, color_class, sections[].{heading, bullets[]}}
|
||||||
|
#}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.f13b {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
.f13b__title {
|
||||||
|
font-size: var(--font-zone-title);
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: var(--lh-zone-title);
|
||||||
|
background-image: linear-gradient(180deg, #000 0%, #883700 100%);
|
||||||
|
-webkit-background-clip: text; background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.f13b__cols {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.f13b__col {
|
||||||
|
display: flex;
|
||||||
|
border-top: 2px solid #000; /* PROMOTED line 57 */
|
||||||
|
border-bottom: 2px solid #000;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 0;
|
||||||
|
background: rgba(255,255,255,0.5);
|
||||||
|
}
|
||||||
|
.f13b__bar {
|
||||||
|
flex: 0 0 50px;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
align-items: center; justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
padding: 6px 2px;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
.f13b__col--tech .f13b__bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||||||
|
.f13b__col--people .f13b__bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||||||
|
.f13b__col--nature .f13b__bar { background: linear-gradient(180deg, #39BE49 21%, #23742C 100%); }
|
||||||
|
/* PROMOTED Figma frame 13 line 92-93 — main + parenthetical stacked vertically */
|
||||||
|
.f13b__bar-main {
|
||||||
|
font-size: var(--font-sub-title); /* 12px — main word "기술/사람/자연" */
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.f13b__bar-paren {
|
||||||
|
font-size: var(--font-caption); /* 10px — "(디지털/역량/여건)" */
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: block;
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.f13b__body {
|
||||||
|
flex: 1;
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
padding: 8px 12px; /* breathing (was 6px 10px) */
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.f13b__section {
|
||||||
|
flex: 1;
|
||||||
|
padding: 6px 0; /* breathing (was 4px) */
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.f13b__section + .f13b__section {
|
||||||
|
border-top: 2px dashed #000; /* PROMOTED line 103 */
|
||||||
|
margin-top: 6px; /* visible section gap (was 4px) */
|
||||||
|
padding-top: 8px; /* breathing (was 6px) */
|
||||||
|
}
|
||||||
|
/* heading — visible hierarchy (zone-title 13px, bigger than body 11px) */
|
||||||
|
.f13b__heading {
|
||||||
|
font-size: var(--font-zone-title); /* 13px (was 12px) — heading 위계 강화 */
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: var(--lh-zone-title);
|
||||||
|
-webkit-background-clip: text; background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
margin-bottom: 6px; /* visible heading-body gap (was 4px) */
|
||||||
|
}
|
||||||
|
.f13b__col--tech .f13b__heading { background-image: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); }
|
||||||
|
.f13b__col--people .f13b__heading { background-image: linear-gradient(180deg, #FE900C 0%, #D18B37 100%); }
|
||||||
|
.f13b__col--nature .f13b__heading { background-image: linear-gradient(180deg, #3CA649 21%, #23742C 100%); }
|
||||||
|
|
||||||
|
/* desc — frame-family text layout contract (.text-line 공통 클래스 사용)
|
||||||
|
feedback (mvp1.5b_test5): browser-native ul/li 폐기. */
|
||||||
|
.f13b__desc {
|
||||||
|
color: #3E3523; /* PROMOTED line 118 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/* desc 안 .text-line 색 override */
|
||||||
|
.f13b__desc .text-line { color: #3E3523; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="f13b" data-frame-id="1171281190" data-template-id="three_parallel_requirements">
|
||||||
|
<div class="f13b__title">{{ slot_payload.title }}</div>
|
||||||
|
<div class="f13b__cols">
|
||||||
|
{% for pillar in slot_payload.pillars %}
|
||||||
|
<div class="f13b__col f13b__col--{{ pillar.color_class }}">
|
||||||
|
<div class="f13b__bar">
|
||||||
|
<span class="f13b__bar-main">{{ pillar.label_main | safe }}</span>
|
||||||
|
{% if pillar.label_paren %}
|
||||||
|
<span class="f13b__bar-paren">{{ pillar.label_paren | safe }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="f13b__body">
|
||||||
|
{% for section in pillar.sections %}
|
||||||
|
<div class="f13b__section">
|
||||||
|
<div class="f13b__heading">{{ section.heading | safe }}</div>
|
||||||
|
{% if section.text_lines %}
|
||||||
|
<div class="f13b__desc">
|
||||||
|
{% for line in section.text_lines %}<div class="text-line text-line--bullet{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
255
templates/phase_z2/slide_base.html
Normal file
255
templates/phase_z2/slide_base.html
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
<!-- Phase Z-2 MVP-1.5b — single slide + Type B layout (top/bottom zones).
|
||||||
|
원래 Phase Z 설계 복귀: MDX 1 = slide 1, layout preset = zone 분할, frame-derived block ⊂ zone. -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=1280">
|
||||||
|
<title>{{ slide_title }}</title>
|
||||||
|
<style>
|
||||||
|
/* ── existing tokens (inlined) ── */
|
||||||
|
{{ token_css | safe }}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||||
|
background: #e8ecf0;
|
||||||
|
display: flex; justify-content: center; align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
word-break: keep-all;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 16:9 슬라이드 (single, 1280×720) ── */
|
||||||
|
.slide {
|
||||||
|
width: 1280px; height: 720px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.slide-bg {
|
||||||
|
position: absolute; inset: 0;
|
||||||
|
background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.slide-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 52px; top: 22px;
|
||||||
|
width: calc(100% - 104px);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: var(--font-slide-title);
|
||||||
|
line-height: var(--lh-slide-title);
|
||||||
|
background-image: linear-gradient(180deg, #296b55 0%, #123328 100%);
|
||||||
|
-webkit-background-clip: text; background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
text-shadow: 0 0 2px #322c1e;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.slide-divider {
|
||||||
|
position: absolute;
|
||||||
|
left: 50px; top: 58px;
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
height: 2px;
|
||||||
|
background: #1e293b;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.slide-body {
|
||||||
|
position: absolute;
|
||||||
|
left: 40px; top: 65px;
|
||||||
|
width: calc(100% - 80px); /* 1200 */
|
||||||
|
height: 590px;
|
||||||
|
z-index: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Layout preset (composition planner v0 — 8 vocabulary) ──
|
||||||
|
단일 .layout-{preset} 클래스에 grid CSS 주입.
|
||||||
|
layout_css = pipeline build_layout_css() 결과 :
|
||||||
|
- horizontal-2 : rows = dynamic px (content_weight + frame_min_height)
|
||||||
|
- 그 외 : rows / cols = fr default (LAYOUT_PRESETS)
|
||||||
|
positions (single / top / bottom / left / right / top-left / ... / grid-2x2 9개)
|
||||||
|
은 .zone 의 inline grid-area 로 지정 — preset CSS 는 areas 만 정의. */
|
||||||
|
.layout-{{ layout_preset }} {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: {{ layout_css.cols }};
|
||||||
|
grid-template-rows: {{ layout_css.rows }};
|
||||||
|
grid-template-areas: {{ layout_css.areas | safe }};
|
||||||
|
gap: {{ gap_px }}px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Zone — block 가용 공간 최대화. 프레임 자체 styling 이 boundary 역할 ── */
|
||||||
|
.zone {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Frame-family text layout contract (shared, reusable) ──
|
||||||
|
feedback-1 (mvp1.5b_test7): visible improvement 강화.
|
||||||
|
Stronger hanging indent + breathing line spacing + visible hierarchy. */
|
||||||
|
.text-line {
|
||||||
|
font-size: var(--font-body); /* 11px */
|
||||||
|
font-weight: var(--weight-body);
|
||||||
|
line-height: 1.6; /* breathing room */
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.text-line + .text-line {
|
||||||
|
margin-top: 4px; /* visible gap between lines (was 2px) */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bullet line — hanging indent via padding + absolute marker (안정적) */
|
||||||
|
.text-line--bullet {
|
||||||
|
padding-left: 14px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.text-line--bullet::before {
|
||||||
|
content: "•"; /* visible bullet 마커 */
|
||||||
|
position: absolute;
|
||||||
|
left: 2px;
|
||||||
|
top: 0;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
/* indent levels — visible nested hierarchy */
|
||||||
|
.text-line--indent-1 {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
.text-line--indent-1::before {
|
||||||
|
content: "◦"; /* sub-bullet 다른 마커 */
|
||||||
|
left: 18px;
|
||||||
|
}
|
||||||
|
.text-line--indent-2 {
|
||||||
|
padding-left: 46px;
|
||||||
|
}
|
||||||
|
.text-line--indent-2::before {
|
||||||
|
content: "▪";
|
||||||
|
left: 34px;
|
||||||
|
}
|
||||||
|
/* body line — 마커 없음 */
|
||||||
|
.text-line--body {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.text-line strong { color: #000; font-weight: 700; }
|
||||||
|
|
||||||
|
/* ── Transform-block family (frame 29 AS-IS/TO-BE dedicated comparison component) ──
|
||||||
|
feedback-3: bullet rows 가 아닌 *전용 비교 component*. Header (AS-IS / TO-BE) + paired rows.
|
||||||
|
color-coded cells, left-border accent → 단번에 *비교 구조* 인지. */
|
||||||
|
.transform-block {
|
||||||
|
margin-top: 4px;
|
||||||
|
padding: 6px 8px 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
.transform-block__header {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 22px 1fr;
|
||||||
|
gap: 6px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
border-bottom: 1px dashed rgba(0,0,0,0.12);
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.transform-block__label--from { color: #6b5444; }
|
||||||
|
.transform-block__label--to { color: #2563eb; text-align: left; }
|
||||||
|
.transform-rows {
|
||||||
|
display: flex; flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
.transform-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 22px 1fr;
|
||||||
|
gap: 6px;
|
||||||
|
align-items: stretch;
|
||||||
|
font-size: var(--font-body);
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
.transform-row__from {
|
||||||
|
padding: 3px 8px;
|
||||||
|
background: linear-gradient(90deg, rgba(140,120,90,0.16), rgba(140,120,90,0.08));
|
||||||
|
border-left: 2px solid #b8a98a;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #4b3f30;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.transform-row__arrow {
|
||||||
|
text-align: center;
|
||||||
|
color: #2563eb;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 14px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.transform-row__to {
|
||||||
|
padding: 3px 8px;
|
||||||
|
background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(37,99,235,0.18));
|
||||||
|
border-left: 2px solid #2563eb;
|
||||||
|
border-radius: 2px;
|
||||||
|
color: #1e40af;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Footer pill — feedback-3: body 와 weight balance, 살짝 가벼워짐 ── */
|
||||||
|
.slide-footer {
|
||||||
|
position: absolute;
|
||||||
|
left: 60px; bottom: 8px;
|
||||||
|
width: calc(100% - 120px);
|
||||||
|
height: 32px; /* was 41px */
|
||||||
|
border-radius: 999px;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||||||
|
opacity: 0.92; /* slightly lighter */
|
||||||
|
}
|
||||||
|
.slide-footer-text {
|
||||||
|
position: relative; z-index: 1;
|
||||||
|
font-size: 15px; /* was 20px (--font-footer) */
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 0 3px rgba(0,0,0,.4);
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
.slide-footer-text em { color: #fe3; font-style: normal; }
|
||||||
|
|
||||||
|
.phase-z2-marker {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px; right: 8px;
|
||||||
|
font-size: 9px; color: #94a3b8;
|
||||||
|
font-family: monospace;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="slide" data-page="1">
|
||||||
|
<div class="slide-bg"></div>
|
||||||
|
<div class="phase-z2-marker">phase_z2 / mvp-1.5b / {{ layout_preset }} / single slide</div>
|
||||||
|
<div class="slide-title">{{ slide_title }}</div>
|
||||||
|
<div class="slide-divider"></div>
|
||||||
|
<div class="slide-body">
|
||||||
|
<div class="layout-{{ layout_preset }}">
|
||||||
|
{% for zone in zones %}
|
||||||
|
<div class="zone" data-zone-position="{{ zone.position }}" data-template-id="{{ zone.template_id }}" style="grid-area: {{ zone.position }};">
|
||||||
|
{{ zone.partial_html | safe }}
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% if slide_footer %}
|
||||||
|
<div class="slide-footer">
|
||||||
|
<div class="slide-footer-text">{{ slide_footer | safe }}</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user