release: v0.9.1 (신규 쇼케이스 3종 정식 출시, CSS 변수 및 경로 무결성 게이트 강화)
This commit is contained in:
parent
e26b00a825
commit
225c1d9f42
75 changed files with 7406 additions and 224 deletions
BIN
apps/site/public/work/cask-archive/assets/aroma-wheel.webp
Normal file
BIN
apps/site/public/work/cask-archive/assets/aroma-wheel.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
BIN
apps/site/public/work/cask-archive/assets/cellar.webp
Normal file
BIN
apps/site/public/work/cask-archive/assets/cellar.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
apps/site/public/work/cask-archive/assets/docent-room.webp
Normal file
BIN
apps/site/public/work/cask-archive/assets/docent-room.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
apps/site/public/work/cask-archive/assets/whisky-hero.webp
Normal file
BIN
apps/site/public/work/cask-archive/assets/whisky-hero.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
apps/site/public/work/cask-archive/assets/whisky-pairing.webp
Normal file
BIN
apps/site/public/work/cask-archive/assets/whisky-pairing.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
459
apps/site/public/work/cask-archive/docent/index.html
Normal file
459
apps/site/public/work/cask-archive/docent/index.html
Normal file
|
|
@ -0,0 +1,459 @@
|
|||
<!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);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.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); text-transform: uppercase; letter-spacing: 0.06em; 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); text-transform: uppercase; letter-spacing: 0.06em; 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); text-transform: uppercase; letter-spacing: 0.06em; 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); text-transform: uppercase; letter-spacing: 0.06em; 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">SENSORY ANALYSIS</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;">CURATED FLIGHT SELECTION</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);">COURSE 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);">COURSE 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">GASTRONOMY PAIRING</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;">RESERVATION REQUEST</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>
|
||||
491
apps/site/public/work/cask-archive/index.html
Normal file
491
apps/site/public/work/cask-archive/index.html
Normal file
|
|
@ -0,0 +1,491 @@
|
|||
<!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 & 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>
|
||||
|
||||
<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>
|
||||
788
apps/site/public/work/cask-archive/styles/main.css
Normal file
788
apps/site/public/work/cask-archive/styles/main.css
Normal file
|
|
@ -0,0 +1,788 @@
|
|||
@import "./tokens.css";
|
||||
|
||||
/* ==========================================================================
|
||||
캐스크 아카이브 (CASK ARCHIVE · 樽室) — 메인 스타일시트 SSOT
|
||||
프리셋: editorial-archival + dark-instrument + high-end-visual-design
|
||||
========================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
background-color: var(--surface);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100dvh;
|
||||
line-height: var(--leading-normal);
|
||||
overflow-x: hidden;
|
||||
background: var(--surface);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color var(--dur-fast);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.serif {
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-family: var(--font-serif);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gold {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: min(100% - 2 * var(--pad-inline), var(--container));
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* ── 접근성 스킵 링크 ── */
|
||||
.skip-link {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 1000;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
border-radius: var(--radius-xs);
|
||||
transform: translateY(-200%);
|
||||
transition: transform var(--dur-fast);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.skip-link:focus {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ── 헤더 (GNB SSOT) ── */
|
||||
.site-head {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(11, 11, 13, 0.94);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding-block: var(--space-3);
|
||||
}
|
||||
|
||||
.head-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wordmark-han {
|
||||
font-size: var(--step--1);
|
||||
color: var(--accent);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-5);
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
transition: color var(--dur-fast);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav a:hover,
|
||||
.nav a.active {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.head-actions .btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent);
|
||||
color: #0b0b0d;
|
||||
font-weight: 700;
|
||||
font-size: var(--step--1);
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius-xs);
|
||||
transition: opacity var(--dur-fast), transform var(--dur-fast);
|
||||
}
|
||||
|
||||
.head-actions .btn:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* ── 버튼 시스템 & 배지 ── */
|
||||
.btn-amber {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
background: var(--accent);
|
||||
color: #0b0b0d;
|
||||
padding: 10px 20px;
|
||||
border-radius: var(--radius-xs);
|
||||
font-weight: 700;
|
||||
font-size: var(--step--1);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: transform var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.btn-amber:hover {
|
||||
background: #e6ab48;
|
||||
color: #0b0b0d;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-2);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--line);
|
||||
padding: 10px 18px;
|
||||
border-radius: var(--radius-xs);
|
||||
font-weight: 600;
|
||||
font-size: var(--step--1);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: border-color var(--dur-fast), color var(--dur-fast);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.eyebrow-amber {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: rgba(217, 155, 56, 0.12);
|
||||
color: var(--accent);
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: var(--space-3);
|
||||
border: 1px solid rgba(217, 155, 56, 0.25);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ── 히어로 섹션 ── */
|
||||
.hero-section {
|
||||
padding-block: var(--space-8) var(--space-7);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
|
||||
gap: var(--space-7);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.8rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-4);
|
||||
text-wrap: balance;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
|
||||
color: var(--ink-muted);
|
||||
max-width: 48ch;
|
||||
line-height: 1.75;
|
||||
margin-bottom: var(--space-6);
|
||||
text-wrap: pretty;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.hero-ctas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bezel-outer {
|
||||
background: rgba(217, 155, 56, 0.06);
|
||||
border: 1px solid var(--line);
|
||||
padding: 6px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.hero-frame {
|
||||
border-radius: calc(var(--radius-md) - 4px);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.7);
|
||||
background: #141418;
|
||||
}
|
||||
|
||||
.hero-frame img {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-cask-tag {
|
||||
margin-top: var(--space-2);
|
||||
padding: 6px 12px;
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-xs);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.cask-tag-no {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.cask-tag-sub {
|
||||
font-size: 11px;
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
/* ── 공식 독립병입자 수입 인증 스트립 ── */
|
||||
.ib-cert-strip {
|
||||
border-block: 1px solid var(--line);
|
||||
background: var(--surface-raised);
|
||||
padding-block: var(--space-5);
|
||||
}
|
||||
|
||||
.cert-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.cert-item {
|
||||
border-left: 2px solid var(--accent);
|
||||
padding-left: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.cert-name {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.cert-desc {
|
||||
font-size: 12px;
|
||||
color: var(--ink-muted);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── 캐스크 원장 섹션 (Interactive Cask Ledger) ── */
|
||||
.ledger-section {
|
||||
padding-block: var(--space-8);
|
||||
}
|
||||
|
||||
.section-head {
|
||||
text-align: center;
|
||||
max-width: 680px;
|
||||
margin-inline: auto;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.25rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-2);
|
||||
text-wrap: balance;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.section-sub {
|
||||
font-size: var(--step-0);
|
||||
color: var(--ink-muted);
|
||||
line-height: 1.6;
|
||||
text-wrap: pretty;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.ledger-filter-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.filter-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--ink-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all var(--dur-fast);
|
||||
}
|
||||
|
||||
.filter-btn:hover {
|
||||
border-color: var(--accent);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.filter-btn.is-active {
|
||||
background: rgba(217, 155, 56, 0.15);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--ink);
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: 13px;
|
||||
min-width: 240px;
|
||||
outline: none;
|
||||
transition: border-color var(--dur-fast);
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.ledger-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-raised);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
/* 앰버 골드 커스텀 스크롤바 (Firefox & 표준) */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent) rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
/* 앰버 골드 커스텀 스크롤바 (WebKit / Chrome / Safari / Edge) */
|
||||
.ledger-table-wrap::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.ledger-table-wrap::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ledger-table-wrap::-webkit-scrollbar-thumb {
|
||||
background: var(--accent);
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(11, 11, 13, 0.5);
|
||||
}
|
||||
|
||||
.ledger-table-wrap::-webkit-scrollbar-thumb:hover {
|
||||
background: #e6ab48;
|
||||
}
|
||||
|
||||
.ledger-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 12.5px;
|
||||
text-align: left;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ledger-table th {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
padding: 12px 10px;
|
||||
color: var(--ink-muted);
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ledger-table td {
|
||||
padding: 12px 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ledger-table tbody tr {
|
||||
transition: background var(--dur-fast);
|
||||
}
|
||||
|
||||
.ledger-table tbody tr:hover {
|
||||
background: rgba(217, 155, 56, 0.06);
|
||||
}
|
||||
|
||||
.ledger-table td:nth-child(1),
|
||||
.ledger-table td:nth-child(3),
|
||||
.ledger-table td:nth-child(4),
|
||||
.ledger-table td:nth-child(5),
|
||||
.ledger-table td:nth-child(6),
|
||||
.ledger-table td:nth-child(8) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ledger-table td:nth-child(7) {
|
||||
white-space: normal;
|
||||
max-width: 240px;
|
||||
font-size: 12px;
|
||||
color: #d1d5db;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.cask-badge {
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── 1:1 위스키 도슨트 테이스팅 코스 ── */
|
||||
.docent-section {
|
||||
padding-block: var(--space-8);
|
||||
border-top: 1px solid var(--line);
|
||||
background: var(--surface-card);
|
||||
}
|
||||
|
||||
.docent-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
|
||||
gap: var(--space-6);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.course-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.course-card {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-5);
|
||||
transition: border-color var(--dur-fast);
|
||||
}
|
||||
|
||||
.course-card:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.course-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: var(--space-2);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.course-title {
|
||||
font-family: var(--font-serif);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.course-price {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step-0);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.docent-booking-form {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 600;
|
||||
color: var(--ink-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-xs);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color var(--dur-fast);
|
||||
}
|
||||
|
||||
.form-select:focus,
|
||||
.form-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* ── 이벤트 & 뉴스레터 ── */
|
||||
.events-section {
|
||||
padding-block: var(--space-8);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.event-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-7);
|
||||
}
|
||||
|
||||
.event-item {
|
||||
background: var(--surface-raised);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-5);
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.event-date-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px 14px;
|
||||
background: rgba(217, 155, 56, 0.1);
|
||||
border: 1px solid rgba(217, 155, 56, 0.25);
|
||||
border-radius: var(--radius-xs);
|
||||
min-width: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.event-day {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step-1);
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.event-month {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
color: var(--ink-muted);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.newsletter-card {
|
||||
text-align: center;
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-7) var(--space-5);
|
||||
max-width: 720px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
max-width: 480px;
|
||||
margin: var(--space-5) auto 0;
|
||||
}
|
||||
|
||||
/* ── 인증서 모달 ── */
|
||||
.cert-dialog {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
margin: auto;
|
||||
width: min(90vw, 480px);
|
||||
background: #141418;
|
||||
color: #f3f3f5;
|
||||
border: 1px solid rgba(217, 155, 56, 0.4);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-5);
|
||||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.cert-dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* ── 푸터 (SSOT 정본) ── */
|
||||
.site-foot {
|
||||
border-top: 1px solid var(--line);
|
||||
padding-block: var(--space-6);
|
||||
background: var(--surface);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
|
||||
.foot-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* ── 반응형 미디어 쿼리 ── */
|
||||
@media (max-width: 860px) {
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
.hero-grid,
|
||||
.docent-grid,
|
||||
.event-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
.cert-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
.newsletter-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 540px) {
|
||||
.cert-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.wordmark-han {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
74
apps/site/public/work/cask-archive/styles/tokens.css
Normal file
74
apps/site/public/work/cask-archive/styles/tokens.css
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/* ==========================================================================
|
||||
캐스크 아카이브 (CASK ARCHIVE · 樽室) — 디자인 토큰 SSOT
|
||||
프리셋: dark-instrument + editorial-archival
|
||||
컨셉: 독립병입자 희귀 캐스크 원장과 1:1 위스키 도슨트 — 오크와 피트의 시간
|
||||
단일 강조색: 앰버 골드 (#D99B38)
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* 타이포그래피 스케일 */
|
||||
--step--1: 0.8125rem; /* 13px — 캡션·일련번호 */
|
||||
--step-0: 1rem; /* 16px — 본문 */
|
||||
--step-1: 1.1875rem; /* 19px — 소제목 */
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem); /* 30px — 섹션 표제 */
|
||||
--step-3: clamp(1.8rem, 1.4rem + 1.2vw, 2.25rem); /* 36px — 서브 표제 */
|
||||
--step-4: clamp(2.4rem, 1.8rem + 2.2vw, 3.8rem); /* 60px — 메인 디스플레이 */
|
||||
|
||||
--leading-tight: 1.18;
|
||||
--leading-normal: 1.7;
|
||||
--measure: 54ch;
|
||||
|
||||
--font-serif: "MaruBuri", "Noto Serif KR", serif;
|
||||
--font-display: "MaruBuri", "Noto Serif KR", serif;
|
||||
--font-body: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
|
||||
/* 다크 럭셔리 색상 — 미드나이트 오닉스 + 앰버 골드 1강조색 */
|
||||
--surface: #0b0b0d;
|
||||
--surface-raised: #141418;
|
||||
--surface-card: #1c1c22;
|
||||
--surface-subtle: #24242c;
|
||||
--surface-sunken: #070708;
|
||||
--surface-inverse: #f4f4f0;
|
||||
|
||||
--ink: #f4f4f0;
|
||||
--ink-muted: #9ca3af;
|
||||
--ink-faint: #6b7280;
|
||||
--ink-inverse: #0b0b0d;
|
||||
--ink-inverse-muted: #4b5563;
|
||||
|
||||
--line: #2a2a34;
|
||||
--line-strong: #3f3f4e;
|
||||
--line-subtle: #1e1e26;
|
||||
--line-inverse: #d1d5db;
|
||||
|
||||
/* 단일 강조색 — 오크 숙성 싱글 몰트 앰버 골드 */
|
||||
--accent: #d99b38;
|
||||
--accent-hover: #c28528;
|
||||
--accent-light: rgba(217, 155, 56, 0.12);
|
||||
--accent-surface: rgba(217, 155, 56, 0.2);
|
||||
--accent-ink: #0b0b0d;
|
||||
|
||||
--radius: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
|
||||
/* 간격 — SSOT 표준 */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
--space-4: 1.5rem;
|
||||
--space-5: 2.5rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 6rem;
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
|
||||
--container: 1120px;
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
|
||||
/* 모션 */
|
||||
--dur-quick: 180ms;
|
||||
--dur-normal: 420ms;
|
||||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue