feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
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:
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
|
|
@ -3,39 +3,37 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<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="이번 로스팅 원두의 이름과 볶은 날, 로트별 산미·바디 차트, 생두 매입가, 격주 원두 구독을 안내하는 가상 로스터리."
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#f5efe6" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/muwol-coffee/assets/beans-hero.webp" />
|
||||
<meta property="og:image:alt" content="도자기 그릇에 담긴 갓 볶은 원두" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#1f1713" />
|
||||
|
||||
<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="./styles/fonts.css?v=20260912all"
|
||||
href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@900&family=Gowun+Dodum&display=swap"
|
||||
/>
|
||||
<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=JetBrains+Mono:wght@400;500&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/main.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='%23F4F4F0'/%3E%3Cpath d='M16 7a7 7 0 0 1 7 7h-7z' fill='%237A3E1D'/%3E%3Cpath d='M16 9a7 7 0 0 0-7 7h7z' fill='%23181B18'/%3E%3Ccircle cx='16' cy='16' r='9' fill='none' stroke='%23181B18' stroke-width='1.5'/%3E%3C/svg%3E"
|
||||
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='%231f1713'/%3E%3Ccircle cx='16' cy='16' r='10' fill='%23d390ca'/%3E%3Cpath d='M16 7a9 9 0 0 1 0 18c-2-3-2-6 0-9s2-6 0-9z' fill='%231f1713'/%3E%3C/svg%3E"
|
||||
/>
|
||||
<script>
|
||||
/* JS가 있을 때만 탭 패널을 숨긴다. 없으면 세 패널이 순서대로 다 보인다 */
|
||||
document.documentElement.classList.add("js");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -43,260 +41,327 @@
|
|||
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a class="wordmark" href="#main">무월</a>
|
||||
<nav class="nav" aria-label="섹션">
|
||||
<a href="#scale">척도</a>
|
||||
<a href="#ledger">원장</a>
|
||||
<a href="#recipe">레시피</a>
|
||||
<a href="#plan">구독</a>
|
||||
</nav>
|
||||
<p class="wordmark">무월</p>
|
||||
<p class="tagline">싱글오리진 로스터리. 로트마다 산미와 바디를 재고 생두 매입가를 공개합니다.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section class="hero" aria-labelledby="hero-h">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-text">
|
||||
<p class="hero-label reveal">가상 로스터리 · 원두 선택 기록 예시</p>
|
||||
<h1 id="hero-h" class="reveal" style="--delay: 60ms">취향을 고르는 향미의 좌표</h1>
|
||||
<p class="lead reveal" style="--delay: 120ms">
|
||||
과일 향이라는 말만으로는 추출 방법을 고르기 어렵습니다. 이 페이지는
|
||||
향미 좌표와 매입 기록을 함께 읽는 방식을 보여 줍니다.
|
||||
</p>
|
||||
<p class="lead hero-disclaimer reveal" style="--delay: 140ms">
|
||||
로트, 가격, 출고 정보는 실제 판매나 구독을 뜻하지 않는 예시입니다.
|
||||
</p>
|
||||
<div class="hero-actions reveal" style="--delay: 180ms">
|
||||
<a class="btn" href="#plan">구독 구성 보기</a>
|
||||
<p class="hero-note">가상 로트·가격·출고 안내 예시 · 실제 주문과 구독을 받지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure class="hero-photo reveal" style="--delay: 100ms">
|
||||
<img
|
||||
src="./assets/beans-hero.webp"
|
||||
alt="따뜻한 회색 리넨 위 질도기 그릇에 담긴 갓 볶은 원두와 놋쇠 스쿱"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>로스팅 연출 이미지 · 가상 로트 기록</figcaption>
|
||||
</figure>
|
||||
|
||||
<dl class="hero-beans reveal" style="--delay: 240ms">
|
||||
<div class="bean-row">
|
||||
<dt>에티오피아 구지 우라가</dt>
|
||||
<dd class="bean-origin">워시드 · 해발 2,150m · 커핑 88.75</dd>
|
||||
<dd class="bean-price"><span>100g</span> 예시 8,500원</dd>
|
||||
</div>
|
||||
<div class="bean-row">
|
||||
<dt>콜롬비아 엘 파라이소</dt>
|
||||
<dd class="bean-origin">혐기발효 · 해발 1,930m · 커핑 91.20</dd>
|
||||
<dd class="bean-price"><span>100g</span> 예시 11,000원</dd>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<h1 id="hero-h" class="rise" style="--i: 0">에티오피아 구지 우라가</h1>
|
||||
<p class="roast-date rise" style="--i: 1">10월 3일 로스팅</p>
|
||||
<dl class="facts rise" style="--i: 2">
|
||||
<div><dt>가공</dt><dd>워시드</dd></div>
|
||||
<div><dt>해발</dt><dd>2,150m</dd></div>
|
||||
<div><dt>커핑</dt><dd>88.75</dd></div>
|
||||
<div><dt>100g</dt><dd>8,500원</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="scale" class="section" aria-labelledby="scale-h">
|
||||
<div class="wrap scale-grid">
|
||||
<div class="scale-text">
|
||||
<h2 id="scale-h">같은 척도로 잰<br />향미 좌표</h2>
|
||||
<p>
|
||||
같은 밝기로 볶아도 생두가 머금은 수분과 밀도에 따라 열은 다르게
|
||||
들어갑니다. 그래서 무월은 색이 아니라 1차 팝핑 후 감률과 커핑 점수로
|
||||
로트를 기록합니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
좌표는 로트마다 다시 측정해 옮겨 적습니다. 지난 로트의 좌표와 지금이
|
||||
같다고 말하지 않습니다.
|
||||
</p>
|
||||
<ul class="scale-legend" aria-label="좌표 범례">
|
||||
<li><span class="key" aria-hidden="true"></span>우라가 G1 워시드</li>
|
||||
<li><span class="key key-b" aria-hidden="true"></span>엘 파라이소 혐기발효</li>
|
||||
<li><span class="key key-c" aria-hidden="true"></span>엘 소코로 마라카투라</li>
|
||||
<!-- 로스팅 날짜 마퀴. 같은 목록을 네 번 이어 붙여 2560px에서도 끊김 없이 돈다. 사본 셋은 보조기술에서 숨긴다.
|
||||
5초 넘게 움직이므로 정지 버튼을 둔다(WCAG 2.2.2). 감소 모션에서는 멈춘 목록이다 -->
|
||||
<section class="marquee rise" style="--i: 3" aria-labelledby="marquee-h">
|
||||
<h2 id="marquee-h" class="sr-only">이번 로스팅 날짜</h2>
|
||||
<button class="marquee-toggle" type="button" id="marquee-toggle" aria-pressed="false" aria-controls="marquee-track">
|
||||
멈춤
|
||||
</button>
|
||||
<div class="marquee-viewport" role="region" aria-label="로스팅 날짜 목록, 가로로 넘길 수 있음" tabindex="0">
|
||||
<div class="marquee-track" id="marquee-track">
|
||||
<ul class="marquee-list">
|
||||
<li>우라가 10월 3일 로스팅</li>
|
||||
<li>엘 파라이소 10월 3일 로스팅</li>
|
||||
<li>엘 소코로 9월 30일 로스팅</li>
|
||||
<li>다음 로스팅 10월 10일</li>
|
||||
</ul>
|
||||
<ul class="marquee-list" aria-hidden="true">
|
||||
<li>우라가 10월 3일 로스팅</li>
|
||||
<li>엘 파라이소 10월 3일 로스팅</li>
|
||||
<li>엘 소코로 9월 30일 로스팅</li>
|
||||
<li>다음 로스팅 10월 10일</li>
|
||||
</ul>
|
||||
<ul class="marquee-list" aria-hidden="true">
|
||||
<li>우라가 10월 3일 로스팅</li>
|
||||
<li>엘 파라이소 10월 3일 로스팅</li>
|
||||
<li>엘 소코로 9월 30일 로스팅</li>
|
||||
<li>다음 로스팅 10월 10일</li>
|
||||
</ul>
|
||||
<ul class="marquee-list" aria-hidden="true">
|
||||
<li>우라가 10월 3일 로스팅</li>
|
||||
<li>엘 파라이소 10월 3일 로스팅</li>
|
||||
<li>엘 소코로 9월 30일 로스팅</li>
|
||||
<li>다음 로스팅 10월 10일</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="scale-plot reveal">
|
||||
<p class="plot-note">가로축: 산미에서 바디까지 · 세로축: 기록값 0–10</p>
|
||||
<svg
|
||||
viewBox="0 0 520 340"
|
||||
role="img"
|
||||
aria-label="산미-바디 2차원 좌표. 우라가는 산미 높음, 엘 파라이소는 단맛 높음, 엘 소코로는 바디 높음."
|
||||
>
|
||||
<g class="grid">
|
||||
<line x1="56" y1="40" x2="56" y2="280" />
|
||||
<line x1="56" y1="280" x2="500" y2="280" />
|
||||
<line x1="56" y1="160" x2="500" y2="160" />
|
||||
<line x1="278" y1="40" x2="278" y2="280" />
|
||||
<line x1="167" y1="40" x2="167" y2="280" stroke-dasharray="2 6" />
|
||||
<line x1="389" y1="40" x2="389" y2="280" stroke-dasharray="2 6" />
|
||||
<line x1="56" y1="100" x2="500" y2="100" stroke-dasharray="2 6" />
|
||||
<line x1="56" y1="220" x2="500" y2="220" stroke-dasharray="2 6" />
|
||||
</g>
|
||||
<g class="axis-labels">
|
||||
<text x="56" y="302">산미 →</text>
|
||||
<text x="500" y="302" text-anchor="end">바디 →</text>
|
||||
<text x="46" y="46" text-anchor="end">10.0</text>
|
||||
<text x="46" y="286" text-anchor="end">0</text>
|
||||
</g>
|
||||
<g class="points">
|
||||
<circle cx="140" cy="62" r="5" />
|
||||
<text x="140" y="46" text-anchor="middle">우라가 8.8</text>
|
||||
<circle cx="252" cy="92" r="5" class="pt-b" />
|
||||
<text x="252" y="76" text-anchor="middle">엘 파라이소 9.0</text>
|
||||
<circle cx="430" cy="196" r="5" class="pt-c" />
|
||||
<text x="430" y="180" text-anchor="middle">엘 소코로 8.6</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>가상 로트의 향미 좌표 예시 · 실제 커핑 결과가 아닙니다</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="ledger" class="section band" aria-labelledby="ledger-h">
|
||||
<nav class="tabs" aria-label="보기">
|
||||
<div class="wrap">
|
||||
<div class="ledger-head">
|
||||
<h2 id="ledger-h">생두 매입 기록 예시</h2>
|
||||
<p class="muted">
|
||||
생산자, 가공, 매입가, 커핑을 한 줄에 함께 읽는 기록 형식입니다. 아래
|
||||
농장명·가공 정보·가격·점수는 실제 거래나 품질 평가가 아닌 예시입니다.
|
||||
</p>
|
||||
<div class="tablist" role="tablist" aria-label="원두, 구독, 매장">
|
||||
<a role="tab" id="tab-beans" href="#beans" data-view="beans" aria-controls="beans" aria-selected="true">원두</a>
|
||||
<a role="tab" id="tab-plan" href="#plan" data-view="plan" aria-controls="plan" aria-selected="false" tabindex="-1">구독</a>
|
||||
<a role="tab" id="tab-shop" href="#shop" data-view="shop" aria-controls="shop" aria-selected="false" tabindex="-1">매장</a>
|
||||
</div>
|
||||
<div class="table-wrap reveal">
|
||||
<table>
|
||||
<caption class="sr-only">
|
||||
원두별 생두 매입 원장 — 원두명, 생산자, 가공 방식, 매입가, 커핑 점수
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">원두</th>
|
||||
<th scope="col">생산자</th>
|
||||
<th scope="col">가공</th>
|
||||
<th scope="col" class="num">매입가 (FOB/kg)</th>
|
||||
<th scope="col" class="num">커핑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">에티오피아 구지 우라가</th>
|
||||
<td>하르소 콜루 세척장</td>
|
||||
<td>워시드 · 72시간 발효</td>
|
||||
<td class="num">$14.20</td>
|
||||
<td class="num">88.75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">콜롬비아 엘 파라이소</th>
|
||||
<td>디에고 사무엘 베르무데스</td>
|
||||
<td>혐기발효 · 열충격 2회</td>
|
||||
<td class="num">$26.50</td>
|
||||
<td class="num">91.20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">과테말라 엘 소코로</th>
|
||||
<td>후안 디에고 데 라 세르다</td>
|
||||
<td>전량 워시드</td>
|
||||
<td class="num">$16.80</td>
|
||||
<td class="num">89.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 원두 -->
|
||||
<section id="beans" class="panel" role="tabpanel" aria-labelledby="tab-beans" tabindex="0">
|
||||
<div class="wrap">
|
||||
<div id="scale" class="scale-grid">
|
||||
<div class="scale-text">
|
||||
<h2 id="scale-h">로트 세 개의 산미와 바디를 10점 척도로 쟀습니다</h2>
|
||||
<p>
|
||||
같은 배전도로 볶아도 생두의 수분과 밀도에 따라 열이 들어가는 정도가
|
||||
다릅니다. 그래서 무월은 원두 색이 아니라 1차 크랙 이후 온도 상승률과
|
||||
커핑 점수로 로트를 기록합니다.
|
||||
</p>
|
||||
<p class="muted">
|
||||
차트 값은 로트가 바뀔 때마다 새로 측정합니다. 같은 농장 원두라도
|
||||
지난 로트 값을 그대로 쓰지 않습니다.
|
||||
</p>
|
||||
<ul class="scale-legend" aria-label="차트 범례">
|
||||
<li><span class="key" aria-hidden="true"></span>우라가 G1 워시드</li>
|
||||
<li><span class="key key-b" aria-hidden="true"></span>엘 파라이소 혐기발효</li>
|
||||
<li><span class="key key-c" aria-hidden="true"></span>엘 소코로 마라카투라</li>
|
||||
</ul>
|
||||
</div>
|
||||
<figure class="scale-plot">
|
||||
<p class="plot-note">가로축은 산미에서 바디까지, 세로축은 기록값 0에서 10까지입니다.</p>
|
||||
<svg
|
||||
viewBox="0 0 520 340"
|
||||
role="img"
|
||||
aria-label="산미-바디 2차원 좌표. 우라가는 산미 높음, 엘 파라이소는 단맛 높음, 엘 소코로는 바디 높음."
|
||||
>
|
||||
<g class="grid">
|
||||
<line x1="56" y1="40" x2="56" y2="280" />
|
||||
<line x1="56" y1="280" x2="500" y2="280" />
|
||||
<line x1="56" y1="160" x2="500" y2="160" />
|
||||
<line x1="278" y1="40" x2="278" y2="280" />
|
||||
<line x1="167" y1="40" x2="167" y2="280" stroke-dasharray="2 6" />
|
||||
<line x1="389" y1="40" x2="389" y2="280" stroke-dasharray="2 6" />
|
||||
<line x1="56" y1="100" x2="500" y2="100" stroke-dasharray="2 6" />
|
||||
<line x1="56" y1="220" x2="500" y2="220" stroke-dasharray="2 6" />
|
||||
</g>
|
||||
<g class="axis-labels">
|
||||
<text x="56" y="302">산미 →</text>
|
||||
<text x="500" y="302" text-anchor="end">바디 →</text>
|
||||
<text x="46" y="46" text-anchor="end">10.0</text>
|
||||
<text x="46" y="286" text-anchor="end">0</text>
|
||||
</g>
|
||||
<g class="points">
|
||||
<circle cx="140" cy="62" r="5" />
|
||||
<text x="140" y="46" text-anchor="middle">우라가 8.8</text>
|
||||
<circle cx="252" cy="92" r="5" class="pt-b" />
|
||||
<text x="252" y="76" text-anchor="middle">엘 파라이소 9.0</text>
|
||||
<circle cx="430" cy="196" r="5" class="pt-c" />
|
||||
<text x="430" y="180" text-anchor="middle">엘 소코로 8.6</text>
|
||||
</g>
|
||||
</svg>
|
||||
<figcaption>로트 세 개의 향미 차트. 가로가 산미, 세로가 바디, 10점 척도</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div id="ledger" class="ledger">
|
||||
<div class="ledger-head">
|
||||
<h2 id="ledger-h">생두 매입가와 커핑 점수를 한 줄에 적었습니다</h2>
|
||||
<p class="muted">
|
||||
생산자, 가공 방식, 매입가, 커핑 점수를 같은 행에 둡니다. 매입가가
|
||||
높은 생두는 그 이유를 같은 줄에서 확인할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="table-wrap" role="region" aria-label="생두 매입 기록 표, 좁은 화면에서는 가로로 넘길 수 있음" tabindex="0">
|
||||
<table>
|
||||
<caption class="sr-only">
|
||||
원두별 생두 매입 기록 — 원두명, 로스팅 날짜, 생산자, 가공 방식, 매입가, 커핑 점수
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">원두</th>
|
||||
<th scope="col">로스팅</th>
|
||||
<th scope="col">생산자</th>
|
||||
<th scope="col">가공</th>
|
||||
<th scope="col" class="num">매입가 (FOB/kg)</th>
|
||||
<th scope="col" class="num">커핑</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">에티오피아 구지 우라가</th>
|
||||
<td class="date">10월 3일</td>
|
||||
<td>하르소 콜루 세척장</td>
|
||||
<td>워시드, 72시간 발효</td>
|
||||
<td class="num">$14.20</td>
|
||||
<td class="num">88.75</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">콜롬비아 엘 파라이소</th>
|
||||
<td class="date">10월 3일</td>
|
||||
<td>디에고 사무엘 베르무데스</td>
|
||||
<td>혐기발효, 열충격 2회</td>
|
||||
<td class="num">$26.50</td>
|
||||
<td class="num">91.20</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">과테말라 엘 소코로</th>
|
||||
<td class="date">9월 30일</td>
|
||||
<td>후안 디에고 데 라 세르다</td>
|
||||
<td>전량 워시드</td>
|
||||
<td class="num">$16.80</td>
|
||||
<td class="num">89.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ledger-note muted">
|
||||
표의 매입가와 점수는 원두 기록 화면의 정보 구조를 설명하기 위한 예시 값입니다.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="recipe" class="section" aria-labelledby="recipe-h">
|
||||
<!-- 구독 -->
|
||||
<section id="plan" class="panel" role="tabpanel" aria-labelledby="tab-plan" tabindex="0" hidden>
|
||||
<div class="wrap plan-grid">
|
||||
<div class="plan-text">
|
||||
<h2 id="plan-h">격주로 원두 두 종을 회당 28,000원에 보내 드립니다</h2>
|
||||
<p>
|
||||
산미형 한 종과 밸런스형 한 종을 함께 보냅니다. 두 원두를 같은 레시피로
|
||||
내려 마시면 차트에서 본 차이를 맛으로 비교할 수 있습니다.
|
||||
</p>
|
||||
<ul class="plan-list">
|
||||
<li>원두별 레시피 카드(분쇄도, 물 온도, 주수)</li>
|
||||
<li>첫 회에 틴케이스 하나 동봉</li>
|
||||
<li>건너뛰기와 해지는 다음 발송 사흘 전까지</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="plan-side">
|
||||
<div class="plan-box">
|
||||
<p class="plan-price"><span class="plan-amount">28,000원</span><span class="plan-unit">회당, 배송비 포함</span></p>
|
||||
<dl class="plan-spec">
|
||||
<div><dt>용량</dt><dd>200g (100g 두 봉투)</dd></div>
|
||||
<div><dt>발송</dt><dd>격주, 다음 발송 10월 10일 로스팅분</dd></div>
|
||||
</dl>
|
||||
<p class="plan-note">가상 로스터리라 실제 주문과 출고는 받지 않습니다.</p>
|
||||
</div>
|
||||
<figure class="photo photo-beans">
|
||||
<img
|
||||
src="./assets/beans-hero.webp"
|
||||
alt="도자기 그릇에 담긴 갓 볶은 원두와 놋쇠 스쿱"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>로스팅 직후, 연출 이미지. 100g 봉투 두 개가 한 회분입니다</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 매장 -->
|
||||
<section id="shop" class="panel" role="tabpanel" aria-labelledby="tab-shop" tabindex="0" hidden>
|
||||
<div class="wrap recipe-grid">
|
||||
<figure class="recipe-photo reveal">
|
||||
<figure class="photo photo-pour">
|
||||
<img
|
||||
src="./assets/pourover.webp"
|
||||
alt="고핫물이 필터 백에 담긴 도자기 드리퍼로 얇은 물줄기로 들어가는 중"
|
||||
alt="뜨거운 물을 도자기 드리퍼 속 필터에 가는 물줄기로 붓는 모습"
|
||||
width="900"
|
||||
height="1200"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>드립 연출 이미지 · 추출 카드 예시</figcaption>
|
||||
<figcaption>엘 파라이소 추출, 연출 이미지</figcaption>
|
||||
</figure>
|
||||
<div class="recipe-text">
|
||||
<h2 id="recipe-h">원두 18g, 물 288g</h2>
|
||||
<div id="recipe" class="recipe-text">
|
||||
<h2 id="recipe-h">매장에서는 원두 18g에 물 288g으로 내립니다</h2>
|
||||
<p>
|
||||
이 구성에서는 원두마다 분쇄도와 주수 간격을 한 장의 카드로 정리합니다.
|
||||
아래 값은 추출 방식을 읽는 예시이며 제품 동봉이나 판매를 뜻하지 않습니다.
|
||||
원두마다 분쇄도와 주수 간격을 레시피 카드 한 장에 적어 봉투에 넣습니다.
|
||||
아래는 엘 파라이소 카드이고, 매장에서도 같은 값으로 내립니다.
|
||||
</p>
|
||||
<dl class="spec">
|
||||
<div>
|
||||
<dt>물 온도</dt>
|
||||
<dd>93°C</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>분쇄도</dt>
|
||||
<dd>코만단테 24딸</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>뜸 들이기</dt>
|
||||
<dd>40초 · 물 40g</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>주수</dt>
|
||||
<dd>3회 · 116g씩</dd>
|
||||
</div>
|
||||
<div><dt>물 온도</dt><dd>93°C</dd></div>
|
||||
<div><dt>분쇄도</dt><dd>코만단테 24클릭</dd></div>
|
||||
<div><dt>뜸 들이기</dt><dd>40초, 물 40g</dd></div>
|
||||
<div><dt>주수</dt><dd>3회, 116g씩</dd></div>
|
||||
</dl>
|
||||
<p class="muted">
|
||||
추출 시간은 2분 30초에서 3분 사이가 기준입니다. 그보다 빨리 흘러내리면
|
||||
곱게 갈고, 늦으면 굵게 갑니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="plan" class="section plan" aria-labelledby="plan-h">
|
||||
<div class="wrap plan-grid">
|
||||
<div class="plan-text">
|
||||
<h2 id="plan-h">격주 구성 예시,<br />서로 다른 원두 두 종</h2>
|
||||
<p>
|
||||
산미형 한 종과 밸런스형 한 종을 함께 제안하는 구독 구성을 예시로
|
||||
보여 줍니다. 원두 종류, 발송 주기, 사은품, 가격은 실제 판매 조건이 아닙니다.
|
||||
</p>
|
||||
<ul class="plan-list">
|
||||
<li>원두별 추출 카드 구성 — 분쇄도·온도·주수</li>
|
||||
<li>틴케이스 동봉 방식 예시</li>
|
||||
<li>건너뛰기와 해지 정보를 함께 보여 주는 구성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="plan-box">
|
||||
<p class="plan-price">
|
||||
<span>예시 28,000원</span><span class="plan-unit">회당 · 배송비 포함</span>
|
||||
</p>
|
||||
<a class="btn btn-inverse" href="#plan">구독 구성 다시 보기</a>
|
||||
<p class="plan-note">200g(100g×2) 구성 예시 · 실제 출고하지 않습니다</p>
|
||||
<p><a class="inline-link" href="#visit">매장 주소와 영업시간은 아래 연락처 카드에 있습니다.</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>무월 · 가상 로스터리 기록 구성</p>
|
||||
<p class="muted">실제 매장, 원두 판매, 구독, 연락처를 제공하지 않습니다.</p>
|
||||
<footer id="visit" class="site-foot" aria-labelledby="visit-h">
|
||||
<div class="wrap">
|
||||
<h2 id="visit-h">매장은 화요일부터 일요일까지 아침 9시에 엽니다</h2>
|
||||
<!-- 주소·영업시간·전화·이메일은 가상 브랜드의 예시 값이다(사용자 결정 2026-10-06). 실제 값이 오면 이 dl 네 칸만 바꾼다 -->
|
||||
<dl class="contact-card">
|
||||
<div><dt>주소</dt><dd>서울 성북구 무월로 17, 1층</dd></div>
|
||||
<div><dt>영업시간</dt><dd>화요일부터 일요일 09:00부터 19:00, 월요일 휴무</dd></div>
|
||||
<div><dt>전화</dt><dd>02-000-3417</dd></div>
|
||||
<div><dt>이메일</dt><dd>hello@muwol.example</dd></div>
|
||||
</dl>
|
||||
<p class="foot-note">
|
||||
무월은 가상 브랜드 쇼케이스입니다. 로트, 생산자, 가격, 점수, 로스팅 날짜, 주소와 연락처는 예시이며 실제 매장과 판매, 구독을 제공하지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const e of entries) {
|
||||
if (!e.isIntersecting) continue;
|
||||
e.target.classList.add("is-in");
|
||||
io.unobserve(e.target);
|
||||
}
|
||||
},
|
||||
{ rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
|
||||
);
|
||||
for (const el of document.querySelectorAll(".reveal")) io.observe(el);
|
||||
(() => {
|
||||
/* 탭 — WAI-ARIA APG Tabs. 활성 탭만 tabindex 0, 화살표·Home·End로 이동하며 즉시 전환한다.
|
||||
앵커라서 JS가 없으면 패널 id로 이동하는 링크로 동작한다 */
|
||||
const tabs = [...document.querySelectorAll('[role="tab"]')];
|
||||
const panels = tabs.map((t) => document.getElementById(t.getAttribute("aria-controls")));
|
||||
const legacy = { scale: "beans", ledger: "beans", recipe: "shop" };
|
||||
|
||||
const activate = (index, { focus = true, hash = true } = {}) => {
|
||||
tabs.forEach((tab, i) => {
|
||||
const on = i === index;
|
||||
tab.setAttribute("aria-selected", on ? "true" : "false");
|
||||
tab.tabIndex = on ? 0 : -1;
|
||||
panels[i].hidden = !on;
|
||||
});
|
||||
if (focus) tabs[index].focus();
|
||||
if (hash) history.replaceState(null, "", "#" + panels[index].id);
|
||||
};
|
||||
|
||||
tabs.forEach((tab, i) => {
|
||||
tab.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
activate(i);
|
||||
});
|
||||
tab.addEventListener("keydown", (e) => {
|
||||
const keys = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: tabs.length - 1 };
|
||||
if (!(e.key in keys)) return;
|
||||
e.preventDefault();
|
||||
activate((keys[e.key] + tabs.length) % tabs.length);
|
||||
});
|
||||
});
|
||||
|
||||
const fromHash = () => {
|
||||
const id = location.hash.slice(1);
|
||||
if (!id) return;
|
||||
const target = legacy[id] || id;
|
||||
const index = panels.findIndex((p) => p.id === target);
|
||||
if (index < 0) return;
|
||||
activate(index, { focus: false, hash: false });
|
||||
if (legacy[id]) document.getElementById(id)?.scrollIntoView();
|
||||
};
|
||||
fromHash();
|
||||
window.addEventListener("hashchange", fromHash);
|
||||
|
||||
/* 마퀴 정지 — 상태는 버튼의 aria-pressed 하나가 소유한다 */
|
||||
const track = document.getElementById("marquee-track");
|
||||
const toggle = document.getElementById("marquee-toggle");
|
||||
toggle.addEventListener("click", () => {
|
||||
const paused = toggle.getAttribute("aria-pressed") !== "true";
|
||||
toggle.setAttribute("aria-pressed", String(paused));
|
||||
toggle.textContent = paused ? "재생" : "멈춤";
|
||||
track.classList.toggle("is-paused", paused);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue