Files
dintel-design-system/D.intelligence Design System 2026.html
2026-10-24 18:10:13 +09:00

1822 lines
155 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>D.intelligence Design System — 2026 Edition</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="deck-stage.js"></script>
</head>
<body>
<deck-stage>
<!-- ============================================================
01 — COVER
============================================================ -->
<section data-screen-label="01 Cover" class="s-cover">
<div class="s-three-dots olive"><i></i><i></i><i></i></div>
<div class="s-header">
<span class="s-sys">D.intelligence — Brand &amp; Design System</span>
<span class="s-section-id">v2026 / Internal</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:48px;">
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--gray);">Graphic Standard Manual</div>
<div>
<div style="font-family:var(--font-en); font-size:172px; font-weight:700; line-height:0.92; letter-spacing:-0.03em; color:var(--brown);">D.</div>
<div style="font-family:var(--font-en); font-size:172px; font-weight:700; line-height:0.92; letter-spacing:-0.03em; color:var(--brown);">intelligence</div>
</div>
<div style="display:flex; gap:48px; align-items:baseline;">
<div style="font-family:var(--font-en); font-size:24px; font-style:italic; color:var(--brown); opacity:0.6;">— Analysis, Treatment &amp; Growth —</div>
</div>
</div>
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); text-align:right;">
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:24px;">Design System</div>
<div style="font-family:var(--font-en); font-size:96px; font-weight:700; line-height:1; letter-spacing:-0.02em; color:var(--brown);">2026</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--olive); margin-top:24px;">Edition · v2.0</div>
</div>
<div class="s-footer">
<span class="s-tag">Think Forward</span>
<span class="s-page">(주)디인텔리전스 · 2026</span>
</div>
</section>
<!-- ============================================================
02 — CONTENTS
============================================================ -->
<section data-screen-label="02 Contents" class="s-cover">
<div class="s-three-dots beige"><i></i><i></i><i></i></div>
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Contents</span>
</div>
<div style="position:absolute; left:96px; top:180px; right:96px;">
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:var(--gray); margin-bottom:20px;">Table of Contents</div>
<h1 style="font-family:var(--font-en); font-size:76px; font-weight:700; letter-spacing:-0.02em; color:var(--brown); margin:0 0 56px 0; line-height:1;">Nine chapters,<br>one operating system</h1>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px 96px; max-width:1500px;">
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--brown);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">01</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Brand Platform</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">미션 · 비전 · 캐릭터 · Heritage</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--brown);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">06</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Slide Templates</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">커버 · 섹션 · 콘텐츠 · 클로징</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">02</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Logo &amp; Logomark</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">기본 · 변형 · 여백 · 사용 금지</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">07</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Service Architecture</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">3-Phase · 17 모듈 · 4 카테고리</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">03</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Color System</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">팔레트 · 사용 규칙 · 조합</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">08</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Voice &amp; Messaging</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">톤 · 매너 · 좋은 예 · 나쁜 예</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">04</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Typography</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">DM Sans · Apple SD Gothic Neo</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">09</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Components &amp; Do/Don't</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">UI · 차트 · 사용 규칙</div></div></div>
<div style="display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--gray-light); border-bottom:1px solid var(--gray-light);"><span class="mono" style="font-size:14px; color:var(--olive); font-weight:500; letter-spacing:0.1em; width:48px;">05</span><div><div style="font-family:var(--font-en); font-size:22px; font-weight:500; color:var(--brown);">Layout &amp; Motifs</div><div style="font-family:var(--font-kr); font-size:14px; color:var(--gray); margin-top:4px;">그리드 · 수직선 · 세 점 · 푸터</div></div></div>
<div style="border-top:1px solid var(--gray-light); border-bottom:1px solid var(--gray-light);"></div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">02 / 28</span>
</div>
</section>
<!-- ============================================================
03 — SECTION DIVIDER: 01 Brand Platform
============================================================ -->
<section data-screen-label="03 Section 01 Brand Platform" class="s-section">
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Chapter 01</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
<div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">01</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter One</div>
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Brand<br>Platform</h1>
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">브랜드 플랫폼</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">우리가 누구이고, 왜 존재하며, 어떤 인격으로 말하는가. v1.3에서 재정립된 브랜드의 4차원 운영 체계와 '마케팅 과학자' 캐릭터</div>
</div>
</div>
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); text-align:right; font-family:var(--font-en);">
<div style="font-size:13px; letter-spacing:0.2em; color:var(--gray); margin-bottom:32px; text-transform:uppercase;">In this chapter</div>
<div style="display:flex; flex-direction:column; gap:14px; font-size:18px; color:var(--brown);">
<div>· Mission, Vision, Tagline, Motto</div>
<div>· Core Values (Science / Practice / Outcome / Insights)</div>
<div>· Brand Dimensions — 4D</div>
<div>· Brand Character</div>
<div>· Heritage Promise — 7가지 약속</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">03 / 28</span>
</div>
</section>
<!-- ============================================================
04 — BRAND CORE
============================================================ -->
<section data-screen-label="04 Brand Core" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">01 · Brand Platform</span>
<span class="s-section-id">Brand Core</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Brand Core · 브랜드 핵심</span>
</div>
<h2 class="content-title" style="font-size:56px;">Mission, Vision, Tagline, Motto</h2>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:80px;">
<div style="border-top:1px solid var(--brown); padding-top:28px;">
<div class="uppercase-label" style="color:var(--olive); margin-bottom:16px;">Mission · 미션</div>
<div style="font-family:var(--font-en); font-size:38px; font-weight:500; line-height:1.25; color:var(--brown); letter-spacing:-0.01em;">A trusted partner enabling<br>data-driven decisions for<br>sustainable growth</div>
<div style="font-family:var(--font-kr); font-size:22px; line-height:1.5; color:var(--gray); margin-top:24px; font-weight:500;">데이터 기반 의사결정으로 기업의<br>지속가능한 성장을 실현하는 전문 파트너</div>
</div>
<div style="border-top:1px solid var(--brown); padding-top:28px;">
<div class="uppercase-label" style="color:var(--olive); margin-bottom:16px;">Vision · 비전</div>
<div style="font-family:var(--font-en); font-size:38px; font-weight:500; line-height:1.25; color:var(--brown); letter-spacing:-0.01em;">Evangelists of marketing<br>science and data literacy</div>
<div style="font-family:var(--font-kr); font-size:22px; line-height:1.5; color:var(--gray); margin-top:24px; font-weight:500;">마케팅 과학과 데이터 리터러시의 전도사</div>
</div>
<div style="border-top:1px solid var(--gray-light); padding-top:28px;">
<div class="uppercase-label" style="color:var(--gray); margin-bottom:16px;">Tagline · 태그라인</div>
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; line-height:1; color:var(--brown); letter-spacing:-0.02em; font-style:italic;">Analysis, Treatment<br>&amp; Growth</div>
<div style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-top:20px;">진단 · 처방 · 성장</div>
</div>
<div style="border-top:1px solid var(--gray-light); padding-top:28px; background:var(--brown); color:var(--beige); margin:0 -32px; padding:28px 32px;">
<div class="uppercase-label" style="color:var(--olive); margin-bottom:16px;">Internal Motto · 내부 모토</div>
<div style="font-family:var(--font-en); font-size:72px; font-weight:700; line-height:0.95; color:var(--beige); letter-spacing:-0.02em;">Think<br>Forward</div>
<div style="font-family:var(--font-kr); font-size:16px; color:var(--warm-gray); margin-top:20px; opacity:0.8;">우리 안의 약속 — 함께 앞을 보는 동반자로서</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">04 / 28</span>
</div>
</section>
<!-- ============================================================
05 — CORE VALUES + POSITION
============================================================ -->
<section data-screen-label="05 Core Values" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">01 · Brand Platform</span>
<span class="s-section-id">Core Values · Position</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.2</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Core Values &amp; Brand Position</span>
</div>
<h2 class="content-title" style="font-size:56px;">Four values, one position</h2>
<div class="content-subtitle">네 가지 핵심 가치가 우리의 모든 진단, 처방, 성장 설계를 관통한다.</div>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:80px;">
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
<div>
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 01</div>
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Science</div>
</div>
<div>
<div class="content-kr" style="font-size:18px; line-height:1.5;">과학적 방법론, 검증, 데이터 기반 판단</div>
</div>
</div>
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
<div>
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 02</div>
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Practice</div>
</div>
<div>
<div class="content-kr" style="font-size:18px; line-height:1.5;">실행 가능하고 현실적인 해법</div>
</div>
</div>
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
<div>
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 03</div>
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Outcome</div>
</div>
<div>
<div class="content-kr" style="font-size:18px; line-height:1.5;">측정 가능한 성과 중심</div>
</div>
</div>
<div style="background:var(--beige); padding:40px; height:340px; display:flex; flex-direction:column; justify-content:space-between;">
<div>
<div class="mono" style="font-size:13px; color:var(--olive); font-weight:500; letter-spacing:0.2em;">VALUE 04</div>
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); margin-top:16px; letter-spacing:-0.02em;">Insights</div>
</div>
<div>
<div class="content-kr" style="font-size:18px; line-height:1.5;">복잡한 문제를 분명한 인사이트로 전환</div>
</div>
</div>
</div>
<div style="margin-top:36px; padding:24px 32px; border:1px solid var(--brown); display:flex; gap:36px; align-items:center;">
<div>
<div class="uppercase-label">Brand Position</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.015em; margin-top:6px;">AI &amp; Data-driven Marketing Innovation Partner</div>
<div class="content-kr" style="font-size:16px; margin-top:6px; font-weight:500;">AI와 데이터 기반 마케팅 혁신의 파트너</div>
</div>
<div style="border-left:1px solid var(--gray-light); padding-left:36px; max-width:520px;">
<div style="font-family:var(--font-en); font-size:14px; line-height:1.55; color:var(--gray);">대기업 수준의 데이터·AI 역량을 중견기업과 스타트업에 맞춤 실행력으로 전달한다.</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">05 / 28</span>
</div>
</section>
<!-- ============================================================
06 — BRAND DIMENSIONS (4D)
============================================================ -->
<section data-screen-label="06 Brand Dimensions" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">01 · Brand Platform</span>
<span class="s-section-id">Brand Dimensions</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.3</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">4D Brand Dimensions · 4차원 브랜드 구조</span>
</div>
<h2 class="content-title" style="font-size:56px;">Functional, Emotional, Experiential, Social</h2>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:64px; border-top:1px solid var(--brown);">
<div style="border-bottom:1px solid var(--gray-light); border-right:1px solid var(--gray-light); padding:36px 40px 36px 0; display:grid; grid-template-columns:200px 1fr; gap:32px;">
<div>
<div class="uppercase-label" style="color:var(--olive);">Functional</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">기능적</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">데이터 기반 진단-처방-성장 프레임워크를 통해 측정 가능한 성과를 설계한다</div>
<div style="margin-top:16px; display:inline-block; padding:6px 14px; background:var(--brown); color:var(--beige); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">Analysis, Treatment &amp; Growth</div>
</div>
</div>
<div style="border-bottom:1px solid var(--gray-light); padding:36px 0 36px 40px; display:grid; grid-template-columns:200px 1fr; gap:32px;">
<div>
<div class="uppercase-label" style="color:var(--olive);">Emotional</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">감성적</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">함께 문제를 풀어가는 동반자로서, 고객과 같은 방향을 바라본다</div>
<div style="margin-top:16px; display:inline-block; padding:6px 14px; background:var(--brown); color:var(--olive); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">Think Forward</div>
</div>
</div>
<div style="border-bottom:1px solid var(--brown); border-right:1px solid var(--gray-light); padding:36px 40px 36px 0; display:grid; grid-template-columns:200px 1fr; gap:32px;">
<div>
<div class="uppercase-label" style="color:var(--olive);">Experiential</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">경험적</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">과학적인 마케팅 문제 해결 — 성과 중심, 데이터 기반, 지속 성장</div>
<div style="margin-top:16px; display:inline-block; padding:6px 14px; border:1px solid var(--brown); color:var(--brown); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">SMART Marketing Intelligence</div>
</div>
</div>
<div style="border-bottom:1px solid var(--brown); padding:36px 0 36px 40px; display:grid; grid-template-columns:200px 1fr; gap:32px;">
<div>
<div class="uppercase-label" style="color:var(--olive);">Social</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">사회적</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:22px; font-weight:500; line-height:1.4; color:var(--brown); letter-spacing:-0.01em;">누구나 활용 가능한 보편적 데이터 &amp; AI 역량의 전도사</div>
<div style="margin-top:16px; display:inline-block; padding:6px 14px; border:1px solid var(--brown); color:var(--brown); font-family:var(--font-en); font-size:13px; letter-spacing:0.12em; font-weight:500;">Data Literacy for All</div>
</div>
</div>
</div>
<div style="margin-top:48px; padding:32px 40px; background:var(--gray-bg); display:flex; gap:36px; align-items:baseline;">
<div class="uppercase-label" style="white-space:nowrap;">Brand Promise</div>
<div style="font-family:var(--font-kr); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">"진단의 정확함으로 시작하여, 성장의 구조를 함께 만듭니다."</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">06 / 28</span>
</div>
</section>
<!-- ============================================================
07 — BRAND CHARACTER
============================================================ -->
<section data-screen-label="07 Brand Character" class="s-dark">
<div class="s-three-dots olive"><i></i><i></i><i></i></div>
<div class="s-header">
<span class="s-sys">01 · Brand Platform</span>
<span class="s-section-id">Brand Character</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.4</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--warm-gray);">Brand Character · 브랜드 인격</span>
</div>
<div style="display:grid; grid-template-columns:560px 1fr; gap:96px; margin-top:48px;">
<div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.2em; color:var(--olive); text-transform:uppercase; margin-bottom:24px;">The Character</div>
<div style="font-family:var(--font-kr); font-size:62px; font-weight:800; line-height:1.1; color:var(--beige); letter-spacing:-0.025em;">성과중심의<br>데이터 기반<br>마케팅 과학자</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--warm-gray); margin-top:36px; max-width:480px; font-style:italic;">Outcome-focused, Data-driven Marketing Scientist — proves marketing by hypothesis, measurement, and replicable method. Speaks in data, experiments, and structure rather than guesses and generalities.</div>
<div style="font-family:var(--font-kr); font-size:18px; line-height:1.6; color:var(--warm-gray); margin-top:20px; max-width:480px;">엄밀한 가설 검증, 측정 가능한 KPI, 재현 가능한 방법론으로 마케팅 성과를 설계하는 분석가형 전문가</div>
<div style="margin-top:36px; padding:16px 20px; border:1px solid rgba(229,225,210,0.25); display:flex; gap:16px; align-items:baseline; max-width:480px;">
<span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">NOTE · §2.9.1</span>
<span style="font-family:var(--font-kr); font-size:13px; color:var(--warm-gray); line-height:1.55;">"지혜로운 상담 마케팅 주치의" 캐릭터는 <strong style="color:var(--beige); font-weight:700;">OurDigital</strong>로 이관 (2026-05-17) — 별도 브랜드 시스템에서 관리</span>
</div>
</div>
<div style="border-left:1px solid rgba(255,255,255,0.15); padding-left:64px;">
<div class="uppercase-label" style="color:var(--warm-gray); margin-bottom:24px;">Five Character Traits</div>
<div style="display:flex; flex-direction:column; gap:20px;">
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">과학적 엄정성<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">SCIENTIFIC RIGOR · SCIENCE</span></div>
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">가설 → 측정 → 검증 → 개선의 순환을 일관되게 적용한다</div>
</div>
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">성과 지향성<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">OUTCOME ORIENTATION · OUTCOME</span></div>
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">측정 가능한 KPI 변화로 결과를 보여준다</div>
</div>
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">실행 가능성<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">EXECUTABILITY · PRACTICE</span></div>
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">추상적 권고가 아닌 즉시 적용 가능한 처방을 제시한다</div>
</div>
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1);">
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">구조적 사고<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">STRUCTURAL THINKING · INSIGHTS</span></div>
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">단편적 답변이 아닌 의사결정 프레임워크를 설계한다</div>
</div>
<div style="display:grid; grid-template-columns:200px 1fr; gap:24px;">
<div style="font-family:var(--font-en); font-size:22px; font-weight:700; color:var(--olive); letter-spacing:-0.01em; line-height:1.15;">정직한 한계 표시<span style="display:block; font-size:12px; font-weight:500; color:var(--warm-gray); letter-spacing:0.15em; margin-top:6px;">HONEST LIMITS · 약속 #3</span></div>
<div style="font-family:var(--font-kr); font-size:17px; line-height:1.5; color:var(--beige); padding-top:4px;">데이터·가정의 한계를 분명히 명시한다</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag" style="color:var(--olive); opacity:1;">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page" style="color:var(--warm-gray);">07 / 28</span>
</div>
</section>
<!-- ============================================================
08 — HERITAGE PROMISE (7가지 약속)
============================================================ -->
<section data-screen-label="08 Heritage Promise" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">01 · Brand Platform</span>
<span class="s-section-id">Heritage Promise · 2011</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">01.5</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Heritage Promise — Seven Promises from 2011, D&amp;A</span>
</div>
<h2 class="content-title" style="font-size:56px;">Seven promises that still hold</h2>
<div class="content-subtitle">2011년 창업 당시의 약속은 지금의 Core Values와 톤앤매너의 원형이다.<br>이 일곱 가지가 Brand Character의 인간적 깊이를 부여한다.</div>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px;">
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px;">
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 01</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">사람과 사람의<br>이야기를 이어갑니다.</div>
</div>
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px;">
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 02</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">사람의 얼굴을 한<br>브랜드를 그립니다.</div>
</div>
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px;">
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 03</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">진실된 고객 가치만을<br>이야기합니다.</div>
</div>
<div style="padding:28px 0; border-top:2px solid var(--brown); display:flex; flex-direction:column; gap:12px; background:var(--beige); margin:0 -16px; padding:28px 16px;">
<div class="mono" style="font-size:13px; color:var(--brown); letter-spacing:0.2em; font-weight:500;">PROMISE 04 · 톤의 원형</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:700;">조심스럽게 듣고<br>담백하게 말합니다.</div>
</div>
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px;">
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 05</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">큰 성공보다는<br>작은 믿음을 약속합니다.</div>
</div>
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px;">
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 06</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">새로운 도전과 실패를<br>두려워하지 않습니다.</div>
</div>
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px;">
<div class="mono" style="font-size:13px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PROMISE 07</div>
<div class="content-kr" style="font-size:20px; line-height:1.4; color:var(--brown); font-weight:500;">사람의 온기와 향기를<br>남깁니다.</div>
</div>
<div style="padding:28px 0; border-top:1px solid var(--gray-light); display:flex; flex-direction:column; gap:12px; justify-content:center;">
<div class="mono" style="font-size:13px; color:var(--gray); letter-spacing:0.2em; font-weight:500;">SINCE 2011</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); line-height:1.55; font-style:italic;">"이 7가지 약속은 현재의 Core Values와 톤앤매너의 원형이며, Brand Character의 인간적 깊이를 부여하는 근간이다."</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">08 / 28</span>
</div>
</section>
<!-- ============================================================
09 — SECTION DIVIDER: 02 Logo
============================================================ -->
<section data-screen-label="09 Section 02 Logo" class="s-section">
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Chapter 02</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
<div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">02</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Two</div>
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Logo &amp;<br>Logomark</h1>
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">로고와 로고마크</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">펜타곤-애로우 마크가 'think forward' 모토를 품고, 워드마크와 함께 놓인다. 변형은 다섯 가지, 클리어 스페이스는 'D.'의 높이.</div>
</div>
</div>
<div style="position:absolute; right:160px; top:50%; transform:translateY(-50%); width:520px; height:520px; display:flex; align-items:center; justify-content:center;">
<img src="assets/logos/horizontal.png" style="max-width:100%; max-height:100%; object-fit:contain;">
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">09 / 28</span>
</div>
</section>
<!-- ============================================================
10 — LOGO PRIMARY
============================================================ -->
<section data-screen-label="10 Logo Primary" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">02 · Logo &amp; Logomark</span>
<span class="s-section-id">Primary Lockup</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">02.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Primary Lockup · 기본 조합</span>
</div>
<h2 class="content-title" style="font-size:56px;">The horizontal lockup leads</h2>
<div style="margin-top:48px; padding:64px 80px; background:var(--beige); position:relative; min-height:280px; display:flex; align-items:center; justify-content:center;">
<img src="assets/logos/horizontal.png" style="max-width:780px; max-height:180px; object-fit:contain;">
<!-- clear space markers -->
<svg style="position:absolute; inset:0; width:100%; height:100%; pointer-events:none;" viewBox="0 0 1500 380" preserveAspectRatio="none">
<g stroke="#727171" stroke-width="0.5" stroke-dasharray="4 4" fill="none" opacity="0.4">
<rect x="80" y="40" width="1340" height="300" />
</g>
<g fill="#727171" font-family="DM Sans" font-size="9" opacity="0.6">
<text x="40" y="50" text-anchor="middle">x</text>
<text x="1460" y="50" text-anchor="middle">x</text>
<text x="40" y="340" text-anchor="middle">x</text>
<text x="1460" y="340" text-anchor="middle">x</text>
</g>
</svg>
</div>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; margin-top:36px;">
<div>
<div class="uppercase-label">Clear Space</div>
<div style="font-family:var(--font-en); font-size:17px; color:var(--brown); margin-top:10px; line-height:1.5;">All sides ≥ height of <span style="font-weight:700;">'D.'</span> element</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:6px;">사방 여백은 워드마크 'D.'의 높이 이상</div>
</div>
<div>
<div class="uppercase-label">Minimum Size</div>
<div style="font-family:var(--font-en); font-size:17px; color:var(--brown); margin-top:10px; line-height:1.5;"><span style="font-weight:700;">Digital</span> 120px wide · <span style="font-weight:700;">Print</span> 30mm wide</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:6px;">디지털 120px / 인쇄 30mm 이상</div>
</div>
<div>
<div class="uppercase-label">Color Mode</div>
<div style="font-family:var(--font-en); font-size:17px; color:var(--brown); margin-top:10px; line-height:1.5;">D Brown <span class="mono" style="color:var(--gray); font-size:13px;">#231815</span> on light · White on dark</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:6px;">밝은 배경 D Brown, 어두운 배경 White</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">10 / 28</span>
</div>
</section>
<!-- ============================================================
11 — LOGO VARIATIONS
============================================================ -->
<section data-screen-label="11 Logo Variations" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">02 · Logo &amp; Logomark</span>
<span class="s-section-id">Variations</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">02.2</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Variations · 변형</span>
</div>
<h2 class="content-title" style="font-size:56px;">Five lockups, one system</h2>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:36px;">
<div style="background:var(--beige); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:110px; object-fit:contain;">
</div>
<div style="border-top:1px solid rgba(35,24,21,0.15); padding-top:16px;">
<div class="uppercase-label" style="color:var(--brown);">01 · Horizontal — Primary</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">가로형 · 기본 사용</div>
</div>
</div>
<div style="background:var(--beige); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
<img src="assets/logos/square.png" style="max-width:60%; max-height:160px; object-fit:contain;">
</div>
<div style="border-top:1px solid rgba(35,24,21,0.15); padding-top:16px;">
<div class="uppercase-label" style="color:var(--brown);">02 · Square — Avatar</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">정방형 · 프로필, 파비콘</div>
</div>
</div>
<div style="background:var(--beige); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
<img src="assets/logos/motto.png" style="max-width:70%; max-height:160px; object-fit:contain;">
</div>
<div style="border-top:1px solid rgba(35,24,21,0.15); padding-top:16px;">
<div class="uppercase-label" style="color:var(--brown);">03 · Motto Mark</div>
<div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">모토 마크 · 'think forward'</div>
</div>
</div>
<div style="background:var(--brown); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
<img src="assets/logos/horizontal_white.png" style="max-width:90%; max-height:110px; object-fit:contain;">
</div>
<div style="border-top:1px solid rgba(229,225,210,0.2); padding-top:16px;">
<div class="uppercase-label" style="color:var(--warm-gray);">04 · Horizontal — Reverse</div>
<div style="font-family:var(--font-kr); font-size:14px; color:var(--warm-gray); margin-top:4px; opacity:0.7;">가로형 · 반전 (어두운 배경)</div>
</div>
</div>
<div style="background:var(--brown); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1;">
<img src="assets/logos/vertical_white.png" style="max-width:55%; max-height:180px; object-fit:contain;">
</div>
<div style="border-top:1px solid rgba(229,225,210,0.2); padding-top:16px;">
<div class="uppercase-label" style="color:var(--warm-gray);">05 · Vertical — Reverse</div>
<div style="font-family:var(--font-kr); font-size:14px; color:var(--warm-gray); margin-top:4px; opacity:0.7;">세로형 · 반전</div>
</div>
</div>
<div style="background:var(--gray-bg); padding:32px 28px; height:260px; display:flex; flex-direction:column; justify-content:space-between; border:1px dashed var(--gray-light);">
<div style="display:flex; align-items:center; justify-content:center; flex-grow:1; flex-direction:column; gap:12px;">
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Selection Logic</div>
<div style="font-family:var(--font-en); font-size:15px; color:var(--brown); line-height:1.55; text-align:center; max-width:240px;">Use 01 by default. 02 for circular crops. 03 for stamp / seal. 04–05 only on dark backgrounds.</div>
</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">11 / 28</span>
</div>
</section>
<!-- ============================================================
12 — LOGO DON'TS
============================================================ -->
<section data-screen-label="12 Logo Donts" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">02 · Logo &amp; Logomark</span>
<span class="s-section-id">Logo Don'ts</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">02.3</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Logo Don'ts · 사용 금지</span>
</div>
<h2 class="content-title" style="font-size:56px;">What never to do</h2>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px;">
<div>
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; transform:scaleX(1.5);">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't stretch or distort</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">로고를 변형하지 마세요</div></div></div>
</div>
<div>
<div style="height:200px; background:linear-gradient(135deg,#CEDC00,#0075C0); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:50%; object-fit:contain;">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#fff" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't place on gradients</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">그라데이션 위에 두지 마세요</div></div></div>
</div>
<div>
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; filter:drop-shadow(0 8px 16px rgba(0,0,0,0.5));">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't add shadows or glows</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">그림자나 효과를 더하지 마세요</div></div></div>
</div>
<div>
<div style="height:200px; background:var(--olive); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal_white.png" style="max-width:90%; max-height:60%; object-fit:contain;">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#231815" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't use low-contrast pairings</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">대비가 낮은 배경을 피하세요</div></div></div>
</div>
<div>
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; filter:hue-rotate(120deg);">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't recolor</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">색을 변경하지 마세요</div></div></div>
</div>
<div>
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; transform:rotate(-12deg);">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't rotate</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">회전시키지 마세요</div></div></div>
</div>
<div>
<div style="height:200px; background:var(--gray-bg); border:1px solid var(--gray-light); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;">
<div style="display:flex; flex-direction:column; align-items:center; gap:4px;"><img src="assets/logos/horizontal.png" style="max-width:90%; max-height:50px; object-fit:contain;"><div style="font-family:var(--font-en); font-size:14px; font-style:italic; color:var(--brown);">— Analysis, Treatment &amp; Growth —</div></div>
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't lock to tagline</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">태그라인과 잠금 조합 금지</div></div></div>
</div>
<div>
<div style="height:200px; background:url('assets/logos/horizontal.png') center/cover; position:relative; overflow:hidden;">
<img src="assets/logos/horizontal.png" style="max-width:90%; max-height:60%; object-fit:contain; position:absolute; inset:20% 5%;">
<svg style="position:absolute; inset:0; width:100%; height:100%;" viewBox="0 0 100 100" preserveAspectRatio="none"><line x1="0" y1="0" x2="100" y2="100" stroke="#0075C0" stroke-width="1" /></svg>
</div>
<div style="display:flex; gap:10px; align-items:baseline; margin-top:16px;"><span style="color:var(--blue); font-family:var(--font-en); font-size:18px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:15px; font-weight:500; color:var(--brown);">Don't place on busy imagery</div><div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:2px;">복잡한 이미지 위에 두지 마세요</div></div></div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">12 / 28</span>
</div>
</section>
<!-- ============================================================
13 — SECTION DIVIDER: 03 Color
============================================================ -->
<section data-screen-label="13 Section 03 Color" class="s-section">
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Chapter 03</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
<div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">03</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Three</div>
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Color<br>System</h1>
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">컬러 시스템</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">D Beige가 표지를 안내하고, D Brown이 본문을 지탱하며, D Olive는 절제된 액센트로 자리한다.</div>
</div>
</div>
<!-- decorative palette stripe -->
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:0; width:340px;">
<div style="height:90px; background:var(--beige);"></div>
<div style="height:90px; background:var(--brown);"></div>
<div style="height:90px; background:var(--olive);"></div>
<div style="height:90px; background:var(--blue);"></div>
<div style="height:90px; background:var(--gray);"></div>
<div style="height:90px; background:var(--gray-light);"></div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">13 / 28</span>
</div>
</section>
<!-- ============================================================
14 — COLOR PALETTE
============================================================ -->
<section data-screen-label="14 Color Palette" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">03 · Color System</span>
<span class="s-section-id">Full Palette</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">03.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Brand Palette · 브랜드 팔레트</span>
</div>
<h2 class="content-title" style="font-size:56px;">Eight colors, clear roles</h2>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:64px;">
<div>
<div style="background:var(--beige); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--gray-light);">
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Primary BG · New</div>
<div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Beige</div>
<div class="mono" style="font-size:13px; color:var(--brown); opacity:0.6; margin-top:4px;">#E5E1D2 · R229 G225 B210</div>
</div>
</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Cover &amp; section dividers. The mature successor to 2022's D Olive.</div>
</div>
<div>
<div style="background:var(--brown); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--beige); font-weight:500; text-transform:uppercase;">Dark BG · Text</div>
<div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); letter-spacing:-0.01em;">D Brown</div>
<div class="mono" style="font-size:13px; color:var(--warm-gray); margin-top:4px;">#231815 · R35 G24 B21</div>
</div>
</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Primary text. Closing slides &amp; emphasis backgrounds. Replaces pure black.</div>
</div>
<div>
<div style="background:var(--olive); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Accent — Use Sparingly</div>
<div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Olive</div>
<div class="mono" style="font-size:13px; color:var(--brown); opacity:0.7; margin-top:4px;">#CEDC00 · R206 G220 B0</div>
</div>
</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Highlight chips, callouts, three-dot motif. Never as full background.</div>
</div>
<div>
<div style="background:var(--blue); height:240px; padding:24px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.18em; color:var(--white); font-weight:500; text-transform:uppercase;">Digital · Data Viz</div>
<div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--white); letter-spacing:-0.01em;">D Blue</div>
<div class="mono" style="font-size:13px; color:var(--white); opacity:0.7; margin-top:4px;">#0075C0 · R0 G117 B192</div>
</div>
</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:12px; line-height:1.5;">Diagrams, data visualisations, hyperlinks. Web only.</div>
</div>
<div>
<div style="background:var(--gray); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--white); font-weight:500; text-transform:uppercase;">Secondary Text</div>
<div>
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--white); letter-spacing:-0.01em;">D Gray</div>
<div class="mono" style="font-size:12px; color:var(--white); opacity:0.7; margin-top:2px;">#727171</div>
</div>
</div>
</div>
<div>
<div style="background:var(--gray-light); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Border · 0.5pt</div>
<div>
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Border</div>
<div class="mono" style="font-size:12px; color:var(--brown); opacity:0.6; margin-top:2px;">#BFBFBF</div>
</div>
</div>
</div>
<div>
<div style="background:var(--gray-bg); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--gray-light);">
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Card · Surface</div>
<div>
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">D Light Gray</div>
<div class="mono" style="font-size:12px; color:var(--gray); margin-top:2px;">#F2F2F2</div>
</div>
</div>
</div>
<div>
<div style="background:var(--warm-gray); height:160px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;">
<div style="font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Header Bar · Top-left</div>
<div>
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">Warm Gray</div>
<div class="mono" style="font-size:12px; color:var(--brown); opacity:0.6; margin-top:2px;">#C8C4B8</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">14 / 28</span>
</div>
</section>
<!-- ============================================================
15 — COLOR USAGE EVOLUTION
============================================================ -->
<section data-screen-label="15 Color Usage" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">03 · Color System</span>
<span class="s-section-id">Usage Evolution</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">03.2</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Usage Evolution · 사용 변천</span>
</div>
<h2 class="content-title" style="font-size:56px;">2022 → 2025 → 2026</h2>
<div class="content-subtitle">올리브가 지배하던 2022에서, 베이지가 표지를 안내하는 2025를 거쳐 — 컨설팅 등급의 성숙한 톤이 2026의 기준이다.</div>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; margin-top:64px;">
<div>
<div class="uppercase-label" style="color:var(--gray); margin-bottom:16px;">2022 · Olive-led</div>
<div style="display:flex; flex-direction:column; gap:8px;">
<div style="height:100px; background:var(--olive); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:14px; font-weight:500;">Cover BG · #CEDC00</div>
<div style="height:60px; background:var(--white); border:1px solid var(--gray-light); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:13px;">Content BG · #FFFFFF</div>
</div>
<div style="font-family:var(--font-en); font-size:13px; color:var(--gray); line-height:1.5; margin-top:16px;">Bright, energetic — but reads as tech startup rather than consultancy.</div>
</div>
<div>
<div class="uppercase-label" style="color:var(--brown); margin-bottom:16px;">2025 · Beige-led</div>
<div style="display:flex; flex-direction:column; gap:8px;">
<div style="height:100px; background:var(--beige); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:14px; font-weight:500;">Cover / Section · #E5E1D2</div>
<div style="height:60px; background:var(--white); border:1px solid var(--gray-light); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:13px;">Content BG · #FFFFFF</div>
</div>
<div style="font-family:var(--font-en); font-size:13px; color:var(--gray); line-height:1.5; margin-top:16px;">Warm, mature, consultancy-grade. Olive demoted to accent only.</div>
</div>
<div style="background:var(--gray-bg); margin:0 -16px; padding:0 16px;">
<div class="uppercase-label" style="color:var(--olive); margin-top:16px; margin-bottom:16px;">2026 · Refined</div>
<div style="display:flex; flex-direction:column; gap:8px;">
<div style="height:100px; background:var(--beige); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:14px; font-weight:500; position:relative;">Cover / Section · #E5E1D2<span style="position:absolute; right:20px; width:8px; height:8px; border-radius:50%; background:var(--olive);"></span></div>
<div style="height:50px; background:var(--white); border:1px solid var(--gray-light); display:flex; align-items:center; padding:0 20px; color:var(--brown); font-family:var(--font-en); font-size:13px;">Content BG · #FFFFFF</div>
<div style="height:50px; background:var(--brown); display:flex; align-items:center; padding:0 20px; color:var(--beige); font-family:var(--font-en); font-size:13px;">Closing · #231815</div>
</div>
<div style="font-family:var(--font-en); font-size:13px; color:var(--brown); line-height:1.5; margin-top:16px; padding-bottom:16px;">Three-tier system. D Brown joins as the dark anchor for emphasis &amp; closing slides.</div>
</div>
</div>
<div style="margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:48px;">
<div style="border-left:3px solid var(--olive); padding-left:24px;">
<div class="uppercase-label">Demoted</div>
<div style="font-family:var(--font-en); font-size:20px; font-weight:500; color:var(--brown); margin-top:8px;">D Olive (#CEDC00) — from dominant background to accent-only: circles, highlights, Venn overlaps.</div>
</div>
<div style="border-left:3px solid var(--blue); padding-left:24px;">
<div class="uppercase-label">Reserved</div>
<div style="font-family:var(--font-en); font-size:20px; font-weight:500; color:var(--brown); margin-top:8px;">D Blue (#0075C0) — digital/web accent only: diagrams, data visualisations.</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">15 / 28</span>
</div>
</section>
<!-- ============================================================
16 — SECTION DIVIDER: 04 Typography
============================================================ -->
<section data-screen-label="16 Section 04 Typography" class="s-section">
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Chapter 04</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
<div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">04</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Four</div>
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Typography</h1>
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">타이포그래피</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">DM Sans for English clarity. Apple SD Gothic Neo for Korean warmth. Two families, calibrated to read as one voice.</div>
</div>
</div>
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); text-align:right;">
<div style="font-family:var(--font-en); font-size:180px; font-weight:700; color:var(--brown); line-height:1; letter-spacing:-0.04em;">Aa</div>
<div style="font-family:var(--font-kr); font-size:180px; font-weight:800; color:var(--brown); line-height:1; letter-spacing:-0.04em; margin-top:16px;">가</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">16 / 28</span>
</div>
</section>
<!-- ============================================================
17 — TYPEFACE: DM SANS + APPLE SD GOTHIC NEO
============================================================ -->
<section data-screen-label="17 Typefaces" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">04 · Typography</span>
<span class="s-section-id">Typefaces</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">04.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Typefaces · 사용 서체</span>
</div>
<h2 class="content-title" style="font-size:56px;">Two families, one voice</h2>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:64px;">
<!-- DM SANS -->
<div>
<div style="display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
<div>
<div class="uppercase-label" style="color:var(--olive);">English · 영문</div>
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:8px;">DM Sans</div>
</div>
<div class="mono" style="font-size:13px; color:var(--gray); text-align:right;">SIL Open Font License<br>Latin · Geometric Sans</div>
</div>
<div style="display:flex; flex-direction:column; gap:20px; margin-top:32px;">
<div>
<div class="uppercase-label" style="margin-bottom:8px;">Regular · 400</div>
<div style="font-family:var(--font-en); font-weight:400; font-size:36px; color:var(--brown); line-height:1.2; letter-spacing:-0.01em;">D.intelligence — Analysis, Treatment &amp; Growth</div>
</div>
<div>
<div class="uppercase-label" style="margin-bottom:8px;">Medium · 500</div>
<div style="font-family:var(--font-en); font-weight:500; font-size:36px; color:var(--brown); line-height:1.2; letter-spacing:-0.01em;">Objective-oriented Measurement</div>
</div>
<div>
<div class="uppercase-label" style="margin-bottom:8px;">Bold · 700</div>
<div style="font-family:var(--font-en); font-weight:700; font-size:36px; color:var(--brown); line-height:1.2; letter-spacing:-0.015em;">Think Forward.</div>
</div>
<div style="margin-top:8px;">
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.1em;">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &amp; @ # ? !</div>
</div>
</div>
</div>
<!-- APPLE SD GOTHIC NEO -->
<div>
<div style="display:flex; justify-content:space-between; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
<div>
<div class="uppercase-label" style="color:var(--olive);">Korean · 한글</div>
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:8px;">Apple SD Gothic Neo</div>
</div>
<div class="mono" style="font-size:13px; color:var(--gray); text-align:right;">macOS / iOS<br>한글 산세리프</div>
</div>
<div style="display:flex; flex-direction:column; gap:20px; margin-top:32px;">
<div>
<div class="uppercase-label" style="margin-bottom:8px;">Light · 300</div>
<div style="font-family:var(--font-kr); font-weight:300; font-size:36px; color:var(--brown); line-height:1.3; letter-spacing:-0.02em;">디인텔리전스 데이터 기반 의사결정</div>
</div>
<div>
<div class="uppercase-label" style="margin-bottom:8px;">Medium · 500</div>
<div style="font-family:var(--font-kr); font-weight:500; font-size:36px; color:var(--brown); line-height:1.3; letter-spacing:-0.02em;">진단으로 시작하여 성장으로 잇다</div>
</div>
<div>
<div class="uppercase-label" style="margin-bottom:8px;">Bold · 700</div>
<div style="font-family:var(--font-kr); font-weight:700; font-size:36px; color:var(--brown); line-height:1.3; letter-spacing:-0.025em;">성과중심의 데이터 기반 마케팅 과학자</div>
</div>
<div style="margin-top:8px;">
<div style="font-family:var(--font-kr); font-size:13px; color:var(--gray); letter-spacing:0.06em;">가 나 다 라 마 바 사 아 자 차 카 타 파 하 · ㄱ ㄴ ㄷ ㄹ ㅁ ㅂ ㅅ ㅇ · 0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">17 / 28</span>
</div>
</section>
<!-- ============================================================
18 — TYPE SCALE
============================================================ -->
<section data-screen-label="18 Type Scale" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">04 · Typography</span>
<span class="s-section-id">Type Scale</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">04.2</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Type Scale · 타입 스케일</span>
</div>
<h2 class="content-title" style="font-size:56px;">Hierarchy at a glance</h2>
<div style="margin-top:48px; border-top:2px solid var(--brown);">
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--gray-light); font-family:var(--font-en); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gray); font-weight:500;">
<div>Element</div><div>Size</div><div>Weight</div><div>Color</div><div>Sample</div>
</div>
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Display Title</div><div class="content-kr" style="font-size:13px; color:var(--gray);">섹션 디바이더</div></div>
<div class="mono" style="font-size:14px; color:var(--brown);">54–112pt</div>
<div class="mono" style="font-size:14px; color:var(--brown);">700–800</div>
<div class="mono" style="font-size:14px; color:var(--brown);">D Brown</div>
<div style="font-family:var(--font-en); font-size:54px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">Think Forward.</div>
</div>
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Slide Title</div><div class="content-kr" style="font-size:13px; color:var(--gray);">슬라이드 제목</div></div>
<div class="mono" style="font-size:14px; color:var(--brown);">28–44pt</div>
<div class="mono" style="font-size:14px; color:var(--brown);">700</div>
<div class="mono" style="font-size:14px; color:var(--brown);">D Brown</div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown); letter-spacing:-0.015em;">Diagnose. Prescribe. Grow.</div>
</div>
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Subtitle · Caption</div><div class="content-kr" style="font-size:13px; color:var(--gray);">부제 · 캡션</div></div>
<div class="mono" style="font-size:14px; color:var(--brown);">14–18pt</div>
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
<div class="mono" style="font-size:14px; color:var(--brown);">D Gray</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:400; color:var(--gray); line-height:1.5;">Marketing science for measurable growth.</div>
</div>
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Body Text</div><div class="content-kr" style="font-size:13px; color:var(--gray);">본문</div></div>
<div class="mono" style="font-size:14px; color:var(--brown);">11–14pt</div>
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
<div class="mono" style="font-size:14px; color:var(--brown);">D Brown</div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:400; color:var(--brown); line-height:1.55;">현재 구조상 가장 큰 병목은 전환 추적 이벤트의 부재입니다. 채널별 CAC 구조를 재설계하여 3개월 내 비효율 매체비 15–20% 절감 가능성을 진단합니다.</div>
</div>
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:1px solid var(--gray-light); align-items:center;">
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Footnote · Page</div><div class="content-kr" style="font-size:13px; color:var(--gray);">각주 · 페이지</div></div>
<div class="mono" style="font-size:14px; color:var(--brown);">8–13pt</div>
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
<div class="mono" style="font-size:14px; color:var(--brown);">D Gray</div>
<div style="font-family:var(--font-en); font-size:13px; font-weight:400; color:var(--gray); letter-spacing:0.06em;">— Analysis, Treatment &amp; Growth — · 12 / 28</div>
</div>
<div style="display:grid; grid-template-columns:280px 80px 100px 140px 1fr; gap:24px; padding:20px 0; border-bottom:2px solid var(--brown); align-items:center;">
<div><div style="font-family:var(--font-en); font-size:16px; font-weight:500; color:var(--brown);">Header Bar</div><div class="content-kr" style="font-size:13px; color:var(--gray);">헤더 바</div></div>
<div class="mono" style="font-size:14px; color:var(--brown);">10–14pt</div>
<div class="mono" style="font-size:14px; color:var(--brown);">400</div>
<div class="mono" style="font-size:14px; color:var(--brown);">Warm Gray</div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:400; color:var(--warm-gray); letter-spacing:0.08em; text-transform:uppercase;">D.intelligence Design System 2026</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">18 / 28</span>
</div>
</section>
<!-- ============================================================
19 — LAYOUT MOTIFS
============================================================ -->
<section data-screen-label="19 Layout Motifs" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">05 · Layout &amp; Motifs</span>
<span class="s-section-id">Visual Language</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">05.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Layout Motifs · 레이아웃 모티프</span>
</div>
<h2 class="content-title" style="font-size:56px;">Three quiet motifs</h2>
<div class="content-subtitle">조용한 세 가지 장치가 모든 슬라이드의 리듬을 만든다. 화려한 그래픽 대신 — 선 하나, 점 셋, 캡션 한 줄.</div>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:32px; margin-top:64px;">
<!-- Motif 01 -->
<div>
<div style="background:var(--beige); height:380px; padding:48px; position:relative;">
<div style="position:absolute; left:48px; top:48px; bottom:48px; width:1px; background:var(--warm-gray);"></div>
<div style="padding-left:36px; height:100%; display:flex; flex-direction:column; justify-content:center;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">03</div>
<div style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray); margin-top:16px;">Chapter Three</div>
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1; margin-top:24px;">Section<br>Title.</div>
<div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:16px; opacity:0.7;">섹션 타이틀</div>
</div>
</div>
<div style="margin-top:20px;">
<div class="uppercase-label" style="color:var(--brown);">Motif 01 · Vertical Line Accent</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px; line-height:1.55;">Thin 1px line in Warm Gray on the left of every section divider. Height varies with title.</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">섹션 디바이더 왼쪽 1px 수직선</div>
</div>
</div>
<!-- Motif 02 -->
<div>
<div style="background:var(--white); border:1px solid var(--gray-light); height:380px; padding:48px; position:relative;">
<div style="position:absolute; top:36px; right:36px; display:flex; gap:8px;">
<i style="width:8px; height:8px; border-radius:50%; background:var(--olive); display:block;"></i>
<i style="width:8px; height:8px; border-radius:50%; background:var(--olive); display:block;"></i>
<i style="width:8px; height:8px; border-radius:50%; background:var(--olive); display:block;"></i>
</div>
<div style="height:100%; display:flex; flex-direction:column; justify-content:center;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">DATA</div>
<div style="font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1; margin-top:8px;">INTELLIGENCE</div>
<div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:16px; opacity:0.7;">표지 / 강조 슬라이드</div>
</div>
</div>
<div style="margin-top:20px;">
<div class="uppercase-label" style="color:var(--brown);">Motif 02 · Three-Dot Marker</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px; line-height:1.55;">Three small dots (•&nbsp;•&nbsp;•) in the upper-right corner of cover and featured slides.</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">표지·중요 슬라이드 우상단 세 점</div>
</div>
</div>
<!-- Motif 03 -->
<div>
<div style="background:var(--white); border:1px solid var(--gray-light); height:380px; padding:48px; position:relative; display:flex; flex-direction:column; justify-content:space-between;">
<div>
<div class="uppercase-label" style="color:var(--brown);">Content Area</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:500; color:var(--brown); letter-spacing:-0.01em; margin-top:16px; line-height:1.3;">Analysis,<br>Treatment<br>&amp; Growth.</div>
</div>
<div style="display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-en); font-size:11px; color:var(--gray); letter-spacing:0.08em; padding-top:16px; border-top:0.5px solid var(--gray-light);">
<span style="font-style:italic;">— Analysis, Treatment &amp; Growth —</span>
<span style="font-weight:500;">12 / 28</span>
</div>
</div>
<div style="margin-top:20px;">
<div class="uppercase-label" style="color:var(--brown);">Motif 03 · Footer Convention</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px; line-height:1.55;">'Analysis, Treatment &amp; Growth' tagline + page number on every content slide.</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">본문 슬라이드 푸터에 태그라인 + 페이지</div>
</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">19 / 28</span>
</div>
</section>
<!-- ============================================================
20 — GRID + SLIDE TEMPLATES
============================================================ -->
<section data-screen-label="20 Templates" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">06 · Slide Templates</span>
<span class="s-section-id">Four Templates</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">06.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Slide Templates · 슬라이드 템플릿</span>
</div>
<h2 class="content-title" style="font-size:56px;">Cover · Section · Content · Closing</h2>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:24px; margin-top:64px;">
<!-- COVER -->
<div>
<div style="aspect-ratio:16/9; background:var(--beige); position:relative; padding:18px; box-shadow:0 1px 0 var(--gray-light); border:1px solid var(--gray-light);">
<div style="position:absolute; top:14px; right:18px; display:flex; gap:3px;"><i style="width:4px; height:4px; border-radius:50%; background:var(--olive); display:block;"></i><i style="width:4px; height:4px; border-radius:50%; background:var(--olive); display:block;"></i><i style="width:4px; height:4px; border-radius:50%; background:var(--olive); display:block;"></i></div>
<div style="position:absolute; left:18px; top:50%; transform:translateY(-50%);">
<div style="font-family:var(--font-en); font-size:6px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-bottom:6px;">— A,T &amp; G —</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em;">D.</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em;">intelligence</div>
</div>
<div style="position:absolute; right:18px; top:50%; transform:translateY(-50%); text-align:right;">
<div style="font-family:var(--font-en); font-size:6px; letter-spacing:0.2em; color:var(--gray);">DESIGN SYSTEM</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:700; color:var(--brown);">2026</div>
</div>
</div>
<div style="margin-top:16px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 01</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Cover</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">표지 · D Beige BG · 세 점 모티프</div>
</div>
</div>
<!-- SECTION -->
<div>
<div style="aspect-ratio:16/9; background:var(--beige); position:relative; padding:18px; border:1px solid var(--gray-light);">
<div style="position:absolute; left:18px; top:50%; transform:translateY(-50%); display:flex; gap:10px;">
<div style="width:0.5px; background:var(--warm-gray); align-self:stretch; min-height:60px;"></div>
<div>
<div class="mono" style="font-size:5px; color:var(--olive); letter-spacing:0.2em;">02</div>
<div style="font-family:var(--font-en); font-size:5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gray); margin-top:4px;">CHAPTER TWO</div>
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em; margin-top:8px;">Section</div>
<div style="font-family:var(--font-en); font-size:24px; font-weight:700; color:var(--brown); line-height:0.95; letter-spacing:-0.02em;">Title.</div>
</div>
</div>
</div>
<div style="margin-top:16px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 02</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Section Divider</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">섹션 디바이더 · 수직선 액센트</div>
</div>
</div>
<!-- CONTENT -->
<div>
<div style="aspect-ratio:16/9; background:var(--white); position:relative; padding:18px; border:1px solid var(--gray-light);">
<div style="display:flex; justify-content:space-between; font-family:var(--font-en); font-size:5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--warm-gray);"><span>D.intelligence DS 2026</span><span>Chapter 03</span></div>
<div style="margin-top:18px;">
<div style="font-family:var(--font-en); font-size:14px; font-weight:700; color:var(--brown); letter-spacing:-0.01em;">Content Slide Title.</div>
<div style="font-family:var(--font-en); font-size:6px; color:var(--gray); margin-top:6px; line-height:1.5;">Body text — DM Sans &amp; Apple SD Gothic Neo. Keep body 11–14pt for readability with generous whitespace.</div>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px;">
<div style="aspect-ratio:1; background:var(--gray-bg); border:1px solid var(--gray-light);"></div>
<div style="aspect-ratio:1; background:var(--gray-bg); border:1px solid var(--gray-light);"></div>
</div>
</div>
<div style="position:absolute; bottom:14px; left:18px; right:18px; display:flex; justify-content:space-between; font-family:var(--font-en); font-size:5px; color:var(--gray); padding-top:4px; border-top:0.5px solid var(--gray-light);"><span style="font-style:italic;">— A, T &amp; G —</span><span>12 / 28</span></div>
</div>
<div style="margin-top:16px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 03</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Content</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">본문 · 흰 배경 · 헤더+푸터</div>
</div>
</div>
<!-- CLOSING -->
<div>
<div style="aspect-ratio:16/9; background:var(--brown); position:relative; padding:18px; border:1px solid var(--brown);">
<div style="position:absolute; left:18px; top:50%; transform:translateY(-50%);">
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); line-height:0.95; letter-spacing:-0.02em;">Thank</div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); line-height:0.95; letter-spacing:-0.02em;">You.</div>
<div style="font-family:var(--font-en); font-size:7px; font-style:italic; color:var(--olive); margin-top:10px;">— Think Forward —</div>
</div>
<div style="position:absolute; right:18px; bottom:18px; text-align:right;">
<div style="font-family:var(--font-en); font-size:5px; color:var(--warm-gray); line-height:1.5;">W. dintelligence.co.kr<br>E. info@dintelligence.co.kr</div>
</div>
</div>
<div style="margin-top:16px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">TEMPLATE 04</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; color:var(--brown); margin-top:6px;">Closing</div>
<div class="content-kr" style="font-size:13px; color:var(--gray); margin-top:4px;">클로징 · D Brown BG · 연락처</div>
</div>
</div>
</div>
<div style="margin-top:48px; padding:28px 36px; background:var(--gray-bg); display:flex; gap:48px; align-items:center;">
<div class="uppercase-label" style="white-space:nowrap;">Grid</div>
<div style="font-family:var(--font-en); font-size:15px; color:var(--brown); line-height:1.55;"><strong style="font-weight:700;">12-column · 96px outer margin · 24px gutter.</strong>&nbsp; 상단 헤더 56px · 하단 푸터 56px · 본문 시작 220px · 본문 끝 -140px.</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">20 / 28</span>
</div>
</section>
<!-- ============================================================
21 — SECTION DIVIDER: 07 Service Architecture
============================================================ -->
<section data-screen-label="21 Section 07 Service" class="s-section">
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Chapter 07</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
<div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">07</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Seven</div>
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Service<br>Architecture</h1>
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">서비스 아키텍처</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">3-Phase × 17 Modules × 4 Categories. v1.3 Brand Guide 기준으로 시각 체계화된 서비스 아키텍처</div>
</div>
</div>
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; font-family:var(--font-en); font-size:42px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">
<div>Analysis<span style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-left:14px; font-weight:500;">진단 · A1–A6</span></div>
<div style="color:var(--gray); font-size:32px;">↓</div>
<div>Treatment<span style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-left:14px; font-weight:500;">처방 · T1–T7</span></div>
<div style="color:var(--gray); font-size:32px;">↓</div>
<div>Growth<span style="font-family:var(--font-kr); font-size:18px; color:var(--gray); margin-left:14px; font-weight:500;">성장 · G1–G4</span></div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">21 / 28</span>
</div>
</section>
<!-- ============================================================
22 — 3-PHASE OVERVIEW
============================================================ -->
<section data-screen-label="22 3-Phase Overview" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">07 · Service Architecture</span>
<span class="s-section-id">3-Phase Framework</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">07.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">3-Phase Framework · 3단계 프레임워크</span>
</div>
<h2 class="content-title" style="font-size:56px;">Diagnose · Prescribe · Grow</h2>
<div class="content-subtitle">고객의 디지털 성장 단계에 맞춘 3-Phase 프레임워크 — 진단으로 시작해, 실행으로 처방하고, 장기적 파트너십으로 성장을 잇는다.</div>
<!-- Phase row -->
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; margin-top:64px;">
<div style="background:var(--beige); padding:36px 32px; min-height:420px; display:flex; flex-direction:column; gap:20px; position:relative;">
<div style="display:flex; justify-content:space-between; align-items:baseline;">
<span class="phase-badge"><span class="num">01</span>Phase One</span>
<div class="mono" style="font-size:11px; color:var(--brown); letter-spacing:0.18em; font-weight:500;">A1 — A6</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">Analysis</div>
<div class="content-kr" style="font-size:24px; font-weight:500; color:var(--brown); margin-top:8px;">진단</div>
</div>
<div style="font-family:var(--font-en); font-size:15px; line-height:1.55; color:var(--brown); opacity:0.75;">현재 상태를 정확하게 진단하고 데이터 근거를 확보한다.</div>
<div style="margin-top:auto; padding-top:20px; border-top:1px solid rgba(35,24,21,0.15);">
<div class="uppercase-label" style="color:var(--brown);">6 Modules</div>
<div style="font-family:var(--font-en); font-size:13px; color:var(--brown); line-height:1.5; margin-top:8px;">비즈니스·브랜드 · 고객 분석 · 웹/앱 · 디지털 마케팅 · 퍼포먼스 · 운영·관리</div>
</div>
</div>
<div style="background:var(--brown); padding:36px 32px; min-height:420px; display:flex; flex-direction:column; gap:20px; position:relative; color:var(--beige);">
<div style="display:flex; justify-content:space-between; align-items:baseline;">
<span class="phase-badge" style="color:var(--beige);"><span class="num" style="background:var(--olive); color:var(--brown);">02</span>Phase Two</span>
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">T1 — T7</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--beige); letter-spacing:-0.02em; line-height:1;">Treatment</div>
<div class="content-kr" style="font-size:24px; font-weight:500; color:var(--beige); margin-top:8px;">처방</div>
</div>
<div style="font-family:var(--font-en); font-size:15px; line-height:1.55; color:var(--warm-gray);">진단 결과를 기반으로 구체적 개선·최적화 설계·실행으로 연결한다.</div>
<div style="margin-top:auto; padding-top:20px; border-top:1px solid rgba(229,225,210,0.2);">
<div class="uppercase-label" style="color:var(--warm-gray);">7 Modules · incl. signature</div>
<div style="font-family:var(--font-en); font-size:13px; color:var(--beige); line-height:1.5; margin-top:8px; opacity:0.85;">스토리텔링 · 접점 경험 · 자산 통합 · 콘텐츠 · 광고·전환 · <strong style="color:var(--olive); font-weight:700;">Brand Visibility (T6)</strong> · 자동화</div>
</div>
</div>
<div style="background:var(--white); border:1px solid var(--brown); padding:36px 32px; min-height:420px; display:flex; flex-direction:column; gap:20px; position:relative;">
<div style="display:flex; justify-content:space-between; align-items:baseline;">
<span class="phase-badge"><span class="num">03</span>Phase Three</span>
<div class="mono" style="font-size:11px; color:var(--brown); letter-spacing:0.18em; font-weight:500;">G1 — G4</div>
</div>
<div>
<div style="font-family:var(--font-en); font-size:48px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; line-height:1;">Growth</div>
<div class="content-kr" style="font-size:24px; font-weight:500; color:var(--brown); margin-top:8px;">성장</div>
</div>
<div style="font-family:var(--font-en); font-size:15px; line-height:1.55; color:var(--gray);">지속적 성장을 위한 장기 파트너십과 성과 관리.</div>
<div style="margin-top:auto; padding-top:20px; border-top:1px solid var(--gray-light);">
<div class="uppercase-label" style="color:var(--brown);">4 Modules</div>
<div style="font-family:var(--font-en); font-size:13px; color:var(--brown); line-height:1.5; margin-top:8px;">퍼포먼스 마케팅 · 콘텐츠 대행 · 모니터링·이슈관리 · 연간 계약·운영</div>
</div>
</div>
</div>
<!-- Categories tag row -->
<div style="margin-top:48px; padding:24px 32px; background:var(--gray-bg); display:flex; gap:32px; align-items:center; flex-wrap:wrap;">
<div class="uppercase-label" style="white-space:nowrap;">Cross-cutting tags</div>
<div style="display:flex; gap:14px; flex-wrap:wrap;">
<span class="tag di">DI · Data Intelligence</span>
<span class="tag md">MD · Measurement Design</span>
<span class="tag mpo">MPO · Marketing Perf. Opt.</span>
<span class="tag bvt">BVT · Brand Visibility Treatment</span>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">22 / 28</span>
</div>
</section>
<!-- ============================================================
23 — 17 MODULES GRID
============================================================ -->
<section data-screen-label="23 17 Modules" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">07 · Service Architecture</span>
<span class="s-section-id">17 Modules · Service Map v2.0</span>
</div>
<div style="position:absolute; top:180px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">07.2</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Service Map · 서비스 맵</span>
</div>
<h2 class="content-title" style="font-size:44px;">Seventeen modules across three phases</h2>
<!-- ANALYSIS Row -->
<div style="margin-top:36px; display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start; padding-bottom:24px; border-bottom:1px solid var(--gray-light);">
<div style="padding-top:8px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PHASE 01</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:6px;">Analysis</div>
<div class="content-kr" style="font-size:14px; color:var(--gray);">진단</div>
</div>
<div style="display:grid; grid-template-columns:repeat(6,1fr); gap:12px;">
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A1</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">비즈니스·브랜드 진단</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A2</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">고객·소비자 분석</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A3</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">데이터 분석 — 웹·앱</div><div style="margin-top:10px; display:flex; gap:4px; flex-wrap:wrap;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A4</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">디지털 마케팅 진단</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A5</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">퍼포먼스 마케팅 진단</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">A6</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">운영·관리 진단</div><div style="margin-top:10px;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span></div></div>
</div>
</div>
<!-- TREATMENT Row -->
<div style="margin-top:20px; display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start; padding-bottom:24px; border-bottom:1px solid var(--gray-light);">
<div style="padding-top:8px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PHASE 02</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:6px;">Treatment</div>
<div class="content-kr" style="font-size:14px; color:var(--gray);">처방</div>
</div>
<div style="display:grid; grid-template-columns:repeat(7,1fr); gap:12px;">
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T1</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">브랜드 스토리텔링 &amp; 가이드</div><div style="margin-top:10px;"><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T2</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">고객 접점 경험 최적화</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T3</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">디지털 자산 통합관리</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T4</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">콘텐츠 마케팅</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T5</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">광고·전환 최적화</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
<div style="border:1px solid var(--brown); background:var(--brown); padding:14px; min-height:120px; position:relative;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T6 ★</div><div style="font-family:var(--font-en); font-size:12px; font-weight:700; color:var(--beige); margin-top:6px; line-height:1.35;">Brand Visibility Treatment</div><div style="margin-top:10px;"><span style="display:inline-block; font-family:var(--font-en); font-size:9px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:2px 6px; background:var(--olive); color:var(--brown);">BVT · SIGNATURE</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">T7</div><div style="font-family:var(--font-en); font-size:12px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">운영 시스템·자동화</div><div style="margin-top:10px;"><span class="tag di" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">DI</span></div></div>
</div>
</div>
<!-- GROWTH Row -->
<div style="margin-top:20px; display:grid; grid-template-columns:160px 1fr; gap:36px; align-items:start;">
<div style="padding-top:8px;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.2em; font-weight:500;">PHASE 03</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:700; color:var(--brown); letter-spacing:-0.02em; margin-top:6px;">Growth</div>
<div class="content-kr" style="font-size:14px; color:var(--gray);">성장</div>
</div>
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:calc((100% / 7 * 4) + (12px * 3));">
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G1</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">퍼포먼스 마케팅</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G2</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">콘텐츠 마케팅 대행</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G3</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">모니터링·이슈관리</div><div style="margin-top:10px; display:flex; gap:4px;"><span class="tag md" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MD</span><span class="tag bvt" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">BVT</span></div></div>
<div style="border:1px solid var(--gray-light); padding:14px; min-height:120px;"><div class="mono" style="font-size:12px; color:var(--olive); font-weight:500; letter-spacing:0.15em;">G4</div><div style="font-family:var(--font-en); font-size:13px; font-weight:500; color:var(--brown); margin-top:6px; line-height:1.35;">연간 계약·운영</div><div style="margin-top:10px;"><span class="tag mpo" style="font-size:9px; padding:2px 6px; letter-spacing:0.1em;">MPO</span></div></div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">23 / 28</span>
</div>
</section>
<!-- ============================================================
24 — SECTION DIVIDER: 08 Voice & Messaging
============================================================ -->
<section data-screen-label="24 Section 08 Voice" class="s-section">
<div class="s-header">
<span class="s-sys">D.intelligence Design System 2026</span>
<span class="s-section-id">Chapter 08</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%); display:flex; gap:48px;">
<div style="width:1px; background:var(--gray); align-self:stretch;"></div>
<div>
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); margin-bottom:20px;">08</div>
<div style="font-family:var(--font-en); font-size:18px; font-weight:500; letter-spacing:0.32em; text-transform:uppercase; color:var(--gray); margin-bottom:36px;">Chapter Eight</div>
<h1 style="font-family:var(--font-en); font-size:144px; font-weight:700; line-height:0.95; letter-spacing:-0.03em; color:var(--brown); margin:0;">Voice &amp;<br>Messaging</h1>
<div style="font-family:var(--font-kr); font-size:32px; font-weight:500; color:var(--brown); margin-top:32px; letter-spacing:-0.01em;">목소리와 메시지</div>
<div style="font-family:var(--font-en); font-size:18px; line-height:1.6; color:var(--gray); margin-top:32px; max-width:560px;">Professional · Science-driven · Practice-oriented · Outcome-focused · Calm but confident.<br>조심스럽게 듣고, 담백하게 말한다.</div>
</div>
</div>
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); max-width:520px; padding:36px; background:var(--white); border:1px solid var(--brown);">
<div class="uppercase-label" style="color:var(--olive); margin-bottom:14px;">Standard Structure · 표준 구조</div>
<div style="font-family:var(--font-en); font-size:28px; font-weight:500; color:var(--brown); letter-spacing:-0.01em; line-height:1.3;">Problem Diagnosis → Data Evidence → Solution → Expected Growth Impact.</div>
<div class="content-kr" style="font-size:16px; color:var(--gray); margin-top:14px; line-height:1.5;">문제 진단 → 데이터 근거 → 해결 방안 → 예상 성과</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">24 / 28</span>
</div>
</section>
<!-- ============================================================
25 — VOICE EXAMPLES (GOOD vs BAD)
============================================================ -->
<section data-screen-label="25 Voice Examples" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">08 · Voice &amp; Messaging</span>
<span class="s-section-id">Voice Examples</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">08.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Voice Examples · 좋은 표현 / 나쁜 표현</span>
</div>
<h2 class="content-title" style="font-size:56px;">How we sound, how we don't</h2>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px;">
<!-- GOOD column -->
<div>
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown);">DO</span>
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 좋은 표현</span>
</div>
<div style="display:flex; flex-direction:column; gap:16px; margin-top:20px;">
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">진단형</div>
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"현재 구조상 가장 큰 병목은 전환 추적 이벤트의 부재입니다."</div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">데이터형</div>
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"현 데이터 품질을 전제로 하면, 15–20% 범위의 CAC 절감 가능성이 있습니다."</div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">전략형</div>
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"단기적으로는 GA4 이벤트 재설계, 중기적으로는 대시보드 체계 구축이 타당합니다."</div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">제안형</div>
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"이 경우 핵심 지표는 채널별 전환율과 ROAS로 보아야 합니다."</div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0;">
<div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500; padding-top:4px;">CTA형</div>
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown);">"채널별 CAC 구조를 재설계하여 3개월 내 비효율 매체비 15–20% 절감 가능성을 진단합니다."</div>
</div>
</div>
</div>
<!-- BAD column -->
<div>
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--blue);">DON'T</span>
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 나쁜 표현</span>
</div>
<div style="display:flex; flex-direction:column; gap:16px; margin-top:20px;">
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">과장</div>
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"마케팅 효율을 획기적으로 높여드립니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 근거 없는 과장</div></div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">보장</div>
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"반드시 매출이 올라갑니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 성과 보장 표현 금지</div></div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">모호</div>
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"요즘은 다 이렇게 합니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 근거 없는 일반화</div></div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--gray-light);">
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">과시</div>
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"저희만의 독보적인 AI 기술이 있습니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 기술 과시</div></div>
</div>
<div style="display:grid; grid-template-columns:80px 1fr; gap:18px; padding:14px 0;">
<div class="mono" style="font-size:11px; color:var(--gray); letter-spacing:0.18em; font-weight:500; padding-top:4px;">권위</div>
<div><div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--gray); text-decoration:line-through; text-decoration-color:var(--blue);">"국내 Top 기업들이 사용합니다."</div><div style="font-family:var(--font-en); font-size:12px; color:var(--gray); margin-top:4px; font-style:italic;">→ 레퍼런스 의존 권위주의</div></div>
</div>
</div>
</div>
</div>
<!-- Category messages strip -->
<div style="margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;">
<div style="padding:20px; background:var(--gray-bg); border-left:3px solid var(--blue);"><div class="mono" style="font-size:11px; color:var(--blue); letter-spacing:0.18em; font-weight:500;">DI</div><div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:8px; line-height:1.45;">"흩어진 데이터를 하나의 의사결정 체계로 연결합니다"</div></div>
<div style="padding:20px; background:var(--gray-bg); border-left:3px solid var(--brown);"><div class="mono" style="font-size:11px; color:var(--brown); letter-spacing:0.18em; font-weight:500;">MD</div><div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:8px; line-height:1.45;">"무엇을 측정하고, 성과 기준을 어떻게 설정하며, 어떤 데이터 소스를 활용할지 안내합니다"</div></div>
<div style="padding:20px; background:var(--gray-bg); border-left:3px solid var(--olive);"><div class="mono" style="font-size:11px; color:#8a9400; letter-spacing:0.18em; font-weight:500;">MPO</div><div class="content-kr" style="font-size:14px; color:var(--brown); margin-top:8px; line-height:1.45;">"실행 가능한 최적화로, 데이터가 말하는 성과를 실현합니다"</div></div>
<div style="padding:20px; background:var(--brown); color:var(--beige);"><div class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">BVT</div><div class="content-kr" style="font-size:14px; color:var(--beige); margin-top:8px; line-height:1.45;">"브랜드가 어떻게 드러나고 이해되는지를 최적화합니다"</div></div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">25 / 28</span>
</div>
</section>
<!-- ============================================================
26 — COMPONENT LIBRARY
============================================================ -->
<section data-screen-label="26 Components" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">09 · Components</span>
<span class="s-section-id">Component Library</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">09.1</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Component Library · UI 키트</span>
</div>
<h2 class="content-title" style="font-size:56px;">Reusable parts for reports &amp; proposals</h2>
<div style="display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px; margin-top:48px;">
<!-- BUTTONS + TAGS -->
<div>
<div class="uppercase-label" style="margin-bottom:16px;">Buttons · 버튼</div>
<div style="display:flex; flex-direction:column; gap:14px;">
<button style="font-family:var(--font-en); font-size:16px; font-weight:500; padding:14px 28px; background:var(--brown); color:var(--beige); border:none; letter-spacing:0.02em; cursor:pointer; width:fit-content;">Schedule a Diagnosis →</button>
<button style="font-family:var(--font-en); font-size:16px; font-weight:500; padding:13px 27px; background:var(--white); color:var(--brown); border:1px solid var(--brown); letter-spacing:0.02em; cursor:pointer; width:fit-content;">View Service Map</button>
<button style="font-family:var(--font-en); font-size:14px; font-weight:500; padding:8px 16px; background:var(--olive); color:var(--brown); border:none; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; width:fit-content;">New</button>
<button style="font-family:var(--font-en); font-size:14px; font-weight:500; padding:8px 0; background:transparent; color:var(--brown); border:none; border-bottom:1px solid var(--brown); cursor:pointer; width:fit-content;">Read full report →</button>
</div>
<div class="uppercase-label" style="margin:32px 0 16px;">Tags · 태그</div>
<div style="display:flex; gap:8px; flex-wrap:wrap;">
<span class="tag di">DI</span>
<span class="tag md">MD</span>
<span class="tag mpo">MPO</span>
<span class="tag bvt">BVT</span>
<span class="tag" style="border-color:var(--gray); color:var(--gray);">DRAFT</span>
</div>
</div>
<!-- KPI CARD -->
<div>
<div class="uppercase-label" style="margin-bottom:16px;">KPI Card · 지표 카드</div>
<div style="background:var(--white); border:1px solid var(--gray-light); padding:24px;">
<div style="display:flex; justify-content:space-between; align-items:baseline;">
<div class="uppercase-label" style="color:var(--brown);">CAC · channel avg</div>
<span class="tag mpo" style="font-size:10px; padding:2px 6px;">MPO</span>
</div>
<div style="font-family:var(--font-en); font-size:64px; font-weight:700; color:var(--brown); letter-spacing:-0.03em; margin-top:8px; line-height:1;">−18%</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--gray); margin-top:8px;">3-month projected · vs Q1 baseline</div>
<div style="margin-top:16px; height:6px; background:var(--gray-bg); position:relative;">
<div style="position:absolute; left:0; top:0; bottom:0; width:62%; background:var(--olive);"></div>
</div>
<div style="display:flex; justify-content:space-between; font-family:var(--font-en); font-size:11px; color:var(--gray); margin-top:6px; letter-spacing:0.06em;"><span>0%</span><span>−18% target</span><span>−30%</span></div>
</div>
<div class="uppercase-label" style="margin:32px 0 16px;">Callout · 강조 박스</div>
<div style="border-left:3px solid var(--olive); padding:14px 0 14px 20px; background:var(--gray-bg); padding-right:20px;">
<div style="font-family:var(--font-en); font-size:11px; letter-spacing:0.18em; color:var(--brown); font-weight:500; text-transform:uppercase;">Key Finding</div>
<div class="content-kr" style="font-size:15px; line-height:1.55; color:var(--brown); margin-top:6px; font-weight:500;">전환 추적 이벤트의 부재가 가장 큰 병목</div>
</div>
</div>
<!-- DATA TABLE + CHART -->
<div>
<div class="uppercase-label" style="margin-bottom:16px;">Data Table · 데이터 표</div>
<div style="border:1px solid var(--gray-light);">
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; background:var(--gray-bg); font-family:var(--font-en); font-size:11px; letter-spacing:0.14em; font-weight:500; color:var(--brown); text-transform:uppercase;">
<div>Channel</div><div style="text-align:right;">ROAS</div><div style="text-align:right;">Δ MoM</div>
</div>
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Google Ads</div><div style="text-align:right;" class="mono">3.42×</div><div style="text-align:right; color:var(--olive); font-weight:500;" class="mono">+0.18</div></div>
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Meta Ads</div><div style="text-align:right;" class="mono">2.17×</div><div style="text-align:right; color:var(--blue); font-weight:500;" class="mono">−0.04</div></div>
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Naver SA</div><div style="text-align:right;" class="mono">4.81×</div><div style="text-align:right; color:var(--olive); font-weight:500;" class="mono">+0.32</div></div>
<div style="display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:10px 14px; border-top:0.5px solid var(--gray-light); font-family:var(--font-en); font-size:14px; color:var(--brown);"><div>Organic Search</div><div style="text-align:right;" class="mono">8.07×</div><div style="text-align:right; color:var(--olive); font-weight:500;" class="mono">+1.12</div></div>
</div>
<div class="uppercase-label" style="margin:32px 0 16px;">Bar Chart · 차트</div>
<div style="border:1px solid var(--gray-light); padding:16px;">
<div style="display:flex; align-items:end; gap:12px; height:120px;">
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:42%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Jan</div></div>
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:55%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Feb</div></div>
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:48%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Mar</div></div>
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:72%; background:var(--brown);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--gray);">Apr</div></div>
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:88%; background:var(--olive);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--brown); font-weight:500;">May</div></div>
<div style="flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;"><div style="width:100%; height:95%; background:var(--olive);"></div><div style="font-family:var(--font-en); font-size:10px; color:var(--brown); font-weight:500;">Jun</div></div>
</div>
</div>
</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">26 / 28</span>
</div>
</section>
<!-- ============================================================
27 — DOS & DON'TS
============================================================ -->
<section data-screen-label="27 Dos Donts" class="s-cover" style="background:var(--white);">
<div class="s-header">
<span class="s-sys">09 · Components</span>
<span class="s-section-id">Do's &amp; Don'ts</span>
</div>
<div style="position:absolute; top:200px; left:96px; right:96px;">
<div style="display:flex; gap:20px; align-items:baseline; margin-bottom:8px;">
<span class="mono" style="color:var(--olive); font-size:14px; letter-spacing:0.18em; font-weight:500;">09.2</span>
<span style="font-family:var(--font-en); font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gray);">Do's &amp; Don'ts</span>
</div>
<h2 class="content-title" style="font-size:56px;">The short list</h2>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px;">
<div>
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--brown);">DO</span>
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 권장 사항</span>
</div>
<div style="display:flex; flex-direction:column; gap:14px; margin-top:24px;">
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Beige</strong> for cover &amp; section dividers</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">표지·섹션 디바이더에 D Beige 사용</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Maintain <strong style="font-weight:700;">vertical line accent</strong> on section slides</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">섹션 슬라이드에 수직선 액센트 유지</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Keep <strong style="font-weight:700;">body text 11–14pt</strong> for readability</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">본문은 11–14pt로 가독성 확보</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Brown (#231815)</strong> as primary text colour</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">기본 텍스트는 D Brown</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Include <strong style="font-weight:700;">'Analysis, Treatment &amp; Growth'</strong> footer</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">본문 슬라이드 푸터에 태그라인 유지</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Olive sparingly</strong> as accent only</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">D Olive는 액센트로만 절제하여 사용</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--olive); font-family:var(--font-en); font-size:20px; font-weight:700;">✓</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Maintain <strong style="font-weight:700;">generous whitespace</strong> (96px outer margin)</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">충분한 여백 유지 (외측 96px 이상)</div></div></div>
</div>
</div>
<div>
<div style="display:flex; gap:14px; align-items:baseline; padding-bottom:16px; border-bottom:2px solid var(--brown);">
<span style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--blue);">DON'T</span>
<span class="content-kr" style="font-size:18px; color:var(--brown); font-weight:500;">— 금지 사항</span>
</div>
<div style="display:flex; flex-direction:column; gap:14px; margin-top:24px;">
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">D Olive as full slide background</strong> (2022 style)</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">올리브를 전면 배경으로 쓰지 마세요</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Mix D Blue &amp; D Olive as <strong style="font-weight:700;">equal-weight colours</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">블루와 올리브를 동등 비중으로 섞지 마세요</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">text smaller than 8pt</strong> anywhere</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">8pt 미만의 텍스트는 사용 금지</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Place <strong style="font-weight:700;">logo on every content slide</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">모든 본문 슬라이드에 로고를 넣지 마세요</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use <strong style="font-weight:700;">gradients or drop shadows</strong> on text</div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">텍스트에 그라데이션·그림자 금지</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Stretch or distort the <strong style="font-weight:700;">logomark</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">로고마크를 늘리거나 변형 금지</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown);">Use colours <strong style="font-weight:700;">outside the defined palette</strong></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:2px;">정의된 팔레트 외 색상 사용 금지</div></div></div>
<div style="display:flex; gap:14px; align-items:baseline;"><span style="color:var(--blue); font-family:var(--font-en); font-size:20px; font-weight:700;">✗</span><div><div style="font-family:var(--font-en); font-size:17px; color:var(--brown); line-height:1.4;"><strong style="font-weight:700;">Direct, mechanical translation</strong> of English terms<br><span class="mono" style="font-size:12px; color:var(--gray); letter-spacing:0.06em;">audit → <s>감사</s> ✗ · 진단 ✓ &nbsp; framework → <s>뼈대</s> ✗ · 프레임워크 ✓</span></div><div class="content-kr" style="font-size:14px; color:var(--gray); margin-top:4px;">외국어를 사전적으로 직역하지 마세요 (v1.3 §10)</div></div></div>
</div>
</div>
</div>
<div style="margin-top:40px; padding:24px 32px; background:var(--brown); color:var(--beige); display:flex; gap:24px; align-items:center;">
<div class="uppercase-label" style="color:var(--olive); white-space:nowrap;">2022 → 2026</div>
<div style="font-family:var(--font-en); font-size:15px; line-height:1.5; color:var(--beige); flex:1;">D Olive (#CEDC00)는 지배 배경에서 액센트로 강등되었다. 새로운 따뜻한 D Beige (#E5E1D2)가 더 성숙한 컨설팅 등급의 미감을 전한다.</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page">27 / 28</span>
</div>
</section>
<!-- ============================================================
28 — CLOSING / THANK YOU
============================================================ -->
<section data-screen-label="28 Thank You" class="s-dark">
<div class="s-three-dots olive"><i></i><i></i><i></i></div>
<div class="s-header">
<span class="s-sys" style="color:var(--warm-gray);">D.intelligence Design System 2026</span>
<span class="s-section-id" style="color:var(--olive);">Closing · 28 / 28</span>
</div>
<div style="position:absolute; left:96px; top:50%; transform:translateY(-50%);">
<div style="font-family:var(--font-en); font-size:14px; font-weight:500; letter-spacing:0.32em; color:var(--olive); text-transform:uppercase; margin-bottom:24px;">— Think Forward —</div>
<div style="font-family:var(--font-en); font-size:200px; font-weight:700; color:var(--beige); line-height:0.92; letter-spacing:-0.03em;">Thank<br>You</div>
<div style="font-family:var(--font-kr); font-size:28px; font-weight:500; color:var(--warm-gray); margin-top:32px; letter-spacing:-0.01em;">진단의 정확함으로 시작하여,<br>성장의 구조를 함께 만듭니다.</div>
</div>
<div style="position:absolute; right:96px; top:50%; transform:translateY(-50%); width:480px;">
<div style="padding-bottom:24px; border-bottom:1px solid rgba(229,225,210,0.2);">
<div class="uppercase-label" style="color:var(--olive); margin-bottom:12px;">Contact</div>
<div style="font-family:var(--font-en); font-size:32px; font-weight:700; color:var(--beige); letter-spacing:-0.02em;">(주)디인텔리전스</div>
<div style="font-family:var(--font-en); font-size:14px; color:var(--warm-gray); margin-top:4px; font-style:italic;">D.intelligence Inc.</div>
</div>
<div style="padding:24px 0; border-bottom:1px solid rgba(229,225,210,0.2); display:flex; flex-direction:column; gap:8px;">
<div class="content-kr" style="font-size:15px; color:var(--beige); line-height:1.6;">경기도 성남시 수정구 창업로 43<br>판교글로벌비즈센터 업무동 1층 36호 (13449)</div>
</div>
<div style="padding-top:24px; display:flex; flex-direction:column; gap:12px;">
<div style="display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:baseline;"><span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">T.</span><span style="font-family:var(--font-en); font-size:16px; color:var(--beige);">+82. 70. 5118. 5582</span></div>
<div style="display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:baseline;"><span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">W.</span><span style="font-family:var(--font-en); font-size:16px; color:var(--beige);">dintelligence.co.kr</span></div>
<div style="display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:baseline;"><span class="mono" style="font-size:11px; color:var(--olive); letter-spacing:0.18em; font-weight:500;">E.</span><span style="font-family:var(--font-en); font-size:16px; color:var(--beige);">info@dintelligence.co.kr</span></div>
</div>
<div style="margin-top:48px; padding-top:24px; border-top:1px solid rgba(229,225,210,0.2);">
<div class="mono" style="font-size:11px; color:var(--warm-gray); letter-spacing:0.18em; opacity:0.6;">D.INTELLIGENCE DESIGN SYSTEM · v2026 · INTERNAL</div>
</div>
</div>
<div class="s-footer">
<span class="s-tag" style="color:var(--olive); opacity:1; font-style:italic;">— Analysis, Treatment &amp; Growth —</span>
<span class="s-page" style="color:var(--warm-gray);">END</span>
</div>
</section>
</deck-stage>
<!-- ============================================================
Tweaks panel + remaining slides loaded below
============================================================ -->
<script type="application/json" id="speaker-notes">["","","","","","","","","","","","","","","","","","","","","","","","","","","",""]</script>
<div id="tweaks-root"></div>
<script type="text/babel" src="tweaks-panel.jsx"></script>
<script type="text/babel" src="tweaks-app.jsx"></script>
</body>
</html>