125 lines
4.7 KiB
HTML
125 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>무월 — 격주 원두 구독</title>
|
|
<meta name="description" content="원두마다 산미·바디·단맛을 같은 척도로 측정해 표기합니다. 로스팅 날짜와 생두 구매가를 함께 적습니다.">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600&display=swap">
|
|
<link rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
|
|
|
|
<link rel="stylesheet" href="03-tokens.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- 필터 정의: 필름 그레인 (svg-filters.md R1 — data URI 대신 인라인이 필요할 때만) -->
|
|
|
|
<a class="skip" href="#main">본문으로 건너뛰기</a>
|
|
|
|
<header class="page-header">
|
|
<div class="page-header__inner">
|
|
<a class="wordmark" href="/">무월</a>
|
|
<nav aria-label="주 메뉴">
|
|
<ul class="nav">
|
|
<li><a href="#beans">원두</a></li>
|
|
<li><a href="#plan">구독</a></li>
|
|
<li><a href="#ledger">거래 내역</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero__inner">
|
|
|
|
<div class="hero__head reveal">
|
|
<p class="eyebrow">격주 원두 구독</p>
|
|
<h1 id="hero-title" class="hero__title">
|
|
취향은 형용사가 아니라 좌표입니다
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="hero__lede reveal">
|
|
<p class="hero__body">
|
|
무월은 원두마다 산미·바디·단맛을 같은 척도로 재서 적습니다.
|
|
로스팅한 날짜와 생두를 얼마에 샀는지도 같이 적습니다.
|
|
마셔보기 전에 판단할 수 있어야 고르는 재미가 생깁니다.
|
|
</p>
|
|
<p class="hero__action">
|
|
<a class="cta" href="#plan">2주마다 받아보기</a>
|
|
</p>
|
|
<p class="hero__note">
|
|
첫 발송 전까지 언제든 취소. 배송 주기는 2주 또는 4주 중에 고릅니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="hero__profile reveal">
|
|
<h2 class="profile__title">이번 주 로스팅</h2>
|
|
<div class="profile__scroll" tabindex="0" role="region" aria-label="로스팅 프로파일 표 (가로 스크롤)">
|
|
<table class="profile">
|
|
<caption class="visually-hidden">원두 3종의 산미·바디·단맛 측정값과 로스팅 날짜</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="profile__name">원두</th>
|
|
<th scope="col">산미</th>
|
|
<th scope="col">바디</th>
|
|
<th scope="col">단맛</th>
|
|
<th scope="col" class="profile__date">볶은 날</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row" class="profile__name">
|
|
<span class="profile__origin">에티오피아</span>
|
|
<span class="profile__lot">구지 우라가 · 워시드</span>
|
|
</th>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="profile__name">
|
|
<span class="profile__origin">콜롬비아</span>
|
|
<span class="profile__lot">우일라 · 허니</span>
|
|
</th>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row" class="profile__name">
|
|
<span class="profile__origin">과테말라</span>
|
|
<span class="profile__lot">우에우에테낭고 · 워시드</span>
|
|
</th>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
<td class="num" data-pending>—</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p class="profile__legend">
|
|
1에서 5까지. 같은 추출 조건(20g / 300mL / 92°C)에서 로스터 3인이 매깁니다.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 이후 섹션은 4단계 범위 밖 — 구조 계획만. 05-structure-plan.md 참조 -->
|
|
|
|
</main>
|
|
|
|
</body>
|
|
</html>
|