<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>kmanifesto.com — Hero + 랜딩 + 메뉴 적용 가이드</title>
<style>
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,sans-serif;background:#0A0A08;color:#F5F0E8;}
/* 탭 */
.tabs{display:flex;background:#1C1A14;border-bottom:2px solid #B8960C;position:sticky;top:0;z-index:100;}
.tab{padding:14px 22px;font-size:11px;letter-spacing:2px;font-family:monospace;color:#6B6456;cursor:pointer;border:none;background:none;}
.tab.active{background:#B8960C;color:#0A0A08;font-weight:700;}
.tab:hover:not(.active){color:#B8960C;}
.section{display:none;} .section.active{display:block;}
/* ── HERO ── */
.hero-label{text-align:center;padding:12px;background:#1C1A14;font-size:10px;letter-spacing:4px;color:#B8960C;}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
background:#0A0A08;padding:80px 24px 60px;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(184,150,12,0.055) 0%,transparent 68%);
pointer-events:none;}
.badge{font-family:monospace;font-size:10px;letter-spacing:5px;color:#B8960C;
border:1px solid rgba(184,150,12,0.35);padding:6px 18px;margin-bottom:32px;display:inline-block;}
.hero h1{font-family:Georgia,serif;font-size:clamp(26px,4.8vw,54px);font-weight:300;
text-align:center;line-height:1.28;color:#F5F0E8;max-width:780px;letter-spacing:.5px;margin:0 0 22px;}
.hero h1 strong{font-weight:700;color:#D4AF37;}
.hero-sub{font-family:monospace;font-size:12px;color:#6B6456;text-align:center;
letter-spacing:2px;max-width:540px;line-height:2;margin:0 0 10px;}
.hero-divider{width:72px;height:1px;background:rgba(184,150,12,0.45);margin:30px auto;}
.stats{display:flex;gap:52px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;}
.stat{text-align:center;}
.stat-num{font-family:Georgia,serif;font-size:38px;color:#8B1A1A;font-weight:300;line-height:1;}
.stat-label{font-family:monospace;font-size:9px;letter-spacing:3px;color:#6B6456;margin-top:6px;}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.btn-p{background:#B8960C;color:#0A0A08;text-decoration:none;padding:15px 32px;
font-size:13px;font-weight:700;letter-spacing:3px;font-family:Georgia,serif;display:inline-block;}
.btn-s{background:transparent;color:#F5F0E8;text-decoration:none;
border:1px solid rgba(245,240,232,0.28);padding:15px 32px;
font-size:12px;letter-spacing:3px;font-family:monospace;display:inline-block;}
.hero-foot{position:absolute;bottom:22px;left:0;right:0;text-align:center;
font-family:monospace;font-size:9px;letter-spacing:3px;color:#2A2620;}
.scroll-hint{margin-top:40px;font-family:monospace;font-size:9px;letter-spacing:3px;color:#2A2620;
display:flex;flex-direction:column;align-items:center;gap:6px;}
.scroll-hint::after{content:'↓';font-size:16px;color:#B8960C;opacity:.5;}
/* ── 코드/가이드 공통 ── */
.guide{background:#1C1A14;padding:32px 36px;}
.g-title{font-family:monospace;font-size:10px;letter-spacing:4px;color:#B8960C;
margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid rgba(184,150,12,0.2);}
.step{margin-bottom:28px;padding-left:18px;border-left:2px solid rgba(184,150,12,0.3);}
.sn{font-size:9px;letter-spacing:3px;color:#B8960C;font-family:monospace;margin-bottom:5px;}
.st{font-size:15px;color:#F5F0E8;font-weight:600;margin-bottom:8px;}
.sd{font-size:12px;color:#6B6456;line-height:1.85;margin-bottom:10px;}
.sd strong{color:#D4AF37;}
.code{background:#0A0A08;border:1px solid rgba(184,150,12,0.15);padding:16px 18px;
font-family:'Courier New',monospace;font-size:12px;color:#D4AF37;
overflow-x:auto;white-space:pre;line-height:1.75;max-height:340px;overflow-y:auto;}
.copy-row{display:flex;justify-content:flex-end;margin-bottom:6px;}
.copy-btn{background:#B8960C;color:#0A0A08;border:none;padding:5px 14px;
font-size:10px;font-family:monospace;letter-spacing:2px;cursor:pointer;font-weight:700;}
/* 체크리스트 */
.checklist{background:#0A0A08;padding:24px 32px;}
.cl-title{font-family:monospace;font-size:10px;letter-spacing:4px;color:#B8960C;margin-bottom:16px;}
.cl-item{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;padding:10px 14px;
border:1px solid rgba(184,150,12,0.1);}
.cl-check{width:18px;height:18px;border:1px solid rgba(184,150,12,0.4);
background:transparent;cursor:pointer;flex-shrink:0;margin-top:2px;
accent-color:#B8960C;}
.cl-label{font-size:13px;color:#6B6456;font-family:monospace;line-height:1.6;}
.cl-label strong{color:#F5F0E8;}
.cl-warn{background:#2A1A1A;border:1px solid rgba(139,26,26,0.4);padding:10px 14px;
font-family:monospace;font-size:12px;color:#8B1A1A;margin-bottom:10px;}
.cl-ok{background:#1A2A1A;border:1px solid rgba(26,92,58,0.4);padding:10px 14px;
font-family:monospace;font-size:12px;color:#1A5C3A;margin-bottom:10px;}
</style>
</head>
<body>
<div class="tabs">
<button class="tab active" onclick="show('hero')">① 홈 Hero 섹션</button>
<button class="tab" onclick="show('landing')">② /local-election/ 랜딩</button>
<button class="tab" onclick="show('menu')">③ 메뉴 클릭 체크</button>
</div>
<!-- ══════════════════════════════════
① 홈 HERO 섹션
══════════════════════════════════ -->
<div id="s-hero" class="section active">
<div class="hero-label">▼ HERO 섹션 실제 미리보기 — kmanifesto.com 홈페이지</div>
<section class="hero">
<div class="badge">MANIFESTO LABS · AI 공약 분석 · 2026 지방선거</div>
<h1>공약의 <strong>진실</strong>을 묻는다<br>AI가 채점하는 정치의 민낯</h1>
<p class="hero-sub">
VICTORY™ 지수 · 매니페스토랩스 개발 공약평가지수<br>
V·I·C·T·O·R·Y 7항목 · 28점 만점 · 과학적 정량 분석
</p>
<div class="hero-divider"></div>
<div class="stats">
<div class="stat">
<div class="stat-num">10</div>
<div class="stat-label">분석 리포트</div>
</div>
<div class="stat">
<div class="stat-num">3.7</div>
<div class="stat-label">KR 평균 점수</div>
</div>
<div class="stat">
<div class="stat-num">6·3</div>
<div class="stat-label">지방선거 D-86</div>
</div>
</div>
<div class="cta">
<a href="#" class="btn-p">6·3 지방선거 분석 보기 →</a>
<a href="#" class="btn-s">리포트 전체 보기</a>
</div>
<div class="scroll-hint">SCROLL</div>
<div class="hero-foot">MANIFESTO LABS · AIxxALL · kmanifesto.com</div>
</section>
<div class="guide">
<div class="g-title">📋 WORDPRESS 적용 — GeneratePress Elements</div>
<div class="step">
<div class="sn">STEP 01</div>
<div class="st">GeneratePress Elements → 새 Hook 추가</div>
<div class="sd">외모 → GeneratePress → Elements → + 추가<br>
타입: <strong>Block</strong> | 훅: <strong>wp_body_open</strong> 또는 <strong>After Header Hook</strong><br>
표시 조건: <strong>Front Page (홈페이지)</strong><br>
우선순위: 10 (기본값)
</div>
</div>
<div class="step">
<div class="sn">STEP 02</div>
<div class="st">아래 코드 전체를 Elements 편집기에 붙여넣기</div>
<div class="copy-row"><button class="copy-btn" onclick="copyEl('hero-code')">코드 복사</button></div>
<div id="hero-code" class="code"><!-- MANIFESTO LABS HERO — kmanifesto.com -->
<style>
.km-hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
align-items:center;background:#0A0A08;padding:80px 24px 60px;position:relative;overflow:hidden;}
.km-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 70% 55% at 50% 38%,rgba(184,150,12,.055) 0%,transparent 68%);}
.km-badge{font-family:monospace;font-size:10px;letter-spacing:5px;color:#B8960C;
border:1px solid rgba(184,150,12,.35);padding:6px 18px;margin-bottom:32px;display:inline-block;}
.km-h1{font-family:Georgia,serif;font-size:clamp(24px,4.8vw,52px);font-weight:300;
text-align:center;line-height:1.28;color:#F5F0E8;max-width:780px;letter-spacing:.5px;margin:0 0 20px;}
.km-h1 strong{font-weight:700;color:#D4AF37;}
.km-sub{font-family:monospace;font-size:12px;color:#6B6456;text-align:center;
letter-spacing:2px;max-width:540px;line-height:2;margin:0 0 8px;}
.km-divider{width:72px;height:1px;background:rgba(184,150,12,.45);margin:28px auto;}
.km-stats{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;margin-bottom:38px;}
.km-stat{text-align:center;}
.km-num{font-family:Georgia,serif;font-size:36px;color:#8B1A1A;font-weight:300;line-height:1;}
.km-lbl{font-family:monospace;font-size:9px;letter-spacing:3px;color:#6B6456;margin-top:5px;}
.km-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.km-btn-p{background:#B8960C;color:#0A0A08;text-decoration:none;padding:15px 30px;
font-size:13px;font-weight:700;letter-spacing:3px;font-family:Georgia,serif;display:inline-block;}
.km-btn-s{background:transparent;color:#F5F0E8;text-decoration:none;
border:1px solid rgba(245,240,232,.28);padding:15px 30px;
font-size:12px;letter-spacing:3px;font-family:monospace;display:inline-block;}
.km-foot{text-align:center;margin-top:48px;font-family:monospace;
font-size:9px;letter-spacing:3px;color:#2A2620;}
</style>
<section class="km-hero">
<span class="km-badge">MANIFESTO LABS &middot; AI 공약 분석 &middot; 2026 지방선거</span>
<h1 class="km-h1">공약의 <strong>진실</strong>을 묻는다<br>AI가 채점하는 정치의 민낯</h1>
<p class="km-sub">
VICTORY&trade; 지수 &middot; 매니페스토랩스 개발 공약평가지수<br>
V&middot;I&middot;C&middot;T&middot;O&middot;R&middot;Y 7항목 &middot; 28점 만점 &middot; 과학적 정량 분석
</p>
<div class="km-divider"></div>
<div class="km-stats">
<div class="km-stat">
<div class="km-num">10</div>
<div class="km-lbl">분석 리포트</div>
</div>
<div class="km-stat">
<div class="km-num">3.7</div>
<div class="km-lbl">KR 평균 점수</div>
</div>
<div class="km-stat">
<div class="km-num">6&middot;3</div>
<div class="km-lbl">지방선거 D-86</div>
</div>
</div>
<div class="km-cta">
<a href="/local-election/" class="km-btn-p">6&middot;3 지방선거 분석 보기 &rarr;</a>
<a href="/reports/" class="km-btn-s">리포트 전체 보기</a>
</div>
<div class="km-foot">MANIFESTO LABS &middot; AIxxALL &middot; kmanifesto.com</div>
</section></div>
</div>
<div class="step">
<div class="sn">STEP 03</div>
<div class="st">홈페이지가 정적 페이지로 설정되어 있다면</div>
<div class="sd">설정 → 읽기 → "정적 페이지" → 홈페이지로 지정된 페이지의 편집기에 직접 커스텀 HTML 블록으로 붙여넣기 가능.<br>단, GeneratePress 방식이 레이아웃 충돌 없이 가장 안전합니다.</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════
② /local-election/ 랜딩
══════════════════════════════════ -->
<div id="s-landing" class="section">
<div class="guide" style="background:#0F0F0D;">
<div class="g-title">② 63_landing.html → WordPress /local-election/ 적용</div>
<div class="step">
<div class="sn">방법 A (추천) — 커스텀 HTML 블록</div>
<div class="st">가장 빠르고 안전한 방법</div>
<div class="sd">
1. WordPress → 페이지 → "6·3 지방선거 특집" 페이지 편집 (없으면 새 페이지 생성)<br>
2. 슬러그: <strong>local-election</strong><br>
3. 블록 편집기에서 우측 상단 ⋮ → <strong>코드 편집기 모드</strong> 전환<br>
4. 63_landing.html 파일을 텍스트 에디터로 열기<br>
5. <body>~</body> 사이 내용 전체 복사 → WordPress 코드 편집기에 붙여넣기<br>
6. 게시
</div>
<div class="code">/* 페이지 설정 체크리스트 */
제목: 2026 지방선거 공약 분석 특집
슬러그: local-election ← URL: kmanifesto.com/local-election/
페이지 속성 → 부모: 없음
템플릿: 전체 너비(Full Width) 또는 Blank Canvas (사이드바 없음)
/* GeneratePress: 해당 페이지 헤더/푸터 표시 설정 (선택) */
GeneratePress → 레이아웃 → 특정 조건 → local-election 페이지:
- 헤더 표시 여부 선택
- 사이드바 없음 확인</div>
</div>
<div class="step">
<div class="sn">방법 B — 전체 HTML 임베드</div>
<div class="st">63_landing.html을 완전한 독립 페이지로 사용</div>
<div class="sd">
외모 → 테마 파일 편집기(또는 FTP) → <strong>page-local-election.php</strong> 생성
</div>
<div class="code"><?php
/* Template Name: Local Election Landing */
/* 사이드바·헤더 없이 전체 HTML 직접 출력 */
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<?php wp_head(); ?>
<!-- 63_landing.html 의 <head> 내용 (style 포함) -->
</head>
<body>
<?php
/* 63_landing.html 의 <body> 내용 전체 */
?>
<?php wp_footer(); ?>
</body>
</html></div>
</div>
<div class="step">
<div class="sn">STEP FINAL</div>
<div class="st">Top Bar 배너 링크 확인</div>
<div class="sd">GeneratePress → Elements → Top Bar Hook 편집</div>
<div class="code"><!-- href 값이 /local-election/ 인지 확인 -->
<a href="/local-election/" style="...">
★ 2026 지방선거 특집 — 공약 분석 리포트 전체 보기 →
</a>
/* # 또는 다른 URL이면 /local-election/ 으로 수정 후 저장 */</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════
③ 메뉴 클릭 최종 확인
══════════════════════════════════ -->
<div id="s-menu" class="section">
<div class="checklist">
<div class="cl-title">③ 메뉴 클릭 최종 확인 — 체크리스트</div>
<div class="cl-warn">⚠ 클릭 차단 원인 CSS — 추가 CSS에서 반드시 확인 후 제거</div>
<div style="margin-bottom:20px;">
<div class="code" style="background:#1A0A0A;border-color:rgba(139,26,26,0.3);color:#c0695a;">/* ❌ 아래 중 하나라도 있으면 메뉴 클릭 차단됨 */
body::after { content:''; position:fixed; inset:0; z-index:9999; ... }
body { cursor: none; }
* { pointer-events: none; }
.site-header, nav { pointer-events: none; }
backdrop-filter: blur() → 오버레이와 함께 쓰면 위험
/* ✅ 안전한 body::before 사용법 (노이즈 텍스처만) */
body::before {
content: '';
position: fixed; inset: 0;
background-image: url(...noise svg...);
pointer-events: none; ← 반드시 pointer-events: none !
z-index: 9999;
opacity: 0.5;
}</div>
</div>
<div class="cl-warn">⚠ WordPress 관리자 → 외모 → 추가 CSS 에서 확인</div>
<div style="margin-bottom:16px;font-family:monospace;font-size:11px;color:#B8960C;letter-spacing:2px;">
✦ 메뉴별 URL 최종 확인 (외모 → 메뉴)
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label"><strong>연구개발</strong> → /research/ (또는 해당 페이지 슬러그)</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label"><strong>리포트</strong> → /reports/ 또는 /local-election/</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label"><strong>서비스</strong> → /services/</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label"><strong>소개</strong> → /about/</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label"><strong>상담 신청</strong> → /contact/</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label">시크릿 창 열기 → 각 메뉴 항목 직접 클릭 테스트</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label">모바일(375px) 햄버거 메뉴 → 열기 → 각 항목 클릭 테스트</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label">Top Bar 배너 클릭 → /local-election/ 이동 확인</div>
</div>
<div class="cl-item">
<input type="checkbox" class="cl-check">
<div class="cl-label">푸터 링크 (개인정보처리방침 / 이용약관 / 소개) 클릭 확인</div>
</div>
<div class="cl-ok" style="margin-top:20px;">
✓ 모든 항목 체크 완료 시 → 구글 서치 콘솔 색인 요청 진행 가능
</div>
</div>
</div>
<script>
function show(name) {
document.querySelectorAll('.section').forEach(e => e.classList.remove('active'));
document.querySelectorAll('.tab').forEach(e => e.classList.remove('active'));
document.getElementById('s-'+name).classList.add('active');
event.target.classList.add('active');
}
function copyEl(id) {
const el = document.getElementById(id);
navigator.clipboard.writeText(el.innerText).then(() => {
const btn = event.target;
btn.textContent = '복사됨 ✓';
setTimeout(() => btn.textContent = '코드 복사', 2000);
});
}
</script>
</body>
</html>