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

169
apps/site/public/work/cask-archive/assets/fonts/LICENSE.html Normal file
View file

File diff suppressed because one or more lines are too long

BIN
apps/site/public/work/cask-archive/assets/fonts/MaruBuri-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
apps/site/public/work/cask-archive/assets/fonts/MaruBuri-SemiBold.woff2 Normal file
View file

Binary file not shown.

13
apps/site/public/work/cask-archive/assets/fonts/SOURCES.md Normal file
View file

@ -0,0 +1,13 @@
# MaruBuri source record
Downloaded 2026-09-12 from the official NAVER Hangeul static host. The files are retained unchanged: no conversion or subsetting was performed.
| File | Official URL | HTTP content type | Size | SHA-256 |
| --- | --- | --- | --- | --- |
| `MaruBuri-Regular.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2 | `font/woff2` | 433776 bytes | `4CF1341CF2F23FB3E263712DFDE1D8F25EEDCC328B696A2E5A2C8ADD55E5C17B` |
| `MaruBuri-SemiBold.woff2` | https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2 | `font/woff2` | 466108 bytes | `7AEF4862FA3219B0A7DEB6746E27116A38C4069F4424EB51EDF103B29795F5C2` |
- Official stylesheet checked: https://hangeul.pstatic.net/hangeul_static/css/maru-buri.css
- Official NAVER license page saved verbatim as `LICENSE.html`: https://help.naver.com/service/11029/contents/18088?lang=ko&osType=PC
- `LICENSE.html` SHA-256: `8538F7921744D5E040F603BC301465EFBD038F1054D0754B7508DE3286452EC3`
- The saved official page includes the NAVER copyright notice and the SIL Open Font License 1.1 text for MaruBuri.

17
apps/site/public/work/cask-archive/design.md Normal file
View file

@ -0,0 +1,17 @@
# 캐스크 아카이브 — 디자인 결정 기록
## 관찰과 방향
- 관찰: 어두운 앰버 표면의 병 사진은 이중 베젤과 떠 있는 태그 때문에 작은 카드처럼 보였다.
- 원리 적용 범위: 병 사진은 4:5의 큰 표면으로 두고 캐스크 번호·종류·향미 조건은 바로 이어지는 원장형 캡션으로 묶는다. 검색·필터·도슨트 세션 선택은 같은 선과 상태 대비로 읽힌다.
- 결정: 병 사진의 베젤을 제거하고 캡션을 사진 아래 정렬선에 맞췄다. 실제 수입·인증·예약을 뜻하는 문구는 예시 메타데이터와 세션 안내로 제한한다.
- 기각 조건: 긴 캐스크 메타가 320px에서 넘치거나 필터·폼 상태가 앰버 대비에서 읽히지 않으면 캡션과 컨트롤의 줄바꿈 규칙을 조정한다.
## 토큰과 검증
- 타입: 로컬 `MaruBuri` 400·600과 기존 Pretendard·모노 역할을 유지한다.
- 색: `--accent` 앰버, 어두운 `--surface`, 얇은 원장 선을 유지한다.
- 구도: 넓은 화면의 hero는 5:7 텍스트/병 사진, 병은 4:5, 캡션은 사진과 같은 폭을 사용한다.
- `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
- root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.

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

@ -9,10 +9,7 @@
<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"
@ -21,8 +18,9 @@
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" />
<link rel="stylesheet" href="../styles/tokens.css?v=20260912all" />
<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" />
<style>
.breadcrumb-bar {
padding-top: var(--space-4);
@ -82,7 +80,7 @@
.course-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: var(--space-5);
margin-top: var(--space-5);
}
@ -136,6 +134,7 @@
</style>
</head>
<body>
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
<!-- Header (GNB SSOT) -->
<header class="site-head">
<div class="wrap head-inner">
@ -150,7 +149,7 @@
<a href="../index.html#subscribe">뉴스레터</a>
</nav>
<div class="head-actions">
<a href="#reservation-section" class="btn">도슨트 예약</a>
<a href="#reservation-section" class="btn">도슨트 세션</a>
</div>
</div>
</header>
@ -209,7 +208,7 @@
<!-- 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 style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-8); align-items: center;">
<div class="frame">
<img
src="../assets/aroma-wheel.webp"
@ -266,9 +265,9 @@
<table class="lineup-table">
<thead>
<tr>
<th>순서</th>
<th>라인업 구성</th>
<th>ABV</th>
<th scope="col">순서</th>
<th scope="col">라인업 구성</th>
<th scope="col">ABV</th>
</tr>
</thead>
<tbody>
@ -313,9 +312,9 @@
<table class="lineup-table">
<thead>
<tr>
<th>순서</th>
<th>라인업 구성</th>
<th>ABV</th>
<th scope="col">순서</th>
<th scope="col">라인업 구성</th>
<th scope="col">ABV</th>
</tr>
</thead>
<tbody>
@ -368,7 +367,7 @@
<!-- 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: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 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;">
@ -393,14 +392,15 @@
<!-- 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>
<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);">
<p class="demo-notice" role="note">안내: 아래 예약 항목과 가격은 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 예약으로 이어지지 않습니다.</p>
<form onsubmit="event.preventDefault(); alert('선택한 도슨트 세션을 확인했습니다. 실제 예약은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.');" 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>
<select class="form-input" id="courseSelect" name="courseSelect" required>
<option value="courseB">코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
<option value="courseA">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
</select>
@ -409,11 +409,11 @@
<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 />
<input type="date" class="form-input" id="resDate" name="reservationDate" autocomplete="off" required />
</div>
<div class="form-group">
<label class="form-label" for="resTime">예약 시간대</label>
<select class="form-input" id="resTime" required>
<select class="form-input" id="resTime" name="reservationTime" required>
<option>19:00 (1부)</option>
<option selected>20:30 (2부)</option>
<option>22:00 (3부 - 심야 세션)</option>
@ -424,21 +424,21 @@
<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 />
<input type="text" class="form-input" id="userName" name="userName" autocomplete="name" 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 />
<input type="tel" class="form-input" id="userPhone" name="userPhone" autocomplete="tel" 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 이상 헤비 피트 선호" />
<input type="text" class="form-input" id="flavorNote" name="flavorNote" autocomplete="off" placeholder="예: 아일라 피트 위스키, 셰리 버트 숙성 선호" />
</div>
<button type="submit" class="btn-primary" style="margin-top: var(--space-2); padding: 14px; font-size: var(--step-0);">
위스키 도슨트 세션 예약 확정 →
선택한 세션 내용 확인 →
</button>
</form>
</div>
@ -448,9 +448,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>
</body>

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 = "";
});
}

15
apps/site/public/work/cask-archive/styles/fonts.css Normal file
View file

@ -0,0 +1,15 @@
@font-face {
font-family: "MaruBuri";
src: url("../assets/fonts/MaruBuri-Regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "MaruBuri";
src: url("../assets/fonts/MaruBuri-SemiBold.woff2") format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}

91
apps/site/public/work/cask-archive/styles/main.css
View file

@ -1,4 +1,4 @@
@import "./tokens.css";
@import "./tokens.css?v=20260912all";
/* ==========================================================================
캐스크 아카이브 (CASK ARCHIVE) — 메인 스타일시트 SSOT
@ -266,7 +266,7 @@ button {
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--space-7);
align-items: center;
}
@ -304,15 +304,8 @@ button {
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);
margin: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.7);
@ -321,17 +314,15 @@ button {
.hero-frame img {
width: 100%;
aspect-ratio: 4/3;
aspect-ratio: 4/5;
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);
padding: var(--space-3) 0 0;
background: transparent;
border: 0;
display: flex;
justify-content: space-between;
align-items: baseline;
@ -390,9 +381,9 @@ button {
}
.section-head {
text-align: center;
max-width: 680px;
margin-inline: auto;
text-align: left;
max-width: 48rem;
margin-inline: 0;
margin-bottom: var(--space-6);
}
@ -439,7 +430,7 @@ button {
color: var(--ink-muted);
font-size: 12px;
font-weight: 600;
transition: all var(--dur-quick);
transition: background-color var(--dur-quick), border-color var(--dur-quick), color var(--dur-quick);
}
.filter-btn:hover {
@ -726,11 +717,14 @@ button {
inset: 0;
margin: auto;
width: min(90vw, 480px);
max-height: calc(100dvh - (var(--space-4) * 2));
background: #141418;
color: #f3f3f5;
border: 1px solid rgba(217, 155, 56, 0.4);
border-radius: var(--radius-sm);
padding: var(--space-5);
overflow: auto;
overscroll-behavior: contain;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8);
outline: none;
}
@ -784,3 +778,60 @@ button {
display: none;
}
}
html:has(dialog[open]) {
overflow: hidden;
}
/* 예약·원장 표면의 조작 여백과 키보드 상태를 토큰으로 맞춘다. */
:where(a, button, input, select, textarea):focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.btn-amber,
.btn-outline,
.head-actions .btn,
.filter-btn,
.search-input,
.form-input,
.form-select,
.newsletter-form input {
min-height: var(--control-block);
padding-inline: var(--control-pad-inline);
}
.ledger-table th,
.ledger-table td {
padding-inline: var(--control-pad-inline);
}
.demo-notice {
max-width: 58ch;
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--accent);
background: var(--accent-light);
color: var(--ink-muted);
font-size: var(--step--1);
line-height: 1.55;
word-break: keep-all;
}
@media (max-width: 600px) {
.head-actions .btn { display: none; }
.hero-title { font-size: clamp(1.65rem, 7.8vw, 2.15rem); }
.hero-ctas { align-items: stretch; }
.hero-ctas > a { width: 100%; }
.course-header { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
.docent-booking-form { padding: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}

4
apps/site/public/work/cask-archive/styles/tokens.css
View file

@ -64,8 +64,10 @@
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
--container: 1120px;
--container: clamp(70rem, 62vw, 85rem);
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
--control-block: 2.75rem;
--control-pad-inline: 0.875rem;
/* 모션 */
--dur-quick: 180ms;