designpaca/apps/site/public/work/cask-archive/docent/index.html
Yun Chan 2b7fa32b5b
All checks were successful
ci / build (push) Successful in 51s
release / release (push) Successful in 2m34s
feat: 한국어 우선 쇼케이스 정리
2026-08-26 18:14:41 +09:00

457 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
/>
<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;700&display=swap"
/>
<link rel="stylesheet" href="../styles/tokens.css" />
<link rel="stylesheet" href="../styles/main.css" />
<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(320px, 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>
<!-- 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>
</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>
</div>
</div>
</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>
</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 &amp; 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(320px, 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">
<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>
<table class="lineup-table">
<thead>
<tr>
<th>순서</th>
<th>라인업 구성</th>
<th>ABV</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>하이랜드 에스테르 (클라인리쉬 14y vs IB 캐스크)</td>
<td>46.0% / 54.2%</td>
</tr>
<tr>
<td>2</td>
<td>스페이사이드 셰리 (글렌토커스 1st Fill 셰리 버트)</td>
<td>56.8% CS</td>
</tr>
<tr>
<td>3</td>
<td>아일라 헤비 피트 (라프로익 2005 SMWS 29.281)</td>
<td>57.8% CS</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>
<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>
<table class="lineup-table">
<thead>
<tr>
<th>순서</th>
<th>라인업 구성</th>
<th>ABV</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>스프링뱅크 1993 (G&amp;M 리필 셰리 호그스헤드 27y)</td>
<td>51.6% CS</td>
</tr>
<tr>
<td>2</td>
<td>모틀락 1989 (사마롤리 22y 싱글 캐스크)</td>
<td>50.4% CS</td>
</tr>
<tr>
<td>3</td>
<td>맥캘란 1993 (카덴헤드 1842 클래식 레인지)</td>
<td>54.8% CS</td>
</tr>
<tr>
<td>4</td>
<td>쿨일라 2008 (PX 피니시 14y)</td>
<td>56.4% CS</td>
</tr>
<tr>
<td>5</td>
<td>벤네비스 1998 (아델피 버번 캐스크 22y)</td>
<td>58.1% CS</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>
<!-- 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>
<!-- Gastronomy Pairing Atelier -->
<section class="wrap" style="padding-bottom: var(--space-8);">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 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>
</div>
<div class="frame">
<img
src="../assets/whisky-pairing.webp"
alt="위스키 푸드 페어링 플레이트 (이베리코 하몽, 다크 초콜릿 트러플, 무화과)"
style="width: 100%; display: block;"
/>
</div>
</div>
</section>
<!-- 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>
<form onsubmit="event.preventDefault(); alert('도슨트 예약 신청이 완료되었습니다! 24시간 이내에 전담 마스터가 유선 안내를 드립니다.');" 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" required>
<option value="courseB">코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
<option value="courseA">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
</select>
</div>
<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" value="2026-08-28" required />
</div>
<div class="form-group">
<label class="form-label" for="resTime">예약 시간대</label>
<select class="form-input" id="resTime" 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" value="정재훈" required />
</div>
<div class="form-group">
<label class="form-label" for="userPhone">연락처</label>
<input type="tel" class="form-input" id="userPhone" value="010-8831-2094" required />
</div>
</div>
<div class="form-group">
<label class="form-label" for="flavorNote">평소 선호하시는 위스키 취향 (선택)</label>
<input type="text" class="form-input" id="flavorNote" placeholder="예: 아일라 피트 위스키, 셰리 버트 숙성 선호" value="셰리 버트 숙성 & 80ppm 이상 헤비 피트 선호" />
</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>캐스크 아카이브 · 서울 용산구 한남대로 27길 19 지하 1층</p>
<p class="muted">매일 18:00 – 02:00 (사전 예약제)</p>
<p class="muted">bottling@caskarchive.kr</p>
</div>
</footer>
</body>
</html>