wip: phase_z2 evidence 파이프라인 + matching 실험(phase2~26) + 프론트 trace 패널 진행분 스냅샷
- src: phase_z2 composition/mapper/pipeline/placement_planner/retry, ai_fallback(prompts/schema/validate), mdx_text_atoms 신규 - Front: PipelineTracePanel 신규, FramePanel/SlideCanvas/Home/designAgentApi 등 갱신 + 테스트 4종 추가 - templates/phase_z2: catalog(component_expansion_registry, node_slot_mapping 신규), frames, families, slide_base 갱신 - tests/matching: phase2~26 매칭 실험 스크립트·리포트·온톨로지 전체 (미커밋 진행분) - tests: b4_v4 evidence, task5~28.5 시리즈, regression(imp95 baseline) 등 신규 테스트 대량 추가 - docs/reference: MDX 구조 인벤토리, MDX→Frame 구조 계약 문서 - scripts: mdx 계약/parity/coverage/viewport 체크, gitea comment, run sync 유틸 - .gitignore: tmp*.json, chromedriver, .orchestrator, *.pkl, Front_test* 등 임시/스냅샷 제외 미완성 작업의 보존용 스냅샷 커밋 (2026-07-02) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
BIN
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 485 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 534 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,24 @@
|
||||
# Component expansion registry for MDX-to-frame structure normalization.
|
||||
#
|
||||
# This file is introduced by #98 T21.6 as a contract artifact. T23 will wire
|
||||
# the parser/normalizer to read it. Entries must describe how an opaque
|
||||
# component becomes typed source nodes while preserving source text verbatim.
|
||||
|
||||
version: 1
|
||||
|
||||
components:
|
||||
DxEffect:
|
||||
status: planned
|
||||
source_path: samples/src/components/dx.astro
|
||||
expands_to:
|
||||
- table_like_content
|
||||
- persona_column
|
||||
persona_role_labels:
|
||||
- 발주자
|
||||
- 시공자
|
||||
- 설계자
|
||||
parent_policy: keep_under_containing_numbered_section
|
||||
text_policy: verbatim_from_component_source
|
||||
notes:
|
||||
- Initial registry entry observed in MDX 02.
|
||||
- T23 must replace opaque component handling with this registry-based expansion.
|
||||
@@ -31,6 +31,15 @@ three_parallel_requirements:
|
||||
cardinality:
|
||||
strict: 3
|
||||
overflow_policy: abort_or_review
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: pillars
|
||||
base_items: 3
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: card
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
|
||||
# 순서 기반 visual role (color_class 대체 — label 키워드 의존 제거)
|
||||
role_order:
|
||||
@@ -143,6 +152,18 @@ bim_issues_quadrant_four:
|
||||
body_fit_pattern2: false # P2: 미적용 (Stage 2 selection)
|
||||
|
||||
source_shape: top_bullets
|
||||
cardinality:
|
||||
strict: 4
|
||||
overflow_policy: abort_or_review
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: quadrants
|
||||
base_items: 4
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: card
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
# F16 정책 = pad_to=4 + truncate>4 (legacy 와 동일). cardinality strict 화는 본 transition 범위 외.
|
||||
# 향후 normal path 안정 후 strict 적용 + 위반 시 fallback path (FitError) 검토.
|
||||
|
||||
@@ -213,6 +234,15 @@ three_persona_benefits:
|
||||
cardinality:
|
||||
strict: 3 # 3 persona = strict.
|
||||
overflow_policy: abort_or_review
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: personas
|
||||
base_items: 3
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: card
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
|
||||
# 순서 기반 color theme (Figma 원본 색).
|
||||
# client = 발주자 (#285b4a 그린 계열), constructor = 시공자 (#445a2f 올리브),
|
||||
@@ -285,6 +315,16 @@ construction_goals_three_circle_intersection:
|
||||
|
||||
# 순서 기반 visual role (3 메인 원 각자 다른 gradient — index.html L141-189).
|
||||
# circle_1 = 안전(orange/red), circle_2 = 생산성(brown/grey), circle_3 = 소통(green/dark).
|
||||
dynamic_cardinality:
|
||||
repeatable: false
|
||||
repeat_axis: circles
|
||||
base_items: 3
|
||||
min_items: 3
|
||||
max_items: 3
|
||||
expand_policy: fixed_diagram
|
||||
overflow_policy: fallback_to_repeatable_frame
|
||||
preserve_source_order: true
|
||||
|
||||
role_order:
|
||||
- safety
|
||||
- productivity
|
||||
@@ -360,6 +400,16 @@ construction_bim_three_usage:
|
||||
# 순서 기반 visual role — 3 카테고리 (model / object / position) 각자
|
||||
# Figma 의 동일 brown label box + white content card 패턴. role 은
|
||||
# MDX label 내용 따라 결정되므로 generic ordering name 만.
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: categories
|
||||
base_items: 3
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: row
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
|
||||
role_order:
|
||||
- category_1
|
||||
- category_2
|
||||
@@ -432,6 +482,16 @@ bim_dx_comparison_table:
|
||||
strict: 2 # 2 columns (col_a / col_b) — NOT row count
|
||||
overflow_policy: abort_or_review
|
||||
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: rows
|
||||
base_items: 4
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: table_row
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
|
||||
role_order:
|
||||
- col_a
|
||||
- col_b
|
||||
@@ -842,6 +902,15 @@ pre_construction_model_info_stacked:
|
||||
min: 4 # analysis.md min 4 / Figma 5-color cycle design floor.
|
||||
max: 5 # partial `_slot_count or 5` hardcap (5-color cycle, line 175).
|
||||
overflow_policy: abort_or_review
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: pills
|
||||
base_items: 5
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: list_row
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
|
||||
visual_hints:
|
||||
min_height_px: 350 # title 30 + 5 pill × ~55 + grid gap 40 + padding 30 + buffer 5.
|
||||
@@ -1624,6 +1693,16 @@ sw_dependency_four_problems:
|
||||
strict: 4 # 4 problem (problem_1..problem_4) — data axis. analysis.md ideal 4 / min 4 / max 4 (strict:4 = declared data slot count, peer parity with u10/u12/u13/u17/u19 ideal=min=max convention); title = fixed singleton header (non-data axis). problem_N_label + problem_N_body 평탄 = builder/parser 내부 (composite problem_N = Frame Slot 단위, per F16 precedent).
|
||||
overflow_policy: abort_or_review
|
||||
|
||||
dynamic_cardinality:
|
||||
repeatable: true
|
||||
repeat_axis: problems
|
||||
base_items: 4
|
||||
min_items: 1
|
||||
max_items: null
|
||||
expand_policy: card
|
||||
overflow_policy: expand_then_fit
|
||||
preserve_source_order: true
|
||||
|
||||
role_order: [problem_1, problem_2, problem_3, problem_4]
|
||||
visual_hints:
|
||||
min_height_px: 350
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
# Node-to-slot mapping contract for Phase Z-2.
|
||||
#
|
||||
# This file is introduced by #98 T21.6 as a contract artifact. T25 will wire
|
||||
# builders/mappers to validate that normalized source nodes have an allowed
|
||||
# frame slot target before render.
|
||||
|
||||
version: 1
|
||||
|
||||
coverage_states:
|
||||
covered_native:
|
||||
description: Existing frame and builder can render all required source atoms verbatim.
|
||||
ai_allowed: false
|
||||
covered_via_expand:
|
||||
description: Existing frame can render after deterministic repeat/expand without shrinking font size.
|
||||
ai_allowed: false
|
||||
requires_adaptation:
|
||||
description: Visual motif is usable, but adapted slot schema/repeat structure is needed.
|
||||
ai_allowed: true
|
||||
ai_text_generation_allowed: false
|
||||
unsupported:
|
||||
description: No current contract path exists.
|
||||
ai_allowed: false
|
||||
|
||||
coverage_state_resolution:
|
||||
route_aware: true
|
||||
fallback_paths_override_candidate_status: true
|
||||
deterministic_expand_sets: covered_via_expand
|
||||
font_policy: no_font_shrink
|
||||
|
||||
node_types:
|
||||
pre_intro:
|
||||
allowed_slots: [title, label, body_text_lines, popup_body]
|
||||
default_unit_role: top_level_unit
|
||||
numbered_section:
|
||||
allowed_slots: [title, body_text_lines, image_target, table_row]
|
||||
default_unit_role: body_zone_unit
|
||||
subsection_decimal:
|
||||
allowed_slots: [label, body_text_lines, pillar, comparison_cell, table_row, internal_context]
|
||||
default_unit_role: frame_internal_group
|
||||
subsection_numeric:
|
||||
allowed_slots: [label, body_text_lines, pillar, internal_context]
|
||||
default_unit_role: frame_internal_group
|
||||
bullet_group:
|
||||
allowed_slots: [body_text_lines, comparison_cell, table_row]
|
||||
default_unit_role: source_atom_group
|
||||
table_like_content:
|
||||
allowed_slots: [table_row, comparison_cell, persona_column]
|
||||
default_unit_role: source_atom_group
|
||||
image_ref:
|
||||
allowed_slots: [image_target]
|
||||
default_unit_role: media_atom
|
||||
component_ref:
|
||||
allowed_slots: []
|
||||
default_unit_role: expand_before_matching
|
||||
details_popup:
|
||||
allowed_slots: [popup_body]
|
||||
default_unit_role: auxiliary_detail
|
||||
summary_footer:
|
||||
allowed_slots: [footer_summary]
|
||||
default_unit_role: fixed_base_slide_region
|
||||
|
||||
slot_types:
|
||||
title:
|
||||
text_source: unit_title_only
|
||||
label:
|
||||
text_source: child_heading_or_source_label_only
|
||||
body_text_lines:
|
||||
text_source: source_atoms_verbatim
|
||||
pillar:
|
||||
text_source: child_heading_plus_child_body
|
||||
persona_column:
|
||||
text_source: component_expanded_persona_node
|
||||
internal_context:
|
||||
text_source: child_heading_plus_child_body
|
||||
comparison_cell:
|
||||
text_source: source_table_cell_or_bullet_group
|
||||
table_row:
|
||||
text_source: source_row_or_key_value_atom
|
||||
image_target:
|
||||
text_source: source_image_ref
|
||||
popup_body:
|
||||
text_source: source_details_content
|
||||
footer_summary:
|
||||
text_source: summary_source_only
|
||||
@@ -57,6 +57,7 @@ slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body}
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
@@ -85,6 +86,10 @@ slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body}
|
||||
background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
|
||||
border-radius: 0 0 14px 14px;
|
||||
}
|
||||
.f16b__quadrant--extra {
|
||||
background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
/* Header ribbon — PROMOTED gradient + token font */
|
||||
.f16b__ribbon {
|
||||
@@ -108,7 +113,8 @@ slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body}
|
||||
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 {
|
||||
.f16b__quadrant--br .f16b__ribbon,
|
||||
.f16b__quadrant--extra .f16b__ribbon {
|
||||
background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
|
||||
}
|
||||
|
||||
@@ -213,7 +219,27 @@ slots: title, center_quote (옵션), quadrant_{1,2,3,4}_{label, body}
|
||||
</div>
|
||||
|
||||
{# Center quote — 옵션 #}
|
||||
{% if slot_payload.center_quote %}
|
||||
{% set slot_count = slot_payload._slot_count or 4 %}
|
||||
{% if slot_count > 4 %}
|
||||
{% for n in range(5, slot_count + 1) %}
|
||||
{% set label = slot_payload['quadrant_' ~ n ~ '_label'] %}
|
||||
{% set body = slot_payload['quadrant_' ~ n ~ '_body'] %}
|
||||
{% set headline = slot_payload['quadrant_' ~ n ~ '_headline'] %}
|
||||
<div class="f16b__quadrant f16b__quadrant--extra" data-frame-slot-id="quadrant_dynamic" data-quadrant-n="{{ n }}">
|
||||
{% if label %}
|
||||
<div class="f16b__ribbon">{{ label | safe }}</div>
|
||||
{% endif %}
|
||||
{% if headline or body %}
|
||||
<div class="f16b__body">
|
||||
{% if headline %}<div class="f16b__headline">{{ headline | safe }}</div>{% endif %}
|
||||
{% for line in 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>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if slot_payload.center_quote and slot_count <= 4 %}
|
||||
<div class="f16b__center">
|
||||
<div class="f16b__center-quote">{{ slot_payload.center_quote | safe }}</div>
|
||||
</div>
|
||||
|
||||
@@ -159,7 +159,6 @@ slots: title (omitted), banner_left, banner_right,
|
||||
}
|
||||
/* 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;
|
||||
|
||||
@@ -80,13 +80,13 @@ slots: title, pillars[].{label, color_class, sections[].{heading, bullets[]}}
|
||||
.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-size: var(--font-sub-title);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
}
|
||||
.f13b__bar-paren {
|
||||
font-size: var(--font-caption); /* 10px — "(디지털/역량/여건)" */
|
||||
font-size: var(--font-caption);
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
display: block;
|
||||
@@ -96,29 +96,29 @@ slots: title, pillars[].{label, color_class, sections[].{heading, bullets[]}}
|
||||
.f13b__body {
|
||||
flex: 1;
|
||||
display: flex; flex-direction: column;
|
||||
padding: 8px 12px; /* breathing (was 6px 10px) */
|
||||
padding: 8px 12px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f13b__section {
|
||||
flex: 1;
|
||||
padding: 6px 0; /* breathing (was 4px) */
|
||||
padding: 6px 0;
|
||||
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) */
|
||||
margin-top: 6px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
/* heading — 부소목차 (사용자 5-layer 직설 2026-05-07): Digital 기술과... 같은 깊이 1 굵은 bullet */
|
||||
.f13b__heading {
|
||||
font-size: var(--font-sub-title); /* 12px — 부소목차 위계 */
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: 700;
|
||||
line-height: var(--lh-sub-title);
|
||||
-webkit-background-clip: text; background-clip: text;
|
||||
color: transparent;
|
||||
margin-bottom: 6px; /* visible heading-body gap (was 4px) */
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.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%); }
|
||||
@@ -141,7 +141,6 @@ slots: title, pillars[].{label, color_class, sections[].{heading, bullets[]}}
|
||||
.f13b__desc {
|
||||
line-height: clamp(1.2em, calc(20cqh / var(--max-body-lines, 4)), 1.6em);
|
||||
}
|
||||
|
||||
/* IMP-36 (Gitea #65 u4) P1 — aspect-ratio < 1.5 rotation rule. zone 의
|
||||
가로:세로 비가 1.5 미만으로 좁아지면 (vertical-2 narrow / 또는 임의
|
||||
세로형 geometry) 3-col grid 가 1-col stack 으로 회전. */
|
||||
|
||||
@@ -90,10 +90,40 @@ Asset path runtime resolution :
|
||||
}
|
||||
.f14b__cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f14b__intro {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 6px;
|
||||
max-height: 76px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f14b__intro-card {
|
||||
border: 1px solid rgba(40, 91, 74, 0.35);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
padding: 5px 8px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.f14b__intro-label {
|
||||
font-size: var(--font-caption);
|
||||
line-height: var(--lh-caption);
|
||||
font-weight: 700;
|
||||
color: #285b4a;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.f14b__intro-body .text-line {
|
||||
font-size: var(--font-caption);
|
||||
line-height: var(--lh-caption);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.f14b__col {
|
||||
position: relative;
|
||||
@@ -223,10 +253,36 @@ Asset path runtime resolution :
|
||||
opacity: 0.7; /* index.html L53 — opacity 0.70 */
|
||||
display: block;
|
||||
}
|
||||
.f14b--with-intro .f14b__intro { max-height: 56px; }
|
||||
.f14b--with-intro .f14b__badge {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin: 3px auto 2px;
|
||||
}
|
||||
.f14b--with-intro .f14b__body {
|
||||
padding: 2px 8px 5px;
|
||||
}
|
||||
.f14b--with-intro .f14b__photo {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="f14b" data-frame-id="1171281191" data-template-id="three_persona_benefits">
|
||||
<div class="f14b{% if slot_payload.intro_sections %} f14b--with-intro{% endif %}" data-frame-id="1171281191" data-template-id="three_persona_benefits">
|
||||
<div class="f14b__title">{{ slot_payload.title }}</div>
|
||||
{% if slot_payload.intro_sections %}
|
||||
<div class="f14b__intro">
|
||||
{% for section in slot_payload.intro_sections %}
|
||||
<div class="f14b__intro-card">
|
||||
{% if section.label %}<div class="f14b__intro-label">{{ section.label | safe }}</div>{% endif %}
|
||||
{% if section.body %}
|
||||
<div class="f14b__intro-body">
|
||||
{% for line in section.body %}<div class="text-line{% if line.indent > 0 %} text-line--indent-{{ line.indent }}{% endif %}">{{ line.text | safe }}</div>{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="f14b__cols">
|
||||
{% for persona in slot_payload.personas %}
|
||||
<div class="f14b__col f14b__col--{{ persona.color_class }}">
|
||||
@@ -258,11 +314,11 @@ Asset path runtime resolution :
|
||||
{# bottom photo — per persona 실사 사진 #}
|
||||
<div class="f14b__photo">
|
||||
{% if persona.color_class == "client" %}
|
||||
<img src="assets/three_persona_benefits/d2c070f200af83f563976b6b0f309d38321d204d.png" alt="">
|
||||
<img src="assets/three_persona_benefits/d2c070f200af83f563976b6b0f309d38321d204d.png" alt="" data-allow-aspect-crop="1">
|
||||
{% elif persona.color_class == "constructor" %}
|
||||
<img src="assets/three_persona_benefits/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" alt="">
|
||||
<img src="assets/three_persona_benefits/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" alt="" data-allow-aspect-crop="1">
|
||||
{% elif persona.color_class == "designer" %}
|
||||
<img src="assets/three_persona_benefits/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" alt="">
|
||||
<img src="assets/three_persona_benefits/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" alt="" data-allow-aspect-crop="1">
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
<!-- Phase Z-2 MVP-1 scaffold — MVP-2 이후 정식 Family CSS partial 로 대체. legacy structures/* 는 stylization 참고만. -->
|
||||
{# Frame 29 (1171281210) / process_product_two_way
|
||||
slots: title, banner_{left, right}, process/product (semantic naming)
|
||||
family: compare / layout: banner-top-2col-bottom / cardinality: 2
|
||||
시각 언어 (analysis.md + preview.png 참고 — frame 29 미변환이라 한계) :
|
||||
- 상단 배너 2 개 : 좌(과정) 우(결과)
|
||||
- 하단 2 col : 각각 변환 카드 (AS-IS → TO-BE) 또는 bullets
|
||||
MVP-1 한계 명시 :
|
||||
- frame 29 는 figma_to_html_agent 1:1 변환 미존재 (analysis 만)
|
||||
- banner 그라데이션 / cell 색은 frame 13 의 시각 언어와 일관 (blue 기반) #}
|
||||
|
||||
<style scoped>
|
||||
.frame-pp2w {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.frame-pp2w__title {
|
||||
font-size: var(--font-zone-title);
|
||||
font-weight: var(--weight-zone-title);
|
||||
line-height: var(--lh-zone-title);
|
||||
color: #1e293b;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.frame-pp2w__banners {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
.frame-pp2w__banner {
|
||||
padding: 4px 10px;
|
||||
background: linear-gradient(90deg, #1e40af 0%, #2563eb 100%);
|
||||
color: #fff;
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: var(--weight-sub-title);
|
||||
line-height: var(--lh-sub-title);
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.frame-pp2w__cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.frame-pp2w__col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* AS-IS → TO-BE transform 카드 */
|
||||
.frame-pp2w__transform {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
font-size: var(--font-caption);
|
||||
font-weight: var(--weight-caption);
|
||||
line-height: var(--lh-caption);
|
||||
}
|
||||
.frame-pp2w__cell {
|
||||
padding: 3px 6px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 3px;
|
||||
color: #475569;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-pp2w__cell--to {
|
||||
background: #dbeafe;
|
||||
border-color: #93c5fd;
|
||||
color: #1e40af;
|
||||
font-weight: 700;
|
||||
}
|
||||
.frame-pp2w__arrow {
|
||||
color: #94a3b8;
|
||||
font-weight: 700;
|
||||
font-size: var(--font-body);
|
||||
}
|
||||
/* bullets (transforms 없거나 추가 항목) */
|
||||
.frame-pp2w__bullets {
|
||||
font-size: var(--font-caption);
|
||||
font-weight: var(--weight-caption);
|
||||
line-height: var(--lh-caption);
|
||||
color: #475569;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-pp2w__bullets ul { padding-left: 12px; margin-top: 2px; }
|
||||
.frame-pp2w__bullets li { margin-bottom: 2px; }
|
||||
.frame-pp2w__bullets strong { color: #1e293b; font-weight: 700; }
|
||||
</style>
|
||||
|
||||
<div class="frame-pp2w" data-frame-id="1171281210" data-template-id="process_product_two_way">
|
||||
<div class="frame-pp2w__title">{{ slot_payload.title }}</div>
|
||||
<div class="frame-pp2w__banners">
|
||||
<div class="frame-pp2w__banner">{{ slot_payload.banner_left }}</div>
|
||||
<div class="frame-pp2w__banner">{{ slot_payload.banner_right }}</div>
|
||||
</div>
|
||||
<div class="frame-pp2w__cols">
|
||||
<div class="frame-pp2w__col" data-col="process">
|
||||
{% if slot_payload.process.transforms %}
|
||||
{% for t in slot_payload.process.transforms %}
|
||||
<div class="frame-pp2w__transform">
|
||||
<div class="frame-pp2w__cell">{{ t.from }}</div>
|
||||
<div class="frame-pp2w__arrow">➜</div>
|
||||
<div class="frame-pp2w__cell frame-pp2w__cell--to">{{ t.to }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if slot_payload.process.bullets %}
|
||||
<div class="frame-pp2w__bullets">{{ slot_payload.process.bullets | safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="frame-pp2w__col" data-col="product">
|
||||
{% if slot_payload.product.transforms %}
|
||||
{% for t in slot_payload.product.transforms %}
|
||||
<div class="frame-pp2w__transform">
|
||||
<div class="frame-pp2w__cell">{{ t.from }}</div>
|
||||
<div class="frame-pp2w__arrow">➜</div>
|
||||
<div class="frame-pp2w__cell frame-pp2w__cell--to">{{ t.to }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if slot_payload.product.bullets %}
|
||||
<div class="frame-pp2w__bullets">{{ slot_payload.product.bullets | safe }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!-- Phase Z-2 MVP-1 scaffold — MVP-2 이후 정식 Family CSS partial 로 대체. legacy structures/* 는 stylization 참고만. -->
|
||||
{# Frame 13 (1171281190) / three_parallel_requirements
|
||||
slots: title, pillar_{1,2,3}_{label, body}
|
||||
family: list / layout: 3-column / cardinality: 3
|
||||
시각 언어 도출 (figma_to_html_agent/blocks/1171281190/index.html 참고) :
|
||||
- 3 columns + 각 좌측 color bar (gradient)
|
||||
- 색상 : 기술 blue / 사람 orange / 자연 green (Figma 색)
|
||||
- 각 col 2 sections (heading + desc) — MVP-1 은 단일 body 로 단순화
|
||||
- top/bottom 검정 border (col 외곽)
|
||||
MVP-1 단순화 :
|
||||
- zoom 안 씀 — 기존 px 직접 (compact scale)
|
||||
- 한자 (技/人/天) 안 씀 — 라벨만 #}
|
||||
|
||||
<style scoped>
|
||||
.frame-3par {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.frame-3par__title {
|
||||
font-size: var(--font-zone-title);
|
||||
font-weight: var(--weight-zone-title);
|
||||
line-height: var(--lh-zone-title);
|
||||
color: #1e293b;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.frame-3par__cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.frame-3par__pillar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-top: 1.5px solid #1e293b;
|
||||
border-bottom: 1.5px solid #1e293b;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 좌측 color bar (Figma 색상 도출) */
|
||||
.frame-3par__bar {
|
||||
flex: 0 0 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: var(--font-caption);
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: mixed;
|
||||
padding: 4px 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
/* 3 색 — Figma 추출값 */
|
||||
.frame-3par__pillar:nth-child(1) .frame-3par__bar {
|
||||
background: linear-gradient(180deg, #0D78D0 0%, #023056 100%);
|
||||
}
|
||||
.frame-3par__pillar:nth-child(2) .frame-3par__bar {
|
||||
background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%);
|
||||
}
|
||||
.frame-3par__pillar:nth-child(3) .frame-3par__bar {
|
||||
background: linear-gradient(180deg, #39BE49 21%, #23742C 100%);
|
||||
}
|
||||
.frame-3par__body-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 6px 8px;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-3par__label {
|
||||
font-size: var(--font-sub-title);
|
||||
font-weight: var(--weight-sub-title);
|
||||
line-height: var(--lh-sub-title);
|
||||
color: #1e293b;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px dashed #94a3b8;
|
||||
}
|
||||
.frame-3par__pillar:nth-child(1) .frame-3par__label { color: #134D7F; }
|
||||
.frame-3par__pillar:nth-child(2) .frame-3par__label { color: #D18B37; }
|
||||
.frame-3par__pillar:nth-child(3) .frame-3par__label { color: #23742C; }
|
||||
|
||||
.frame-3par__body {
|
||||
font-size: var(--font-body);
|
||||
font-weight: var(--weight-body);
|
||||
line-height: var(--lh-body);
|
||||
color: #475569;
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame-3par__body ul { padding-left: 14px; margin-top: 2px; }
|
||||
.frame-3par__body li { margin-bottom: 2px; }
|
||||
.frame-3par__body strong { color: #1e293b; font-weight: 700; }
|
||||
</style>
|
||||
|
||||
<div class="frame-3par" data-frame-id="1171281190" data-template-id="three_parallel_requirements">
|
||||
<div class="frame-3par__title">{{ slot_payload.title }}</div>
|
||||
<div class="frame-3par__cols">
|
||||
{% for pillar in slot_payload.pillars %}
|
||||
<div class="frame-3par__pillar">
|
||||
<div class="frame-3par__bar">{{ pillar.label }}</div>
|
||||
<div class="frame-3par__body-wrap">
|
||||
<div class="frame-3par__label">{{ pillar.label }}</div>
|
||||
<div class="frame-3par__body">{{ pillar.body | safe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,9 +27,12 @@
|
||||
font-family: 'Noto Sans KR', 'Pretendard', sans-serif;
|
||||
background: #e8ecf0;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
padding: 20px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── IMP-14 A-4: embedded mode reset (iframe consumer) ──
|
||||
@@ -360,7 +363,9 @@
|
||||
<body>
|
||||
<div class="slide" data-page="1">
|
||||
<div class="slide-bg"></div>
|
||||
{% if show_debug_marker %}
|
||||
<div class="phase-z2-marker">phase_z2 / mvp-1.5b / {{ layout_preset }} / single slide</div>
|
||||
{% endif %}
|
||||
<div class="slide-title">{{ slide_title }}</div>
|
||||
<div class="slide-divider"></div>
|
||||
<div class="slide-body">
|
||||
|
||||
Reference in New Issue
Block a user