designpaca/apps/site/public/work/cask-archive/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

491 lines
26 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>캐스크 아카이브 (CASK ARCHIVE) · 독립병입자 위스키바 & 도슨트 큐레이션</title>
<meta
name="description"
content="Gordon & MacPhail, Signatory, SMWS 등 독립병입자(IB) 희귀 캐스크 공식 수입 인증 위스키바. 캐스크 넘버 원장과 1:1 위스키 도슨트 테이스팅 코스 예약."
/>
<meta property="og:title" content="캐스크 아카이브 (CASK ARCHIVE) · 독립병입자 위스키바" />
<meta property="og:description" content="시간과 배럴이 빚어낸 오직 단 하나의 원액. 공식 수입 인증 독립병입자 전문 아카이브." />
<meta property="og:type" content="website" />
<meta name="theme-color" content="#0b0b0d" />
<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/main.css?v=4" />
<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"
/>
</head>
<body>
<a class="skip-link" href="#mainContent">본문으로 건너뛰기</a>
<!-- 상단 헤더 (.site-head SSOT) -->
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="./index.html">
캐스크 아카이브 <span class="wordmark-han">CASK ARCHIVE</span>
</a>
<nav class="nav" aria-label="메인 메뉴">
<a href="#ledger">캐스크 원장</a>
<a href="./docent/index.html" style="color: var(--accent); font-weight: 600;">도슨트 마스터클래스</a>
<a href="#curator">향미 큐레이션</a>
<a href="#events">릴리즈</a>
<a href="#subscribe">뉴스레터</a>
</nav>
<div class="head-actions">
<a href="#docent" class="btn">
도슨트 예약
</a>
</div>
</div>
</header>
<main id="mainContent">
<!-- 히어로 섹션 -->
<section class="hero-section" aria-labelledby="heroHeading">
<div class="wrap hero-grid">
<div class="hero-content">
<div class="eyebrow-amber">
<span>OFFICIALLY CERTIFIED INDEPENDENT BOTTLER BAR</span>
</div>
<h1 id="heroHeading" class="hero-title">
시간과 배럴이 빚어낸<br />
오직 단 하나의 <span class="gold">원액(Single Cask)</span>
</h1>
<p class="hero-desc">
증류소의 기본 공식 라인업에서는 맛볼 수 없는 독립병입자(Independent Bottler)의 희귀 원액들. 공식 정식 수입 필증과 단일 캐스크 일련번호(Single Cask Number)를 보증하며, 전담 도슨트가 취향에 맞춘 위스키를 1:1로 큐레이션합니다.
</p>
<div class="hero-ctas">
<a href="#ledger" class="btn-amber">
실시간 캐스크 원장 확인
<span aria-hidden="true">↗</span>
</a>
<a href="./docent/index.html" class="btn-outline">
1:1 도슨트 마스터클래스 상세 보기
</a>
</div>
</div>
<div class="hero-visual" style="position: relative;">
<div class="bezel-outer">
<div class="hero-frame">
<img
src="./assets/whisky-hero.webp"
alt="차링된 오크 배럴 상판 위 싱글 캐스크 위스키 보틀과 테이스팅 글라스"
width="1200"
height="1600"
loading="eager"
/>
</div>
</div>
<div class="hero-cask-tag">
<div class="cask-tag-no">CASK #8821 · 58.4% ABV</div>
<div class="cask-tag-sub">Signatory Vintage 1997 · Bottle 42 of 186</div>
</div>
</div>
</div>
</section>
<!-- 공식 독립병입자 수입 인증 스트립 -->
<section class="ib-cert-strip" aria-label="독립병입자 공식 인증">
<div class="wrap cert-grid">
<div class="cert-item">
<div class="cert-name">GORDON & MACPHAIL</div>
<div class="cert-desc">1895년 설립 · 스코틀랜드 최고 권위 정식 수입</div>
</div>
<div class="cert-item">
<div class="cert-name">SIGNATORY VINTAGE</div>
<div class="cert-desc">언칠필터드 / 내추럴 컬러 캐스크 스트렝스 보증</div>
</div>
<div class="cert-item">
<div class="cert-name">THE SCOTCH MALT WHISKY SOCIETY</div>
<div class="cert-desc">SMWS 공식 파트너 베뉴 · 넘버링 큐레이션</div>
</div>
<div class="cert-item">
<div class="cert-name">CADENHEAD'S</div>
<div class="cert-desc">1842년 설립, 스코틀랜드에서 가장 오래된 독립병입자 라인업</div>
</div>
</div>
</section>
<!-- 캐스크 원장 (Interactive Cask Ledger) -->
<section class="ledger-section" id="ledger" aria-labelledby="ledgerHeading">
<div class="wrap">
<div class="section-head">
<h2 id="ledgerHeading" class="section-title">독립병입자 캐스크 실시간 보유 원장</h2>
<p class="section-sub">모든 병은 단일 캐스크(Single Cask)에서 추출되어 병입 수량이 한정되어 있습니다. 필터로 원하는 향미 스펙을 검색하십시오.</p>
</div>
<div class="ledger-filter-bar">
<div class="filter-btn-group" role="group" aria-label="캐스크 분류">
<button class="filter-btn is-active" data-filter="all">전체 원장 (5)</button>
<button class="filter-btn" data-filter="sherry">셰리 캐스크</button>
<button class="filter-btn" data-filter="peat">피트 / 스모키</button>
<button class="filter-btn" data-filter="bourbon">버번 배럴</button>
<button class="filter-btn" data-filter="cs">캐스크 스트렝스 (50%+)</button>
</div>
<input
type="search"
id="caskSearch"
class="search-input"
placeholder="증류소명 or 캐스크 번호 검색..."
aria-label="캐스크 검색"
/>
</div>
<div class="ledger-table-wrap">
<table class="ledger-table">
<thead>
<tr>
<th>캐스크 번호</th>
<th>증류소 & 원액 명칭</th>
<th>독립병입자 (Bottler)</th>
<th>숙성 배럴 / 년수</th>
<th>도수 (ABV)</th>
<th>한정 수량</th>
<th>향미 노트 요약</th>
<th>인증 정보</th>
</tr>
</thead>
<tbody id="caskTableBody">
<tr data-cat="sherry cs">
<td class="mono cask-badge">#6512</td>
<td><strong>Clynelish 1996</strong><br /><span style="color:var(--ink-muted);font-size:11px;">하이랜드 · 왁시 꿀 & 린덴</span></td>
<td>Signatory Vintage</td>
<td>1st Fill Sherry Butt · 24년</td>
<td class="mono" style="color:var(--accent);font-weight:700;">54.2%</td>
<td class="mono">180 Btls</td>
<td>말린 무화과, 밀랍, 시나몬, 다크초콜릿</td>
<td><button class="btn-outline" style="padding:4px 10px;font-size:11px;" onclick="openCertModal('Clynelish 1996 #6512', 'Signatory Vintage', '24 Years (1996 Distilled / 2020 Bottled)', '54.2% Cask Strength', '식약처 정식통관 제2024-IB-0982호');">수입인증서</button></td>
</tr>
<tr data-cat="peat cs">
<td class="mono cask-badge">#29.281</td>
<td><strong>Laphroaig 2005</strong><br /><span style="color:var(--ink-muted);font-size:11px;">아일라 · 약용 피트 & 해풍</span></td>
<td>SMWS (Society)</td>
<td>1st Fill Ex-Bourbon · 15년</td>
<td class="mono" style="color:var(--accent);font-weight:700;">57.8%</td>
<td class="mono">214 Btls</td>
<td>모닥불 연기, 바다 소금, 레몬 제스트, 피트 45ppm</td>
<td><button class="btn-outline" style="padding:4px 10px;font-size:11px;" onclick="openCertModal('Laphroaig 2005 (SMWS 29.281)', 'The SMWS Partner', '15 Years (2005 Distilled)', '57.8% Cask Strength', '식약처 정식통관 제2025-IB-1102호');">수입인증서</button></td>
</tr>
<tr data-cat="sherry">
<td class="mono cask-badge">#93/41</td>
<td><strong>Springbank 1993</strong><br /><span style="color:var(--ink-muted);font-size:11px;">캠벨타운 · 미네랄 & 오일</span></td>
<td>Gordon & MacPhail</td>
<td>Refill Sherry Hogshead · 27년</td>
<td class="mono" style="color:var(--accent);font-weight:700;">51.6%</td>
<td class="mono">142 Btls</td>
<td>열대 과일 잼, 가죽, 부드러운 유황, 정향</td>
<td><button class="btn-outline" style="padding:4px 10px;font-size:11px;" onclick="openCertModal('Springbank 1993 #93/41', 'Gordon & MacPhail Reserve', '27 Years (1993 Distilled)', '51.6%', '식약처 정식통관 제2024-IB-0419호');">수입인증서</button></td>
</tr>
<tr data-cat="peat cs">
<td class="mono cask-badge">#PX-88</td>
<td><strong>Caol Ila 2008</strong><br /><span style="color:var(--ink-muted);font-size:11px;">아일라 · 달콤한 훈연</span></td>
<td>Cadenhead's</td>
<td>Pedro Ximenez Finish · 14년</td>
<td class="mono" style="color:var(--accent);font-weight:700;">56.4%</td>
<td class="mono">260 Btls</td>
<td>스모크 베이컨, 건포도, 블랙베리, 훈제 파프리카</td>
<td><button class="btn-outline" style="padding:4px 10px;font-size:11px;" onclick="openCertModal('Caol Ila 2008 #PX-88', 'Cadenheads Authentic Collection', '14 Years', '56.4% Cask Strength', '식약처 정식통관 제2025-IB-0831호');">수입인증서</button></td>
</tr>
<tr data-cat="bourbon cs">
<td class="mono cask-badge">#98/12</td>
<td><strong>Ben Nevis 1998</strong><br /><span style="color:var(--ink-muted);font-size:11px;">서부 하이랜드 · 묵직한 바디</span></td>
<td>Adelphi Distillery</td>
<td>Ex-Bourbon Cask · 22년</td>
<td class="mono" style="color:var(--accent);font-weight:700;">58.1%</td>
<td class="mono">195 Btls</td>
<td>바닐라 커스터드, 구운 코코넛, 청사과, 후추</td>
<td><button class="btn-outline" style="padding:4px 10px;font-size:11px;" onclick="openCertModal('Ben Nevis 1998 #98/12', 'Adelphi Selection', '22 Years', '58.1%', '식약처 정식통관 제2024-IB-0771호');">수입인증서</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- 1:1 위스키 도슨트 테이스팅 코스 예약 -->
<section class="docent-section" id="docent" aria-labelledby="docentHeading">
<div class="wrap">
<div class="section-head">
<h2 id="docentHeading" class="section-title">1:1 맞춤형 위스키 도슨트 테이스팅</h2>
<p class="section-sub">공인 위스키 마스터가 당신의 향미 선호도를 분석하여 독립병입자 캐스크를 1:1로 해설하고 페어링합니다.</p>
</div>
<div class="docent-grid">
<!-- 코스 설명 카드 -->
<div class="course-list">
<div class="course-card">
<div class="course-header">
<h3 class="course-title">코스 A. 독립병입자 입문 탐색 플라이트 (3잔)</h3>
<span class="course-price">65,000원</span>
</div>
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 12px;">
증류소 오피셜 보틀과 동일 증류소의 독립병입자 싱글 캐스크를 1:1로 비교하며 배럴 숙성의 차이를 체감하는 코스.
</p>
<div style="font-size: 12px; color: var(--accent);" class="mono">소요 시간: 45분 · 도슨트 1:1 배정 · 하이엔드 글렌캐런 글라스 제공</div>
</div>
<div class="course-card">
<div class="course-header">
<h3 class="course-title">코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (5잔)</h3>
<span class="course-price">120,000원</span>
</div>
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-bottom: 12px;">
1990년대 올드 빈티지 및 55% 이상의 싱글 캐스크 스트렝스 5종을 테이스팅 휠과 함께 정밀 분석하는 심화 코스.
</p>
<div style="font-size: 12px; color: var(--accent);" class="mono">소요 시간: 75분 · 아티잔 초콜릿 & 샤퀴테리 페어링 포함</div>
</div>
</div>
<!-- 예약 입력 폼 -->
<div class="docent-booking-form">
<h3 style="font-family: var(--font-serif); font-size: var(--step-1); margin-bottom: var(--space-4); color: var(--ink);">
도슨트 프라이빗 세션 예약 신청
</h3>
<form id="docentForm" onsubmit="return false;">
<div class="form-group">
<label class="form-label" for="bookingCourse">선택 코스</label>
<select id="bookingCourse" class="form-select">
<option value="A">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
<option value="B" selected>코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
</select>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
<div class="form-group">
<label class="form-label" for="bookingDate">예약 일자</label>
<input type="date" id="bookingDate" class="form-input" value="2026-08-28" />
</div>
<div class="form-group">
<label class="form-label" for="bookingTime">예약 시간대</label>
<select id="bookingTime" class="form-select">
<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: 0.75rem;">
<div class="form-group">
<label class="form-label" for="guestName">예약자 성함</label>
<input type="text" id="guestName" class="form-input" placeholder="홍길동" value="정재훈" required />
</div>
<div class="form-group">
<label class="form-label" for="guestPhone">연락처</label>
<input type="tel" id="guestPhone" class="form-input" placeholder="010-0000-0000" value="010-8831-2094" required />
</div>
</div>
<div class="form-group">
<label class="form-label" for="guestPref">향미 선호도 메모</label>
<input type="text" id="guestPref" class="form-input" placeholder="예: 셰리 밤 선호, 스모키 피트 선호 등" value="강렬한 셰리 버트와 헤비 피트 선호" />
</div>
<button type="button" class="btn-amber" id="btnBookDocent" style="width: 100%; padding: 14px; margin-top: 10px;">
위스키 도슨트 세션 예약 확정
</button>
</form>
</div>
</div>
</div>
</section>
<!-- 이벤트 & 뉴스레터 & 인스타그램 -->
<section class="events-section" id="events" aria-labelledby="eventHeading">
<div class="wrap">
<div class="section-head">
<h2 id="eventHeading" class="section-title">프라이빗 시음회 & 릴리즈 이벤트</h2>
<p class="section-sub">월별 한정 입고되는 독립병입자 캐스크 오프닝 파티 및 정기 세미나 일정입니다.</p>
</div>
<div class="event-grid">
<div class="event-item">
<div class="event-date-box">
<span class="event-day">09.12</span>
<span class="event-month">FRI 20:00</span>
</div>
<div>
<h3 style="font-size: var(--step-0); font-weight: 700; color: var(--ink); margin-bottom: 4px;">
1990s 올드 셰리 버트 4종 버티컬 시음회
</h3>
<p style="font-size: var(--step--1); color: var(--ink-muted);">
Signatory &amp; G&amp;M 90년대 빈티지 셰리 캐스크 4종 비교 테이스팅 (정원 8인 한정)
</p>
</div>
</div>
<div class="event-item">
<div class="event-date-box">
<span class="event-day">09.26</span>
<span class="event-month">SAT 21:00</span>
</div>
<div>
<h3 style="font-size: var(--step-0); font-weight: 700; color: var(--ink); margin-bottom: 4px;">
아일라 옥토모어 & 피트 심야 도슨트 나이트
</h3>
<p style="font-size: var(--step--1); color: var(--ink-muted);">
페놀 수치 80ppm 이상의 극한 피트 독립병입자 바틀 블라인드 테이스팅
</p>
</div>
</div>
</div>
<!-- 뉴스레터 & 인스타그램 카드 -->
<div class="newsletter-card" id="subscribe">
<div class="eyebrow-amber">EXCLUSIVE CASK NOTIFICATION</div>
<h3 style="font-family: var(--font-serif); font-size: var(--step-2); margin-block: 8px 12px; color: var(--ink);">
신규 캐스크 입고 알림 & 인스타그램
</h3>
<p style="font-size: var(--step--1); color: var(--ink-muted); max-width: 500px; margin-inline: auto;">
수량이 극소량인 독립병입자 캐스크 오프닝 소식을 이메일 뉴스레터로 가장 먼저 발송해 드립니다.
</p>
<form class="newsletter-form" onsubmit="return false;">
<input
type="email"
id="newsEmail"
class="form-input"
placeholder="귀하의 이메일 주소를 입력하세요"
required
/>
<button type="button" class="btn-amber" id="btnSubscribe">
구독 신청
</button>
</form>
<div style="margin-top: var(--space-5); display: inline-flex; align-items: center; gap: 8px;">
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="btn-outline" style="font-size: 12px; padding: 6px 16px;">
📸 인스타그램 @caskarchive.official 바로가기 ↗
</a>
</div>
</div>
</div>
</section>
</main>
<!-- 수입 인증서 모달 다이얼로그 -->
<dialog id="certModal" class="cert-dialog" aria-labelledby="certTitle">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem;">
<h3 id="certTitle" style="font-family: var(--font-serif); font-size: var(--step-1); color: var(--accent);">
공식 독립병입자 수입 보증서
</h3>
<button type="button" onclick="document.getElementById('certModal').close();" aria-label="닫기" style="font-size: 18px; font-weight: 700; color: var(--ink-muted);">✕</button>
</div>
<div style="display: grid; gap: 0.75rem; font-size: var(--step--1); line-height: 1.6;">
<div><strong>증류소 및 보틀:</strong> <span id="mWhiskyName" class="mono" style="color:var(--ink);"></span></div>
<div><strong>독립병입자:</strong> <span id="mBottler" class="mono" style="color:var(--ink);"></span></div>
<div><strong>숙성 정보:</strong> <span id="mAge" class="mono" style="color:var(--ink);"></span></div>
<div><strong>알코올 도수:</strong> <span id="mAbv" class="mono" style="color:var(--accent);"></span></div>
<div><strong>통관 필증 번호:</strong> <span id="mCustoms" class="mono" style="color:#34d399;"></span></div>
</div>
<div style="margin-top: 1.5rem; text-align: right;">
<button type="button" class="btn-amber" style="padding: 6px 18px; font-size: 13px;" onclick="document.getElementById('certModal').close();">확인 완료</button>
</div>
</dialog>
<!-- 푸터 (.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>
<!-- 인터랙티브 스크립트 -->
<script>
(function () {
// 1. 캐스크 원장 검색 및 필터링
const filterBtns = document.querySelectorAll(".filter-btn");
const searchInput = document.getElementById("caskSearch");
const rows = document.querySelectorAll("#caskTableBody tr");
function filterLedger() {
const activeFilter = document.querySelector(".filter-btn.is-active")?.getAttribute("data-filter") || "all";
const query = searchInput.value.toLowerCase().trim();
rows.forEach((row) => {
const cat = row.getAttribute("data-cat") || "";
const text = row.textContent.toLowerCase();
const matchCat = activeFilter === "all" || cat.includes(activeFilter);
const matchQuery = !query || text.includes(query);
row.style.display = matchCat && matchQuery ? "" : "none";
});
}
filterBtns.forEach((btn) => {
btn.addEventListener("click", () => {
filterBtns.forEach((b) => b.classList.remove("is-active"));
btn.classList.add("is-active");
filterLedger();
});
});
if (searchInput) {
searchInput.addEventListener("input", filterLedger);
}
// 2. 도슨트 예약 버튼
const btnBook = document.getElementById("btnBookDocent");
if (btnBook) {
btnBook.addEventListener("click", () => {
const name = document.getElementById("guestName").value || "고객님";
const date = document.getElementById("bookingDate").value;
const time = document.getElementById("bookingTime").value;
const course = document.getElementById("bookingCourse").value;
alert(`[캐스크 아카이브] ${name}님의 1:1 위스키 도슨트 세션(코스 ${course})이 예약 접수되었습니다.\n일정: ${date} ${time}\n담당 도슨트가 당일 사전 안내 연락을 드립니다.`);
});
}
// 3. 뉴스레터 구독
const btnSub = document.getElementById("btnSubscribe");
if (btnSub) {
btnSub.addEventListener("click", () => {
const email = document.getElementById("newsEmail").value;
if (!email || !email.includes("@")) {
alert("유효한 이메일 주소를 입력해 주십시오.");
return;
}
alert(`[캐스크 아카이브] ${email} 주소로 신규 독립병입자 캐스크 릴리즈 알림이 등록되었습니다.`);
document.getElementById("newsEmail").value = "";
});
}
})();
// 인증서 모달 팝업 함수
function openCertModal(name, bottler, age, abv, customs) {
document.getElementById("mWhiskyName").textContent = name;
document.getElementById("mBottler").textContent = bottler;
document.getElementById("mAge").textContent = age;
document.getElementById("mAbv").textContent = abv;
document.getElementById("mCustoms").textContent = customs;
document.getElementById("certModal").showModal();
}
</script>
</body>
</html>