feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.
This commit is contained in:
Yun Chan 2026-10-06 16:55:50 +09:00
parent 88c11682b1
commit 8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions

View file

@ -3,89 +3,128 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f3f0e8">
<meta name="description" content="서울 한남 생활권의 집을 예산, 면적, 입주, 주차 조건으로 비교하고 계약 전 공인중개사가 사실을 다시 확인하는 주거 비교 안내입니다.">
<meta property="og:title" content="한남자리 — 내 기준에 맞는 집부터">
<meta property="og:description" content="조건을 정리하고 후보를 비교한 뒤 공인중개사가 확인하는 개인 주거 브리핑 데스크">
<meta name="theme-color" content="#eceff1">
<meta name="description" content="서울 한남 생활권의 예시 매물 3곳을 예산, 전용면적, 입주 희망일, 주차 조건으로 비교하고, 계약 전에 공인중개사가 권리와 현장을 다시 확인하는 주거 비교 안내입니다.">
<meta property="og:title" content="한남자리 — 한남 생활권 매물 3곳을 내 조건으로 비교">
<meta property="og:description" content="예산, 면적, 입주, 주차 조건으로 한남 생활권의 예시 매물을 비교하고, 계약 전 공인중개사가 다시 확인하는 주거 비교 안내">
<meta property="og:image" content="./og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="한남자리 — 내 기준에 맞는 집부터">
<meta name="twitter:description" content="서울의 집을 내 조건으로 대조하는 개인 주거 브리핑 데스크">
<meta name="twitter:title" content="한남자리 — 한남 생활권 매물 3곳을 내 조건으로 비교">
<meta name="twitter:description" content="내 조건으로 한남 생활권의 예시 매물을 비교하는 주거 비교 안내">
<meta name="twitter:image" content="./og.png">
<title>한남자리 — 내 기준에 맞는 집부터</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%23121311'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial' font-size='19' font-weight='700' fill='%23f3f0e8'%3EHJ%3C/text%3E%3C/svg%3E">
<link rel="preload" href="./assets/hannam-evening-1600.webp" as="image" type="image/webp" media="(min-width: 961px)">
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all">
<link rel="stylesheet" href="./styles/landing.css?v=20260912all">
<script src="./scripts/landing.js?v=20260830e" defer></script>
<title>한남자리 — 한남 생활권 매물 3곳을 내 조건으로 비교</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='8' fill='%232d7639'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23ffffff'%3EHJ%3C/text%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;700&display=swap">
<link rel="stylesheet" href="./styles/tokens.css?v=20261006">
<link rel="stylesheet" href="./styles/landing.css?v=20261006">
<script src="./scripts/landing.js?v=20261006" defer></script>
</head>
<body>
<a class="skip-link" href="#main-content">본문 바로가기</a>
<div class="demo-strip" role="region" aria-label="예시 자료 안내">안내 · 예시 자료 · 입력 내용은 전송되지 않으며 상담은 접수되지 않습니다</div>
<div class="demo-strip" role="region" aria-label="예시 자료 안내">예시 자료입니다. 상담은 접수되지 않습니다.</div>
<header class="site-header" data-site-header>
<a class="brand-link" href="#top" aria-label="한남자리 처음으로">
<span class="brand-mark" aria-hidden="true">HJ</span>
<span class="brand-lockup"><strong class="brand">한남자리</strong><small>개인 주거 브리핑 데스크</small></span>
<span class="brand-lockup"><strong class="brand">한남자리</strong><small>한남 생활권 주거 비교</small></span>
</a>
<button class="menu-button" type="button" aria-label="메뉴 열기" aria-expanded="false" aria-controls="site-nav" data-menu-button>
<i aria-hidden="true"></i><i aria-hidden="true"></i>
</button>
<nav class="site-nav" id="site-nav" aria-label="주요 메뉴" data-site-nav>
<a href="#briefing">맞춤 브리핑</a>
<a href="#homes">세 집 비교</a>
<a href="#dossier">선택 서류철</a>
<a href="#handoff">중개사 인계</a>
<a href="#briefing">조건 브리핑</a>
<a href="#homes">다섯 조건 비교</a>
<a href="#dossier">서류철</a>
<a href="#handoff">상담 준비</a>
</nav>
</header>
<main id="main-content">
<section class="brief-hero" id="top" aria-labelledby="hero-title">
<div class="masthead">
<p class="eyebrow">한남 생활권 맞춤 중개</p>
<h1 id="hero-title">한남에서, 내 기준에 맞는 집부터.</h1>
<p class="hero-copy">예산과 면적, 입주 계획을 먼저 정리합니다. 입력한 기준을 후보와 대조하고, 계약 전에는 공인중개사가 다시 확인합니다.</p>
<div class="hero-actions">
<button class="button button-primary" type="button" data-focus-condition>내 조건 분석하기</button>
<a class="text-link" href="#homes">매물 보기 <span aria-hidden="true">→</span></a>
</div>
<section class="listing-hero" id="top" aria-labelledby="hero-title">
<div class="hero-head">
<h1 id="hero-title">한남 생활권 매물 3곳을 내 조건으로 비교합니다</h1>
<dl class="masthead-note">
<div><dt>대조 기준</dt><dd>가격 · 면적 · 입주 · 주차</dd></div>
<div><dt>비교 기준</dt><dd>가격, 면적, 입주, 주차</dd></div>
<div><dt>마지막 판단</dt><dd>공인중개사 확인</dd></div>
</dl>
</div>
<figure class="hero-scene" data-image-frame>
<figcaption>연출 이미지</figcaption>
<picture>
<source media="(max-width: 640px)" srcset="./assets/hannam-evening-mobile.webp">
<source media="(max-width: 960px)" srcset="./assets/hannam-evening-960.webp">
<img src="./assets/hannam-evening-1600.webp" width="1600" height="1000" alt="서울 언덕 생활권의 현대 주거를 표현한 이미지" data-fallback-image>
</picture>
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="주거 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
</figure>
<form class="brief-dock" data-condition-form aria-describedby="condition-note">
<div class="dock-heading"><span>내 기준</span><strong>먼저 다섯 가지만 정리해 보세요.</strong></div>
<form class="brief-dock" data-condition-form aria-label="비교 조건" aria-describedby="condition-note">
<label class="dock-field"><span>거래 형태</span><select name="trade" data-trade-input><option value="sale">매매</option><option value="jeonse">전세</option><option value="monthly">월세</option></select></label>
<label class="dock-field"><span>예산 상한</span><span class="input-suffix"><input name="budget" type="number" min="1" max="100" step="1" value="40" inputmode="decimal"><i>억 원</i></span></label>
<label class="dock-field"><span>최소 전용면적</span><span class="input-suffix"><input name="minArea" type="number" min="30" max="300" step="1" value="110" inputmode="decimal"><i>㎡</i></span></label>
<label class="dock-field"><span>입주 희망일</span><input name="moveIn" type="date" value="2026-12-20"></label>
<label class="dock-field"><span>필요 주차</span><select name="parking"><option value="0">상관없음</option><option value="1">1대 이상</option><option value="2" selected>2대 이상</option><option value="3">3대 이상</option></select></label>
<div class="dock-actions"><button class="button button-primary" type="submit">분석 결과 보기</button><button class="save-button" type="button" data-save-condition>조건 임시 보관</button></div>
<p class="condition-note" id="condition-note">입력은 전송되지 않으며, 임시 보관을 선택하면 지금 사용 중인 기기에만 남습니다.</p>
<p class="condition-note" id="condition-note">입력은 전송되지 않습니다. 임시 보관을 누르면 지금 쓰는 기기에만 남습니다.</p>
</form>
<div class="listing-grid" data-candidate-rail role="group" aria-label="비교할 집 선택">
<div class="candidate-option is-selected" data-listing="home-1">
<button type="button" class="candidate-button" aria-label="정원형 연립주택 선택" aria-pressed="true" data-select-listing="home-1"></button>
<div class="candidate-content" aria-hidden="true">
<div class="candidate-caption">
<span class="candidate-index">01</span>
<strong>정원형 연립주택</strong>
<span class="candidate-verdict" data-candidate-verdict hidden></span>
<span class="candidate-facts"><span>매매</span><small>118.42㎡</small><b data-candidate-price>38억 원</b></span>
</div>
<figure data-image-frame>
<figcaption>연출 이미지</figcaption>
<span class="candidate-media"><img src="./assets/hannam-interior-1200.webp" width="1200" height="800" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" fetchpriority="high" data-fallback-image></span>
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="거실 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
</figure>
</div>
</div>
<div class="candidate-option" data-listing="home-2">
<button type="button" class="candidate-button" aria-label="복층형 공동주택 선택" aria-pressed="false" data-select-listing="home-2"></button>
<div class="candidate-content" aria-hidden="true">
<div class="candidate-caption">
<span class="candidate-index">02</span>
<strong>복층형 공동주택</strong>
<span class="candidate-verdict" data-candidate-verdict hidden></span>
<span class="candidate-facts"><span>전세</span><small>142.80㎡</small><b data-candidate-price>22억 원</b></span>
</div>
<figure data-image-frame>
<figcaption>연출 이미지</figcaption>
<span class="candidate-media"><picture>
<source media="(max-width: 640px)" srcset="./assets/hannam-evening-640.webp">
<source media="(max-width: 1100px)" srcset="./assets/hannam-evening-960.webp">
<img src="./assets/hannam-evening-1600.webp" width="1600" height="1000" alt="서울 언덕 생활권의 현대 주거 외관을 표현한 이미지" data-fallback-image>
</picture></span>
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
</figure>
</div>
</div>
<div class="candidate-option" data-listing="home-3">
<button type="button" class="candidate-button" aria-label="테라스형 다세대주택 선택" aria-pressed="false" data-select-listing="home-3"></button>
<div class="candidate-content" aria-hidden="true">
<div class="candidate-caption">
<span class="candidate-index">03</span>
<strong>테라스형 다세대주택</strong>
<span class="candidate-verdict" data-candidate-verdict hidden></span>
<span class="candidate-facts"><span>월세</span><small>140.84㎡</small><b data-candidate-price>보증금 5억 · 월 1,200만</b></span>
</div>
<figure data-image-frame>
<figcaption>연출 이미지</figcaption>
<span class="candidate-media is-crop-window"><img src="./assets/hannam-interior-720.webp" width="720" height="480" alt="큰 창 너머 언덕 동네가 보이는 거실 창가를 표현한 이미지" data-fallback-image></span>
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="창가 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
</figure>
</div>
</div>
</div>
</section>
<section class="briefing-section" id="briefing" aria-labelledby="briefing-title">
<header class="section-heading briefing-heading">
<p class="eyebrow">내 조건 브리핑</p>
<h2 id="briefing-title">맞는 이유와<br>조정할 지점을 나눕니다.</h2>
<p>입력한 기준과 후보 정보를 같은 항목으로 비교합니다.</p>
<header class="section-heading">
<h2 id="briefing-title">입력한 조건과 맞는 점, 조정할 점, 중개사와 확인할 점을 나눕니다.</h2>
<p>위 다섯 칸을 채우고 분석을 누르면 세 집 가운데 조건과 가장 가까운 집을 고르고 이유를 세 묶음으로 적습니다.</p>
</header>
<div class="briefing-sheet" data-analysis-result aria-live="polite" aria-atomic="false">
<header><span>안내용 조건 비교 · 공인중개사 확인 전</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
<header><span>공인중개사 확인 전 안내용 비교</span><strong data-analysis-home>아직 분석하지 않았습니다</strong></header>
<div class="briefing-empty" data-analysis-empty>
<span aria-hidden="true">01</span>
<div><h3>내 조건을 먼저 알려 주세요.</h3><p>분석을 실행하면 세 후보 가운데 조건과 가까운 집을 고르고, 이유를 세 묶음으로 정리합니다.</p></div>
@ -101,8 +140,7 @@
<section class="compare-section" id="homes" aria-labelledby="compare-title">
<header class="section-heading compare-heading">
<div><p class="eyebrow">예시 매물 3곳</p><h2 id="compare-title">서울의 집을<br>한 장씩 대조합니다.</h2></div>
<p>후보를 바꾸면 가운데 장면과 오른쪽 다섯 조건이 함께 바뀝니다.</p>
<div><p class="eyebrow">예시 매물</p><h2 id="compare-title">선택한 집의 다섯 조건을 입력값과 나란히 봅니다.</h2></div>
<div class="unit-switches" role="group" aria-label="표시 단위">
<div role="group" aria-label="면적 단위"><button type="button" aria-pressed="true" data-area-unit="m2">㎡</button><button type="button" aria-pressed="false" data-area-unit="pyeong">평</button></div>
<div role="group" aria-label="가격 표시"><button type="button" aria-pressed="true" data-price-unit="total">총액</button><button type="button" aria-pressed="false" data-price-unit="unit">면적 단가</button></div>
@ -110,16 +148,10 @@
</header>
<div class="compare-desk">
<div class="candidate-rail" data-candidate-rail role="group" aria-label="비교할 집 선택">
<div class="candidate-option is-selected"><button type="button" class="candidate-button" aria-label="정원형 연립주택 선택" aria-pressed="true" data-select-listing="home-1"></button><div class="candidate-content" aria-hidden="true"><span>01</span><strong>정원형 연립주택</strong><small>매매 · 118.42㎡</small></div></div>
<div class="candidate-option"><button type="button" class="candidate-button" aria-label="복층형 공동주택 선택" aria-pressed="false" data-select-listing="home-2"></button><div class="candidate-content" aria-hidden="true"><span>02</span><strong>복층형 공동주택</strong><small>전세 · 142.80㎡</small></div></div>
<div class="candidate-option"><button type="button" class="candidate-button" aria-label="테라스형 다세대주택 선택" aria-pressed="false" data-select-listing="home-3"></button><div class="candidate-content" aria-hidden="true"><span>03</span><strong>테라스형 다세대주택</strong><small>월세 · 140.84㎡</small></div></div>
</div>
<figure class="candidate-scene" data-image-frame>
<figcaption>연출 이미지</figcaption>
<img src="./assets/hannam-interior-1200.webp" width="1200" height="800" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-compare-image data-fallback-image>
<div class="scene-caption"><span data-compare-index>01</span><div><strong data-compare-name>정원형 연립주택</strong><small data-compare-life>한강진역 북쪽 생활권</small></div></div>
<img src="./assets/hannam-interior-1200.webp" width="1200" height="800" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-compare-image data-fallback-image>
<div class="image-fallback" hidden data-image-fallback role="img" aria-label="후보 주거 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div>
</figure>
@ -135,9 +167,9 @@
<section class="dossier-section" id="dossier" aria-labelledby="dossier-title">
<header class="section-heading dossier-heading">
<p class="eyebrow">선택한 예시 집 검토 서류철</p>
<p class="eyebrow">선택한 예시 매물</p>
<h2 id="dossier-title" data-dossier-title>정원형 연립주택</h2>
<p><strong data-dossier-life>한강진역 북쪽 생활권</strong><span>거리·소요 시간 미제공</span></p>
<p><strong data-dossier-life>한강진역 북쪽 생활권</strong><span>거리와 소요 시간은 제공하지 않습니다</span></p>
</header>
<div class="dossier-shell">
@ -146,13 +178,13 @@
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-price" id="dossier-tab-price" tabindex="-1" data-dossier-tab="price">가격</button>
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-rights" id="dossier-tab-rights" tabindex="-1" data-dossier-tab="rights">권리</button>
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-location" id="dossier-tab-location" tabindex="-1" data-dossier-tab="location">입지 확인</button>
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-facility" id="dossier-tab-facility" tabindex="-1" data-dossier-tab="facility">시설·관리</button>
<button type="button" role="tab" aria-selected="false" aria-controls="dossier-facility" id="dossier-tab-facility" tabindex="-1" data-dossier-tab="facility">시설과 관리</button>
</div>
<div class="dossier-pages">
<section class="dossier-panel" role="tabpanel" id="dossier-basic" aria-labelledby="dossier-tab-basic" data-dossier-panel="basic">
<div class="image-filmstrip">
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-evening-960.webp" width="960" height="540" loading="lazy" alt="서울 언덕 생활권의 주거 외관을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-evening-960.webp" width="960" height="600" loading="lazy" alt="서울 언덕 생활권의 주거 외관을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="외관 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
<figure data-image-frame><figcaption>연출 이미지</figcaption><img src="./assets/hannam-interior-720.webp" width="720" height="480" loading="lazy" alt="큰 창과 목재 수납이 있는 거실을 표현한 이미지" data-fallback-image><div class="image-fallback" hidden data-image-fallback role="img" aria-label="실내 연출 이미지를 불러오지 못했습니다"><span>이미지를 불러오지 못했습니다</span></div></figure>
</div>
<dl class="spec-strip" data-spec-strip>
@ -171,7 +203,7 @@
<section class="dossier-panel" role="tabpanel" id="dossier-rights" aria-labelledby="dossier-tab-rights" data-dossier-panel="rights" hidden>
<div class="page-heading"><span>권리 확인</span><h3>계약 전 공인중개사가 다시 볼 항목입니다.</h3></div>
<ul class="review-list"><li><span>01</span><div><strong>등기와 소유 관계</strong><p>서류를 통해 현재 권리 상태를 확인합니다.</p></div></li><li><span>02</span><div><strong>계약 조건과 특약</strong><p>거래 형태에 맞는 보호 조건을 검토합니다.</p></div></li><li><span>03</span><div><strong>현재 거래 가능 상태</strong><p>상담 시점에 다시 확인합니다.</p></div></li></ul>
<ul class="review-list"><li><span>01</span><div><strong>등기와 소유 관계</strong><p>등기부등본으로 현재 권리 관계를 확인합니다.</p></div></li><li><span>02</span><div><strong>계약 조건과 특약</strong><p>거래 형태에 맞는 보호 조건을 검토합니다.</p></div></li><li><span>03</span><div><strong>현재 거래 가능 상태</strong><p>상담 시점에 다시 확인합니다.</p></div></li></ul>
</section>
<section class="dossier-panel" role="tabpanel" id="dossier-location" aria-labelledby="dossier-tab-location" data-dossier-panel="location" hidden>
@ -180,28 +212,41 @@
</section>
<section class="dossier-panel" role="tabpanel" id="dossier-facility" aria-labelledby="dossier-tab-facility" data-dossier-panel="facility" hidden>
<div class="page-heading"><span>시설·관리</span><h3>생활 비용과 이용 조건을 함께 봅니다.</h3></div>
<dl class="page-ledger"><div><dt>관리비</dt><dd data-page-fee>월 48만 원</dd></div><div><dt>포함 항목</dt><dd data-page-included>공용 관리, 청소, 승강기</dd></div><div><dt>별도 항목</dt><dd data-page-excluded>전기, 가스, 수도</dd></div><div><dt>방과 욕실</dt><dd data-page-rooms>방 3 · 욕실 2</dd></div></dl>
<div class="page-heading"><span>시설과 관리</span><h3>생활 비용과 이용 조건을 함께 봅니다.</h3></div>
<dl class="page-ledger"><div><dt>관리비</dt><dd data-page-fee>월 48만 원</dd></div><div><dt>포함 항목</dt><dd data-page-included>공용 관리, 청소, 승강기</dd></div><div><dt>별도 항목</dt><dd data-page-excluded>전기, 가스, 수도</dd></div><div><dt>방과 욕실</dt><dd data-page-rooms>방 3, 욕실 2</dd></div></dl>
</section>
</div>
</div>
</section>
<section class="handoff-section" id="handoff" aria-labelledby="handoff-title">
<header><p class="eyebrow">사람에게 넘기는 마감</p><h2 id="handoff-title">AI가 좁히고,<br>공인중개사가 확인합니다.</h2></header>
<ol class="handoff-steps">
<li><span>01</span><div><strong>조건 정리</strong><p>가격, 면적, 입주, 주차를 한 장에 모읍니다.</p></div></li>
<li><span>02</span><div><strong>후보 비교</strong><p>서로 다른 집의 차이를 같은 기준으로 대조합니다.</p></div></li>
<li><span>03</span><div><strong>권리·현장 확인</strong><p>서류와 현장에서 확인한 뒤 최종 판단합니다.</p></div></li>
</ol>
<button class="button button-light handoff-cta" type="button" data-open-consult>상담 전 확인할 항목 보기</button>
</section>
</main>
<footer class="site-footer">
<div><strong>한남자리</strong><span>개인 주거 브리핑 데스크</span></div>
<p>한남자리는 예시 자료로 구성한 서비스 화면입니다. 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
<nav aria-label="보조 메뉴"><a href="#top">처음으로</a></nav>
<footer class="site-footer" id="handoff" aria-labelledby="handoff-title">
<div class="footer-intro">
<h2 id="handoff-title">조건 정리와 후보 비교는 이 화면에서, 권리와 현장 확인은 공인중개사가 합니다.</h2>
<ol class="handoff-steps">
<li><span>01</span><div><strong>조건 정리</strong><span class="step-copy">가격, 면적, 입주, 주차를 위 조건판에 적습니다.</span></div></li>
<li><span>02</span><div><strong>후보 비교</strong><span class="step-copy">세 집의 차이를 같은 기준으로 대조합니다.</span></div></li>
<li><span>03</span><div><strong>권리와 현장 확인</strong><span class="step-copy">등기부등본과 현장에서 확인한 뒤 계약 여부를 정합니다.</span></div></li>
</ol>
</div>
<form class="consult-prep" data-consult-prep aria-labelledby="prep-title">
<h3 id="prep-title">상담 전에 확인할 항목을 고르세요</h3>
<div class="prep-home">기준이 되는 집 <strong data-prep-home>정원형 연립주택</strong></div>
<div class="prep-options">
<label><input type="checkbox" name="agenda" value="rights" checked> 권리 관계와 계약 조건</label>
<label><input type="checkbox" name="agenda" value="visit" checked> 현장 방문 때 볼 항목</label>
<label><input type="checkbox" name="agenda" value="move"> 입주 가능일 조율</label>
</div>
<button class="button button-primary handoff-cta" type="button" data-open-consult>상담 전 확인할 항목 보기</button>
<span class="prep-note">연락처를 받거나 입력 내용을 저장하지 않습니다.</span>
</form>
<div class="footer-legal">
<div class="footer-brand"><strong>한남자리</strong><span>한남 생활권 주거 비교</span></div>
<p>한남자리는 예시 자료로 구성한 서비스 화면입니다. 등록 공인중개사무소나 거래 서비스를 제공하지 않습니다.</p>
<nav aria-label="보조 메뉴"><a href="#top">처음으로</a><a href="./admin/">운영 화면</a></nav>
</div>
</footer>
<dialog class="consult-dialog" data-consult-dialog aria-labelledby="consult-title">