kyeongmin
360cd8e44c
수정: - compare-2col-badge, compare-detail-gradient, hero-icon-cards 개선 신규 블록: - cards: category-strip-table, system-2col-center, hero-icon-cards_1 - emphasis: checklist-dark - visuals: cycle-orbit - new/: cards-3col-persona, compare-vs-rows, cycle-3way-intersect 등 8개 - redesign/: card_hero-icon-cards_1 - svg/: arc_left, arrow_conclusion, arrow_down, line_divider - BEPs: process-product-2col SVG + 테스트 catalog.yaml 전면 재정비 (슬롯 스키마, height_cost, 카테고리 정리) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
115 lines
3.0 KiB
HTML
115 lines
3.0 KiB
HTML
<!-- 카테고리 컬러 스트립 테이블: 좌측 색상 바 + 제목/본문 × N열 × M행 -->
|
||
<!--
|
||
📋 category-strip-table
|
||
─────────────────
|
||
용도: 카테고리별 필수조건/요건을 N열로 나열. 각 열에 색상 바 + 제목 + 본문 반복.
|
||
슬롯: columns[] (각 열에 color, label, label_sub, rows[{title, body}])
|
||
Figma 원본: Page 2 / 001_개요 우측 하단 "필수조건" (기술/사람/자연 3열)
|
||
수학적 계산:
|
||
table 2123x595, scale=1200/2123=0.5652
|
||
col_w=390px, strip_w=86px, content_w=304px
|
||
title: 22px/700, body: 16px/500(#3E3523)
|
||
strip label: 24px/700 white 세로쓰기
|
||
-->
|
||
<div class="block-cst" style="--cst-count: {{ columns|length }}">
|
||
{% for col in columns %}
|
||
<div class="cst-col">
|
||
<div class="cst-strip" style="background: {{ col.color | default('#4a7fb5') }}">
|
||
{% if col.label %}<span class="cst-strip-label">{{ col.label }}</span>{% endif %}
|
||
{% if col.label_sub %}<span class="cst-strip-label">{{ col.label_sub }}</span>{% endif %}
|
||
</div>
|
||
<div class="cst-content">
|
||
{% for row in col.rows %}
|
||
{% if not loop.first %}<div class="cst-divider"></div>{% endif %}
|
||
<div class="cst-row">
|
||
<div class="cst-title">{{ row.title }}</div>
|
||
{% if row.body %}<div class="cst-body">{{ row.body }}</div>{% endif %}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
|
||
<style>
|
||
/*
|
||
수학적 계산 (Figma 원본):
|
||
table 2123x595, scale = 1200/2123 = 0.5652
|
||
col: 690px → 390px, strip: 152px → 86px
|
||
title: 45px → 22px, body: 35px → 16px
|
||
N열 동적: col_w = (1200 - gap*(N-1)) / N
|
||
*/
|
||
.block-cst {
|
||
display: grid;
|
||
grid-template-columns: repeat(var(--cst-count, 3), 1fr);
|
||
gap: 4px;
|
||
width: 100%;
|
||
}
|
||
|
||
/* ── Column ── */
|
||
.cst-col {
|
||
display: flex;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
/* ── Color Strip (좌측 바) ── */
|
||
.cst-strip {
|
||
width: 40px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
padding: 12px 4px;
|
||
}
|
||
.cst-strip-label {
|
||
font-size: 20px;
|
||
font-weight: var(--weight-bold, 700);
|
||
color: #ffffff;
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
/* ── Content (제목 + 본문 반복) ── */
|
||
.cst-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0;
|
||
}
|
||
|
||
/* ── Row (제목 + 본문) ── */
|
||
.cst-row {
|
||
padding: 12px 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.cst-title {
|
||
font-size: 18px;
|
||
font-weight: var(--weight-bold, 700);
|
||
color: #ffffff;
|
||
line-height: 1.4;
|
||
word-break: keep-all;
|
||
}
|
||
.cst-body {
|
||
font-size: 14px;
|
||
font-weight: var(--weight-medium, 500);
|
||
color: rgba(255,255,255,0.7);
|
||
line-height: 1.6;
|
||
word-break: keep-all;
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* ── Divider (행 구분선) ── */
|
||
.cst-divider {
|
||
height: 1px;
|
||
background: rgba(255,255,255,0.15);
|
||
margin: 0 14px;
|
||
}
|
||
</style>
|