designpaca/apps/site/public/work/griddle-club/franchise/index.html
Yun Chan 6930906583
All checks were successful
ci / build (push) Successful in 42s
release / release (push) Successful in 1m5s
release: v0.10.0
2026-08-29 21:19:26 +09:00

358 lines
24 KiB
HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>철판클럽 가맹 안내 — 운영 조건부터 확인하기</title>
<meta
name="description"
content="가상 버거 브랜드 철판클럽의 상권, 점포, 면적, 개설 절차와 비용 미정 항목을 먼저 살펴보는 가맹 문의 쇼케이스입니다."
/>
<meta property="og:title" content="철판클럽 가맹 안내 — 운영 조건부터" />
<meta
property="og:description"
content="수익 약속 없이 상권, 점포, 주방 동선과 비용 미정 항목을 먼저 보여 주는 국내형 가맹 안내 화면."
/>
<meta property="og:type" content="website" />
<meta property="og:image" content="../og.png" />
<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:image" content="../og.png" />
<meta name="theme-color" content="#fffdf8" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<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"
/>
<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=1" />
<link rel="stylesheet" href="../styles/site.css?v=1" />
<link rel="stylesheet" href="../styles/franchise.css?v=1" />
<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"
/>
<script>document.documentElement.classList.add("is-js");</script>
<script src="../scripts/franchise.js?v=1" defer></script>
</head>
<body class="franchise-page">
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<div class="truth-bar" role="note">
<p>쇼케이스용 가상 브랜드 · 실제 가맹 모집, 상담, 계약을 제공하지 않음</p>
</div>
<header class="site-head">
<div class="wrap head-row franchise-head-row">
<a class="brand" href="../" aria-label="철판클럽 홈으로">
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span>철판클럽</span>
</a>
<nav class="head-nav" aria-label="가맹 안내 메뉴">
<a href="#model">운영 방식</a>
<a href="#site-fit">상권과 점포</a>
<a href="#process">개설 절차</a>
<a href="#cost">비용 항목</a>
</nav>
<a class="head-action" href="#inquiry">문의 준비하기</a>
</div>
</header>
<main id="main">
<section class="franchise-hero" aria-labelledby="franchise-hero-heading">
<div class="franchise-hero-copy">
<p class="section-kicker">철판클럽 가맹 안내</p>
<h1 id="franchise-hero-heading">매출 약속보다<br />운영 조건부터.</h1>
<p>
버거 사진만 보고 결정하지 않도록 상권, 점포, 전용 면적, 주방 동선과 아직 정할 수 없는 비용을 순서대로 보여 줍니다.
</p>
<div class="hero-actions">
<a class="button button-light" href="#site-fit">내 조건 살펴보기</a>
<a class="text-link light-link" href="#cost">비용 미정 항목 보기 <span aria-hidden="true">↓</span></a>
</div>
<div class="franchise-truth">
<strong>먼저 확인해 주세요</strong>
<p>실제 가맹 모집이 아닌 디자인 쇼케이스입니다. 금액, 수익, 매장 수와 개점 기간을 꾸며내지 않습니다.</p>
</div>
</div>
<figure class="franchise-hero-media image-shell">
<img
src="../assets/kitchen-flow.webp"
width="1400"
height="933"
alt="직원 두 명이 좁은 주방에서 철판 조리와 포장 작업을 나누어 맡는 모습"
fetchpriority="high"
/>
<span class="image-fallback" aria-hidden="true">주방 운영 동선 장면</span>
<figcaption>생성 이미지 · 실제 매장과 가맹 시설 아님</figcaption>
</figure>
</section>
<section class="fact-rail" aria-label="가맹 안내 원칙">
<div class="wrap fact-rail-grid">
<p><span>01</span> 수익률을 약속하지 않음</p>
<p><span>02</span> 점포를 보기 전 금액을 확정하지 않음</p>
<p><span>03</span> 실제 개인정보를 받지 않음</p>
</div>
</section>
<section class="section model-section" id="model" aria-labelledby="model-heading">
<div class="wrap">
<div class="section-head split-head">
<div class="model-heading-copy"><p class="section-kicker">어떤 운영 방식인지</p><h2 id="model-heading">좁은 주방에서<br />역할을 분명하게.</h2></div>
<p class="section-note">조리, 조립, 포장, 전달이 서로 겹치지 않는 흐름을 먼저 검토합니다. 실제 설비와 인원은 점포마다 달라집니다.</p>
</div>
<div class="flow-board">
<article><span>01</span><h3>재료 준비</h3><p>냉장 보관과 당일 준비 동선을 분리합니다.</p></article>
<article><span>02</span><h3>철판 조리</h3><p>패티와 양파가 움직이는 구간을 짧게 둡니다.</p></article>
<article><span>03</span><h3>조립과 포장</h3><p>주문표, 유산지, 상자를 한 방향에 둡니다.</p></article>
<article><span>04</span><h3>전달과 픽업</h3><p>매장 손님과 배달 픽업이 부딪히지 않게 나눕니다.</p></article>
</div>
<div class="operator-fit">
<div class="operator-heading-copy"><p class="section-kicker">운영자에게 필요한 태도</p><h3>직접 확인하고,<br />같은 품질을 반복하기.</h3></div>
<ul>
<li><strong>현장 참여</strong><span>조리와 응대 흐름을 직접 익힐 준비</span></li>
<li><strong>위생 기록</strong><span>보관, 조리, 마감 상태를 남길 준비</span></li>
<li><strong>지역 이해</strong><span>점심과 저녁 수요가 다른 상권을 살필 준비</span></li>
<li><strong>팀 운영</strong><span>작은 인원에서 역할을 나누고 교육할 준비</span></li>
</ul>
</div>
</div>
</section>
<section class="section site-fit-section" id="site-fit" aria-labelledby="site-fit-heading">
<div class="wrap">
<div class="section-head split-head">
<div class="site-fit-heading-copy"><p class="section-kicker">상권과 점포</p><h2 id="site-fit-heading">주소보다 먼저<br />운영 장면을 봅니다.</h2></div>
<p class="section-note">아래 분류는 적합 판정이 아니라 문의 때 빠뜨리지 않을 조건 목록입니다. 권장 면적 수치는 실제 검토 뒤에만 제시할 수 있습니다.</p>
</div>
<div class="fit-grid">
<article class="fit-main">
<p class="fit-number mono">A</p>
<h3>상권 흐름</h3>
<p>업무가, 주거지, 역 주변, 대학가, 상점가 또는 여러 수요가 섞인 곳인지 먼저 적습니다.</p>
<ul><li>점심과 저녁 수요 시간</li><li>도보와 차량 접근</li><li>포장 대기 공간</li><li>배달 픽업 접근</li></ul>
</article>
<article>
<p class="fit-number mono">B</p><h3>점포 상태</h3><p>점포 없음, 찾는 중, 협의 중, 보유함으로 나눕니다.</p>
</article>
<article>
<p class="fit-number mono">C</p><h3>전용 면적</h3><p>사용자가 입력한 ㎡와 환산한 평을 함께 봅니다. 적합 판정은 하지 않습니다.</p>
</article>
<article>
<p class="fit-number mono">D</p><h3>설비 조건</h3><p>전기, 배기, 급수, 배수와 반입 경로는 점포 자료로 따로 확인합니다.</p>
</article>
<article>
<p class="fit-number mono">E</p><h3>이전 용도</h3><p>음식점, 소매점, 빈 점포 등 이전 사용 상태를 확인합니다.</p>
</article>
</div>
</div>
</section>
<section class="section franchise-process" id="process" aria-labelledby="process-heading-franchise">
<div class="wrap">
<div class="section-head split-head">
<div class="process-heading-copy"><p class="section-kicker">개설 절차</p><h2 id="process-heading-franchise">기간을 꾸미지 않고<br />순서만 보여 줍니다.</h2></div>
<p class="section-note">점포, 자료, 협의와 공사 조건에 따라 기간이 달라집니다. 아래 흐름은 화면 설명용 예시이며 계약이나 개점을 보장하지 않습니다.</p>
</div>
<ol class="franchise-timeline">
<li><span>01</span><div><h3>문의 준비</h3><p>희망 지역과 시작 시기를 정리합니다.</p></div><small>준비 전</small></li>
<li><span>02</span><div><h3>희망 조건 확인</h3><p>상권 종류, 점포 상태와 운영 경험을 봅니다.</p></div><small>자료 필요</small></li>
<li><span>03</span><div><h3>상권과 점포 검토</h3><p>주소가 정해졌다면 면적, 설비와 동선을 확인합니다.</p></div><small>조건에 따라 다름</small></li>
<li><span>04</span><div><h3>정보 제공과 협의</h3><p>확인 가능한 조건과 미정 항목을 나눕니다.</p></div><small>검토 필요</small></li>
<li><span>05</span><div><h3>계약 내용 검토</h3><p>실제 자료와 조건을 받은 뒤 각 항목을 확인합니다.</p></div><small>자동 확정 아님</small></li>
<li><span>06</span><div><h3>설계와 공사 계획</h3><p>주방, 포장대와 픽업 동선을 점포에 맞춥니다.</p></div><small>점포별 다름</small></li>
<li><span>07</span><div><h3>조리와 응대 교육</h3><p>조리 순서와 위생 기록을 함께 익힙니다.</p></div><small>계획 필요</small></li>
<li><span>08</span><div><h3>개점 전 점검</h3><p>설비, 재료, 동선과 운영 준비를 확인합니다.</p></div><small>완료 보장 아님</small></li>
</ol>
</div>
</section>
<section class="section cost-section" id="cost" aria-labelledby="cost-heading">
<div class="wrap">
<div class="cost-head">
<div class="cost-heading-copy"><p class="section-kicker">비용 항목</p><h2 id="cost-heading">합계를 만들 수 없는<br />이유부터 적습니다.</h2></div>
<div class="unknown-cost">
<span>현재 상태</span>
<strong>비용 미정</strong>
<p>점포, 면적, 설비와 계약 자료가 확인되지 않아 금액을 제시하지 않습니다.</p>
</div>
</div>
<div class="cost-table-wrap" role="region" aria-label="비용 항목 표" tabindex="0">
<table class="cost-table">
<caption class="sr-only">가맹 비용 항목과 현재 확인 상태</caption>
<thead><tr><th scope="col">항목</th><th scope="col">현재 상태</th><th scope="col">금액</th><th scope="col">다음 확인</th></tr></thead>
<tbody>
<tr><th scope="row">가맹 관련 비용</th><td>자료 미제공</td><td>미정</td><td>실제 안내 자료 확인</td></tr>
<tr><th scope="row">교육 비용</th><td>범위 미정</td><td>미정</td><td>인원과 교육 범위 확인</td></tr>
<tr><th scope="row">계약 보증 관련 비용</th><td>조건 미정</td><td>미정</td><td>실제 계약 자료 확인</td></tr>
<tr><th scope="row">주방 설비</th><td>점포 필요</td><td>미정</td><td>전기, 배기와 설비 확인</td></tr>
<tr><th scope="row">가구와 집기</th><td>사양 필요</td><td>미정</td><td>좌석과 포장 방식 확인</td></tr>
<tr><th scope="row">인테리어</th><td>면적 필요</td><td>미정</td><td>전용 면적과 현장 확인</td></tr>
<tr><th scope="row">간판과 외부 표시</th><td>건물 조건 필요</td><td>미정</td><td>건물과 지역 조건 확인</td></tr>
<tr><th scope="row">주문 기기</th><td>운영 방식 필요</td><td>미정</td><td>주문과 결제 방식 확인</td></tr>
<tr><th scope="row">허가와 신고</th><td>지역 조건 필요</td><td>미정</td><td>관할 안내 확인</td></tr>
<tr><th scope="row">첫 물류</th><td>메뉴 범위 필요</td><td>미정</td><td>품목과 보관량 확인</td></tr>
<tr><th scope="row">임대 보증 관련 비용</th><td>점포 계약 필요</td><td>미정</td><td>임대 조건 직접 확인</td></tr>
</tbody>
<tfoot><tr><th scope="row" colspan="2">합계</th><td colspan="2">계산하지 않음 · 확인되지 않은 숫자를 더하지 않습니다</td></tr></tfoot>
</table>
</div>
<p class="cost-warning">평균 매출, 예상 수익, 회수 기간과 최저 비용은 근거 자료가 없어 제공하지 않습니다.</p>
</div>
</section>
<section class="section inquiry-section" id="inquiry" aria-labelledby="inquiry-heading">
<div class="wrap inquiry-layout">
<div class="inquiry-intro">
<p class="section-kicker">문의 준비 체험</p>
<h2 id="inquiry-heading">연락처 없이도<br />조건부터 정리하기.</h2>
<p>실제 이름과 연락처를 받지 않습니다. 화면 안에서 상권과 점포 조건을 정리하고 전송 전 검토 상태를 체험합니다.</p>
<div class="privacy-note" role="note">
<strong>실제 개인정보를 입력하지 마세요.</strong>
<p>입력 내용은 서버로 보내거나 저장하지 않습니다. 성공 화면도 실제 접수가 아닙니다.</p>
</div>
</div>
<div class="inquiry-panel">
<ol class="step-indicator" aria-label="문의 준비 단계">
<li class="is-current" data-step-indicator="1" aria-current="step"><span>1</span><small>상권</small></li>
<li data-step-indicator="2"><span>2</span><small>점포</small></li>
<li data-step-indicator="3"><span>3</span><small>검토</small></li>
</ol>
<form id="franchise-form" novalidate>
<section class="form-step" data-step="1" aria-labelledby="step-one-heading">
<p class="step-count">1 / 3</p>
<h3 id="step-one-heading">어느 지역에서 시작할까요?</h3>
<div class="form-field">
<label for="demo-name">예시 호칭</label>
<input id="demo-name" name="demoName" type="text" minlength="2" autocomplete="off" placeholder="실명 대신 예시 호칭" required />
<small>실제 이름을 입력하지 마세요.</small>
<p class="field-error" id="demo-name-error"></p>
</div>
<div class="form-field">
<label for="region">희망 지역</label>
<select id="region" name="region" required>
<option value="">지역 고르기</option><option>서울 동쪽</option><option>서울 서쪽</option><option>서울 남쪽</option><option>서울 북쪽</option><option>수도권</option><option>아직 모름</option>
</select>
<p class="field-error" id="region-error"></p>
</div>
<fieldset class="form-field">
<legend>희망 상권</legend>
<div class="radio-grid">
<label><input type="radio" name="areaKind" value="업무가" required /><span>업무가</span></label>
<label><input type="radio" name="areaKind" value="주거지" /><span>주거지</span></label>
<label><input type="radio" name="areaKind" value="역 주변" /><span>역 주변</span></label>
<label><input type="radio" name="areaKind" value="대학가" /><span>대학가</span></label>
<label><input type="radio" name="areaKind" value="상점가" /><span>상점가</span></label>
<label><input type="radio" name="areaKind" value="아직 모름" /><span>아직 모름</span></label>
</div>
<p class="field-error" id="area-kind-error"></p>
</fieldset>
<div class="form-actions"><button class="button button-primary" type="button" data-next>점포 조건으로</button></div>
</section>
<section class="form-step" data-step="2" aria-labelledby="step-two-heading">
<p class="step-count">2 / 3</p>
<h3 id="step-two-heading">점포는 어느 단계인가요?</h3>
<fieldset class="form-field">
<legend>점포 상태</legend>
<div class="radio-grid">
<label><input type="radio" name="storePossession" value="아직 없음" required /><span>아직 없음</span></label>
<label><input type="radio" name="storePossession" value="찾는 중" /><span>찾는 중</span></label>
<label><input type="radio" name="storePossession" value="협의 중" /><span>협의 중</span></label>
<label><input type="radio" name="storePossession" value="보유함" /><span>보유함</span></label>
</div>
<p class="field-error" id="store-possession-error"></p>
</fieldset>
<div class="form-field area-field" id="area-field" hidden>
<label for="exclusive-area">전용 면적</label>
<div class="unit-input"><input id="exclusive-area" name="exclusiveArea" type="number" min="0.1" step="0.1" inputmode="decimal" /><span>㎡</span></div>
<output id="area-conversion" for="exclusive-area">면적을 입력하면 평으로도 보여 드립니다.</output>
<small>환산값은 적합 판정이 아닙니다.</small>
<p class="field-error" id="exclusive-area-error"></p>
</div>
<div class="form-field">
<label for="opening-window">희망 시작 시기</label>
<select id="opening-window" name="openingWindow" required>
<option value="">시기 고르기</option><option>석 달 안</option><option>석 달에서 여섯 달</option><option>여섯 달에서 열두 달</option><option>아직 모름</option>
</select>
<p class="field-error" id="opening-window-error"></p>
</div>
<fieldset class="form-field">
<legend>매장 운영 경험</legend>
<div class="radio-grid radio-grid-two">
<label><input type="radio" name="experience" value="있음" required /><span>있음</span></label>
<label><input type="radio" name="experience" value="없음" /><span>없음</span></label>
</div>
<p class="field-error" id="experience-error"></p>
</fieldset>
<div class="form-actions split-actions"><button class="button button-ghost" type="button" data-back>이전</button><button class="button button-primary" type="button" data-next>입력 내용 검토</button></div>
</section>
<section class="form-step" data-step="3" aria-labelledby="step-three-heading">
<p class="step-count">3 / 3</p>
<h3 id="step-three-heading">보내기 전에 확인하세요.</h3>
<dl class="review-list" id="review-list">
<div><dt>예시 호칭</dt><dd data-review="demoName">—</dd></div>
<div><dt>희망 지역</dt><dd data-review="region">—</dd></div>
<div><dt>희망 상권</dt><dd data-review="areaKind">—</dd></div>
<div><dt>점포 상태</dt><dd data-review="storePossession">—</dd></div>
<div><dt>전용 면적</dt><dd data-review="exclusiveArea">해당 없음</dd></div>
<div><dt>희망 시기</dt><dd data-review="openingWindow">—</dd></div>
<div><dt>운영 경험</dt><dd data-review="experience">—</dd></div>
</dl>
<label class="consent-check"><input type="checkbox" id="demo-consent" required /><span>실제 문의가 아니며 개인정보를 입력하지 않았음을 확인했습니다.</span></label>
<p class="field-error" id="demo-consent-error"></p>
<div class="form-actions split-actions"><button class="button button-ghost" type="button" data-back>수정하기</button><button class="button button-primary" type="submit" id="submit-inquiry">문의 준비 마치기</button></div>
<p class="submit-state" id="submit-state" role="alert"></p>
</section>
</form>
<section class="inquiry-success" id="inquiry-success" hidden aria-labelledby="success-heading" tabindex="-1">
<span class="success-mark" aria-hidden="true">✓</span>
<p class="section-kicker">화면 체험 완료</p>
<h3 id="success-heading">문의 준비가 끝났어요.</h3>
<p>제출 절차를 보여 주는 예시이며 실제 담당자에게 전송되지 않았습니다.</p>
<div class="success-actions"><button class="button button-ghost" type="button" id="review-again">입력 내용 다시 보기</button><button class="button button-primary" type="button" id="restart-form">처음부터 보기</button></div>
</section>
</div>
</div>
</section>
<section class="franchise-close" aria-labelledby="close-heading">
<div class="wrap close-row">
<div class="close-heading-copy"><p class="section-kicker">철판클럽</p><h2 id="close-heading">숫자를 꾸미지 않아야<br />조건을 제대로 볼 수 있습니다.</h2></div>
<a class="button button-light" href="../">소비자 홈으로 돌아가기</a>
</div>
</section>
</main>
<footer class="site-foot">
<div class="wrap foot-grid franchise-foot-grid">
<div><a class="brand brand-foot" href="../"><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="#model">운영 방식</a><a href="#site-fit">상권과 점포</a><a href="#process">개설 절차</a><a href="#cost">비용 항목</a></div>
<div class="foot-truth"><strong>쇼케이스 고지</strong><p>가상 브랜드이며 실제 가맹 모집, 수익 안내, 계약과 문의 전송을 제공하지 않습니다.</p><p class="mono">DESIGN SHOWCASE · 2026</p></div>
</div>
</footer>
</body>
</html>