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,52 +3,44 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>철판클럽 — 눌러 굽고, 바로 건넨다</title>
<title>철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거</title>
<meta
name="description"
content="가상 버거 브랜드 철판클럽에서 메뉴를 고르고 버거를 조합하며, 가상 매장의 이용 방식과 운영 콘셉트를 살펴보세요. 실제 주문과 결제는 제공하지 않습니다."
content="가상 버거 브랜드 철판클럽. 주문 뒤에 패티를 눌러 굽는 스매시 버거 메뉴를 보고 재료를 조합하며, 가상 매장의 영업 상태를 확인합니다. 실제 주문과 결제는 제공하지 않습니다."
/>
<meta property="og:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
<meta property="og:title" content="철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거" />
<meta
property="og:description"
content="메뉴를 고르고 재료를 조합하며, 가상 매장의 운영 방식을 살펴보는 버거 브랜드 콘셉트."
content="메뉴 6가지, 단품 6,900원부터. 재료를 바꾸면 가격과 알레르기 정보가 바로 바뀌는 가상 버거 브랜드."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="./og.png" />
<meta property="og:image:alt" content="철판 주방에서 포장한 버거를 건네는 장면" />
<meta property="og:image:alt" content="크림색 바탕 위에 버거 사진 조각이 겹친 철판클럽 첫 화면" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
<meta
name="twitter:description"
content="메뉴를 고르고 재료를 조합해 보는 가상 버거 브랜드 철판클럽."
/>
<meta name="twitter:title" content="철판클럽 — 주문 뒤에 눌러 굽는 스매시 버거" />
<meta name="twitter:description" content="메뉴 6가지, 단품 6,900원부터. 가상 버거 브랜드 철판클럽." />
<meta name="twitter:image" content="./og.png" />
<meta name="theme-color" content="#f4f1e9" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<meta name="theme-color" content="#fbe9c8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
href="https://fonts.googleapis.com/css2?family=Jua&family=Gothic+A1:wght@500;700;800&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap"
/>
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="./styles/site.css?v=20260912all" />
<link rel="stylesheet" href="./styles/tokens.css?v=20261006" />
<link rel="stylesheet" href="./styles/site.css?v=20261006" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%232147e7'/%3E%3Cpath d='M6 9h20M8 16h16M10 23h12' stroke='%23fffdf8' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%232147e7'/%3E%3Cpath d='M8 12h16M10 17h12M12 22h8' stroke='%23fbe9c8' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"
/>
<script>document.documentElement.classList.add("is-js");</script>
<script src="./scripts/site.js?v=2" defer></script>
<script src="./scripts/site.js?v=3" defer></script>
</head>
<body>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<div class="truth-bar" role="note">
<p>가상 브랜드 안내 · 가격과 매장 정보는 실제 판매 정보가 아닙니다.</p>
<p>가상 브랜드입니다. 가격과 매장은 실제 정보가 아닙니다.</p>
</div>
<header class="site-head" id="top">
@ -63,72 +55,95 @@
<a href="#stores">매장 찾기</a>
<a href="./franchise/">가맹 안내</a>
</nav>
<a class="head-action" href="#stores">가까운 매장 보기</a>
<a class="head-action" href="#builder">내 버거 조합하기</a>
</div>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-heading">
<div class="hero-copy">
<p class="section-kicker">서울 도심 눌림 버거</p>
<h1 id="hero-heading">눌러 굽고,<span class="hero-wide-space" aria-hidden="true"> </span><br />바로 건넨다.</h1>
<h1 id="hero-heading">주문 뒤 눌러 굽고,<br />바로 건넵니다.</h1>
<p class="hero-lead">
얇게 눌러 가장자리는 바삭하게. 주문 뒤 조립하고 포장해, 퇴근길 한 상자로 건넵니다.
주문을 받은 뒤에 얇은 패티를 뜨거운 철판에 눌러 가장자리까지 바삭하게 굽고, 치즈와 구운 양파를 올려 그 자리에서 포장합니다. 단품 6,900원부터.
</p>
<div class="hero-actions">
<a class="button button-primary" href="#menu">오늘 메뉴 보기</a>
<a class="text-link" href="#builder">내 버거 조합하기 <span aria-hidden="true">→</span></a>
<a class="button button-ghost" href="#builder">내 버거 조합하기</a>
</div>
<dl class="hero-facts">
<div><dt>굽기</dt><dd>얇은 패티를 주문 뒤 눌러 굽기</dd></div>
<div><dt>받기</dt><dd>포장과 배달 가능 여부를 매장별 표시</dd></div>
</dl>
</div>
<figure class="hero-media image-shell">
<picture>
<source media="(max-width: 820px)" srcset="./assets/hero-handoff-mobile.webp" />
<div class="hero-media" aria-label="메뉴 사진 조각" role="group">
<figure class="piece piece-main image-shell" style="--i: 0">
<picture>
<source media="(max-width: 820px)" srcset="./assets/hero-handoff-mobile.webp" />
<img
src="./assets/hero-handoff.webp"
width="1600"
height="900"
alt="철판 주방에서 직원이 유산지에 싼 철판 더블을 파란 쟁반에 올려 건네는 모습"
fetchpriority="high"
/>
</picture>
<span class="image-fallback" aria-hidden="true">버거 건네는 장면</span>
</figure>
<figure class="piece piece-press image-shell" style="--i: 1">
<img
src="./assets/hero-handoff.webp"
width="1600"
height="900"
alt="밝은 철판 주방에서 직원이 포장한 버거를 건네는 모습"
fetchpriority="high"
src="./assets/griddle-press.webp"
width="1400"
height="933"
alt="조리사가 철판 위에서 패티를 프레스로 눌러 굽는 모습"
loading="eager"
/>
</picture>
<span class="image-fallback" aria-hidden="true">버거 포장 장면</span>
<figcaption>
<span>철판에서 상자까지</span>
<span>생성 이미지 · 실제 매장 아님</span>
</figcaption>
</figure>
<aside class="hero-order" aria-label="오늘 고르기">
<span class="order-index">01</span>
<p>철판 더블</p>
<strong>예시 단품 8,900원</strong>
<button type="button" data-preset="double">이 조합으로 시작</button>
</aside>
<span class="image-fallback" aria-hidden="true">철판 조리 장면</span>
</figure>
<figure class="piece piece-single image-shell" style="--i: 2">
<img
src="./assets/single-smash-generated.webp"
width="960"
height="720"
alt="치즈와 피클을 넣은 철판 싱글"
loading="eager"
/>
<span class="image-fallback" aria-hidden="true">철판 싱글 사진</span>
</figure>
<p class="piece piece-tag" style="--i: 3"><span>철판 더블</span><strong>8,900원</strong></p>
<p class="piece piece-sticker" style="--i: 4">주문 뒤 조리</p>
<p class="piece piece-note" style="--i: 5">생성 이미지, 실제 매장이 아닙니다</p>
</div>
</section>
<section class="service-strip" aria-label="이용 방식">
<div class="wrap service-row">
<p><span aria-hidden="true">●</span> 주문 뒤 조리</p>
<p>단품과 세트</p>
<p>포장 여부 매장별 확인</p>
<p>배달 여부 매장별 확인</p>
<p class="mono">GRIDDLE CLUB</p>
<section class="marquee" aria-label="오늘 메뉴와 가격">
<button type="button" class="marquee-toggle" id="marquee-toggle" aria-pressed="false">흐름 멈춤</button>
<div class="marquee-scroll" role="region" aria-label="메뉴와 가격 목록, 가로로 넘길 수 있음" tabindex="0">
<div class="marquee-track" id="marquee-track">
<ul class="marquee-list">
<li>철판 더블 8,900원</li>
<li>철판 싱글 6,900원</li>
<li>고추 피클 더블 9,400원</li>
<li>얇은 감자 3,600원</li>
<li>양파 한 컵 2,800원</li>
<li>탄산 한 잔 2,400원</li>
<li>주문 뒤 조리</li>
<li>포장과 배달은 매장별 확인</li>
</ul>
<ul class="marquee-list" aria-hidden="true">
<li>철판 더블 8,900원</li>
<li>철판 싱글 6,900원</li>
<li>고추 피클 더블 9,400원</li>
<li>얇은 감자 3,600원</li>
<li>양파 한 컵 2,800원</li>
<li>탄산 한 잔 2,400원</li>
<li>주문 뒤 조리</li>
<li>포장과 배달은 매장별 확인</li>
</ul>
</div>
</div>
</section>
<section class="section menu-section" id="menu" aria-labelledby="menu-heading">
<div class="wrap">
<div class="section-head split-head">
<div>
<p class="section-kicker">오늘 고를 메뉴</p>
<h2 id="menu-heading">메뉴를 고르고<br />내 버거를 조합해 보세요.</h2>
</div>
<p class="section-note">
표시된 메뉴와 가격은 브랜드 콘셉트를 설명하기 위한 값입니다. 이 페이지에서는 실제 판매와 주문을 제공하지 않습니다.
</p>
<h2 id="menu-heading">단품 6,900원부터, 메뉴는 여섯 가지.</h2>
<p class="section-note">세트는 감자와 음료를 더해 4,100원이 추가됩니다. 조합하기를 누르면 아래 조합기에 바로 담깁니다.</p>
</div>
<div class="menu-toolbar" role="group" aria-label="메뉴 분류">
@ -145,7 +160,7 @@
src="./assets/signature-double.webp"
width="1400"
height="933"
alt="철판 패티 두 장과 치즈, 구운 양파를 넣은 버거"
alt="철판 패티 두 장과 치즈, 구운 양파를 넣은 철판 더블"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 더블 사진</span>
@ -155,42 +170,31 @@
<div><p class="menu-state">대표 메뉴</p><h3>철판 더블</h3></div>
<p>얇은 패티 두 장, 치즈, 구운 양파, 피클, 집 소스.</p>
<div class="menu-foot">
<span><small>예시 단품</small> 8,900원</span>
<span><small>단품</small> 8,900원</span>
<button type="button" data-preset="double">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-graphic" data-menu-category="burger">
<div class="menu-photo image-shell">
<img
src="./assets/single-smash-generated.webp"
width="960"
height="720"
alt="코발트색 트레이 위에 치즈와 피클을 넣은 싱글 스매시 버거"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 싱글 사진</span>
<span class="menu-number">02</span>
<span class="menu-image-note">생성 이미지</span>
</div>
<div class="menu-poster menu-poster-cream" aria-hidden="true"><span>02</span><b>싱글</b></div>
<div class="menu-body">
<div><p class="menu-state">가볍게</p><h3>철판 싱글</h3></div>
<p>패티 한 장, 치즈, 피클, 집 소스. 단품으로 빠르게.</p>
<div class="menu-foot">
<span><small>예시 단품</small> 6,900원</span>
<span><small>단품</small> 6,900원</span>
<button type="button" data-preset="single">조합하기</button>
</div>
</div>
</article>
<article class="menu-item menu-item-blue" data-menu-category="burger">
<div class="menu-poster" aria-hidden="true"><span>03</span><i></i><i></i><i></i></div>
<div class="menu-poster" aria-hidden="true"><span>03</span><b>매운맛</b></div>
<div class="menu-body">
<div><p class="menu-state">매운 피클</p><h3>고추 피클 더블</h3></div>
<p>고추 피클과 매운 소스를 더한 더블. 맵기는 예시입니다.</p>
<p>고추 피클과 매운 소스를 더한 더블. 맵기는 세 단계 중 둘째.</p>
<div class="menu-foot">
<span><small>예시 단품</small> 9,400원</span>
<span><small>단품</small> 9,400원</span>
<button type="button" data-preset="spicy">조합하기</button>
</div>
</div>
@ -200,7 +204,7 @@
<div class="menu-body">
<div><p class="menu-state">곁들임</p><h3>얇은 감자</h3></div>
<p>가늘게 튀겨 소금으로 마무리합니다.</p>
<div class="menu-foot"><span><small>예시 가격</small> 3,600원</span></div>
<div class="menu-foot"><span>3,600원</span></div>
</div>
</article>
@ -208,7 +212,7 @@
<div class="menu-body">
<div><p class="menu-state">곁들임</p><h3>양파 한 컵</h3></div>
<p>철판에서 단맛을 낸 양파를 따로 담습니다.</p>
<div class="menu-foot"><span><small>예시 가격</small> 2,800원</span></div>
<div class="menu-foot"><span>2,800원</span></div>
</div>
</article>
@ -216,12 +220,12 @@
<div class="menu-body">
<div><p class="menu-state">음료</p><h3>탄산 한 잔</h3></div>
<p>매장에서 고른 음료 한 잔. 제품별 성분을 확인해 주세요.</p>
<div class="menu-foot"><span><small>예시 가격</small> 2,400원</span></div>
<div class="menu-foot"><span>2,400원</span></div>
</div>
</article>
</div>
<div class="empty-state" id="menu-empty" hidden role="status">
<strong>이 분류에 준비된 예시 메뉴가 없어요.</strong>
<strong>이 분류에 준비된 메뉴가 없어요.</strong>
<button type="button" data-show-all-menu>모든 메뉴 보기</button>
</div>
</div>
@ -230,11 +234,8 @@
<section class="section builder-section" id="builder" aria-labelledby="builder-heading">
<div class="wrap">
<div class="section-head split-head">
<div>
<p class="section-kicker">버거 조합기</p>
<h2 id="builder-heading">내 버거 조합을<br />바꿔 보세요.</h2>
</div>
<p class="section-note">아래 구성은 메뉴를 살펴보기 위한 예시입니다. 재료를 바꾸면 오른쪽 안내 카드와 예시 가격이 함께 바뀝니다.</p>
<h2 id="builder-heading">재료를 바꾸면 가격과 알레르기 정보가 바로 바뀝니다.</h2>
<p class="section-note">맛, 패티 수, 치즈, 양파와 피클, 단품과 세트, 받을 매장 순서로 고릅니다. 오른쪽 영수증에 결과가 모입니다.</p>
</div>
<div class="builder-layout">
@ -296,44 +297,32 @@
</fieldset>
<fieldset>
<legend><span>05</span> 확인할 가상 매장</legend>
<legend><span>05</span> 받을 매장</legend>
<label class="field-label" for="builder-store">매장</label>
<select id="builder-store" name="store">
<option value="seongsu">성수점 · 영업 중</option>
<option value="yeonnam">연남점 · 영업 종료</option>
<option value="mullae">문래점 · 오늘 휴무</option>
<option value="seongsu">성수점 (영업 중)</option>
<option value="yeonnam">연남점 (영업 종료)</option>
<option value="mullae">문래점 (오늘 휴무)</option>
</select>
<p class="field-help">아래 매장과 운영 상태는 실제 방문·주문 정보가 아닙니다.</p>
</fieldset>
</form>
<aside class="builder-summary" aria-labelledby="summary-heading">
<div class="summary-photo image-shell">
<img
src="./assets/signature-double.webp"
width="1400"
height="933"
alt="조합 결과를 설명하는 철판 더블 버거"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">조합 버거 사진</span>
<span class="summary-stamp">가상 메뉴</span>
</div>
<div class="summary-body">
<p class="section-kicker">선택 결과</p>
<span class="summary-tag">내 조합</span>
<h3 id="summary-heading">철판 더블</h3>
<p id="summary-lines">패티 두 장 / 치즈 한 장 / 양파 기본 / 피클 기본 / 소스 기본</p>
<dl class="summary-list">
<div><dt>받기</dt><dd id="summary-serving">단품</dd></div>
<div><dt>가상 매장</dt><dd id="summary-store">성수점</dd></div>
<div><dt>매장</dt><dd id="summary-store">성수점</dd></div>
<div><dt>상태</dt><dd id="summary-store-state">영업 중</dd></div>
</dl>
<div class="allergen-note" id="allergen-note">
<strong>알레르기 예시</strong>
<strong>알레르기 정보</strong>
<p id="summary-allergens">알, 우유, 대두, 밀, 쇠고기</p>
<small>같은 철판과 조리 도구를 함께 씁니다. 재료를 빼도 알레르기 안전을 보장하지 않습니다.</small>
</div>
<div class="summary-total"><span>예시 총액</span><strong id="summary-total">8,900원</strong></div>
<div class="summary-total"><span>총액</span><strong id="summary-total">8,900원</strong></div>
<p class="truth-inline">이 페이지는 메뉴 조합을 살펴보는 안내 페이지이며, 주문과 결제는 진행되지 않습니다.</p>
<a class="button button-primary button-full" href="#stores" id="check-store-link">가상 매장 안내 보기</a>
</div>
@ -345,24 +334,23 @@
<section class="section process-section" id="process" aria-labelledby="process-heading">
<div class="wrap process-grid">
<div class="process-copy">
<p class="section-kicker">철판에서 상자까지</p>
<h2 id="process-heading">빠르다는 말 대신,<br />순서를 보여 줍니다.</h2>
<h2 id="process-heading">굽고, 쌓고,<br />상자에 담습니다.</h2>
<ol class="process-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>
<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>
</div>
<figure class="process-media image-shell">
<img
src="./assets/griddle-press.webp"
src="./assets/kitchen-flow.webp"
width="1400"
height="933"
alt="조리사가 철판에서 패티를 눌러 굽고 양파를 익히는 모습"
alt="좁고 밝은 주방에서 한 사람은 철판에서 굽고 다른 사람은 포장대에서 상자에 담는 모습"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">철판 조리 장면</span>
<figcaption>생성 이미지 · 실제 조리 시설 아님</figcaption>
<span class="image-fallback" aria-hidden="true">주방 동선 장면</span>
<figcaption>생성 이미지, 실제 조리 시설이 아닙니다</figcaption>
</figure>
</div>
</section>
@ -370,13 +358,13 @@
<section class="section stores-section" id="stores" aria-labelledby="stores-heading">
<div class="wrap">
<div class="section-head split-head">
<div><p class="section-kicker">가상 매장 안내</p><h2 id="stores-heading">매장별 이용 방식은<br />이렇게 안내합니다.</h2></div>
<p class="section-note">주소, 전화, 거리와 운영 상태를 임의로 만들지 않습니다. 아래 세 곳은 브랜드 콘셉트를 설명하는 가상 매장입니다.</p>
<h2 id="stores-heading">매장 세 곳의 영업 상태와 포장, 배달 가능 여부입니다.</h2>
<p class="section-note">성수, 연남, 문래 세 곳은 가상 매장이라 상세 주소와 전화번호를 적지 않았습니다.</p>
</div>
<div class="store-tools">
<div class="search-box">
<input id="store-search" type="search" placeholder="동네 또는 매장명 검색" autocomplete="off" aria-label="가상 매장 검색" />
<input id="store-search" type="search" placeholder="동네 또는 매장명 검색" autocomplete="off" aria-label="매장 검색" />
<button type="button" id="clear-store-search" hidden>지우기</button>
</div>
<div class="region-filters" role="group" aria-label="지역 고르기">
@ -390,34 +378,34 @@
<div class="store-layout">
<div class="store-list" id="store-list">
<article class="store-card is-selected" data-store="seongsu" data-region="성동" data-search="성수점 성동 성수동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-open">영업 중</span><span>가상 매장</span></div>
<div class="store-card-top"><span class="store-state state-open">영업 중</span><span>성동</span></div>
<h3>성수점</h3>
<p>서울 성동구 성수동 일대 · 상세 주소 없음</p>
<p>서울 성동구 성수동 일대, 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>11:00–21:30</dd></div><div><dt>마지막 주문</dt><dd>21:00</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 가능</li><li>배달 가능</li></ul>
<button type="button" data-select-store="seongsu">성수점으로 조합 보기</button>
</article>
<article class="store-card" data-store="yeonnam" data-region="마포" data-search="연남점 마포 연남동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-closed">영업 종료</span><span>가상 매장</span></div>
<div class="store-card-top"><span class="store-state state-closed">영업 종료</span><span>마포</span></div>
<h3>연남점</h3>
<p>서울 마포구 연남동 일대 · 상세 주소 없음</p>
<p>서울 마포구 연남동 일대, 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>11:30–20:30</dd></div><div><dt>마지막 주문</dt><dd>오늘 마감</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 마감</li><li>배달 마감</li></ul>
<button type="button" data-select-store="yeonnam">연남점으로 조합 보기</button>
</article>
<article class="store-card" data-store="mullae" data-region="영등포" data-search="문래점 영등포 문래동" tabindex="-1">
<div class="store-card-top"><span class="store-state state-pause">오늘 휴무</span><span>가상 매장</span></div>
<div class="store-card-top"><span class="store-state state-pause">오늘 휴무</span><span>영등포</span></div>
<h3>문래점</h3>
<p>서울 영등포구 문래동 일대 · 상세 주소 없음</p>
<p>서울 영등포구 문래동 일대, 상세 주소 없음</p>
<dl><div><dt>운영</dt><dd>임시 휴무</dd></div><div><dt>다음 확인</dt><dd>매장별 안내 필요</dd></div></dl>
<ul aria-label="이용 방식"><li>포장 불가</li><li>배달 불가</li></ul>
<button type="button" data-select-store="mullae">문래점으로 조합 보기</button>
</article>
</div>
<aside class="store-map" aria-label="가상 매장 분포 그림">
<aside class="store-map" aria-label="매장 분포 그림">
<div class="map-grid" aria-hidden="true"></div>
<span class="map-river" aria-hidden="true"></span>
<button type="button" class="map-pin pin-seongsu is-active" data-map-store="seongsu" aria-label="성수점 고르기"><span>성수</span></button>
@ -428,7 +416,7 @@
</div>
<div class="empty-state store-empty" id="store-empty" hidden role="status">
<strong>찾는 조건과 맞는 가상 매장이 없어요.</strong>
<strong>찾는 조건과 맞는 매장이 없어요.</strong>
<p>검색어와 지역 조건을 지우고 다시 확인해 주세요.</p>
<button type="button" id="reset-store-search">검색 조건 지우기</button>
</div>
@ -436,33 +424,33 @@
</section>
<section class="franchise-callout" aria-labelledby="franchise-heading">
<figure class="franchise-image image-shell">
<img
src="./assets/kitchen-flow.webp"
width="1400"
height="933"
alt="좁고 밝은 주방에서 두 직원이 철판 조리와 포장을 나누어 맡는 모습"
loading="lazy"
/>
<span class="image-fallback" aria-hidden="true">주방 운영 동선 장면</span>
</figure>
<div class="franchise-copy">
<p class="section-kicker">가맹을 생각한다면</p>
<h2 id="franchise-heading">매출 약속보다<br />운영 조건부터.</h2>
<p>상권, 점포, 면적, 조리 동선과 비용 미정 항목을 먼저 확인할 수 있게 분리했습니다.</p>
<a class="button button-light" href="./franchise/">가맹 운영 조건 보기 <span aria-hidden="true">→</span></a>
<small>실제 가맹 모집과 상담을 제공하지 않습니다.</small>
<div class="wrap franchise-row">
<div class="franchise-copy">
<h2 id="franchise-heading">가맹 안내는 금액보다 상권, 점포, 주방 동선부터 보여 드립니다.</h2>
<p>비용 미정 항목을 먼저 확인할 수 있게 홈과 분리했습니다. 실제 가맹 모집과 상담은 제공하지 않습니다.</p>
</div>
<a class="button button-light" href="./franchise/">가맹 운영 조건 보기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-grid">
<div><a class="brand brand-foot" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a><p>눌러 굽고, 바로 건넨다.</p></div>
<div><strong>살펴보기</strong><a href="#menu">메뉴</a><a href="#builder">조합하기</a><a href="#stores">가상 매장 안내</a><a href="./franchise/">가맹 안내</a></div>
<div><strong>정보 안내</strong><p>알레르기 정보도 예시입니다.</p><p>원산지와 영양 정보는 실제 제품 자료가 아닙니다.</p></div>
<div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
<div class="foot-brand">
<a class="brand brand-foot" href="#top"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>철판클럽</span></a>
<p>성수, 연남, 문래의 스매시 버거.</p>
</div>
<div><strong>살펴보기</strong><a href="#menu">메뉴</a><a href="#builder">조합하기</a><a href="#stores">매장 찾기</a><a href="./franchise/">가맹 안내</a></div>
<div><strong>매장</strong><a href="#stores">성수점, 영업 중</a><a href="#stores">연남점, 영업 종료</a><a href="#stores">문래점, 오늘 휴무</a></div>
<div class="foot-truth"><strong>가상 브랜드 안내</strong><p>메뉴, 가격, 매장, 알레르기, 원산지 정보는 예시입니다. 실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="foot-mark">GRIDDLE CLUB 2026</p></div>
</div>
</footer>
<nav class="action-bar" aria-label="빠른 이동">
<a href="#menu">메뉴</a>
<a class="action-bar-primary" href="#builder">조합하기</a>
<a href="#stores">매장</a>
<a href="./franchise/">가맹</a>
</nav>
</body>
</html>