490 lines
26 KiB
HTML
490 lines
26 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>캐스크 아카이브 (CASK ARCHIVE) · 독립병입 위스키 안내</title>
|
|
<meta
|
|
name="description"
|
|
content="독립병입 위스키의 숙성 정보와 향미를 비교해 보는 안내입니다. 원장·가격·세션 정보는 예시이며 실제 예약을 받지 않습니다."
|
|
/>
|
|
<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="./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"
|
|
/>
|
|
<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=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"
|
|
/>
|
|
</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>INDEPENDENT BOTTLER TASTING ARCHIVE</span>
|
|
</div>
|
|
<h1 id="heroHeading" class="hero-title">
|
|
시간과 배럴이 만든<br />
|
|
단 하나의 <span class="gold">캐스크 원액</span>
|
|
</h1>
|
|
<p class="hero-desc">
|
|
독립병입 위스키의 숙성 정보와 향미를 비교하며, 취향에 맞는 테이스팅 선택 방식을 살펴볼 수 있습니다.
|
|
</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">
|
|
도슨트 세션 상세 보기
|
|
</a>
|
|
</div>
|
|
<p class="demo-notice" role="note">안내: 이 페이지의 원장·인증 정보·가격·예약·구독은 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 예약 또는 구독으로 이어지지 않습니다.</p>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<figure class="hero-frame">
|
|
<img
|
|
src="./assets/whisky-hero.webp"
|
|
alt="차링된 오크 배럴 상판 위 싱글 캐스크 위스키 보틀과 테이스팅 글라스"
|
|
width="1200"
|
|
height="1600"
|
|
loading="eager"
|
|
/>
|
|
<figcaption 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>
|
|
</figcaption>
|
|
</figure>
|
|
</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">병입자 표기를 원장에 연결하는 예시</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">캐스크 번호와 향미 기준의 연결 예시</div>
|
|
</div>
|
|
<div class="cert-item">
|
|
<div class="cert-name">CADENHEAD'S</div>
|
|
<div class="cert-desc">1842년 설립, 스코틀랜드에서 가장 오래된 독립병입자 라인업</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrap"><p class="demo-notice" role="note">아래 병입자·수입 정보는 예시입니다. 실제 인증이나 입고 현황을 뜻하지 않습니다.</p></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">아래 병입 정보·수량·인증 표시는 예시입니다. 향미 기준으로 원하는 캐스크를 비교해 보세요.</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="증류소명 또는 캐스크 번호 검색"
|
|
aria-label="캐스크 검색"
|
|
/>
|
|
</div>
|
|
|
|
<div class="ledger-table-wrap">
|
|
<table class="ledger-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">캐스크 번호</th>
|
|
<th scope="col">증류소 & 원액 명칭</th>
|
|
<th scope="col">독립병입자 (Bottler)</th>
|
|
<th scope="col">숙성 배럴 / 년수</th>
|
|
<th scope="col">도수 (ABV)</th>
|
|
<th scope="col">한정 수량</th>
|
|
<th scope="col">향미 노트 요약</th>
|
|
<th scope="col">인증 정보</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" name="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" name="bookingDate" autocomplete="off" class="form-input" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="bookingTime">예약 시간대</label>
|
|
<select id="bookingTime" name="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" name="guestName" autocomplete="name" class="form-input" placeholder="성함" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="guestPhone">연락처</label>
|
|
<input type="tel" id="guestPhone" name="guestPhone" autocomplete="tel" class="form-input" placeholder="연락처" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="guestPref">향미 선호도 메모</label>
|
|
<input type="text" id="guestPref" name="guestPreference" autocomplete="off" class="form-input" placeholder="예: 셰리 밤 선호, 스모키 피트 선호 등" />
|
|
</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 & G&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>
|
|
<p class="demo-notice" role="note">이메일은 이 화면에 저장되지 않으며 실제 구독으로 등록되지 않습니다.</p>
|
|
|
|
<form class="newsletter-form" onsubmit="return false;">
|
|
<input
|
|
type="email"
|
|
id="newsEmail"
|
|
name="newsletterEmail"
|
|
autocomplete="email"
|
|
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;">
|
|
📸 인스타그램 살펴보기 ↗
|
|
</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>캐스크 아카이브 · 독립병입 위스키 안내</p>
|
|
<p class="muted">이 페이지의 원장·가격·신청 흐름은 예시이며 입력 정보는 저장·전송되지 않습니다.</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}님이 선택한 도슨트 세션(코스 ${course})을 확인했습니다.\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>
|