This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user