123d9fc5a8
stylelint 도 html-validate 도 "var(--x) 를 썼는데 --x 가 어디에도 없다"를 잡지 못한다. 미정의 변수는 선언 전체를 무효로 만드는데 콘솔 에러가 없어 조용히 남는다. 검사기를 심자마자 v0.9.1 의 실제 결함이 나왔다. 게이트 신설 - tools/integrity.mjs — L0 무결성. CSS 커스텀 프로퍼티 참조, 상대경로, 한글 조판 필수 규칙(keep-all·한글 폰트 지정), 슬롭 지문, 스크롤 리스너를 검사. verify.mjs 체인에 편입해 실패 시 배포를 막는다. 폴백이 있는 var(--x, 기본값) 은 선택적 주입이므로 미정의로 세지 않는다. - tools/showcase-audit.mjs — 320/390/768/1440 실렌더 감사. 가로 스크롤·오버플로· 컨트롤 줄바꿈·대비 AA·왼쪽 인셋·h1 개수·히어로 줄 수·깨진 이미지·콘솔 에러. 반투명 배경을 합성해 대비를 재고, WebGL 페이지를 위해 swiftshader 로 렌더한다. - html-validate 대상을 두 페이지에서 public/work 전체로 넓혔다. 수리한 결함 - 미정의 변수 64건: --dur-fast·--radius-xs 가 정의된 적이 없어 cask-archive, cheongon-care, materia-interior 의 transition 선언이 통째로 무효였다. 새 토큰을 만들지 않고 기존 --dur-quick·--radius 로 매핑했다 — 토큰을 늘리면 radius 어휘가 4종이 되어 하드 게이트 3에 걸린다. - 한글 조판: lumina-optics·pulsegate·synapse-bci 가 word-break: keep-all 없이 IBM Plex Sans 만 지정해 한글이 시스템 기본으로 떨어지고 있었다. 같은 계열의 IBM Plex Sans KR 을 스택에 넣고 keep-all 을 추가했다. - 슬롭 지문 19건: text-transform: uppercase 로 만든 영문 대문자 eyebrow 를 한글 문장으로 바꾸고, 대문자용으로 잡아둔 넓은 자간과 모노 서체도 되돌렸다. - 하드 게이트 9: materia-interior/hannam-duplex.html 의 100vh → 100dvh. 이 파일은 어디서도 참조되지 않으면서 인라인 hex 까지 갖고 있어 토큰 기반으로 다시 썼다. - 접근성 11건: label 하나가 output 과 input 둘에 걸리던 것 5건(font-foundry, lumina-optics), dl > div > div > dt 4건(muwol-coffee), div 에 붙은 aria-label 2건(overtone-sound, pulsegate). 측정기 자체의 오류 둘도 고쳤다 — 눈에 보이지 않는 .sr-only 를 대비 실패로 잡던 것과, overflow-x: auto 상자 안의 넓은 표를 오버플로로 잡던 것. 재는 도구가 틀리면 통과도 실패도 의미가 없다.
458 lines
22 KiB
HTML
458 lines
22 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 위스키 도슨트 테이스팅 마스터클래스 — 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" style="font-size: var(--step-0); color: var(--accent);">樽</span>
|
||
캐스크 아카이브 <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 & 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&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>
|