8e3cdb0d3b
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.
385 lines
18 KiB
HTML
385 lines
18 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>1:1 위스키 도슨트 테이스팅 — 캐스크 아카이브</title>
|
|
<meta
|
|
name="description"
|
|
content="캐스크 아카이브의 1:1 위스키 도슨트 테이스팅 안내. 코스 A 3잔 65,000원, 코스 B 5잔 120,000원의 라인업과 도수, 향을 네 계열로 나누는 방법, 함께 내는 페어링 플레이트를 적었습니다."
|
|
/>
|
|
<meta property="og:title" content="1:1 위스키 도슨트 테이스팅 — 캐스크 아카이브" />
|
|
<meta property="og:description" content="도슨트 한 명이 한 팀만 맡는 3잔, 5잔 시음 코스의 라인업과 가격." />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://designpaca.chanpaca.net/work/cask-archive/assets/masterclass-lineup.webp" />
|
|
<meta property="og:image:alt" content="코스 B에서 마시는 싱글 캐스크 위스키 5종과 테이스팅 카드" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="theme-color" content="#1a1512" />
|
|
|
|
<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=IBM+Plex+Sans+KR:wght@400;600&family=Nanum+Myeongjo:wght@400;700&display=swap"
|
|
/>
|
|
<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' rx='2' fill='%231A1512'/%3E%3Ccircle cx='16' cy='16' r='10' stroke='%23D18147' stroke-width='2' fill='none'/%3E%3Cpath d='M16 8v16M8 16h16' stroke='%23D18147' stroke-width='1.5'/%3E%3C/svg%3E"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
|
|
|
|
<div class="shell">
|
|
<!-- 측면 색인 — index.html 과 같은 셸 -->
|
|
<header class="index">
|
|
<a class="wordmark" href="../index.html" aria-label="캐스크 아카이브 홈">
|
|
캐스크 아카이브
|
|
<span class="wordmark-sub">독립병입 위스키 바, 한남동</span>
|
|
</a>
|
|
|
|
<details class="toc" open>
|
|
<summary></summary>
|
|
<nav aria-label="차례">
|
|
<ol>
|
|
<li><a href="#courses">시음 코스</a></li>
|
|
<li><a href="#aroma">향 계열 네 가지</a></li>
|
|
<li><a href="#pairing">페어링 플레이트</a></li>
|
|
<li><a href="#reservation-section">세션 선택</a></li>
|
|
<li><a href="../index.html#ledger">캐스크 목록으로</a></li>
|
|
</ol>
|
|
</nav>
|
|
</details>
|
|
|
|
<div class="index-foot">
|
|
<p>코스 A 45분, 코스 B 75분</p>
|
|
<a href="#reservation-section" class="btn-outline">세션 고르기</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content" class="content">
|
|
<!-- 첫 화면: 코스 두 개 -->
|
|
<section class="section" id="courses" aria-labelledby="coursesHeading">
|
|
<div class="ledger-head">
|
|
<h1 id="coursesHeading">도슨트 한 명이 한 팀만 맡아 좋아하는 향에 맞춰 위스키를 고릅니다</h1>
|
|
<p>3잔 또는 5잔, 잔마다 숙성 배럴과 도수의 차이를 짚습니다.</p>
|
|
</div>
|
|
|
|
<dl class="spec-list">
|
|
<div>
|
|
<dt>진행</dt>
|
|
<dd>도슨트 1:1</dd>
|
|
</div>
|
|
<div>
|
|
<dt>장소</dt>
|
|
<dd>캐스크 룸, 한남 27길</dd>
|
|
</div>
|
|
<div>
|
|
<dt>인원</dt>
|
|
<dd>최대 2인 (동반 1인)</dd>
|
|
</div>
|
|
<div>
|
|
<dt>글라스</dt>
|
|
<dd>글렌캐런, 코피타</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
<ul class="course-list mt-5">
|
|
<li class="course-card">
|
|
<div class="course-header">
|
|
<h2 class="course-title">코스 A. 독립병입자 입문 플라이트, 3잔</h2>
|
|
<span class="course-price">65,000원</span>
|
|
</div>
|
|
<p>증류소 공식 제품(OB)과 독립병입(IB) 싱글 캐스크를 나란히 마셔 보며 차이를 비교합니다.</p>
|
|
<table class="lineup-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">순서</th>
|
|
<th scope="col">라인업</th>
|
|
<th scope="col">도수</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>하이랜드 에스테르 (클라인리쉬 14년 vs 독립병입 캐스크)</td>
|
|
<td>46.0% / 54.2%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>스페이사이드 셰리 (글렌토커스 1st Fill 셰리 버트)</td>
|
|
<td>56.8%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>아일라 헤비 피트 (라프로익 2005, SMWS 29.281)</td>
|
|
<td>57.8%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="course-foot">
|
|
<span>45분</span>
|
|
<a href="#reservation-section" class="btn-outline">코스 A 고르기</a>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="course-card">
|
|
<div class="course-header">
|
|
<h2 class="course-title">코스 B. 캐스크 스트렝스와 빈티지 플라이트, 5잔</h2>
|
|
<span class="course-price">120,000원</span>
|
|
</div>
|
|
<p>물을 타지 않은 캐스크 스트렝스와 1990년대 빈티지 캐스크 5종을 차례로 비교해 마십니다. 페어링 플레이트가 함께 나옵니다.</p>
|
|
<table class="lineup-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">순서</th>
|
|
<th scope="col">라인업</th>
|
|
<th scope="col">도수</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>스프링뱅크 1993 (Gordon & MacPhail 리필 셰리 호그스헤드 27년)</td>
|
|
<td>51.6%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>모틀락 1989 (사마롤리 22년 싱글 캐스크)</td>
|
|
<td>50.4%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>맥캘란 1993 (카덴헤드 1842 클래식 레인지)</td>
|
|
<td>54.8%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td>쿨일라 2008 (PX 피니시 14년)</td>
|
|
<td>56.4%</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td>벤네비스 1998 (아델피 버번 캐스크 22년)</td>
|
|
<td>58.1%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="course-foot">
|
|
<span>75분, 페어링 포함</span>
|
|
<a href="#reservation-section" class="btn-fill">코스 B 고르기</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<figure class="figure-aside mt-6">
|
|
<img
|
|
src="../assets/masterclass-lineup.webp"
|
|
alt="코스 B에서 마시는 싱글 캐스크 위스키 5종과 테이스팅 카드"
|
|
width="1376"
|
|
height="768"
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
/>
|
|
<figcaption>
|
|
<strong>코스 B 라인업</strong>
|
|
<span>도수가 낮은 순서로 잔을 놓습니다. 51.6%에서 58.1%까지.</span>
|
|
<span>잔마다 테이스팅 카드를 한 장씩 둡니다.</span>
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- 향 계열 -->
|
|
<section class="section" id="aroma" aria-labelledby="aromaHeading">
|
|
<div class="section-head">
|
|
<h2 id="aromaHeading">향을 네 계열로 나눠 하나씩 맡아 봅니다</h2>
|
|
<p>아로마 휠의 계열 이름을 그대로 씁니다. 잔마다 어느 계열이 앞서는지 도슨트가 짚습니다.</p>
|
|
</div>
|
|
|
|
<figure class="figure-aside">
|
|
<img
|
|
src="../assets/aroma-wheel.webp"
|
|
alt="위스키 향을 계열별로 나눈 아로마 휠 다이어그램"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
/>
|
|
<figcaption>
|
|
<strong>1. 피트 스모크</strong>
|
|
<span>아일라 섬의 이탄 연기, 해초의 요오드 향, 정향과 재 냄새.</span>
|
|
<strong>2. 건과일과 셰리</strong>
|
|
<span>올로로소와 PX 셰리 캐스크에서 오는 말린 무화과, 건포도, 다크 초콜릿.</span>
|
|
<strong>3. 꽃과 과수원</strong>
|
|
<span>긴 발효와 구리 증류기의 환류에서 생기는 풋사과, 엘더플라워, 꿀.</span>
|
|
<strong>4. 그을린 오크</strong>
|
|
<span>1st Fill 버번 배럴에서 오는 그을린 오크, 토피, 시나몬.</span>
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- 페어링 -->
|
|
<section class="section" id="pairing" aria-labelledby="pairingHeading">
|
|
<div class="section-head">
|
|
<h2 id="pairingHeading">코스 B에는 하몽, 다크 초콜릿, 흑무화과를 한 접시에 냅니다</h2>
|
|
<p>도수가 높은 캐스크 스트렝스를 편하게 마실 수 있도록 짠맛, 쓴맛, 단맛을 하나씩 둡니다.</p>
|
|
</div>
|
|
|
|
<figure class="figure-aside is-reverse">
|
|
<img
|
|
src="../assets/whisky-pairing.webp"
|
|
alt="위스키 페어링 플레이트. 이베리코 하몽, 다크 초콜릿 트러플, 무화과"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
/>
|
|
<figcaption>
|
|
<strong>페어링 플레이트</strong>
|
|
<span>스페인산 이베리코 하몽 베요타</span>
|
|
<span>에콰도르산 카카오 70% 다크 초콜릿 트러플</span>
|
|
<span>터키산 흑무화과</span>
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- 세션 선택 -->
|
|
<section class="section" id="reservation-section" aria-labelledby="reservationHeading">
|
|
<div class="section-head">
|
|
<h2 id="reservationHeading">세션은 하루 세 번, 19시, 20시 30분, 22시에 시작합니다</h2>
|
|
<p>코스와 날짜, 시간을 고르고 이름과 연락처를 적습니다.</p>
|
|
</div>
|
|
|
|
<div class="two-col">
|
|
<figure class="figure-aside">
|
|
<img
|
|
src="../assets/docent-room.webp"
|
|
alt="어두운 오크 바 카운터에 놓인 코피타 테이스팅 글라스와 도슨트 노트"
|
|
width="1376"
|
|
height="768"
|
|
loading="lazy"
|
|
/>
|
|
<figcaption>
|
|
<strong>캐스크 룸</strong>
|
|
<span>한남동 한남 27길, 1:1 테이스팅 카운터</span>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<div class="form-panel">
|
|
<h3>도슨트 세션 선택</h3>
|
|
<form onsubmit="event.preventDefault(); alert('선택한 도슨트 세션을 확인했습니다. 실제 예약은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.');">
|
|
<div class="form-group">
|
|
<label class="form-label" for="courseSelect">코스</label>
|
|
<select class="form-input" id="courseSelect" name="courseSelect" required>
|
|
<option value="courseB">코스 B. 캐스크 스트렝스 플라이트 5잔 (120,000원)</option>
|
|
<option value="courseA">코스 A. 입문 플라이트 3잔 (65,000원)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="resTime">시간</label>
|
|
<select class="form-input" id="resTime" name="reservationTime" required>
|
|
<option>19:00 (1부)</option>
|
|
<option selected>20:30 (2부)</option>
|
|
<option>22:00 (3부 심야)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="resDate">날짜</label>
|
|
<input type="date" class="form-input" id="resDate" name="reservationDate" autocomplete="off" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="userName">이름</label>
|
|
<input type="text" class="form-input" id="userName" name="userName" autocomplete="name" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="userPhone">연락처</label>
|
|
<input type="tel" class="form-input" id="userPhone" name="userPhone" autocomplete="tel" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="flavorNote">좋아하는 위스키 스타일 (선택)</label>
|
|
<input type="text" class="form-input" id="flavorNote" name="flavorNote" autocomplete="off" placeholder="예: 아일라 피트, 셰리 버트" />
|
|
</div>
|
|
|
|
<button type="submit" class="btn-fill">선택한 세션 내용 확인</button>
|
|
</form>
|
|
<p class="demo-notice" role="note">가상 브랜드 쇼케이스입니다. 코스와 가격은 예시이며 입력 정보는 저장하거나 전송하지 않고 실제 예약으로 이어지지 않습니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- 푸터: 다열 색인 (index.html 과 같은 셸) -->
|
|
<footer class="site-foot">
|
|
<div class="foot-grid">
|
|
<div>
|
|
<h2>차례</h2>
|
|
<ul>
|
|
<li><a href="../index.html#ledger">캐스크 목록</a></li>
|
|
<li><a href="../index.html#bottlers">병입자</a></li>
|
|
<li><a href="../index.html#docent">도슨트 세션</a></li>
|
|
<li><a href="../index.html#events">시음회 일정</a></li>
|
|
<li><a href="../index.html#subscribe">입고 알림</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h2>캐스크 번호</h2>
|
|
<ul>
|
|
<li><a href="../index.html#cask-6512">#6512 Clynelish 1996</a></li>
|
|
<li><a href="../index.html#cask-29-281">#29.281 Laphroaig 2005</a></li>
|
|
<li><a href="../index.html#cask-93-41">#93/41 Springbank 1993</a></li>
|
|
<li><a href="../index.html#cask-px-88">#PX-88 Caol Ila 2008</a></li>
|
|
<li><a href="../index.html#cask-98-12">#98/12 Ben Nevis 1998</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h2>도슨트</h2>
|
|
<ul>
|
|
<li><a href="#courses">코스 A, 3잔 65,000원</a></li>
|
|
<li><a href="#courses">코스 B, 5잔 120,000원</a></li>
|
|
<li><a href="#aroma">향 계열 네 가지</a></li>
|
|
<li><a href="#pairing">페어링 플레이트</a></li>
|
|
<li><a href="#reservation-section">세션 선택</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h2>찾아오기</h2>
|
|
<p>캐스크 룸, 서울 한남동 한남 27길</p>
|
|
<p>1부 19:00, 2부 20:30, 3부 22:00</p>
|
|
<p>한 세션 최대 2인</p>
|
|
</div>
|
|
</div>
|
|
<p class="foot-note">캐스크 아카이브는 가상 브랜드 쇼케이스입니다. 코스, 가격, 신청 흐름은 예시이며 입력 정보는 저장하거나 전송하지 않습니다.</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
// 측면 색인 — 좁은 화면에서는 접고, 현재 위치를 표시한다(모션 없음)
|
|
const toc = document.querySelector(".toc");
|
|
const narrow = window.matchMedia("(max-width: 1023px)");
|
|
const syncToc = () => { toc.open = !narrow.matches; };
|
|
syncToc();
|
|
narrow.addEventListener("change", syncToc);
|
|
toc.querySelectorAll("a[href^='#']").forEach((a) => a.addEventListener("click", () => { if (narrow.matches) toc.open = false; }));
|
|
|
|
const links = [...toc.querySelectorAll("a[href^='#']")];
|
|
const targets = links.map((a) => document.querySelector(a.getAttribute("href"))).filter(Boolean);
|
|
if ("IntersectionObserver" in window && targets.length) {
|
|
const io = new IntersectionObserver((entries) => {
|
|
entries.forEach((entry) => {
|
|
if (!entry.isIntersecting) return;
|
|
links.forEach((a) => a.removeAttribute("aria-current"));
|
|
const link = links.find((a) => a.getAttribute("href") === `#${entry.target.id}`);
|
|
if (link) link.setAttribute("aria-current", "true");
|
|
});
|
|
}, { rootMargin: "-20% 0px -70% 0px" });
|
|
targets.forEach((t) => io.observe(t));
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|