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>
204 lines
5.6 KiB
HTML
204 lines
5.6 KiB
HTML
<!-- 슬라이드 배경 (고정) — 모든 블록의 공통 래퍼 -->
|
||
<!--
|
||
📋 slide-base
|
||
─────────────────
|
||
용도: 16:9 슬라이드의 고정 배경. 상단 제목 + 구분선 + 본문 영역 + 하단 결론 pill.
|
||
각 블록(new/, cards/, emphasis/ 등)은 본문 영역(.slide-body) 안에 들어간다.
|
||
Figma 원본: Frame 1171281207 (node 107:22, 3848×2165, Page 2)
|
||
수학적 계산:
|
||
원본 3848×2165 → 16:9 (1280×720)
|
||
scale = 1280 / 3848 = 0.33264
|
||
상단 제목: top 125px × S ≈ 42px, left 155px × S ≈ 52px, font 65.8px × S ≈ 22px
|
||
구분선: top 218px × S ≈ 72px
|
||
하단 pill: top 1980px × S ≈ 659px, height 123px × S ≈ 41px
|
||
본문 영역: top ~72px ~ bottom ~659px = 약 587px 가용
|
||
슬롯:
|
||
title — 슬라이드 제목 (gradient text)
|
||
body — {% block body %}{% endblock %} 또는 include 대상
|
||
footer_text — 하단 pill 결론 메시지 (HTML, <em> 노란 하이라이트) (선택)
|
||
이미지:
|
||
svg/bg_slide_texture.png — 배경 텍스처 (opacity 2%)
|
||
svg/line_divider.svg — 구분선
|
||
svg/pill_scroll.png — 하단 pill 배경 (두루마리, 이미지 유지)
|
||
CSS 요소:
|
||
배경 gradient: linear-gradient(180deg, #f0f0f0, #fff)
|
||
제목 gradient text: linear-gradient(180deg, #296b55, #123328)
|
||
하단 pill: 캡슐 border-radius 50px
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>{{ title|default("슬라이드") }}</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh;
|
||
word-break: keep-all;
|
||
}
|
||
|
||
/* ── 16:9 슬라이드 컨테이너 ── */
|
||
.slide {
|
||
width: 1280px; height: 720px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/*
|
||
배경: Figma gradient(#f0f0f0→#fff) + 텍스처(opacity 2%)
|
||
MCP 확인: bg-gradient-to-b from-[#f0f0f0] to-white, opacity-2
|
||
*/
|
||
.slide-bg {
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(180deg, #f0f0f0 0%, #ffffff 100%);
|
||
z-index: 0;
|
||
}
|
||
.slide-bg-texture {
|
||
position: absolute; inset: 0;
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
opacity: 0.02;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/*
|
||
상단 제목: Figma 65.8px Bold, gradient(#296b55→#123328)
|
||
top: 125/2165 × 720 ≈ 42px, left: 155/3848 × 1280 ≈ 52px
|
||
text-shadow: 0 0 5px #322c1e (Figma 5.263px × S)
|
||
*/
|
||
.slide-title {
|
||
position: absolute;
|
||
left: 52px; top: 22px;
|
||
width: calc(100% - 104px);
|
||
font-weight: 700;
|
||
font-size: 22px;
|
||
line-height: 1.4;
|
||
background-image: linear-gradient(180deg, #296b55 0%, #123328 100%);
|
||
-webkit-background-clip: text; background-clip: text;
|
||
color: transparent;
|
||
text-shadow: 0 0 2px #322c1e;
|
||
z-index: 2;
|
||
}
|
||
|
||
/*
|
||
구분선: Figma top 218px → 72px, width 3553/3848 × 1280 ≈ 1181px
|
||
SVG 이미지 또는 CSS border
|
||
*/
|
||
.slide-divider {
|
||
position: absolute;
|
||
left: 50px; top: 58px;
|
||
width: calc(100% - 100px);
|
||
height: 2px;
|
||
z-index: 2;
|
||
}
|
||
.slide-divider img {
|
||
width: 100%; height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/*
|
||
본문 영역: 구분선 아래 ~ 하단 pill 위
|
||
top: ~65px, bottom: ~60px (pill 영역)
|
||
→ 가용 높이 약 595px
|
||
*/
|
||
.slide-body {
|
||
position: absolute;
|
||
left: 40px; top: 65px;
|
||
width: calc(100% - 80px);
|
||
height: 590px;
|
||
z-index: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/*
|
||
하단 pill: Figma top 1980/2165 × 720 ≈ 659px, height 123 × S ≈ 41px
|
||
캡슐 border-radius: 50px × S ≈ 17px → 999px (캡슐)
|
||
pill 배경: 이미지 (두루마리, R16 crop) 또는 CSS gradient
|
||
*/
|
||
.slide-footer {
|
||
position: absolute;
|
||
left: 50px; bottom: 8px;
|
||
width: calc(100% - 100px);
|
||
height: 41px;
|
||
border-radius: 999px;
|
||
overflow: hidden;
|
||
z-index: 2;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.slide-footer-bg {
|
||
position: absolute; inset: 0;
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 999px;
|
||
z-index: 0;
|
||
}
|
||
/* pill 배경이 이미지 없을 때 CSS gradient fallback */
|
||
.slide-footer--css {
|
||
background: linear-gradient(90deg, #3b3523 5%, #263a2a 50%, #113f31 95%);
|
||
}
|
||
|
||
/*
|
||
footer 텍스트: Figma 60px × S ≈ 20px, Bold white
|
||
<em> = 노란색 #fe3
|
||
*/
|
||
.slide-footer-text {
|
||
position: relative; z-index: 1;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.slide-footer-text em {
|
||
color: #ffee33;
|
||
font-style: normal;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<!-- 배경 -->
|
||
<div class="slide-bg">
|
||
<img src="svg/bg_slide_texture.png" class="slide-bg-texture" alt="">
|
||
</div>
|
||
|
||
<!-- 상단 제목 -->
|
||
<div class="slide-title">{{ title|default("슬라이드 제목") }}</div>
|
||
|
||
<!-- 구분선 -->
|
||
<div class="slide-divider">
|
||
<img src="svg/line_divider.svg" alt="">
|
||
</div>
|
||
|
||
<!-- 본문 영역 — 블록들이 여기에 들어감 -->
|
||
<div class="slide-body">
|
||
{% block body %}{% endblock %}
|
||
</div>
|
||
|
||
<!-- 하단 결론 pill -->
|
||
{% if footer_text %}
|
||
<div class="slide-footer">
|
||
{% if footer_pill_bg %}
|
||
<img src="{{ footer_pill_bg }}" class="slide-footer-bg" alt="">
|
||
{% else %}
|
||
<div class="slide-footer-bg slide-footer--css"></div>
|
||
{% endif %}
|
||
<div class="slide-footer-text">{{ footer_text|safe }}</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|