- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층) - compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반) - 오답노트.md: 절대 하지 말아야 하는 실수 목록 - figma_to_html.py: Figma→HTML 변환 스크립트 - static/figma-assets/: Figma export 이미지 (배지, 화살표) - 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
88 lines
2.0 KiB
HTML
88 lines
2.0 KiB
HTML
<!-- 정책방향: 좌측 설명 + 우측 항목/이미지 -->
|
|
<!--
|
|
📋 policy-direction
|
|
─────────────────
|
|
용도: 인프라 건설산업의 정책방향 설명 (좌측 텍스트 + 우측 구조도)
|
|
슬롯:
|
|
title: 대제목 (예: "인프라 건설산업의 정책방향")
|
|
description: 설명 텍스트
|
|
sub_sections[]: 하위 섹션 목록
|
|
- title: 섹션 제목
|
|
- bullets[]: 불릿
|
|
questions[]: 질문 목록 (좌하단)
|
|
- text: 질문 텍스트
|
|
Figma 원본: Frame 1171276067
|
|
-->
|
|
<div class="block-policy">
|
|
<div class="pol-header">
|
|
<div class="pol-title">{{ title }}</div>
|
|
{% if description %}
|
|
<div class="pol-desc">{{ description }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="pol-content">
|
|
{% for section in sub_sections %}
|
|
<div class="pol-section">
|
|
<div class="pol-section-title">{{ section.title }}</div>
|
|
{% for bullet in section.bullets %}
|
|
<div class="pol-bullet">• {{ bullet }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if questions %}
|
|
<div class="pol-questions">
|
|
{% for q in questions %}
|
|
<div class="pol-q">{{ q.text }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.block-policy {
|
|
padding: 16px 20px;
|
|
}
|
|
.pol-header {
|
|
margin-bottom: 14px;
|
|
}
|
|
.pol-title {
|
|
font-size: var(--font-subtitle, 16px);
|
|
font-weight: 700;
|
|
color: #000;
|
|
margin-bottom: 6px;
|
|
}
|
|
.pol-desc {
|
|
font-size: var(--font-caption, 12px);
|
|
font-weight: 500;
|
|
color: #000;
|
|
line-height: var(--line-height-ko, 1.7);
|
|
}
|
|
.pol-section {
|
|
margin-bottom: 12px;
|
|
}
|
|
.pol-section-title {
|
|
font-size: var(--font-body, 13px);
|
|
font-weight: 700;
|
|
color: #000;
|
|
margin-bottom: 4px;
|
|
}
|
|
.pol-bullet {
|
|
font-size: var(--font-caption, 11px);
|
|
color: #333;
|
|
line-height: var(--line-height-ko, 1.7);
|
|
padding-left: 8px;
|
|
}
|
|
.pol-questions {
|
|
margin-top: 16px;
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 12px;
|
|
}
|
|
.pol-q {
|
|
font-size: var(--font-body, 13px);
|
|
font-weight: 700;
|
|
color: #c41e3a;
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|