yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

119
apps/site/public/work/cask-archive/index.html
View file

@ -3,23 +3,20 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>캐스크 아카이브 (CASK ARCHIVE) · 독립병입자 위스키바 & 도슨트 큐레이션</title>
<title>캐스크 아카이브 (CASK ARCHIVE) · 독립병입 위스키 안내</title>
<meta
name="description"
content="Gordon & MacPhail, Signatory, SMWS 등 독립병입자(IB) 희귀 캐스크 공식 수입 인증 위스키바. 캐스크 넘버 원장과 1:1 위스키 도슨트 테이스팅 코스 예약."
content="독립병입 위스키의 숙성 정보와 향미를 비교해 보는 안내입니다. 원장·가격·세션 정보는 예시이며 실제 예약을 받지 않습니다."
/>
<meta property="og:title" content="캐스크 아카이브 (CASK ARCHIVE) · 독립병입자 위스키바" />
<meta property="og: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="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
/>
<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"
@ -28,7 +25,7 @@
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="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"
@ -55,7 +52,7 @@
<div class="head-actions">
<a href="#docent" class="btn">
도슨트 예약
도슨트 세션
</a>
</div>
</div>
@ -67,29 +64,29 @@
<div class="wrap hero-grid">
<div class="hero-content">
<div class="eyebrow-amber">
<span>OFFICIALLY CERTIFIED INDEPENDENT BOTTLER BAR</span>
<span>INDEPENDENT BOTTLER TASTING ARCHIVE</span>
</div>
<h1 id="heroHeading" class="hero-title">
시간과 배럴이 빚어낸<br />
오직 단 하나의 <span class="gold">원액(Single Cask)</span>
시간과 배럴이 만든<br />
단 하나의 <span class="gold">캐스크 원액</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>
<p class="demo-notice" role="note">안내: 이 페이지의 원장·인증 정보·가격·예약·구독은 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 예약 또는 구독으로 이어지지 않습니다.</p>
</div>
<div class="hero-visual" style="position: relative;">
<div class="bezel-outer">
<div class="hero-frame">
<div class="hero-visual">
<figure class="hero-frame">
<img
src="./assets/whisky-hero.webp"
alt="차링된 오크 배럴 상판 위 싱글 캐스크 위스키 보틀과 테이스팅 글라스"
@ -97,44 +94,44 @@
height="1600"
loading="eager"
/>
</div>
</div>
<div class="hero-cask-tag">
<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>
</div>
</figcaption>
</figure>
</div>
</div>
</section>
<!-- 공식 독립병입자 수입 인증 스트립 -->
<section class="ib-cert-strip" aria-label="독립병입자 공식 인증">
<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 class="cert-desc">병입자 표기를 원장에 연결하는 예시</div>
</div>
<div class="cert-item">
<div class="cert-name">SIGNATORY VINTAGE</div>
<div class="cert-desc">언칠필터드 / 내추럴 컬러 캐스크 스트렝스 보증</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 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">모든 병은 단일 캐스크(Single Cask)에서 추출되어 병입 수량이 한정되어 있습니다. 필터로 원하는 향미 스펙을 검색하십시오.</p>
<h2 id="ledgerHeading" class="section-title">독립병입 캐스크 목록</h2>
<p class="section-sub">아래 병입 정보·수량·인증 표시는 예시입니다. 향미 기준으로 원하는 캐스크를 비교해 보세요.</p>
</div>
<div class="ledger-filter-bar">
@ -149,7 +146,7 @@
type="search"
id="caskSearch"
class="search-input"
placeholder="증류소명 or 캐스크 번호 검색..."
placeholder="증류소명 또는 캐스크 번호 검색"
aria-label="캐스크 검색"
/>
</div>
@ -158,14 +155,14 @@
<table class="ledger-table">
<thead>
<tr>
<th>캐스크 번호</th>
<th>증류소 & 원액 명칭</th>
<th>독립병입자 (Bottler)</th>
<th>숙성 배럴 / 년수</th>
<th>도수 (ABV)</th>
<th>한정 수량</th>
<th>향미 노트 요약</th>
<th>인증 정보</th>
<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">
@ -177,7 +174,7 @@
<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>
<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>
@ -187,7 +184,7 @@
<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>
<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>
@ -197,7 +194,7 @@
<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>
<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>
@ -207,7 +204,7 @@
<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>
<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>
@ -217,7 +214,7 @@
<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>
<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>
@ -262,12 +259,12 @@
<!-- 예약 입력 폼 -->
<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">
<select id="bookingCourse" name="bookingCourse" class="form-select">
<option value="A">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
<option value="B" selected>코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
</select>
@ -276,11 +273,11 @@
<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" />
<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" class="form-select">
<select id="bookingTime" name="bookingTime" class="form-select">
<option>19:00 (1부)</option>
<option selected>20:30 (2부)</option>
<option>22:00 (3부 심야)</option>
@ -291,21 +288,21 @@
<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 />
<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" class="form-input" placeholder="010-0000-0000" value="010-8831-2094" required />
<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" class="form-input" placeholder="예: 셰리 밤 선호, 스모키 피트 선호 등" value="강렬한 셰리 버트와 헤비 피트 선호" />
<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>
@ -360,25 +357,28 @@
신규 캐스크 입고 알림 & 인스타그램
</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;">
📸 인스타그램 @caskarchive.official 바로가기 ↗
📸 인스타그램 살펴보기 ↗
</a>
</div>
</div>
@ -390,7 +390,7 @@
<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>
@ -409,9 +409,8 @@
<!-- 푸터 (.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>
<p>캐스크 아카이브 · 독립병입 위스키 안내</p>
<p class="muted">이 페이지의 원장·가격·신청 흐름은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
</div>
</footer>
@ -458,7 +457,7 @@
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담당 도슨트가 당일 사전 안내 연락을 드립니다.`);
alert(`${name}님이 선택한 도슨트 세션(코스 ${course})을 확인했습니다.\n실제 예약은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.`);
});
}
@ -471,7 +470,7 @@
alert("유효한 이메일 주소를 입력해 주십시오.");
return;
}
alert(`[캐스크 아카이브] ${email} 주소로 신규 독립병입자 캐스크 릴리즈 알림이 등록되었습니다.`);
alert(`${email} 주소는 이 화면에 저장되지 않으며 실제 구독으로 등록되지 않습니다.`);
document.getElementById("newsEmail").value = "";
});
}