Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

figma_to_html_agent 추가 + MCP/Claude 설정

Browse Source 
figma_to_html_agent/:
- Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등)
- block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등)
- templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml
- figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋
- scripts/: gradient_math.py 등 유틸리티

설정:
- .mcp.json: Figma MCP 서버 연결 설정
- .claude/settings.json: Claude Code 프로젝트 설정

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
이경민
2026-04-13 11:00:31 +09:00
parent 360cd8e44c
commit 51548fdc41
467 changed files with 25280 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

895
figma_to_html_agent/figma_ref/comparison.html Normal file
View File

@@ -0,0 +1,895 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Figma vs HTML 비교 리뷰</title>
<link rel="stylesheet" href="../../static/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #1a1a1a; color: #fff;
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
padding: 40px; max-width: 960px; margin: 0 auto;
}
h1 { font-size: 24px; margin-bottom: 12px; text-align: center; }
.intro { text-align: center; color: #888; font-size: 13px; margin-bottom: 60px; }
.frame-section { margin-bottom: 100px; }
.frame-title {
font-size: 18px; color: #ccc; border-left: 4px solid #227582;
padding-left: 16px; margin-bottom: 24px;
}
.frame-title span { color: #666; font-weight: 400; font-size: 13px; margin-left: 8px; }
.pair { margin-bottom: 12px; }
.pair-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.15em; margin-bottom: 6px; padding-left: 4px;
}
.pair-label.figma { color: #ef4444; }
.pair-label.html { color: #22c55e; }
.figma-img { width: 100%; border-radius: 6px; border: 2px solid #ef4444; display: block; }
.html-outer { border: 2px solid #22c55e; border-radius: 6px; overflow: hidden; background: #fff; }
.html-inner {
width: 1280px; transform-origin: top left; transform: scale(0.74);
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
}
.divider { height: 1px; background: #333; margin: 8px 0 12px; }
</style>
</head>
<body>
<h1>Figma vs HTML 비교 리뷰</h1>
<div class="intro">빨간 테두리 = Figma 원본 &nbsp;|&nbsp; 초록 테두리 = HTML 블록</div>
<!-- ===================== FRAME 2 ===================== -->
<div class="frame-section">
<div class="frame-title">Frame 2 — Solution 제작 목표 <span>(hero-icon-cards)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="frame2_1-5.png" alt="Frame 2">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 0;">
<div class="block-hic">
<div class="hic-statement">디지털전환은 <strong>사용자</strong>(발주자, 수급자, 엔지니어)가<br><em>쉽고, 편하고, 편익</em>이 있어야만 한다.</div>
<div class="hic-card-area">
<!-- 3D 리본 배지 (Figma 이미지) -->
<div class="hic-ribbon">
<img src="../../static/figma-assets/badge_solution.png" class="hic-ribbon-img" alt="">
<span class="hic-ribbon-text">Solution 제작 목표</span>
</div>
<!-- 빨간 테두리 흰 박스 (Figma 이미지를 border-image로) -->
<div class="hic-box">
<div class="hic-cards">
<div class="hic-card"><div class="hic-icon">🤲</div><div class="hic-title">Easy Like<br>Breath</div><div class="hic-sub">(쉬운 이해)</div></div>
<div class="hic-sep"></div>
<div class="hic-card"><div class="hic-icon">💡</div><div class="hic-title">Convenient<br>Intuition</div><div class="hic-sub">(직관적 사용성)</div></div>
<div class="hic-sep"></div>
<div class="hic-card"><div class="hic-icon">✅</div><div class="hic-title">Ultra High<br>Quality</div><div class="hic-sub">(초고품질)</div></div>
<div class="hic-sep"></div>
<div class="hic-card"><div class="hic-icon">💰</div><div class="hic-title">Super Low<br>Cost</div><div class="hic-sub">(극저비용)</div></div>
<div class="hic-sep"></div>
<div class="hic-card"><div class="hic-icon">⚡</div><div class="hic-title">As Fast As<br>Lightning</div><div class="hic-sub">(초단축)</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME 3 ===================== -->
<div class="frame-section">
<div class="frame-title">Frame 3 — 정책 달성 <span>(compare-2col-badge)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="frame3_1-35.png" alt="Frame 3">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 32px; background: #e8e8e8;">
<div class="block-c2b">
<div class="c2b-main">
<!-- 3D 리본 배지 (Figma 이미지) -->
<div class="c2b-ribbon">
<img src="../../static/figma-assets/badge_policy.png" class="c2b-ribbon-img" alt="">
<span class="c2b-ribbon-text">정책 달성</span>
</div>
<!-- 틸 테두리 흰 박스 -->
<div class="c2b-container">
<div class="c2b-col">
<div class="c2b-title" style="color: #227582">Engn. Solution</div>
<div class="c2b-body" style="color: #227582">목적 시설물에 대한 설계, 시공, 유지관리 정보를 고객이 쉽고 편리하게 사용하고, 편익이 발생하도록 제공하는 다양한 형태의 정보물과 이를 구현할 수 있는 S/W 및 H/W와 그 기술을 포함하는 서비스</div>
</div>
<div class="c2b-divider"></div>
<div class="c2b-col">
<div class="c2b-title" style="color: #227582">DfMA</div>
<div class="c2b-body" style="color: #227582">Design for Manufacture and Assembly는 공장 생산, 현장조립이 가능한 설계를 의미하며, 현장 중심의 건설에서 공장 생산 방식으로 전환하는 OSC(Off Site Construction) 시스템을 위한 핵심기술</div>
</div>
</div>
</div>
<div class="c2b-statement">디지털전환은 <strong>사용자</strong>(발주자, 수급자, 엔지니어)가<br><em>쉽고, 편하고, 편익</em>이 있어야만 한다.</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME 4 ===================== -->
<div class="frame-section">
<div class="frame-title">Frame 4 — 과정 vs 결과의 혁신 <span>(compare-detail-gradient)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="frame4_1-49.png" alt="Frame 4">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 0;">
<!--
CSS Grid 구조: 2열 × (헤더1행 + 3섹션행) = 8개 셀
행을 공유하므로 좌/우 섹션 제목이 같은 Y선에 정렬됨
Row 2가 Figma에서 62px 차이 → Grid가 자동 정렬
-->
<div class="block-cdg">
<!-- Row 0: Headers -->
<div class="cdg-header cdg-header-warm"><span class="cdg-header-text">과정 (Process)의 혁신</span></div>
<div class="cdg-header cdg-header-teal"><span class="cdg-header-text">결과 (Products)의 혁신</span></div>
<!-- Row 1: Section 1 (좌: As-Is→To-Be / 우: 품질향상) -->
<div class="cdg-cell cdg-cell-warm">
<div class="cdg-sec-title cdg-title-warm">Analogue 개념 기반 업무의 Digital Transformation</div>
<div class="cdg-asis-tobe">
<div class="cdg-asis">
<div class="cdg-bullet">개념, 도서, 행정 절차 중심</div>
<div class="cdg-bullet">2D 도면, 전문가, 규정</div>
<div class="cdg-bullet">업무 구분(단절), 책임</div>
</div>
<img src="../../static/figma-assets/arrow_asis_tobe.png" class="cdg-arrow" alt="→">
<div class="cdg-tobe">
<div class="cdg-bullet">시각화된 목적물, 소통, 투명성 중심</div>
<div class="cdg-bullet">3D 모델, 참여자, 실체</div>
<div class="cdg-bullet">협업(융·복합), 창의성</div>
</div>
</div>
</div>
<div class="cdg-cell cdg-cell-teal">
<div class="cdg-sec-title cdg-title-teal">Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div>
<div class="cdg-bullet">정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물</div>
</div>
</div>
<!-- Row 2: Section 2 (좌: 위치기반 / 우: Digital 추가) — 같은 Y선 정렬 -->
<div class="cdg-cell cdg-cell-warm">
<div class="cdg-sec-title cdg-title-warm">위치기반의 3D 모델을 사용하는 Process 혁신</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신</div>
</div>
</div>
<div class="cdg-cell cdg-cell-teal">
<div class="cdg-sec-title cdg-title-teal">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물 추가</div>
</div>
</div>
<!-- Row 3: Section 3 (좌: Solution / 우: 업무효율화) -->
<div class="cdg-cell cdg-cell-warm">
<div class="cdg-sec-title cdg-title-warm">사용자 중심의 Solution(S/W) 제공</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">인프라 건설산업의 1차적인 Process 혁신은 속성이 포함된 수치지형도와 3D 지반모델 구축 필수</div>
<div class="cdg-bullet">설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W로 기술 축적</div>
</div>
</div>
<div class="cdg-cell cdg-cell-teal">
<div class="cdg-sec-title cdg-title-teal">Solution을 이용한 업무효율화</div>
<div class="cdg-sec-body">
<div class="cdg-bullet">디지털 기반 Graphic 중심의 3D 모델, 시뮬레이션 활용을 위한 공학용 사이니지 시스템 필수</div>
<div class="cdg-bullet">Engn. Solution을 통해 프로젝트 이슈를 함께 검토하고 디지털 데이터로 통합관리</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME: cycle-orbit ===================== -->
<div class="frame-section">
<div class="frame-title">DX 시행을 위한 필수 요건 — 순환 궤도 <span>(cycle-orbit)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="cycle_orbit.png" alt="Cycle Orbit">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 20px; background: #fff;">
<!--
3D 원 → Z축 기울임(80°) → 2D 투영
원 R=400, θ=80° → rx=400, ry=69
하단 중심(90°) 기준 ±25° → 기술115°, 자연65°
사람(270°) → (500, 131)
기술(115°) → (331, 263)
자연( 65°) → (669, 263)
거리: 692→338px (앞쪽 크게 가까워짐)
-->
<div style="text-align:center;font-size:18px;font-weight:900;color:#1e293b;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid #2563eb;display:inline-block">DX 시행을 위한 필수 요건</div>
<svg viewBox="0 0 1000 380" xmlns="http://www.w3.org/2000/svg" style="width:100%;font-family:Pretendard Variable,Noto Sans KR,sans-serif">
<!-- 타원 궤도 -->
<ellipse cx="500" cy="200" rx="400" ry="69" fill="none" stroke="#c0c0c0" stroke-width="1.5"/>
<!-- 화살표 >> -->
<text x="107" y="217" text-anchor="middle" font-size="14" fill="#999" transform="rotate(-138,107,213)">»</text>
<text x="175" y="163" text-anchor="middle" font-size="14" fill="#999" transform="rotate(-14,175,159)">»</text>
<text x="825" y="163" text-anchor="middle" font-size="14" fill="#999" transform="rotate(14,825,159)">»</text>
<text x="893" y="217" text-anchor="middle" font-size="14" fill="#999" transform="rotate(138,893,213)">»</text>
<text x="552" y="273" text-anchor="middle" font-size="14" fill="#999" transform="rotate(179,552,269)">»</text>
<text x="448" y="273" text-anchor="middle" font-size="14" fill="#999" transform="rotate(-179,448,269)">»</text>
<!--
설명 텍스트 배치 (Figma 원본 분석):
사람: 설명이 이름 우측에 수평으로 (desc_x = label_x + 50)
기술: 설명이 이름 좌측에 수평으로 (왼쪽 노드 → 왼쪽에)
자연: 설명이 이름 우측에 수평으로 (오른쪽 노드 → 오른쪽에)
불릿은 설명 제목 아래에 들여쓰기
-->
<!-- 노드: 사람 (270°) (500, 131) — 설명: 우측 -->
<circle cx="500" cy="131" r="26" fill="#e9e8e8" stroke="#818181" stroke-width="2.5"/>
<text x="500" y="137" text-anchor="middle" font-size="18">👥</text>
<text x="500" y="175" text-anchor="middle" font-size="13" font-weight="900" fill="#1e293b">사람</text>
<text x="500" y="189" text-anchor="middle" font-size="9" fill="#64748b">(역량)</text>
<text x="555" y="166" text-anchor="start" font-size="12" font-weight="700" fill="#1e293b">혁신적 사고방식</text>
<text x="565" y="181" text-anchor="start" font-size="10" fill="#64748b">• 창의적 문제 해결</text>
<text x="565" y="195" text-anchor="start" font-size="10" fill="#64748b">• 사용자 중심 접근</text>
<!-- 노드: 기술 (115°) (331, 263) — 설명: 좌측 -->
<circle cx="331" cy="263" r="26" fill="#e9e8e8" stroke="#818181" stroke-width="2.5"/>
<text x="331" y="269" text-anchor="middle" font-size="18">🖥</text>
<text x="331" y="307" text-anchor="middle" font-size="13" font-weight="900" fill="#1e293b">기술</text>
<text x="331" y="321" text-anchor="middle" font-size="9" fill="#64748b">(디지털)</text>
<text x="295" y="300" text-anchor="end" font-size="12" font-weight="700" fill="#1e293b">Digital 기술과 업무 프로세스 통합</text>
<text x="285" y="315" text-anchor="end" font-size="10" fill="#64748b">• 건설 전문 지식 보유</text>
<text x="285" y="329" text-anchor="end" font-size="10" fill="#64748b">• 최신 기술 트랜드 이해</text>
<!-- 노드: 자연 (65°) (669, 263) — 설명: 우측 -->
<circle cx="669" cy="263" r="26" fill="#e9e8e8" stroke="#818181" stroke-width="2.5"/>
<text x="669" y="269" text-anchor="middle" font-size="18">📋</text>
<text x="669" y="307" text-anchor="middle" font-size="13" font-weight="900" fill="#1e293b">자연</text>
<text x="669" y="321" text-anchor="middle" font-size="9" fill="#64748b">(여건)</text>
<text x="705" y="300" text-anchor="start" font-size="12" font-weight="700" fill="#1e293b">지속적 투자 의지</text>
<text x="715" y="315" text-anchor="start" font-size="10" fill="#64748b">• 실행 추진력</text>
<text x="715" y="329" text-anchor="start" font-size="10" fill="#64748b">• 변화를 통한 가치 창출</text>
</svg>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME: checklist-dark ===================== -->
<div class="frame-section">
<div class="frame-title">체크리스트 다크 <span>(checklist-dark)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="checklist_dark.png" alt="Checklist Dark">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 20px;">
<div class="block-cld">
<div class="cld-row"><div class="cld-check">☑</div><div class="cld-text"><span class="cld-title">융합의 필요성</span><span class="cld-sep"> : </span><span class="cld-desc">Engineering과 IT 기술의 융합, 정밀한 설계정보</span></div></div>
<div class="cld-row"><div class="cld-check">☑</div><div class="cld-text"><span class="cld-title">S/W 개발 목표 설정</span><span class="cld-sep"> : </span><span class="cld-desc">명확한 Target 설정, 단계별 목표설정 후 시스템 구성 필요</span></div></div>
<div class="cld-row"><div class="cld-check">☑</div><div class="cld-text"><span class="cld-title">기술기반 중요성</span><span class="cld-sep"> : </span><span class="cld-desc">자체기술 확보, 제대로 된 실시구현으로 지식의 중요성 강조</span></div></div>
<div class="cld-row"><div class="cld-check">☑</div><div class="cld-text"><span class="cld-title">기존 S/W 한계인식</span><span class="cld-sep"> : </span><span class="cld-desc">다순 설계 중심 S/W 탈피, 엔지니어 전문 지식&새로운 기술 융합</span></div></div>
<div class="cld-row"><div class="cld-check">☑</div><div class="cld-text"><span class="cld-title">디지털 전환&직관지역할</span><span class="cld-sep"> : </span><span class="cld-desc">디지털 역량을 갖춘 석간지를 통해 기술건축, 전문가기술의 디지털화</span></div></div>
<div class="cld-row"><div class="cld-check">☑</div><div class="cld-text"><span class="cld-title">품질향상&호환성</span><span class="cld-sep"> : </span><span class="cld-desc">더 높은 품질의 성과를 생산 및 다양한 S/W와의 호환성을 고려한 개발필요</span></div></div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME: system-2col-center ===================== -->
<div class="frame-section">
<div class="frame-title">중앙 라벨 2열 시스템 구성 <span>(system-2col-center)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="system_2col.png" alt="System 2Col">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 20px;">
<div class="block-s2c">
<div class="s2c-tab s2c-tab-left" style="background: #838486">H/W</div>
<div class="s2c-tab s2c-tab-right" style="background: #d16013">S/W</div>
<div class="s2c-col s2c-left">
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">Display</div><div class="s2c-item-body">범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를 적용</div></div></div>
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">Server & Storage</div><div class="s2c-item-body">방대한 건설현장 데이터를 안전하게 저장하고 관리</div></div></div>
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">Network</div><div class="s2c-item-body">네트워크 서비스를 통한 실시간 데이터 수집 및 연계</div></div></div>
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">CCTV</div><div class="s2c-item-body">각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행 모니터링</div></div></div>
</div>
<div class="s2c-center">
<div class="s2c-circle">
<div class="s2c-center-title">System</div>
<div class="s2c-center-sub">구성</div>
</div>
</div>
<div class="s2c-col s2c-right">
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">C.C.P</div><div class="s2c-item-body">사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합, 검증, 확인</div></div></div>
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">WatchBIM</div><div class="s2c-item-body">공사중 단계별 건설과정을 설계모델의 시각화와 공정시뮬레이션으로 확인</div></div></div>
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">Domainer</div><div class="s2c-item-body">시공단계에서 민원 및 용지보상과 관련한 업무 수행 솔루션</div></div></div>
<div class="s2c-item"><div class="s2c-item-content"><div class="s2c-item-title">bCMf</div><div class="s2c-item-body">건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를 효율적으로 수행</div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME: system-2col-center (구조화 버전) ===================== -->
<div class="frame-section">
<div class="frame-title">중앙 라벨 2열 시스템 구성 — 구조화 버전 <span>(system-2col-center v2)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original (Frame/Group 정리 후)</div>
<img class="figma-img" src="system_structured.png" alt="System Structured">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block (구조화 데이터 기반)</div>
<div class="html-outer">
<div class="html-inner" style="padding: 0;">
<!--
Figma 좌표 → 스케일(0.5137) → SVG absolute position
frame 2336x1874 → viewBox 1200x963
모든 항목이 Figma 원본 좌표 그대로 배치
-->
<svg viewBox="0 0 1200 963" xmlns="http://www.w3.org/2000/svg" style="width:100%;font-family:Pretendard Variable,Noto Sans KR,sans-serif;background:#111;border-radius:12px">
<!-- 중앙 원 (cx=598, cy=501) -->
<circle cx="598" cy="501" r="70" fill="url(#s2c-grad)" stroke="rgba(255,255,255,0.3)" stroke-width="3"/>
<defs><radialGradient id="s2c-grad" cx="40%" cy="35%" r="60%">
<stop offset="0%" stop-color="#3abfbf"/><stop offset="100%" stop-color="#1a6868"/>
</radialGradient></defs>
<text x="598" y="488" text-anchor="middle" font-size="24" font-weight="900" fill="#fff">System</text>
<text x="598" y="516" text-anchor="middle" font-size="24" font-weight="900" fill="#fff">구성</text>
<text x="598" y="545" text-anchor="middle" font-size="14" font-weight="500" fill="rgba(255,255,255,0.7)">BIG Room</text>
<!-- H/W 탭 (0, 1) -->
<rect x="0" y="0" width="172" height="45" rx="4" fill="#838486"/>
<text x="14" y="30" font-size="18" font-weight="700" fill="#fff">H/W</text>
<!-- S/W 탭 (1028, 0) -->
<rect x="1028" y="0" width="172" height="45" rx="4" fill="#d16013"/>
<text x="1096" y="30" font-size="18" font-weight="700" fill="#fff">S/W</text>
<!-- ====== H/W 항목 (좌측, 정확한 y좌표) ====== -->
<!-- Display (14, 62) -->
<circle cx="22" cy="72" r="5" fill="#aaa"/>
<text x="36" y="76" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Display</text>
<text x="36" y="94" font-size="10" fill="rgba(255,255,255,0.6)">범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를</text>
<text x="36" y="108" font-size="10" fill="rgba(255,255,255,0.6)">적용하여 벡터기반 도면, 3D정보 모델을 높은 정밀도로 표현</text>
<line x1="170" y1="82" x2="528" y2="460" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- Server & Storage (14, 181) -->
<circle cx="22" cy="191" r="5" fill="#aaa"/>
<text x="36" y="195" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Server &amp; Storage</text>
<text x="36" y="213" font-size="10" fill="rgba(255,255,255,0.6)">방대한 건설현장 데이터를 안전하게 저장하고 관리,</text>
<text x="36" y="227" font-size="10" fill="rgba(255,255,255,0.6)">시공 및 공정, 기성 등 데이터베이스화</text>
<line x1="190" y1="200" x2="528" y2="475" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- Network (10, 327) -->
<circle cx="18" cy="337" r="5" fill="#aaa"/>
<text x="32" y="341" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Network</text>
<text x="32" y="359" font-size="10" fill="rgba(255,255,255,0.6)">네트워크 서비스를 통한 실시간 데이터 수집 및 연계,</text>
<text x="32" y="373" font-size="10" fill="rgba(255,255,255,0.6)">위치기반 안전관리, SaaS 기반 실시간 데이터 공유</text>
<line x1="150" y1="345" x2="528" y2="490" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- 회의시스템 (10, 469) -->
<circle cx="18" cy="479" r="5" fill="#aaa"/>
<text x="32" y="483" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">회의시스템</text>
<text x="32" y="501" font-size="10" fill="rgba(255,255,255,0.6)">공사 현장, 개별 공구별 사무실, 사업단 회의시스템을</text>
<text x="32" y="515" font-size="10" fill="rgba(255,255,255,0.6)">구축하여 신속한 의사결정을 바탕으로 업무효율성 증대</text>
<line x1="140" y1="488" x2="528" y2="501" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- CCTV (10, 602) -->
<circle cx="18" cy="612" r="5" fill="#aaa"/>
<text x="32" y="616" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">CCTV</text>
<text x="32" y="634" font-size="10" fill="rgba(255,255,255,0.6)">각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행과정과</text>
<text x="32" y="648" font-size="10" fill="rgba(255,255,255,0.6)">위험 요소를 지속적으로 모니터링하여 사고를 사전 예방</text>
<line x1="120" y1="620" x2="528" y2="515" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- Dron Broadcasting (10, 727) -->
<circle cx="18" cy="737" r="5" fill="#aaa"/>
<text x="32" y="741" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Dron Broadcasting</text>
<text x="32" y="759" font-size="10" fill="rgba(255,255,255,0.6)">드론을 활용하여 건설 현장을 촬영하고 구조물의 상태를</text>
<text x="32" y="773" font-size="10" fill="rgba(255,255,255,0.6)">실시간으로 확인 함으로써 공사의 품질 향상</text>
<line x1="200" y1="745" x2="528" y2="530" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- Sensor (10, 855) -->
<circle cx="18" cy="865" r="5" fill="#aaa"/>
<text x="32" y="869" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Sensor</text>
<text x="32" y="887" font-size="10" fill="rgba(255,255,255,0.6)">현장에 IoT 위치기반 센서를 설치하여 사전에 균열, 진동,</text>
<text x="32" y="901" font-size="10" fill="rgba(255,255,255,0.6)">기울기의 변화 등 위험요소를 실시간으로 확인</text>
<line x1="130" y1="873" x2="528" y2="540" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- ====== S/W 항목 (우측, 정확한 y좌표) ====== -->
<!-- C.C.P (631, 62) -->
<circle cx="639" cy="72" r="5" fill="#d16013"/>
<text x="653" y="76" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">C.C.P</text>
<text x="653" y="94" font-size="10" fill="rgba(255,255,255,0.6)">사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합,</text>
<text x="653" y="108" font-size="10" fill="rgba(255,255,255,0.6)">검증, 확인, 협업하는 효율적인 공사단계 프로세스</text>
<line x1="668" y1="82" x2="668" y2="460" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- WatchBIM (631, 189) -->
<circle cx="639" cy="199" r="5" fill="#d16013"/>
<text x="653" y="203" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">WatchBIM</text>
<text x="653" y="221" font-size="10" fill="rgba(255,255,255,0.6)">공사중 단계별 건설과정을 설계모델의 시각화와</text>
<text x="653" y="235" font-size="10" fill="rgba(255,255,255,0.6)">공정시뮬레이션을 통해 현장 공사진행사항을 확인</text>
<line x1="668" y1="210" x2="668" y2="475" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- Domainer (715, 329) -->
<circle cx="723" cy="339" r="5" fill="#d16013"/>
<text x="737" y="343" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Domainer</text>
<text x="737" y="361" font-size="10" fill="rgba(255,255,255,0.6)">시공단계에서 민원 및 용지보상과 관련한 업무를</text>
<text x="737" y="375" font-size="10" fill="rgba(255,255,255,0.6)">수행하는 솔루션으로 지번검색, 계약사항, 일정관리</text>
<line x1="720" y1="348" x2="668" y2="490" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- bCMf (761, 511) -->
<circle cx="769" cy="521" r="5" fill="#d16013"/>
<text x="783" y="525" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">bCMf</text>
<text x="783" y="543" font-size="10" fill="rgba(255,255,255,0.6)">건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를</text>
<text x="783" y="557" font-size="10" fill="rgba(255,255,255,0.6)">효율적으로 수행할 수 있는 BIM기반 현장 맞춤형</text>
<line x1="768" y1="525" x2="668" y2="501" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- Twin Highway (631, 688) -->
<circle cx="639" cy="698" r="5" fill="#d16013"/>
<text x="653" y="702" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">Twin Highway</text>
<text x="653" y="720" font-size="10" fill="rgba(255,255,255,0.6)">준공 후 가상세계의 정보모델을 실시간 데이터와</text>
<text x="653" y="734" font-size="10" fill="rgba(255,255,255,0.6)">연결하여 다양한 시뮬레이션을 통해 효율적 관리</text>
<line x1="668" y1="710" x2="668" y2="540" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
<!-- B.E.Ps (631, 841) -->
<circle cx="639" cy="851" r="5" fill="#d16013"/>
<text x="653" y="855" font-size="14" font-weight="700" fill="#fff" text-decoration="underline">B.E.Ps &lt;참고&gt;</text>
<text x="653" y="873" font-size="10" fill="rgba(255,255,255,0.6)">건설산업의 디지털전환을 위한 개념 및 BIM 수행을</text>
<text x="653" y="887" font-size="10" fill="rgba(255,255,255,0.6)">위한 방법, 예시, 사례들을 모아놓은 시공 BIM 수행지침</text>
<line x1="668" y1="860" x2="668" y2="550" stroke="#555" stroke-width="0.5" stroke-dasharray="3,3"/>
</svg>
</div>
</div>
</div>
</div>
<!-- ===================== FRAME: category-strip-table ===================== -->
<div class="frame-section">
<div class="frame-title">필수조건 — 카테고리 스트립 테이블 <span>(category-strip-table)</span></div>
<div class="pair">
<div class="pair-label figma">Figma Original</div>
<img class="figma-img" src="strip_table.png" alt="Strip Table">
</div>
<div class="divider"></div>
<div class="pair">
<div class="pair-label html">HTML Block</div>
<div class="html-outer">
<div class="html-inner" style="padding: 20px; background: #222;">
<div class="block-cst" style="--cst-count: 3">
<!-- 기술 -->
<div class="cst-col">
<div class="cst-strip" style="background: #2b5797;">
<span class="cst-strip-label">技</span>
<span class="cst-strip-label">術</span>
</div>
<div class="cst-content">
<div class="cst-row">
<div class="cst-title">깊은 기반 (건설산업, 토목) 지식</div>
<div class="cst-body">건설단계별 근본적인 이해와 경험이 기반된 높은 전문지식 보유</div>
</div>
<div class="cst-divider"></div>
<div class="cst-row">
<div class="cst-title">높은 S/W 기술 (Digital Technology)</div>
<div class="cst-body">다양한 기술적도구(S/W,H/W)와 Process의 효과적인 통합</div>
</div>
</div>
</div>
<!-- 사람 -->
<div class="cst-col">
<div class="cst-strip" style="background: #d4722a;">
<span class="cst-strip-label">人</span>
<span class="cst-strip-label">材</span>
</div>
<div class="cst-content">
<div class="cst-row">
<div class="cst-title">분야별 전문지식 역량을 갖춘 기술자</div>
<div class="cst-body">엔지니어의 Know-how와 디지털지식이 융합된 지식의 축적</div>
</div>
<div class="cst-divider"></div>
<div class="cst-row">
<div class="cst-title">디지털화 역량 및 개발경험 많은 개발자</div>
<div class="cst-body">다양한 형태의 Solution S/W 개발 역량 Programmer</div>
</div>
</div>
</div>
<!-- 자연 -->
<div class="cst-col">
<div class="cst-strip" style="background: linear-gradient(180deg, #6a9f3a 0%, #2d6a2d 100%);">
<span class="cst-strip-label">天</span>
<span class="cst-strip-label">地</span>
</div>
<div class="cst-content">
<div class="cst-row">
<div class="cst-title">받아들일 수 있는 사회·기업·제도 등의 여건</div>
<div class="cst-body">목표설정형 지침에서 탈피하여 수행사례, 효과검증을 통해 시행</div>
</div>
<div class="cst-divider"></div>
<div class="cst-row">
<div class="cst-title">지속적·장기적 투자를 수행할 능력과 의지</div>
<div class="cst-body">기술 개발을 위한 대규모 투자 및 Process 혁신을 위한 지속적인 투자</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ========== 블록 스타일 ========== -->
<style>
/* ============================== */
/* hero-icon-cards */
/* ============================== */
.block-hic {
display: flex; flex-direction: column; align-items: center;
width: 100%; background: #0a0a0a; border-radius: 16px;
padding: 36px 32px 28px; overflow: visible;
}
.hic-statement {
text-align: center; font-size: 28px; font-weight: 700;
color: #fff; line-height: 1.6; word-break: keep-all;
margin-bottom: 28px; padding: 0 24px;
}
.hic-statement strong { font-weight: 900; font-size: 1.1em; }
.hic-statement em { color: #ef4444; font-style: normal; font-weight: 900; font-size: 1.15em; }
/*
수학적 계산 (Figma 원본):
badge 508x94 at y=1431, box at y=1449
접힘선 = 18px = 이미지 높이의 19.1%
스케일(1200/1808) → 리본 337x62, 접힘선 top에서 12px, 아래 50px
*/
.hic-card-area { position: relative; width: 100%; margin-top: 20px; }
.hic-ribbon {
position: absolute;
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 337px; /* Figma 508 × (1200/1808) */
text-align: center;
}
.hic-ribbon-img { width: 100%; height: auto; display: block; }
.hic-ribbon-text {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-size: 20px; font-weight: 700; color: #fff;
letter-spacing: 0.03em; white-space: nowrap;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.hic-box {
position: relative;
background: #fff;
border: 6px solid #9b1b1b;
border-radius: 20px;
padding: 56px 8px 8px; /* top: 리본 아래 50px + 6px 여유 */
}
.hic-cards { display: flex; align-items: stretch; width: 100%; }
.hic-card {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
padding: 16px 12px 20px; gap: 8px;
}
.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 8px 0; }
.hic-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.hic-title { font-size: 20px; font-weight: 900; color: #1a1a1a; line-height: 1.3; }
.hic-sub { font-size: 15px; font-weight: 500; color: #666; }
/* ============================== */
/* compare-2col-badge */
/* ============================== */
.block-c2b { display: flex; flex-direction: column; width: 100%; }
/*
수학적 계산 (Figma 원본):
badge 517x88 at y=929, box at y=947
접힘선 = 18px = 이미지 높이의 20.5%
스케일(1200/1807) → 리본 343x58, 접힘선 top에서 12px, 아래 46px
*/
.c2b-main { position: relative; }
.c2b-ribbon {
position: absolute;
top: -12px; /* 접힘선이 박스 top border와 정확히 일치 */
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 343px; /* Figma 517 × (1200/1807) */
text-align: center;
}
.c2b-ribbon-img { width: 100%; height: auto; display: block; }
.c2b-ribbon-text {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-size: 22px; font-weight: 700; color: #fff;
letter-spacing: 0.03em; white-space: nowrap;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.c2b-container {
display: grid; grid-template-columns: 1fr auto 1fr;
background: #fff;
border: 2px solid #5a9ea8;
border-radius: 20px;
padding: 52px 40px 36px; /* top: 리본 아래 46px + 6px 여유 */
}
.c2b-divider { width: 1px; background: #d0d0d0; margin: 0 32px; align-self: stretch; }
.c2b-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.c2b-title { font-size: 36px; font-weight: 900; line-height: 1.2; word-break: keep-all; }
.c2b-body { font-size: 22px; font-weight: 700; line-height: 1.9; white-space: pre-line; word-break: keep-all; }
.c2b-statement {
margin-top: 24px; text-align: center; font-size: 28px; font-weight: 700;
color: #1e293b; line-height: 1.6; word-break: keep-all; padding: 0 20px;
}
.c2b-statement strong { font-weight: 900; font-size: 1.15em; }
.c2b-statement em { color: #dc2626; font-style: normal; font-weight: 900; font-size: 1.2em; }
/* ============================== */
/* compare-detail-gradient */
/* ============================== */
/*
CSS Grid: 2열 × 4행 (헤더 + 3섹션)
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
*/
.block-cdg {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
width: 100%;
overflow: hidden;
background: linear-gradient(90deg,
rgba(255,255,255,0.4) 0%,
rgba(57,50,30,0.12) 50%,
rgba(41,107,85,0.06) 50%,
rgba(255,255,255,0.4) 100%
);
}
/* ── Headers (비대칭 라운드) ── */
.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
.cdg-header-text { font-size: 26px; font-weight: 900; color: #000; line-height: 1.3; }
.cdg-header-warm {
background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
}
.cdg-header-teal {
background: linear-gradient(90deg, rgba(3,33,24,0.85), rgba(41,107,85,0.15));
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
}
/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
.cdg-cell {
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 6px;
align-self: start;
}
.cdg-cell-warm { background: none; }
.cdg-cell-teal { background: none; }
/* ── Section Title & Body ── */
.cdg-sec-title { font-size: 18px; font-weight: 900; line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
.cdg-title-warm { color: #5C3714; }
.cdg-title-teal { color: #084C56; }
.cdg-sec-body { padding-left: 8px; }
.cdg-bullet {
position: relative; padding-left: 14px;
font-size: 14px; font-weight: 700; color: #1a1a1a;
line-height: 1.7; word-break: keep-all;
}
.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
/* ── As-Is → To-Be 수평 레이아웃 ── */
.cdg-asis-tobe {
display: flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.cdg-asis, .cdg-tobe { flex: 1; padding-left: 8px; }
.cdg-arrow { width: 60px; height: auto; flex-shrink: 0; opacity: 0.7; }
/* === category-strip-table === */
/*
수학적 계산: table 2123x595, scale=1200/2123=0.5652
col: 690→390px, strip: 152→86px → 실사용 40px (슬라이드 비율)
title: 45→22px→18px, body: 35→16px→14px
*/
.block-cst {
display: grid;
grid-template-columns: repeat(var(--cst-count, 3), 1fr);
gap: 4px; width: 100%;
}
.cst-col { display: flex; border-radius: 4px; overflow: hidden; background: #1a1a1a; }
.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: 700; color: #fff;
writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.1em;
}
.cst-content { flex: 1; display: flex; flex-direction: column; }
.cst-row { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cst-title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.4; word-break: keep-all; }
.cst-body { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7); line-height: 1.6; word-break: keep-all; }
.cst-divider { height: 1px; background: rgba(255,255,255,0.15); margin: 0 14px; }
/* === checklist-dark === */
.block-cld {
display: flex; flex-direction: column; gap: 8px;
width: 100%; background: #1a1a1a; border-radius: 10px; padding: 20px 24px;
}
.cld-row { display: flex; align-items: flex-start; gap: 12px; }
.cld-check { font-size: 18px; color: #d4722a; flex-shrink: 0; line-height: 1.6; }
.cld-text { font-size: 16px; line-height: 1.6; color: #fff; word-break: keep-all; }
.cld-title { font-weight: 700; color: #fff; }
.cld-sep { color: rgba(255,255,255,0.5); }
.cld-desc { font-weight: 500; color: rgba(255,255,255,0.8); }
/* === system-2col-center === */
.block-s2c {
display: grid; grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto 1fr; width: 100%;
}
.s2c-tab { padding: 8px 20px; font-size: 20px; font-weight: 700; color: #fff; border-radius: 6px; }
.s2c-tab-left { grid-column: 1; grid-row: 1; justify-self: start; }
.s2c-tab-right { grid-column: 3; grid-row: 1; justify-self: end; }
.s2c-col { display: flex; flex-direction: column; gap: 16px; padding: 16px 12px; }
.s2c-left { grid-column: 1; grid-row: 2; }
.s2c-right { grid-column: 3; grid-row: 2; }
.s2c-center { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.s2c-circle {
width: 120px; height: 120px; border-radius: 50%;
background: linear-gradient(135deg, #2a8a8a, #1a6060);
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; flex-shrink: 0;
}
.s2c-center-title { font-size: 18px; font-weight: 900; color: #fff; line-height: 1.3; }
.s2c-center-sub { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.7); }
.s2c-item { display: flex; gap: 10px; align-items: flex-start; }
.s2c-item-content { display: flex; flex-direction: column; gap: 3px; }
.s2c-item-title { font-size: 16px; font-weight: 700; color: #1e293b; line-height: 1.4; }
.s2c-item-body { font-size: 14px; font-weight: 500; color: #64748b; line-height: 1.6; word-break: keep-all; }
/* === system-2col-center v2 (구조화 버전) === */
/*
수학적 계산: frame 2336x1874, scale=1200/2336=0.5137
H/W: 636px, Center: 345px→120px, S/W: 569px
탭: 20px, 중앙: 28px, 제목: 16px, 본문: 14px
*/
.block-s2c-v2 {
display: grid;
grid-template-columns: 1fr 160px 1fr;
grid-template-rows: auto 1fr;
width: 100%;
background: #111;
border-radius: 12px;
padding: 16px;
gap: 8px;
}
.s2c2-tab {
padding: 6px 16px; font-size: 18px; font-weight: 700; color: #fff;
border-radius: 4px; width: fit-content;
}
.s2c2-tab-left { grid-column: 1; grid-row: 1; background: #838486; }
.s2c2-tab-right { grid-column: 3; grid-row: 1; background: #d16013; justify-self: end; }
.s2c2-col { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.s2c2-left { grid-column: 1; grid-row: 2; }
.s2c2-right { grid-column: 3; grid-row: 2; }
.s2c2-center {
grid-column: 2; grid-row: 1 / 3;
display: flex; align-items: center; justify-content: center;
}
.s2c2-circle {
width: 130px; height: 130px; border-radius: 50%;
background: linear-gradient(135deg, #2a9a9a, #1a6868);
border: 3px solid rgba(255,255,255,0.3);
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: 0 0 30px rgba(42,154,154,0.4);
}
.s2c2-center-title { font-size: 22px; font-weight: 900; color: #fff; line-height: 1.2; }
.s2c2-center-sub { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.7); margin-top: 4px; }
.s2c2-item { display: flex; gap: 10px; align-items: flex-start; }
.s2c2-dot {
width: 10px; height: 10px; border-radius: 50%; background: #aaa;
flex-shrink: 0; margin-top: 5px;
}
.s2c2-dot-orange { background: #d16013; }
.s2c2-item-inner { display: flex; flex-direction: column; gap: 2px; }
.s2c2-item-title {
font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3;
text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.s2c2-item-body { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.65); line-height: 1.5; word-break: keep-all; }
/* === cycle-orbit === */
.block-co { width: 100%; display: flex; flex-direction: column; align-items: center; }
.co-title {
font-size: 18px; font-weight: 900; color: #1e293b; text-align: center;
margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid #2563eb;
}
.co-diagram { position: relative; width: 100%; max-width: 900px; aspect-ratio: 1200 / 420; }
.co-svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.co-node {
position: absolute; display: flex; flex-direction: column; align-items: center;
transform: translate(-50%, -50%); z-index: 2;
}
.co-icon {
width: 52px; height: 52px; border-radius: 50%; background: #e9e8e8;
border: 3px solid #818181; display: flex; align-items: center;
justify-content: center; font-size: 22px;
}
.co-label { font-size: 14px; font-weight: 900; color: #1e293b; margin-top: 4px; text-align: center; }
.co-sub-label { font-size: 11px; color: #64748b; text-align: center; }
.co-desc { position: absolute; z-index: 2; }
.co-desc-title { font-size: 13px; font-weight: 700; color: #1e293b; margin-bottom: 2px; white-space: nowrap; }
.co-bullet {
font-size: 11px; font-weight: 500; color: #64748b;
padding-left: 10px; position: relative; line-height: 1.5;
}
.co-bullet::before { content: '•'; position: absolute; left: 0; color: #999; }
</style>
</body>
</html>