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
|
|
@ -1,456 +1,385 @@
|
|||
<!DOCTYPE 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 위스키 도슨트 테이스팅 마스터클래스 — CASK ARCHIVE</title>
|
||||
<meta name="description" content="캐스크 아카이브의 1:1 위스키 도슨트 테이스팅 마스터클래스 안내. 코피타 글래스웨어학, 감각 아로마 휠 분석, 독립병입자 싱글 캐스크 플라이트 및 가스트로노미 페어링." />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<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="../styles/fonts.css?v=20260912all" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
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="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
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"
|
||||
/>
|
||||
<link rel="stylesheet" href="../styles/tokens.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="../styles/main.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' rx='8' fill='%230B0B0D'/%3E%3Ccircle cx='16' cy='16' r='10' stroke='%23D99B38' stroke-width='2' fill='none'/%3E%3Cpath d='M16 8v16M8 16h16' stroke='%23D99B38' stroke-width='1.5'/%3E%3C/svg%3E" />
|
||||
<style>
|
||||
.breadcrumb-bar {
|
||||
padding-top: var(--space-4);
|
||||
padding-bottom: var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.breadcrumb-bar a {
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.breadcrumb-bar a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
.breadcrumb-bar .sep {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.breadcrumb-bar .current {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docent-hero {
|
||||
padding: var(--space-7) 0 var(--space-5);
|
||||
}
|
||||
.docent-meta-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.docent-meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.docent-meta-item .label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.docent-meta-item .value {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.course-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
|
||||
gap: var(--space-5);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
.course-deep-card {
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.course-deep-card.highlight {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 32px rgba(217, 155, 56, 0.12);
|
||||
}
|
||||
.course-deep-card.highlight::before {
|
||||
content: 'RECOMMENDED';
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: -32px;
|
||||
transform: rotate(45deg);
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
padding: 4px 36px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.lineup-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--step--1);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
.lineup-table th, .lineup-table td {
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.lineup-table th {
|
||||
color: var(--ink-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
|
||||
<!-- Header (GNB SSOT) -->
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a href="../index.html" class="wordmark" aria-label="캐스크 아카이브 홈">
|
||||
캐스크 아카이브 <span class="wordmark-han">CASK ARCHIVE</span>
|
||||
|
||||
<div class="shell">
|
||||
<!-- 측면 색인 — index.html 과 같은 셸 -->
|
||||
<header class="index">
|
||||
<a class="wordmark" href="../index.html" aria-label="캐스크 아카이브 홈">
|
||||
캐스크 아카이브
|
||||
<span class="wordmark-sub">독립병입 위스키 바, 한남동</span>
|
||||
</a>
|
||||
<nav class="nav" aria-label="메인 내비게이션">
|
||||
<a href="./index.html" class="active" style="color: var(--accent); font-weight: 600;">도슨트 마스터클래스</a>
|
||||
<a href="../index.html#ledger">캐스크 원장</a>
|
||||
<a href="../index.html#curator">향미 큐레이션</a>
|
||||
<a href="../index.html#events">릴리즈</a>
|
||||
<a href="../index.html#subscribe">뉴스레터</a>
|
||||
</nav>
|
||||
<div class="head-actions">
|
||||
<a href="#reservation-section" class="btn">도슨트 세션</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>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<!-- Hero Header -->
|
||||
<section class="section docent-hero" style="border-top: none; padding-top: var(--space-5);">
|
||||
<div class="wrap">
|
||||
<div class="breadcrumb-bar" style="margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em;">
|
||||
<a href="../index.html">CASK ARCHIVE</a>
|
||||
<span class="sep">/</span>
|
||||
<span class="current" style="color: var(--ink); font-weight: 600;">1:1 WHISKY DOCENT MASTERCLASS</span>
|
||||
<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>
|
||||
|
||||
<div class="docent-hero-head">
|
||||
<p class="hero-label">BESPOKE TASTING METHODOLOGY</p>
|
||||
<h1 class="hero-title" style="margin-bottom: var(--space-2);">1:1 위스키 도슨트 마스터클래스</h1>
|
||||
<p class="hero-lead" style="font-size: var(--step-0); color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--space-5);">
|
||||
공인 위스키 마스터가 1:1로 당신의 후각과 미각 취향을 해체하고 조립하는 프라이빗 테이스팅 세션.
|
||||
</p>
|
||||
|
||||
<dl class="docent-specs" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);">
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Session Type</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">1:1 Private Tasting</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Location</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Cask Room (한남 27길)</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Capacity</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">최대 2인 (동반 1인 가능)</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Glassware</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Glencairn & Copita</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<figure class="hero-photo" style="border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-card);">
|
||||
<img
|
||||
src="../assets/docent-room.webp"
|
||||
alt="어두운 오크 바 카운터에 세팅된 코피타 테이스팅 글래스와 도슨트 노트"
|
||||
width="1600"
|
||||
height="900"
|
||||
style="width: 100%; aspect-ratio: 16/9; object-fit: cover;"
|
||||
/>
|
||||
<figcaption style="padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface-raised);">
|
||||
한남동 캐스크 룸 · 마스터 전용 1:1 테이스팅 카운터
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sensory Wheel & Flavor Science -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);">
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-8); align-items: center;">
|
||||
<div class="frame">
|
||||
<img
|
||||
src="../assets/aroma-wheel.webp"
|
||||
alt="위스키 감각 테이스팅 아로마 휠 다이어그램"
|
||||
style="width: 100%; display: block;"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
|
||||
<div class="eyebrow">관능 분석</div>
|
||||
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
|
||||
후각과 미각의 지도를 그리는<br />
|
||||
<span class="accent-text">4축 아로마 분석법</span>
|
||||
</h2>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-muted); line-height: 1.7;">
|
||||
<p>
|
||||
<strong style="color: var(--ink);">1. Peat Smoke (피트/스모키)</strong>: 아일라 섬의 이탄 연기, 해초의 요오드(Iodine), 정향과 재(Ash)의 깊이.
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: var(--ink);">2. Dried Fruits (건과일 & 셰리)</strong>: 올로로소/PX 캐스크에서 추출된 말린 무화과, 건포도, 다크 초콜릿의 농밀함.
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: var(--ink);">3. Floral & Orchard (에스테르 & 과원)</strong>: 장기 발효와 구리 환류에서 비롯된 풋사과, 엘더플라워, 꿀의 산뜻함.
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: var(--ink);">4. Charred Oak (오크 바닐린)</strong>: 1st Fill 버번 배럴의 그을린 탄닌, 토피, 시나몬 스파이스.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Course Comparison Deep Cards -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);" id="courses">
|
||||
<div class="eyebrow" style="text-align: center;">큐레이션 플라이트</div>
|
||||
<h2 style="font-size: var(--step-3); font-weight: 800; text-align: center; margin-top: 6px;">
|
||||
도슨트 테이스팅 정규 코스
|
||||
</h2>
|
||||
|
||||
<div class="course-card-grid">
|
||||
<!-- Course A -->
|
||||
<div class="course-deep-card">
|
||||
<dl class="spec-list">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
||||
<span class="eyebrow" style="color: var(--ink-muted);">코스 A</span>
|
||||
<span style="font-size: var(--step-2); font-weight: 800; color: var(--accent);">65,000원</span>
|
||||
</div>
|
||||
<h3 style="font-size: var(--step-1); font-weight: 700; margin-top: 8px;">
|
||||
독립병입자 입문 탐색 플라이트 (3잔)
|
||||
</h3>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
|
||||
증류소의 기본 공식 라인업(OB)과 독립병입자(IB) 싱글 캐스크의 결정적 차이를 체감하는 코스입니다.
|
||||
</p>
|
||||
<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">ABV</th>
|
||||
<th scope="col">라인업</th>
|
||||
<th scope="col">도수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>하이랜드 에스테르 (클라인리쉬 14y vs IB 캐스크)</td>
|
||||
<td>하이랜드 에스테르 (클라인리쉬 14년 vs 독립병입 캐스크)</td>
|
||||
<td>46.0% / 54.2%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>스페이사이드 셰리 (글렌토커스 1st Fill 셰리 버트)</td>
|
||||
<td>56.8% CS</td>
|
||||
<td>56.8%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>아일라 헤비 피트 (라프로익 2005 SMWS 29.281)</td>
|
||||
<td>57.8% CS</td>
|
||||
<td>아일라 헤비 피트 (라프로익 2005, SMWS 29.281)</td>
|
||||
<td>57.8%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted);">소요 시간: 45분</span>
|
||||
<a href="#reservation-section" class="btn-outline" style="text-decoration: none;">코스 A 예약하기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course B -->
|
||||
<div class="course-deep-card highlight">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
||||
<span class="eyebrow" style="color: var(--accent);">코스 B</span>
|
||||
<span style="font-size: var(--step-2); font-weight: 800; color: var(--accent);">120,000원</span>
|
||||
<div class="course-foot">
|
||||
<span>45분</span>
|
||||
<a href="#reservation-section" class="btn-outline">코스 A 고르기</a>
|
||||
</div>
|
||||
<h3 style="font-size: var(--step-1); font-weight: 700; margin-top: 8px;">
|
||||
캐스크 스트렝스 & 빈티지 마스터 플라이트 (5잔)
|
||||
</h3>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
|
||||
물 한 방울 타지 않은 원액(Cask Strength)과 1990년대 올드 빈티지 캐스크 5종을 정밀 비교 테이스팅합니다.
|
||||
</p>
|
||||
</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">ABV</th>
|
||||
<th scope="col">라인업</th>
|
||||
<th scope="col">도수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>스프링뱅크 1993 (G&M 리필 셰리 호그스헤드 27y)</td>
|
||||
<td>51.6% CS</td>
|
||||
<td>스프링뱅크 1993 (Gordon & MacPhail 리필 셰리 호그스헤드 27년)</td>
|
||||
<td>51.6%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>모틀락 1989 (사마롤리 22y 싱글 캐스크)</td>
|
||||
<td>50.4% CS</td>
|
||||
<td>모틀락 1989 (사마롤리 22년 싱글 캐스크)</td>
|
||||
<td>50.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>맥캘란 1993 (카덴헤드 1842 클래식 레인지)</td>
|
||||
<td>54.8% CS</td>
|
||||
<td>54.8%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>쿨일라 2008 (PX 피니시 14y)</td>
|
||||
<td>56.4% CS</td>
|
||||
<td>쿨일라 2008 (PX 피니시 14년)</td>
|
||||
<td>56.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>벤네비스 1998 (아델피 버번 캐스크 22y)</td>
|
||||
<td>58.1% CS</td>
|
||||
<td>벤네비스 1998 (아델피 버번 캐스크 22년)</td>
|
||||
<td>58.1%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent);">소요 시간: 75분 · 페어링 포함</span>
|
||||
<a href="#reservation-section" class="btn-primary" style="text-decoration: none;">코스 B 예약하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="course-foot">
|
||||
<span>75분, 페어링 포함</span>
|
||||
<a href="#reservation-section" class="btn-fill">코스 B 고르기</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Masterclass Lineup Showcase Visual -->
|
||||
<div class="wrap" style="margin-bottom: var(--space-8);">
|
||||
<div class="frame">
|
||||
<img
|
||||
src="../assets/masterclass-lineup.webp"
|
||||
alt="도슨트 마스터클래스 5종 단일 캐스크 위스키 라인업과 테이스팅 카드"
|
||||
style="width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover;"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Gastronomy Pairing Atelier -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);">
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-8); align-items: center;">
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
|
||||
<div class="eyebrow">미식 페어링</div>
|
||||
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
|
||||
향과 질감의 증폭을 위한<br />
|
||||
<span class="accent-text">아티잔 푸드 페어링</span>
|
||||
</h2>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); line-height: 1.8;">
|
||||
위스키의 높은 알코올 도수와 강렬한 탄닌을 부드럽게 감싸안고, 숨겨진 미세 에스테르를 끌어올리기 위해
|
||||
스페인산 이베리코 하몽 베요타, 에콰도르 싱글 오리진 70% 다크 카카오 트러플, 터키산 흑무화과를 페어링 플레이트로 함께 서브합니다.
|
||||
</p>
|
||||
<!-- 향 계열 -->
|
||||
<section class="section" id="aroma" aria-labelledby="aromaHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="aromaHeading">향을 네 계열로 나눠 하나씩 맡아 봅니다</h2>
|
||||
<p>아로마 휠의 계열 이름을 그대로 씁니다. 잔마다 어느 계열이 앞서는지 도슨트가 짚습니다.</p>
|
||||
</div>
|
||||
<div class="frame">
|
||||
|
||||
<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="위스키 푸드 페어링 플레이트 (이베리코 하몽, 다크 초콜릿 트러플, 무화과)"
|
||||
style="width: 100%; display: block;"
|
||||
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>
|
||||
</section>
|
||||
<p class="foot-note">캐스크 아카이브는 가상 브랜드 쇼케이스입니다. 코스, 가격, 신청 흐름은 예시이며 입력 정보는 저장하거나 전송하지 않습니다.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Live Reservation Form Section -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);" id="reservation-section">
|
||||
<div class="card" style="max-width: 720px; margin: 0 auto;">
|
||||
<div class="eyebrow" style="color: var(--accent); margin-bottom: 4px;">세션 항목</div>
|
||||
<h2 style="font-size: var(--step-2); font-weight: 800; margin-bottom: var(--space-4);">
|
||||
도슨트 테이스팅 세션 선택
|
||||
</h2>
|
||||
<p class="demo-notice" role="note">안내: 아래 예약 항목과 가격은 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 예약으로 이어지지 않습니다.</p>
|
||||
<form onsubmit="event.preventDefault(); alert('선택한 도슨트 세션을 확인했습니다. 실제 예약은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.');" style="display: flex; flex-direction: column; gap: var(--space-4);">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="courseSelect">선택 코스</label>
|
||||
<select class="form-input" id="courseSelect" name="courseSelect" required>
|
||||
<option value="courseB">코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
|
||||
<option value="courseA">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
|
||||
</select>
|
||||
</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; }));
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);">
|
||||
<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="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>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);">
|
||||
<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>
|
||||
|
||||
<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-primary" style="margin-top: var(--space-2); padding: 14px; font-size: var(--step-0);">
|
||||
선택한 세션 내용 확인 →
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 푸터 (.site-foot SSOT) -->
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>캐스크 아카이브 · 독립병입 위스키 안내</p>
|
||||
<p class="muted">이 페이지의 코스·가격·신청 흐름은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
|
||||
</div>
|
||||
</footer>
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue