feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Some checks failed
ci / build (push) Has been cancelled
This commit is contained in:
Yun Chan
parent
69e5cc1efd
commit
e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
31
apps/site/public/work/griddle-club/design.md
Normal file
31
apps/site/public/work/griddle-club/design.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
# 철판클럽 — 2026-09-12 화면 보정 기록
|
||||
|
||||
## 구도·타입·색 관찰
|
||||
|
||||
- 코발트, 큰 고딕 제목, 버거 사진은 브랜드의 속도와 조리 장면을 만드는 기존 자산이다.
|
||||
- 기준 첫 화면의 파란 상품 카드는 절대 배치로 사진 프레임 밖에 걸쳐 캡션과 조합 시작 행동의 읽기 순서를 흐린다.
|
||||
- 메뉴 이미지는 이미 4:3 표면이지만 크롭 기준이 명시되지 않았고, 조합·가맹의 조건과 비용은 값보다 장식 카드처럼 보일 위험이 있다.
|
||||
|
||||
## 근거 확인 범위
|
||||
|
||||
- `outputs/full-showcase-upgrade-20260912/screenshots/griddle-club/1440x1000-first.png`
|
||||
- 소비자 홈, `franchise/`, 기존 메뉴·조합·가상 매장·가맹 조건의 ID와 스크립트
|
||||
- 가상·생성 이미지·미전송·비용 미정·실제 주문 불가 표기는 보존한다.
|
||||
|
||||
## 결정 / 기각 조건
|
||||
|
||||
- 상품·예시 가격·조합 시작 버튼은 사진 아래 정상 흐름의 코발트 shelf로 둬 캡션과 겹치지 않게 한다.
|
||||
- 메뉴 이미지는 중앙 `cover` 크롭을 통일하고, 조합기는 라벨·선택·가격 보조 정보를 같은 위계로 둔다.
|
||||
- 가맹 절차와 비용은 단계·상태·다음 확인의 원장으로 정렬한다. 수익, 기간, 비용, 운영 성과를 새로 만들거나 추정하는 변경은 기각한다.
|
||||
|
||||
## 토큰·규칙
|
||||
|
||||
- 기존 `--blue`, `--paper-*`, `--ink`, `--line`, `--font-mono`만 사용한다.
|
||||
- 상품 shelf와 제어 요소는 44px 이상의 동작 영역과 기존 focus 계약을 유지한다.
|
||||
- 320px과 200% 확대에서 `min-width: 0`, 가로 스크롤 표, normal flow로 정보를 보존한다.
|
||||
|
||||
## 2026-09-12 현재 검증 기록
|
||||
|
||||
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
|
||||
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
|
|
@ -6,12 +6,12 @@
|
|||
<title>철판클럽 가맹 안내 — 운영 조건부터 확인하기</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="가상 버거 브랜드 철판클럽의 상권, 점포, 면적, 개설 절차와 비용 미정 항목을 먼저 살펴보는 가맹 문의 쇼케이스입니다."
|
||||
content="가상 버거 브랜드 철판클럽의 상권, 점포, 면적, 개설 절차와 비용 미정 항목을 살펴보고 가맹 검토에 필요한 조건을 정리해 보세요. 실제 상담과 계약은 제공하지 않습니다."
|
||||
/>
|
||||
<meta property="og:title" content="철판클럽 가맹 안내 — 운영 조건부터" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="수익 약속 없이 상권, 점포, 주방 동선과 비용 미정 항목을 먼저 보여 주는 국내형 가맹 안내 화면."
|
||||
content="수익 약속 없이 상권, 점포, 주방 동선과 비용 미정 항목을 안내합니다."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="../og.png" />
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<meta name="twitter:title" content="철판클럽 가맹 안내 — 운영 조건부터" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="상권, 점포, 주방 동선과 비용 미정 항목을 먼저 살펴보는 가맹 안내 쇼케이스."
|
||||
content="상권, 점포, 주방 동선과 비용 미정 항목을 살펴보는 가맹 안내."
|
||||
/>
|
||||
<meta name="twitter:image" content="../og.png" />
|
||||
<meta name="theme-color" content="#fffdf8" />
|
||||
|
|
@ -35,9 +35,9 @@
|
|||
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="stylesheet" href="../styles/tokens.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="../styles/site.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="../styles/franchise.css?v=20260912all" />
|
||||
<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"
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
|
||||
|
||||
<div class="truth-bar" role="note">
|
||||
<p>쇼케이스용 가상 브랜드 · 실제 가맹 모집, 상담, 계약을 제공하지 않음</p>
|
||||
<p>가상 브랜드 안내 · 실제 가맹 모집, 상담, 계약을 제공하지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<header class="site-head">
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
<a href="#process">개설 절차</a>
|
||||
<a href="#cost">비용 항목</a>
|
||||
</nav>
|
||||
<a class="head-action" href="#inquiry">문의 준비하기</a>
|
||||
<a class="head-action" href="#inquiry">조건 정리하기</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
</div>
|
||||
<div class="franchise-truth">
|
||||
<strong>먼저 확인해 주세요</strong>
|
||||
<p>실제 가맹 모집이 아닌 디자인 쇼케이스입니다. 금액, 수익, 매장 수와 개점 기간을 꾸며내지 않습니다.</p>
|
||||
<p>금액, 수익, 매장 수와 개점 기간은 확인된 정보가 없어 표시하지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<figure class="franchise-hero-media image-shell">
|
||||
|
|
@ -166,7 +166,7 @@
|
|||
<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>
|
||||
<p class="section-note">점포, 자료, 협의와 공사 조건에 따라 기간이 달라집니다. 아래 순서는 검토에 필요한 항목을 정리한 것이며 계약이나 개점을 보장하지 않습니다.</p>
|
||||
</div>
|
||||
<ol class="franchise-timeline">
|
||||
<li><span>01</span><div><h3>문의 준비</h3><p>희망 지역과 시작 시기를 정리합니다.</p></div><small>준비 전</small></li>
|
||||
|
|
@ -219,17 +219,17 @@
|
|||
<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>
|
||||
<p class="section-kicker">조건 정리</p>
|
||||
<h2 id="inquiry-heading">연락처 없이도<br />조건부터 정리하기.</h2>
|
||||
<p>실제 이름과 연락처를 받지 않습니다. 화면 안에서 상권과 점포 조건을 정리하고 전송 전 검토 상태를 체험합니다.</p>
|
||||
<p>실제 이름과 연락처를 받지 않습니다. 가상의 운영 조건을 입력하면 어떤 항목을 확인해야 하는지 순서대로 살펴볼 수 있습니다.</p>
|
||||
<div class="privacy-note" role="note">
|
||||
<strong>실제 개인정보를 입력하지 마세요.</strong>
|
||||
<p>입력 내용은 서버로 보내거나 저장하지 않습니다. 성공 화면도 실제 접수가 아닙니다.</p>
|
||||
<p>입력한 내용은 전송하거나 보관하지 않습니다. 조건을 확인해도 상담 신청은 이루어지지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inquiry-panel">
|
||||
<ol class="step-indicator" aria-label="문의 준비 단계">
|
||||
<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>
|
||||
|
|
@ -240,8 +240,8 @@
|
|||
<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 />
|
||||
<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>
|
||||
|
|
@ -306,14 +306,14 @@
|
|||
<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>
|
||||
<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>
|
||||
<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="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>
|
||||
|
|
@ -321,18 +321,18 @@
|
|||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -351,7 +351,7 @@
|
|||
<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 class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 가맹 모집, 수익 안내, 계약과 상담 신청을 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<title>철판클럽 — 눌러 굽고, 바로 건넨다</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="서울의 빠른 한 끼를 위한 가상 눌림 버거 브랜드 철판클럽의 메뉴, 조합기, 예시 매장과 운영 방식을 살펴보세요."
|
||||
content="가상 버거 브랜드 철판클럽에서 메뉴를 고르고 버거를 조합하며, 가상 매장의 이용 방식과 운영 콘셉트를 살펴보세요. 실제 주문과 결제는 제공하지 않습니다."
|
||||
/>
|
||||
<meta property="og:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="메뉴를 고르고, 재료를 조합하고, 예시 매장 운영 상태까지 확인하는 국내형 버거 쇼케이스."
|
||||
content="메뉴를 고르고 재료를 조합하며, 가상 매장의 운영 방식을 살펴보는 버거 브랜드 콘셉트."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="./og.png" />
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<meta name="twitter:title" content="철판클럽 — 눌러 굽고, 바로 건넨다" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="메뉴를 고르고 재료를 조합해 보는 국내형 버거 브랜드 쇼케이스."
|
||||
content="메뉴를 고르고 재료를 조합해 보는 가상 버거 브랜드 철판클럽."
|
||||
/>
|
||||
<meta name="twitter:image" content="./og.png" />
|
||||
<meta name="theme-color" content="#f4f1e9" />
|
||||
|
|
@ -35,20 +35,20 @@
|
|||
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/tokens.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/site.css?v=20260912all" />
|
||||
<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/site.js?v=1" defer></script>
|
||||
<script src="./scripts/site.js?v=2" 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">
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
<section class="hero" aria-labelledby="hero-heading">
|
||||
<div class="hero-copy">
|
||||
<p class="section-kicker">서울 도심 눌림 버거</p>
|
||||
<h1 id="hero-heading">눌러 굽고,<br />바로 건넨다.</h1>
|
||||
<h1 id="hero-heading">눌러 굽고,<span class="hero-wide-space" aria-hidden="true"> </span><br />바로 건넨다.</h1>
|
||||
<p class="hero-lead">
|
||||
얇게 눌러 가장자리는 바삭하게. 주문 뒤 조립하고 포장해, 퇴근길 한 상자로 건넵니다.
|
||||
</p>
|
||||
|
|
@ -124,10 +124,10 @@
|
|||
<div class="section-head split-head">
|
||||
<div>
|
||||
<p class="section-kicker">오늘 고를 메뉴</p>
|
||||
<h2 id="menu-heading">버거가 먼저 보이게.</h2>
|
||||
<h2 id="menu-heading">메뉴를 고르고<br />내 버거를 조합해 보세요.</h2>
|
||||
</div>
|
||||
<p class="section-note">
|
||||
모든 가격은 조합기 동작을 보여 주기 위한 예시입니다. 실제 판매와 주문은 이루어지지 않습니다.
|
||||
표시된 메뉴와 가격은 브랜드 콘셉트를 설명하기 위한 값입니다. 이 페이지에서는 실제 판매와 주문을 제공하지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -162,9 +162,17 @@
|
|||
</article>
|
||||
|
||||
<article class="menu-item menu-item-graphic" data-menu-category="burger">
|
||||
<div class="ingredient-stack" aria-hidden="true">
|
||||
<span class="bun"></span><span class="pickle"></span><span class="cheese"></span><span class="patty"></span><span class="bun bottom"></span>
|
||||
<b>02</b>
|
||||
<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-body">
|
||||
<div><p class="menu-state">가볍게</p><h3>철판 싱글</h3></div>
|
||||
|
|
@ -224,9 +232,9 @@
|
|||
<div class="section-head split-head">
|
||||
<div>
|
||||
<p class="section-kicker">버거 조합기</p>
|
||||
<h2 id="builder-heading">상자에 담길 내용을<br />먼저 정하세요.</h2>
|
||||
<h2 id="builder-heading">내 버거 조합을<br />바꿔 보세요.</h2>
|
||||
</div>
|
||||
<p class="section-note">재료 선택과 예시 총액은 실제로 바뀝니다. 주문 전송 기능은 없습니다.</p>
|
||||
<p class="section-note">아래 구성은 메뉴를 살펴보기 위한 예시입니다. 재료를 바꾸면 오른쪽 안내 카드와 예시 가격이 함께 바뀝니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="builder-layout">
|
||||
|
|
@ -288,14 +296,14 @@
|
|||
</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>
|
||||
<p class="field-help">아래 매장과 운영 상태는 실제 방문·주문 정보가 아닙니다.</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
|
|
@ -309,27 +317,25 @@
|
|||
loading="lazy"
|
||||
/>
|
||||
<span class="image-fallback" aria-hidden="true">조합 버거 사진</span>
|
||||
<span class="summary-stamp">화면 예시</span>
|
||||
<span class="summary-stamp">가상 메뉴</span>
|
||||
</div>
|
||||
<div class="summary-body">
|
||||
<p class="section-kicker">고른 내용</p>
|
||||
<p class="section-kicker">선택 결과</p>
|
||||
<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-state">영업 중 예시</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>
|
||||
<p id="summary-allergens">알, 우유, 대두, 밀, 쇠고기</p>
|
||||
<small>같은 철판과 조리 도구를 함께 씁니다. 재료를 빼도 알레르기 안전을 보장하지 않습니다.</small>
|
||||
</div>
|
||||
<div class="summary-total"><span>화면 계산용 예시 총액</span><strong id="summary-total">8,900원</strong></div>
|
||||
<p class="truth-inline">실제 주문이나 결제로 전송되지 않습니다.</p>
|
||||
<button class="button button-primary button-full" type="button" id="save-builder">선택 내용 저장</button>
|
||||
<a class="button button-ghost button-full" href="#stores" id="other-store-link">다른 매장 찾기</a>
|
||||
<p class="save-status" id="save-status" role="status" aria-live="polite"></p>
|
||||
<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>
|
||||
</aside>
|
||||
</div>
|
||||
|
|
@ -364,13 +370,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>
|
||||
<div><p class="section-kicker">가상 매장 안내</p><h2 id="stores-heading">매장별 이용 방식은<br />이렇게 안내합니다.</h2></div>
|
||||
<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="지역 고르기">
|
||||
|
|
@ -383,46 +389,46 @@
|
|||
|
||||
<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>
|
||||
<h3>성수 예시점</h3>
|
||||
<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>
|
||||
<h3>성수점</h3>
|
||||
<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>
|
||||
<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>
|
||||
<h3>연남 예시점</h3>
|
||||
<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>
|
||||
<h3>연남점</h3>
|
||||
<p>서울 마포구 연남동 일대 · 상세 주소 없음</p>
|
||||
<dl><div><dt>운영</dt><dd>예시 11:30–20:30</dd></div><div><dt>마지막 주문</dt><dd>오늘 마감</dd></div></dl>
|
||||
<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>
|
||||
<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>
|
||||
<h3>문래 예시점</h3>
|
||||
<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>
|
||||
<h3>문래점</h3>
|
||||
<p>서울 영등포구 문래동 일대 · 상세 주소 없음</p>
|
||||
<dl><div><dt>운영</dt><dd>임시 휴무 예시</dd></div><div><dt>다음 확인</dt><dd>매장별 안내 필요</dd></div></dl>
|
||||
<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>
|
||||
<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>
|
||||
<button type="button" class="map-pin pin-yeonnam" data-map-store="yeonnam" aria-label="연남 예시점 고르기"><span>연남</span></button>
|
||||
<button type="button" class="map-pin pin-mullae" data-map-store="mullae" aria-label="문래 예시점 고르기"><span>문래</span></button>
|
||||
<p>실제 지도와 위치가 아닌 화면 설명용 도식</p>
|
||||
<button type="button" class="map-pin pin-seongsu is-active" data-map-store="seongsu" aria-label="성수점 고르기"><span>성수</span></button>
|
||||
<button type="button" class="map-pin pin-yeonnam" data-map-store="yeonnam" aria-label="연남점 고르기"><span>연남</span></button>
|
||||
<button type="button" class="map-pin pin-mullae" data-map-store="mullae" aria-label="문래점 고르기"><span>문래</span></button>
|
||||
<p>위치 안내가 아닌 지역별 이용 상태를 보여 주는 그림입니다.</p>
|
||||
</aside>
|
||||
</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>
|
||||
|
|
@ -445,7 +451,7 @@
|
|||
<h2 id="franchise-heading">매출 약속보다<br />운영 조건부터.</h2>
|
||||
<p>상권, 점포, 면적, 조리 동선과 비용 미정 항목을 먼저 확인할 수 있게 분리했습니다.</p>
|
||||
<a class="button button-light" href="./franchise/">가맹 운영 조건 보기 <span aria-hidden="true">→</span></a>
|
||||
<small>실제 가맹 모집과 상담이 아닌 쇼케이스용 흐름입니다.</small>
|
||||
<small>실제 가맹 모집과 상담을 제공하지 않습니다.</small>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
@ -453,9 +459,9 @@
|
|||
<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><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">DESIGN SHOWCASE · 2026</p></div>
|
||||
<div class="foot-truth"><strong>가상 브랜드 안내</strong><p>실제 주문, 결제, 매장 방문, 가맹 문의를 제공하지 않습니다.</p><p class="mono">GRIDDLE CLUB · 2026</p></div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 477 KiB After Width: | Height: | Size: 500 KiB |
|
|
@ -105,7 +105,7 @@
|
|||
clearRadioError("areaKind", "area-kind-error");
|
||||
|
||||
if (getInputValue("demoName").length < 2) {
|
||||
invalid.push(setFieldError("demo-name", "demo-name-error", "예시 호칭을 두 글자 이상 입력해 주세요."));
|
||||
invalid.push(setFieldError("demo-name", "demo-name-error", "확인용 호칭을 두 글자 이상 입력해 주세요."));
|
||||
}
|
||||
if (!getSelectValue("region")) {
|
||||
invalid.push(setFieldError("region", "region-error", "희망 지역을 골라 주세요."));
|
||||
|
|
@ -240,14 +240,14 @@
|
|||
if (!(consent instanceof HTMLInputElement) || !consent.checked) {
|
||||
consent?.setAttribute("aria-invalid", "true");
|
||||
consent?.setAttribute("aria-describedby", "demo-consent-error");
|
||||
if (consentError) consentError.textContent = "문의 체험 안내를 확인해 주세요.";
|
||||
if (consentError) consentError.textContent = "개인정보를 입력하지 않았는지 확인해 주세요.";
|
||||
consent?.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
if (submitButton instanceof HTMLButtonElement) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = "화면 상태 확인 중";
|
||||
submitButton.textContent = "입력한 조건 확인 중";
|
||||
}
|
||||
if (submitState) submitState.textContent = "";
|
||||
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
submitButton.textContent = "다시 시도하기";
|
||||
}
|
||||
if (submitState) {
|
||||
submitState.textContent = "지금은 문의 준비 상태를 바꾸지 못했어요. 입력 내용은 화면에 그대로 두었습니다.";
|
||||
submitState.textContent = "지금은 입력한 조건을 확인할 수 없어요. 입력한 값은 그대로 두었습니다.";
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -271,7 +271,7 @@
|
|||
}
|
||||
if (submitButton instanceof HTMLButtonElement) {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = "문의 준비 마치기";
|
||||
submitButton.textContent = "입력한 조건 확인하기";
|
||||
}
|
||||
}, 450);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -61,13 +61,10 @@
|
|||
const summaryStoreState = document.querySelector("#summary-store-state");
|
||||
const summaryAllergens = document.querySelector("#summary-allergens");
|
||||
const summaryTotal = document.querySelector("#summary-total");
|
||||
const saveButton = document.querySelector("#save-builder");
|
||||
const saveStatus = document.querySelector("#save-status");
|
||||
|
||||
const stores = {
|
||||
seongsu: { label: "성수 예시점", state: "영업 중 예시", available: true },
|
||||
yeonnam: { label: "연남 예시점", state: "오늘 영업 종료 예시", available: false },
|
||||
mullae: { label: "문래 예시점", state: "오늘은 쉬어요", available: false },
|
||||
seongsu: { label: "성수점", state: "영업 중" },
|
||||
yeonnam: { label: "연남점", state: "오늘 영업 종료" },
|
||||
mullae: { label: "문래점", state: "오늘 휴무" },
|
||||
};
|
||||
|
||||
const fieldValue = (name) => {
|
||||
|
|
@ -134,16 +131,6 @@
|
|||
if (summaryAllergens) summaryAllergens.textContent = allergens.join(", ");
|
||||
if (summaryTotal) summaryTotal.textContent = formatWon(builderPrice({ flavor, patty, cheese, serving }));
|
||||
|
||||
if (saveButton) {
|
||||
saveButton.disabled = soldOut || !store.available;
|
||||
if (soldOut) saveButton.textContent = "오늘 품절 예시";
|
||||
else if (!store.available) saveButton.textContent = "다른 매장을 골라 주세요";
|
||||
else saveButton.textContent = "선택 내용 저장";
|
||||
}
|
||||
if (saveStatus) {
|
||||
saveStatus.textContent = "";
|
||||
saveStatus.classList.remove("is-error");
|
||||
}
|
||||
};
|
||||
|
||||
builder?.addEventListener("change", updateBuilder);
|
||||
|
|
@ -169,20 +156,6 @@
|
|||
button.addEventListener("click", () => applyPreset(button.dataset.preset || "double"));
|
||||
});
|
||||
|
||||
saveButton?.addEventListener("click", () => {
|
||||
if (!builder || !saveStatus) return;
|
||||
const snapshot = Object.fromEntries(new FormData(builder).entries());
|
||||
try {
|
||||
if (fixture === "save-fail") throw new Error("fixture");
|
||||
sessionStorage.setItem("griddle-club-demo-selection", JSON.stringify(snapshot));
|
||||
saveStatus.classList.remove("is-error");
|
||||
saveStatus.textContent = "이 기기의 현재 탭에 선택 내용을 남겼어요. 실제 주문으로 전송되지 않습니다.";
|
||||
} catch {
|
||||
saveStatus.classList.add("is-error");
|
||||
saveStatus.textContent = "선택 내용을 남기지 못했어요. 고른 내용은 화면에 그대로 두었습니다.";
|
||||
}
|
||||
});
|
||||
|
||||
const storeCards = [...document.querySelectorAll("[data-store]")];
|
||||
const mapPins = [...document.querySelectorAll("[data-map-store]")];
|
||||
const storeSearch = document.querySelector("#store-search");
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
}
|
||||
|
||||
.franchise-hero-copy .section-kicker {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
}
|
||||
|
||||
.franchise-hero h1 {
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
max-width: 560px;
|
||||
margin-top: 52px;
|
||||
padding: 18px 20px;
|
||||
border-left: 3px solid #8ea5ff;
|
||||
border-left: 3px solid var(--blue-soft);
|
||||
background: #2b2926;
|
||||
}
|
||||
|
||||
|
|
@ -299,9 +299,9 @@
|
|||
|
||||
.franchise-timeline li {
|
||||
display: grid;
|
||||
grid-template-columns: 56px 1fr auto;
|
||||
grid-template-columns: 4.5rem minmax(0, 1fr) minmax(9rem, auto);
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
gap: 1.5rem;
|
||||
min-height: 124px;
|
||||
padding: 22px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
|
|
@ -325,10 +325,13 @@
|
|||
}
|
||||
|
||||
.franchise-timeline small {
|
||||
justify-self: end;
|
||||
min-width: 8rem;
|
||||
padding: 6px 9px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cost-section {
|
||||
|
|
@ -337,7 +340,7 @@
|
|||
}
|
||||
|
||||
.cost-section .section-kicker {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
}
|
||||
|
||||
.cost-head {
|
||||
|
|
@ -355,6 +358,7 @@
|
|||
.unknown-cost {
|
||||
padding: 22px;
|
||||
border: 1px solid #625f5a;
|
||||
border-left: 3px solid var(--blue-soft);
|
||||
background: #2a2825;
|
||||
}
|
||||
|
||||
|
|
@ -366,7 +370,7 @@
|
|||
.unknown-cost strong {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
|
@ -390,8 +394,10 @@
|
|||
|
||||
.cost-table th,
|
||||
.cost-table td {
|
||||
padding: 17px 14px;
|
||||
padding: 1.125rem 1rem;
|
||||
border-bottom: 1px solid #4f4c47;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.55;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
@ -410,7 +416,7 @@
|
|||
}
|
||||
|
||||
.cost-table td:nth-child(3) {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
|
@ -813,6 +819,12 @@
|
|||
grid-template-columns: 1.2fr 0.8fr 1.4fr;
|
||||
}
|
||||
|
||||
.cost-table th:nth-child(3),
|
||||
.cost-table td:nth-child(3) {
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.franchise-hero {
|
||||
grid-template-columns: 0.95fr 1.05fr;
|
||||
|
|
@ -977,3 +989,38 @@
|
|||
gap: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 공개 메인과 같은 초광폭 상한: 사진이 내용보다 먼저 커지지 않는다. */
|
||||
@media (min-width: 120rem) {
|
||||
.franchise-hero {
|
||||
width: min(100%, var(--hero-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(42rem, 1.14fr);
|
||||
margin-inline: auto;
|
||||
border-inline: 1px solid var(--ink-soft);
|
||||
}
|
||||
|
||||
.franchise-hero-copy {
|
||||
width: min(100%, var(--copy-wide));
|
||||
justify-self: end;
|
||||
padding: clamp(5.5rem, 6vw, 8rem) clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
|
||||
.franchise-hero h1 {
|
||||
max-width: 12ch;
|
||||
font-size: clamp(4.25rem, 3.2rem + 2.2vw, 5.5rem);
|
||||
}
|
||||
|
||||
.franchise-hero-media {
|
||||
width: min(100%, var(--media-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.fact-rail .wrap,
|
||||
.model-section .wrap,
|
||||
.site-fit-section .wrap,
|
||||
.franchise-process .wrap {
|
||||
max-width: var(--workbench-wide);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,6 +240,17 @@ fieldset {
|
|||
line-height: 0.98;
|
||||
}
|
||||
|
||||
/* 초광폭에서 바깥 여백을 늘려도 카피 칼럼의 안쪽 폭이 사라지지 않게 한다. */
|
||||
@media (min-width: 120rem) {
|
||||
.hero {
|
||||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 520px;
|
||||
margin-top: 30px;
|
||||
|
|
@ -373,8 +384,9 @@ fieldset {
|
|||
|
||||
.hero-order button {
|
||||
justify-self: start;
|
||||
margin-top: 12px;
|
||||
padding: 0 0 3px;
|
||||
min-height: 44px;
|
||||
margin: 8px -8px -4px;
|
||||
padding: 8px 8px 7px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid white;
|
||||
background: transparent;
|
||||
|
|
@ -501,7 +513,6 @@ fieldset {
|
|||
}
|
||||
|
||||
.menu-photo,
|
||||
.ingredient-stack,
|
||||
.menu-poster {
|
||||
aspect-ratio: 4 / 3;
|
||||
position: relative;
|
||||
|
|
@ -512,6 +523,7 @@ fieldset {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
.menu-number {
|
||||
|
|
@ -527,57 +539,17 @@ fieldset {
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ingredient-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
background: var(--steel);
|
||||
}
|
||||
|
||||
.ingredient-stack span {
|
||||
width: 62%;
|
||||
height: 9%;
|
||||
display: block;
|
||||
border-radius: 45% 45% 15% 15%;
|
||||
background: var(--ink);
|
||||
}
|
||||
|
||||
.ingredient-stack .bun {
|
||||
height: 19%;
|
||||
background: #d89643;
|
||||
}
|
||||
|
||||
.ingredient-stack .bun.bottom {
|
||||
height: 11%;
|
||||
border-radius: 10% 10% 35% 35%;
|
||||
}
|
||||
|
||||
.ingredient-stack .pickle {
|
||||
height: 4%;
|
||||
background: #4e6726;
|
||||
}
|
||||
|
||||
.ingredient-stack .cheese {
|
||||
width: 67%;
|
||||
height: 5%;
|
||||
background: var(--cheese);
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
|
||||
.ingredient-stack .patty {
|
||||
height: 11%;
|
||||
border-radius: 30%;
|
||||
background: #4a2118;
|
||||
}
|
||||
|
||||
.ingredient-stack b {
|
||||
.menu-image-note {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 14px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
padding: 5px 7px;
|
||||
background: rgb(255 253 248 / 94%);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.menu-poster {
|
||||
|
|
@ -697,7 +669,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.builder-section > .wrap > .section-head .section-kicker {
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
}
|
||||
|
||||
.builder-summary .section-kicker {
|
||||
|
|
@ -724,6 +696,10 @@ fieldset {
|
|||
border-bottom: 1px solid #625f5a;
|
||||
}
|
||||
|
||||
.builder-form fieldset + fieldset {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.builder-form legend {
|
||||
width: 100%;
|
||||
margin-bottom: 18px;
|
||||
|
|
@ -733,7 +709,7 @@ fieldset {
|
|||
|
||||
.builder-form legend span {
|
||||
margin-right: 12px;
|
||||
color: #8ea5ff;
|
||||
color: var(--blue-soft);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
@ -776,7 +752,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.choice-row input:checked + span {
|
||||
border-color: #8ea5ff;
|
||||
border-color: var(--blue-soft);
|
||||
background: var(--blue);
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -786,7 +762,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.choice-row input:focus-visible + span {
|
||||
outline: 3px solid #8ea5ff;
|
||||
outline: 3px solid var(--blue-soft);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -992,18 +968,6 @@ fieldset {
|
|||
background: transparent;
|
||||
}
|
||||
|
||||
.save-status {
|
||||
min-height: 23px;
|
||||
margin-top: 10px;
|
||||
color: var(--success);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.save-status.is-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.process-section {
|
||||
padding-block: 0;
|
||||
background: var(--steel);
|
||||
|
|
@ -1097,7 +1061,7 @@ fieldset {
|
|||
.search-box input {
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
padding: 8px 0;
|
||||
padding: 8px 12px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
|
|
@ -1109,7 +1073,15 @@ fieldset {
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
outline: 3px solid var(--focus);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.search-box button {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding-inline: 10px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
|
|
@ -1255,11 +1227,12 @@ fieldset {
|
|||
}
|
||||
|
||||
.map-pin {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding-inline: 8px;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
background: var(--ink);
|
||||
|
|
@ -1269,8 +1242,8 @@ fieldset {
|
|||
|
||||
.map-pin span {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
padding: 4px 7px;
|
||||
top: 56px;
|
||||
padding: 5px 9px;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 10px;
|
||||
|
|
@ -1779,6 +1752,69 @@ fieldset {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 821px) {
|
||||
.hero {
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.hero-order {
|
||||
position: static;
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
width: auto;
|
||||
min-height: 8.75rem;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.builder-form legend,
|
||||
.field-label,
|
||||
.select-grid label {
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.choice-row label > span small,
|
||||
.menu-foot small {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.hero-order {
|
||||
position: static;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.hero-order {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.service-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.service-row p {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.truth-bar,
|
||||
.site-head,
|
||||
|
|
@ -1805,3 +1841,107 @@ fieldset {
|
|||
border: 1px solid #777;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 2026-08-30: 초광폭은 확장이 아니라 독립된 구성 상태다 ─────────── */
|
||||
@media (min-width: 120rem) {
|
||||
.site-head .wrap,
|
||||
.service-strip .wrap,
|
||||
.section > .wrap,
|
||||
.site-foot .wrap {
|
||||
max-width: var(--workbench-wide);
|
||||
}
|
||||
|
||||
.hero {
|
||||
width: min(100%, var(--hero-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(42rem, 1.14fr);
|
||||
margin-inline: auto;
|
||||
border-inline: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
width: min(100%, var(--copy-wide));
|
||||
max-width: none;
|
||||
justify-self: end;
|
||||
padding: clamp(5.5rem, 6vw, 8rem) clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
max-width: none;
|
||||
font-size: clamp(4.5rem, 3.6rem + 1.5vw, 5.25rem);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero h1 br {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-wide-space {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
max-width: 38rem;
|
||||
}
|
||||
|
||||
.hero-media {
|
||||
width: min(100%, var(--media-wide));
|
||||
min-height: clamp(43rem, 48vw, 54rem);
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.hero-media img {
|
||||
object-position: 52% center;
|
||||
}
|
||||
|
||||
.hero-order {
|
||||
right: clamp(1.5rem, 3vw, 3.5rem);
|
||||
width: min(21rem, calc(100% - 3rem));
|
||||
}
|
||||
|
||||
.menu-grid,
|
||||
.builder-layout,
|
||||
.store-layout {
|
||||
max-width: var(--workbench-wide);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.builder-layout {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(27rem, 34rem);
|
||||
}
|
||||
|
||||
.process-grid,
|
||||
.franchise-callout {
|
||||
width: min(100%, var(--stage-wide));
|
||||
margin-inline: auto;
|
||||
border-inline: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.process-grid {
|
||||
/* .wrap's content cap must not silently win over this named wide stage. */
|
||||
grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
|
||||
}
|
||||
|
||||
.process-section > .process-grid {
|
||||
max-width: var(--stage-wide);
|
||||
}
|
||||
|
||||
.process-copy {
|
||||
/* Reset both inherited viewport-derived side paddings: leaving the left
|
||||
value in place leaves a 12px text column at a 2560px viewport. */
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
justify-self: stretch;
|
||||
padding-inline: clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
|
||||
.process-media,
|
||||
.franchise-image {
|
||||
min-height: clamp(42rem, 43vw, 52rem);
|
||||
}
|
||||
|
||||
.franchise-copy {
|
||||
max-width: 43rem;
|
||||
padding-inline: clamp(4rem, 5vw, 6rem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
--line-strong: #8a8379;
|
||||
--blue: #2147e7;
|
||||
--blue-dark: #1533ac;
|
||||
--blue-soft: #8ea5ff;
|
||||
--blue-pale: #dce4ff;
|
||||
--steel: #d9dcda;
|
||||
--cheese: #ffc642;
|
||||
|
|
@ -18,6 +19,12 @@
|
|||
--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
|
||||
--wrap: 1180px;
|
||||
/* 초광폭에서도 히어로와 후속 정보 표면은 같은 폭을 쓰지 않는다. */
|
||||
--hero-wide: 2160px;
|
||||
--stage-wide: 1680px;
|
||||
--workbench-wide: 1480px;
|
||||
--copy-wide: 900px;
|
||||
--media-wide: 1120px;
|
||||
--gutter: clamp(18px, 4vw, 52px);
|
||||
--section: clamp(76px, 10vw, 144px);
|
||||
--space-1: 4px;
|
||||
|
|
@ -41,3 +48,15 @@
|
|||
--section: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 120rem) {
|
||||
:root {
|
||||
--wrap: 1320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 150rem) {
|
||||
:root {
|
||||
--wrap: 1400px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue