feat(site): rework 19 marketing showcases for composition diversity
Some checks are pending
ci / build (push) Waiting to run
Some checks are pending
ci / build (push) Waiting to run
Measured convergence before: split hero 13/19, top-bar nav 19/19, one-line notice footer 14/19, body Pretendard 17/21, 10 similarity pairs above 0.78. Each showcase got a pre-assigned hero family, nav form, footer form, type pair, background, accent hue, radius, motion grammar and material from outputs/rework-2026-10-06/plan.md; direction cards and the chosen reason are recorded in every design.md. After: 0 similarity warnings, 19 distinct display faces, 7 hero families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases with SVG filter materials. Example contact values replace bracket placeholders under the existing fictional-brand notices. Thumbnails, OG images, card copy and three e2e assertions updated; dead CSS in dure-enrollment and hannam-jari removed; similarity.mjs learns the new font families.
This commit is contained in:
Yun Chan
parent
88c11682b1
commit
8e3cdb0d3b
296 changed files with 19131 additions and 17538 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
|
@ -1,13 +0,0 @@
|
|||
# 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.
|
||||
|
|
@ -1,17 +1,126 @@
|
|||
# 캐스크 아카이브 — 디자인 결정 기록
|
||||
# design.md — 캐스크 아카이브
|
||||
|
||||
## 관찰과 방향
|
||||
## 진행 상태
|
||||
|
||||
- 관찰: 어두운 앰버 표면의 병 사진은 이중 베젤과 떠 있는 태그 때문에 작은 카드처럼 보였다.
|
||||
- 원리 적용 범위: 병 사진은 4:5의 큰 표면으로 두고 캐스크 번호·종류·향미 조건은 바로 이어지는 원장형 캡션으로 묶는다. 검색·필터·도슨트 세션 선택은 같은 선과 상태 대비로 읽힌다.
|
||||
- 결정: 병 사진의 베젤을 제거하고 캡션을 사진 아래 정렬선에 맞췄다. 실제 수입·인증·예약을 뜻하는 문구는 예시 메타데이터와 세션 안내로 제한한다.
|
||||
- 기각 조건: 긴 캐스크 메타가 320px에서 넘치거나 필터·폼 상태가 앰버 대비에서 읽히지 않으면 캡션과 컨트롤의 줄바꿈 규칙을 조정한다.
|
||||
- 2026-10-06 · 0 현행 감사 → 1 레퍼런스 실측 → 2 방향(카드 3장, 위임으로 A 선택) → 3 토큰 → 4 구현(index + docent 공통 셸) → 5 감사(정적·게이트·실렌더·E2E·루브릭) → 6 기록. 완료.
|
||||
- 재개 지점: 없음. 바꾸려면 "방향" 절의 지문 블록부터 읽는다.
|
||||
|
||||
## 토큰과 검증
|
||||
## 브리프
|
||||
|
||||
- 타입: 로컬 `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이다.
|
||||
- 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
|
||||
```
|
||||
무엇을: 독립병입 위스키 바 "캐스크 아카이브"의 안내 사이트 2면(캐스크 목록 / 도슨트 테이스팅) 리디자인
|
||||
누구에게: 독립병입 싱글 캐스크를 찾는 손님. 캐스크 번호·숙성·도수를 비교하고 도슨트 세션을 고른다
|
||||
제약: 정적 HTML+CSS, 이미지 6장 재사용(새 이미지 없음), E2E가 보는 id 유지, 기본 언어 ko-KR(대화 언어), 한자 금지
|
||||
```
|
||||
|
||||
- 화면: `/work/cask-archive/`(대표), `/work/cask-archive/docent/`(2차, 같은 셸).
|
||||
- 확정 슬롯(기존 파일·plan.md 배정): 업종 위스키 바, 목표 행동 1순위 캐스크 비교 → 2순위 도슨트 세션 선택, 톤 아카이브 문서(차분·사실), 자산 이미지 6장·상호.
|
||||
- 배정값(plan.md cask-archive 행): 격자·목록 히어로 · 표제 작게 · 측면 색인 · 다열 색인 푸터 · Nanum Myeongjo / IBM Plex Sans KR · 어두운 웜 · 25° 구리 · radius 2px · hover·focus만 · 재질 없음 · 원본 비율, 캡션 옆.
|
||||
|
||||
## 미확정
|
||||
|
||||
- 캐스크 5통·통관 번호·가격·일정·장소(한남 27길)는 기존 쇼케이스의 예시 값이다. 푸터와 폼 옆 고지로 가상 브랜드임을 밝힌다.
|
||||
- 방향 선택은 위임(재작업 지시)으로 작업자가 골랐다. 카드 B·C는 아래 "방향"에 남긴다.
|
||||
- og:image는 기존 사진(`assets/whisky-hero.webp`, docent는 `masterclass-lineup.webp`)을 가리킨다. 전용 1200×630 이미지는 만들지 않았다.
|
||||
|
||||
## 레퍼런스 (2026-10-06 실측)
|
||||
|
||||
| 슬롯 | URL | 원리 한 줄 |
|
||||
|---|---|---|
|
||||
| R1 구조 | https://smws.com/whisky | h1 없이 좌측 필터 레일(x=20, w=356)과 상품 격자(x=376, w=1012)가 y=225에서 시작 — 목록이 첫 화면. 푸터 17링크 다열 |
|
||||
| R2 톤 | https://www.cadenhead.scot/ | "Scotland's Oldest Independent Bottler, Established 1842" 사실형 문장. 5열 푸터(주소/행사/글/알림/법적) |
|
||||
| R3 디테일 | https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns | sticky 측면 색인 w=297(20%), 앵커 8개, 현재 위치 표시 |
|
||||
| 미검증 | whiskybase.com·thewhiskyexchange.com(Cloudflare 대기), whiskyauctioneer.com(406), gordonandmacphail.com/whisky(404) | 대체 출처로 갔다 |
|
||||
|
||||
## 방향
|
||||
|
||||
지문: 격자·목록(캐스크 번호 5행이 첫 화면, h1 18px) · Nanum Myeongjo 700 / IBM Plex Sans KR 400·600 · 바탕 #1a1512 어두운 웜 · 강조 #d18147(hue 25°) · radius 2px · 흐름 목록 → 병입자(사진+캡션 옆) → 도슨트 코스+폼 → 시음회 일정+입고 알림 → 다열 색인 푸터 · 내비 왼쪽 sticky 측면 색인(≤1023 접는 차례) · 푸터 4열 색인(차례/캐스크 번호/도슨트/찾아오기) · 이미지 원본 비율, 캡션 옆 · 모션 hover·focus 색 전환만
|
||||
|
||||
- 한 문장 컨셉: 독립병입 위스키를 찾는 손님이 보유 캐스크 5통의 번호·숙성·도수를 첫 화면 목록에서 비교하고, 병입 정보를 확인한 뒤 도슨트 세션을 고른다.
|
||||
- 프리셋: editorial(아카이브 문서) 지배. 어두운 바탕은 배정값이며 dark-instrument의 계기판 밀도는 가져오지 않는다(표는 1행 1통, 행간 넉넉).
|
||||
- 표현 리스크: 첫 화면에 사진이 없다. 캐스크 번호(32~48px 명조)가 사진 자리를 맡는다. 검증: 390·1440 첫 화면 3초 문장(아래 검증 절).
|
||||
- 표면 다이얼: 두 면 모두 안내 표면. 표현성 1 / 밀도 2 / 모션 0 / 증거 노출 2.
|
||||
|
||||
### 카드 (위임으로 A 선택)
|
||||
|
||||
| 카드 | 첫 화면 | 흐름 | 포기하는 것 |
|
||||
|---|---|---|---|
|
||||
| **A. 열람실 — 색인 왼쪽, 목록 오른쪽** | 15rem sticky 색인 + 8열 캐스크 표(번호 명조 48px) | 목록 → 병입자 → 도슨트 → 일정 → 푸터 | 큰 사진·큰 표제 |
|
||||
| B. 번호판 격자 | 3열 카드 격자(카드마다 번호 크게), 우측 얇은 색인 | 격자 → 상세표 → 도슨트 → 일정 | 열 단위 비교(도수·병 수를 한눈에 못 본다), E2E의 `tr` 계약 |
|
||||
| C. 한 단 긴 문서 | 측면 색인 + 36em 한 단, 캐스크마다 번호 + 향미 문단 | 목록(문단형) → 도슨트 → 일정 | 밀도·비교 속도, 페이지 길이 2배 |
|
||||
|
||||
고른 이유: 기존 design.md·메타가 "캐스크 번호·숙성 연수·도수·병 번호를 비교"를 1순위 과업으로 적었고, R1(SMWS)이 목록을 첫 화면에 두고 좌측 레일로 거르는 구조였다. 표 행 비교가 B·C보다 빠르고 E2E 계약(`#caskTableBody tr`)을 그대로 지킨다.
|
||||
|
||||
### 반사실·수렴 점검
|
||||
|
||||
- 고유 요소(첫 화면): 캐스크 번호 5개(#6512, #29.281, #93/41, #PX-88, #98/12), 분류 버튼(셰리/피트/버번/캐스크 스트렝스), 병입자 이름 열, h1의 "5통·도슨트 1:1". 같은 업종 치환: 번호·병입자가 바뀌면 목록 내용이 전부 바뀐다. 다른 업종(세무사무소) 치환: 번호 열·도수 열·분류 버튼이 성립하지 않는다 → 통과(고유 요소 4).
|
||||
- B-1(히어로 5축) vs 직전 cask-archive 구버전: 구도 다름(분할→목록), 표제 서체 다름(MaruBuri→Nanum Myeongjo), eyebrow 없음(있었음), CTA 다름(단색+외곽선 2개 → 없음), 캡션 다름 → 같음 0.
|
||||
- B-2(페이지 6축) vs 배정표의 같은 패밀리 hannam-jari(격자·상단 바·다음 행동 푸터·VT·1:1 캡션 위): 섹션 흐름 다름, 글 묶음 비슷(표제 작게), 내비 다름, 푸터 다름, 이미지 다름, 모션 다름 → 같음 ≤1.
|
||||
- 토큰 4축: 본문 IBM Plex Sans KR은 hannam-jari와 같다(배정표가 본문 ≤5종을 허용). 표제·배경·hue·radius는 다르다.
|
||||
|
||||
### 보존 자산
|
||||
|
||||
상호, 캐스크 5통 데이터(번호·증류소·병입자·배럴·연수·도수·병 수·향미·통관 번호), 병입자 4곳 문장, 코스 A/B 가격·시간·라인업, 시음회 2건, 장소·인원·글라스, 이미지 6장, 두 주소, E2E가 보는 id(`#caskSearch`, `#caskTableBody`, `.filter-btn[data-filter]`, `#courseSelect`(courseA/B), `#resDate`, `#resTime`, `#userName`, `#userPhone`, submit alert 문구).
|
||||
|
||||
## 토큰과 예산
|
||||
|
||||
값은 `styles/tokens.css`에만 있다.
|
||||
|
||||
- 타입: 본문 16px/1.7, 캡션 14px(한글 13px 하한 위), h1 18px(표제는 작게), 섹션 h2 22~28px, 캐스크 번호 32~48px. measure 36em. 모노 없음 — 숫자는 `tabular-nums`.
|
||||
- 색: 바탕 #1a1512 / 글 #efe6da / 보조 #b3a595 / 희미 #8f8071(차례 번호) / 강조 #d18147. 실측 대비는 "검증" 절.
|
||||
- 간격: 4·8·16·24·40·64·96px. 측면 색인 15rem, 본문 최대 68rem.
|
||||
- radius 2px 하나. 그림자 없음.
|
||||
- 모션: 160ms 색·테두리 전환만. 감소 모션에서 1ms.
|
||||
- 예산: JS 인라인 4.6KB(gzip 전, 150KB 예산 안), 웹폰트 2종(Google Fonts, 한글 서브셋 unicode-range, swap), LCP 후보는 index의 첫 화면 텍스트(사진은 2번째 섹션). 실측치: 로컬 서버 networkidle 캡처 기준 콘솔 오류 0, 깨진 이미지 0.
|
||||
|
||||
## 이펙트와 폴백
|
||||
|
||||
- 이펙트 없음. 측면 색인의 현재 위치 표시는 IntersectionObserver로 `aria-current`만 바꾼다(없으면 표시가 없을 뿐 링크는 동작).
|
||||
- 좁은 화면 차례는 `<details open>`이고 JS가 ≤1023에서 닫는다. JS 없이면 펼친 채로 보인다.
|
||||
- 표는 ≥1400에서 8열 표, 그 아래에서 같은 `tr`을 flex 줄바꿈 목록으로 바꾼다(1280 실측 1051px > 960px, 1366 실측 1056px > 1042px).
|
||||
|
||||
## 하지 않기로 한 것
|
||||
|
||||
- 상단 바·sticky 헤더·backdrop-filter: 긴 문서라 측면 색인이 현재 위치를 보여 준다. 바탕이 단색이라 흐림이 필요 없다.
|
||||
- 등장 모션·스크롤 리빌·스태거: 배정값 밖이며 아카이브 문서에 이유가 없다.
|
||||
- 히어로 사진: 목록이 주인. 사진은 병입자 절에서 원본 비율로 캡션 옆에 둔다.
|
||||
- 모노 서체: 한글 라벨에 라틴 모노를 섞지 않는다. 숫자 정렬은 tabular-nums.
|
||||
- 가운뎃점 메타 문자열(`A · B`), 영문 장식 라벨, eyebrow, "RECOMMENDED" 리본, 이모지, 카드 glow.
|
||||
- "원장·장부" 낱말: 가시 텍스트에서 0회(코드 id `#ledger`·`.ledger-table`만 남긴다).
|
||||
- MaruBuri 로컬 폰트 파일(`assets/fonts/`)과 `styles/fonts.css`: 더 쓰지 않으므로 지웠다.
|
||||
- 2열 폼 행(날짜/시간, 이름/연락처): 게이트의 같은 클래스 폭·간격 불변식을 깨서 한 열로 둔다.
|
||||
|
||||
## 검증
|
||||
|
||||
검증 줄: html-validate 2/2 통과 · stylelint 통과 · no-hanja 4파일 통과 · showcase-audit 12/12(320~2560 × 2면) · design-gate 충족 26 / 미검증 0 / 실패 0(정적·시각 회귀·WebKit은 꺼짐) · archive-showcases-e2e cask 블록 26/26 · 키보드(순서·포커스 링 3px·dialog Esc 후 포커스 복귀) 통과 · 200% 글자 확대 320/390/1440 문서 가로 넘침 0 · WCAG 1.4.12 글자 간격 재정의 넘침 0.
|
||||
|
||||
대비 실측(WCAG 2.x 상대 휘도): 글/바탕 14.7 · 보조/바탕 7.5 · 보조/폼 패널 7.1 · 보조/모달 6.7 · 보조/푸터 7.9 · 강조/바탕 6.0 · 버튼 글/강조 6.0 · 버튼 글/강조 hover 7.1 · 차례 번호/바탕 4.7.
|
||||
|
||||
시각 루브릭(캡처: 세션 스크래치 `cask/shots/index-{1440,390,1280}-{fold,full,blur}.png`, `docent-*`, `index-1440-dialog.png`; 약한 축부터):
|
||||
|
||||
| 축 | 점수 | 근거 | 다음 행동 |
|
||||
|---|---|---|---|
|
||||
| R2 위계 | 1 | index-1440-blur: 1 캐스크 번호 → 2 "병입 정보" 외곽선 버튼 → 3 필터·표제. 의도는 번호 → 증류소·도수 → 버튼이었다 | 버튼을 텍스트 링크 꼴로 낮추면 2순위가 증류소로 간다 |
|
||||
| R5 여백 리듬 | 1 | 섹션 패딩이 64px로 같고 전환은 1px 선이 맡는다. 극단은 번호 48px vs 표제 18px(스케일) 하나 | 입고 알림 블록을 96px로 띄워 마지막 행동을 분리 |
|
||||
| R9 디테일 | 1 | 2x 확대 캡처(index-1440-row-2x)에서 번호 윗선이 증류소 이름 대문자 윗선보다 8px 높았고 `.cask-no` padding-top으로 맞췄다(재측정 211 vs 212). 모달·첫 행만 2x로 훑었고 나머지 영역은 1x 캡처만 봤다 | 390·1440 전체를 200%로 훑어 radius·간격 반복 확인 |
|
||||
| R1 첫인상 | 2 | 1440·390 fold 3초 문장: "독립병입 위스키 바. 캐스크 5통을 번호로 고르고 도슨트와 1:1로 마신다" — 컨셉 문장의 명사·동사와 같다. 브랜드·h1 모두 보임. 반례: '위스키'라는 낱말은 h1과 부제에만 있어 번호만 보면 업종이 늦게 읽힌다 |
|
||||
| R3 묶음·정렬 | 2 | 1440 fold 시작선 x=44(색인), x=284(표제·필터·표·h2 전부). 두 선. 묶음 사이(섹션 64px) > 묶음 안(행 24px). 반례: 1280 flex 목록의 둘째 줄 시작(≈480)이 1440 표의 증류소 열(496)과 폭마다 다르다 |
|
||||
| R4 타이포 | 2 | 합성 굵기 없음(`font-synthesis-weight: none`, 700·600 실제 로드), 320/390/1440 h1·h2 마지막 줄 한 어절 0건(푸터 한 낱말 제목 제외), 모노 한글 없음, 본문 16px/1.7. 반례: Nanum Myeongjo의 "#PX-88" 하이픈이 길어 보인다 |
|
||||
| R6 이미지 | 2 | 4장 전부 역할·캡션 있음(병 896×1200, 라인업·아로마 휠·페어링·룸 1376×768), 원본 비율이라 크롭 손실 0, 모두 어두운 웜 조도. 390 첫 화면에 사진이 없는 것은 "목록이 주인" 컨셉. 반례: 아로마 휠 이미지 안의 영문 제목(기존 자산) |
|
||||
| R7 카피 | 2 | 합니다체 통일, 은유 0, 섹션 제목이 사실 문장(5통·1:1·9월 12일과 26일·하몽/초콜릿/흑무화과). 경쟁사 치환 시 '5통'·'9월 12일'이 깨진다. 반례: '도슨트'는 업종 일반어 |
|
||||
| R8 구분성 | 2 | 고유 요소 4(번호 5개, 분류 버튼, 병입자 열, h1 수치), 히어로 5축 같음 0, 페이지 6축 같음 ≤1. 반례: hannam-jari와 본문 서체·격자 패밀리 공유 |
|
||||
| R10 모바일 | 2 | index-390-fold: 브랜드·h1·차례 버튼·필터·첫 캐스크(#6512 전체 필드)·"병입 정보" 버튼이 844px 안에 보인다. 색인 요약·버튼을 숨기고 표를 목록으로 다시 짰다. 반례: 첫 항목 버튼이 y≈760으로 하단 가장자리 |
|
||||
|
||||
합계 17/20, 0점 없음, R1·R8 2점 → 통과.
|
||||
|
||||
미검증: 실기기(iOS Safari) 렌더, 웹폰트 로드 전 폴백 메트릭 CLS 실측, LCP 수치(랩 환경 없음). 미검증은 충족으로 세지 않는다.
|
||||
|
||||
## 피드백 기록 · 보존 목록
|
||||
|
||||
- (없음 — 납품 후 피드백 대기)
|
||||
|
||||
## 변경 기록
|
||||
|
||||
- 2026-10-06 · 리디자인(이 문서 전체). 분할 히어로·상단 바·고지 띠·MaruBuri/Pretendard/JetBrains Mono·앰버 #d99b38·무채 검정을 배정표대로 교체. `#curator` 죽은 앵커 제거. 폼 필드를 한 열로, 시간→날짜 순서.
|
||||
- 2026-10-02 · 카피 교정(구버전): 과장·영문 장식 라벨 제거, 합니다체 통일.
|
||||
- 2026-09 · 구버전: 병 사진 베젤 제거, 캡션 정렬선 맞춤, 로컬 MaruBuri 400·600 적재, 좁은 화면 내비 둘째 줄.
|
||||
|
|
|
|||
|
|
@ -1,456 +1,385 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>1:1 위스키 도슨트 테이스팅 마스터클래스 — CASK ARCHIVE</title>
|
||||
<meta name="description" content="캐스크 아카이브의 1:1 위스키 도슨트 테이스팅 마스터클래스 안내. 코피타 글래스웨어학, 감각 아로마 휠 분석, 독립병입자 싱글 캐스크 플라이트 및 가스트로노미 페어링." />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<title>1:1 위스키 도슨트 테이스팅 — 캐스크 아카이브</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="캐스크 아카이브의 1:1 위스키 도슨트 테이스팅 안내. 코스 A 3잔 65,000원, 코스 B 5잔 120,000원의 라인업과 도수, 향을 네 계열로 나누는 방법, 함께 내는 페어링 플레이트를 적었습니다."
|
||||
/>
|
||||
<meta property="og:title" content="1:1 위스키 도슨트 테이스팅 — 캐스크 아카이브" />
|
||||
<meta property="og:description" content="도슨트 한 명이 한 팀만 맡는 3잔, 5잔 시음 코스의 라인업과 가격." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/cask-archive/assets/masterclass-lineup.webp" />
|
||||
<meta property="og:image:alt" content="코스 B에서 마시는 싱글 캐스크 위스키 5종과 테이스팅 카드" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#1a1512" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="../styles/fonts.css?v=20260912all" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;600&family=Nanum+Myeongjo:wght@400;700&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="../styles/main.css?v=20261006" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
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='2' fill='%231A1512'/%3E%3Ccircle cx='16' cy='16' r='10' stroke='%23D18147' stroke-width='2' fill='none'/%3E%3Cpath d='M16 8v16M8 16h16' stroke='%23D18147' stroke-width='1.5'/%3E%3C/svg%3E"
|
||||
/>
|
||||
<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);
|
||||
padding-bottom: var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.breadcrumb-bar a {
|
||||
color: var(--ink-muted);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
.breadcrumb-bar a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
.breadcrumb-bar .sep {
|
||||
opacity: 0.4;
|
||||
}
|
||||
.breadcrumb-bar .current {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docent-hero {
|
||||
padding: var(--space-7) 0 var(--space-5);
|
||||
}
|
||||
.docent-meta-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-top: var(--space-5);
|
||||
background: var(--surface-card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
.docent-meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.docent-meta-item .label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--step--1);
|
||||
color: var(--ink-muted);
|
||||
}
|
||||
.docent-meta-item .value {
|
||||
font-size: var(--step-0);
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.course-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 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>
|
||||
<a class="skip-link" href="#main-content">본문으로 건너뛰기</a>
|
||||
<!-- Header (GNB SSOT) -->
|
||||
<header class="site-head">
|
||||
<div class="wrap head-inner">
|
||||
<a href="../index.html" class="wordmark" aria-label="캐스크 아카이브 홈">
|
||||
캐스크 아카이브 <span class="wordmark-han">CASK ARCHIVE</span>
|
||||
|
||||
<div class="shell">
|
||||
<!-- 측면 색인 — index.html 과 같은 셸 -->
|
||||
<header class="index">
|
||||
<a class="wordmark" href="../index.html" aria-label="캐스크 아카이브 홈">
|
||||
캐스크 아카이브
|
||||
<span class="wordmark-sub">독립병입 위스키 바, 한남동</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>
|
||||
|
||||
<details class="toc" open>
|
||||
<summary></summary>
|
||||
<nav aria-label="차례">
|
||||
<ol>
|
||||
<li><a href="#courses">시음 코스</a></li>
|
||||
<li><a href="#aroma">향 계열 네 가지</a></li>
|
||||
<li><a href="#pairing">페어링 플레이트</a></li>
|
||||
<li><a href="#reservation-section">세션 선택</a></li>
|
||||
<li><a href="../index.html#ledger">캐스크 목록으로</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
|
||||
<div class="index-foot">
|
||||
<p>코스 A 45분, 코스 B 75분</p>
|
||||
<a href="#reservation-section" class="btn-outline">세션 고르기</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</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>
|
||||
<main id="main-content" class="content">
|
||||
<!-- 첫 화면: 코스 두 개 -->
|
||||
<section class="section" id="courses" aria-labelledby="coursesHeading">
|
||||
<div class="ledger-head">
|
||||
<h1 id="coursesHeading">도슨트 한 명이 한 팀만 맡아 좋아하는 향에 맞춰 위스키를 고릅니다</h1>
|
||||
<p>3잔 또는 5잔, 잔마다 숙성 배럴과 도수의 차이를 짚습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="docent-hero-head">
|
||||
<p class="hero-label">BESPOKE TASTING METHODOLOGY</p>
|
||||
<h1 class="hero-title" style="margin-bottom: var(--space-2);">1:1 위스키 도슨트 마스터클래스</h1>
|
||||
<p class="hero-lead" style="font-size: var(--step-0); color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--space-5);">
|
||||
공인 위스키 마스터가 1:1로 당신의 후각과 미각 취향을 해체하고 조립하는 프라이빗 테이스팅 세션.
|
||||
</p>
|
||||
|
||||
<dl class="docent-specs" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);">
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Session Type</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">1:1 Private Tasting</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Location</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Cask Room (한남 27길)</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Capacity</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">최대 2인 (동반 1인 가능)</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="spec-label" style="font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 2px;">Glassware</dt>
|
||||
<dd class="spec-val" style="font-family: var(--font-serif); font-size: var(--step-0); font-weight: 700; color: var(--ink);">Glencairn & Copita</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<figure class="hero-photo" style="border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-card);">
|
||||
<img
|
||||
src="../assets/docent-room.webp"
|
||||
alt="어두운 오크 바 카운터에 세팅된 코피타 테이스팅 글래스와 도슨트 노트"
|
||||
width="1600"
|
||||
height="900"
|
||||
style="width: 100%; aspect-ratio: 16/9; object-fit: cover;"
|
||||
/>
|
||||
<figcaption style="padding: 10px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line); background: var(--surface-raised);">
|
||||
한남동 캐스크 룸 · 마스터 전용 1:1 테이스팅 카운터
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sensory Wheel & Flavor Science -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);">
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-8); align-items: center;">
|
||||
<div class="frame">
|
||||
<img
|
||||
src="../assets/aroma-wheel.webp"
|
||||
alt="위스키 감각 테이스팅 아로마 휠 다이어그램"
|
||||
style="width: 100%; display: block;"
|
||||
/>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-4);">
|
||||
<div class="eyebrow">관능 분석</div>
|
||||
<h2 style="font-size: var(--step-2); font-weight: 800; line-height: 1.25;">
|
||||
후각과 미각의 지도를 그리는<br />
|
||||
<span class="accent-text">4축 아로마 분석법</span>
|
||||
</h2>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--step--1); color: var(--ink-muted); line-height: 1.7;">
|
||||
<p>
|
||||
<strong style="color: var(--ink);">1. Peat Smoke (피트/스모키)</strong>: 아일라 섬의 이탄 연기, 해초의 요오드(Iodine), 정향과 재(Ash)의 깊이.
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: var(--ink);">2. Dried Fruits (건과일 & 셰리)</strong>: 올로로소/PX 캐스크에서 추출된 말린 무화과, 건포도, 다크 초콜릿의 농밀함.
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: var(--ink);">3. Floral & Orchard (에스테르 & 과원)</strong>: 장기 발효와 구리 환류에서 비롯된 풋사과, 엘더플라워, 꿀의 산뜻함.
|
||||
</p>
|
||||
<p>
|
||||
<strong style="color: var(--ink);">4. Charred Oak (오크 바닐린)</strong>: 1st Fill 버번 배럴의 그을린 탄닌, 토피, 시나몬 스파이스.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Course Comparison Deep Cards -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);" id="courses">
|
||||
<div class="eyebrow" style="text-align: center;">큐레이션 플라이트</div>
|
||||
<h2 style="font-size: var(--step-3); font-weight: 800; text-align: center; margin-top: 6px;">
|
||||
도슨트 테이스팅 정규 코스
|
||||
</h2>
|
||||
|
||||
<div class="course-card-grid">
|
||||
<!-- Course A -->
|
||||
<div class="course-deep-card">
|
||||
<dl class="spec-list">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
||||
<span class="eyebrow" style="color: var(--ink-muted);">코스 A</span>
|
||||
<span style="font-size: var(--step-2); font-weight: 800; color: var(--accent);">65,000원</span>
|
||||
</div>
|
||||
<h3 style="font-size: var(--step-1); font-weight: 700; margin-top: 8px;">
|
||||
독립병입자 입문 탐색 플라이트 (3잔)
|
||||
</h3>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); margin-top: 6px; line-height: 1.6;">
|
||||
증류소의 기본 공식 라인업(OB)과 독립병입자(IB) 싱글 캐스크의 결정적 차이를 체감하는 코스입니다.
|
||||
</p>
|
||||
<dt>진행</dt>
|
||||
<dd>도슨트 1:1</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>장소</dt>
|
||||
<dd>캐스크 룸, 한남 27길</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>인원</dt>
|
||||
<dd>최대 2인 (동반 1인)</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>글라스</dt>
|
||||
<dd>글렌캐런, 코피타</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<ul class="course-list mt-5">
|
||||
<li class="course-card">
|
||||
<div class="course-header">
|
||||
<h2 class="course-title">코스 A. 독립병입자 입문 플라이트, 3잔</h2>
|
||||
<span class="course-price">65,000원</span>
|
||||
</div>
|
||||
<p>증류소 공식 제품(OB)과 독립병입(IB) 싱글 캐스크를 나란히 마셔 보며 차이를 비교합니다.</p>
|
||||
<table class="lineup-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">순서</th>
|
||||
<th scope="col">라인업 구성</th>
|
||||
<th scope="col">ABV</th>
|
||||
<th scope="col">라인업</th>
|
||||
<th scope="col">도수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>하이랜드 에스테르 (클라인리쉬 14y vs IB 캐스크)</td>
|
||||
<td>하이랜드 에스테르 (클라인리쉬 14년 vs 독립병입 캐스크)</td>
|
||||
<td>46.0% / 54.2%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>스페이사이드 셰리 (글렌토커스 1st Fill 셰리 버트)</td>
|
||||
<td>56.8% CS</td>
|
||||
<td>56.8%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>아일라 헤비 피트 (라프로익 2005 SMWS 29.281)</td>
|
||||
<td>57.8% CS</td>
|
||||
<td>아일라 헤비 피트 (라프로익 2005, SMWS 29.281)</td>
|
||||
<td>57.8%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted);">소요 시간: 45분</span>
|
||||
<a href="#reservation-section" class="btn-outline" style="text-decoration: none;">코스 A 예약하기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course B -->
|
||||
<div class="course-deep-card highlight">
|
||||
<div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: baseline;">
|
||||
<span class="eyebrow" style="color: var(--accent);">코스 B</span>
|
||||
<span style="font-size: var(--step-2); font-weight: 800; color: var(--accent);">120,000원</span>
|
||||
<div class="course-foot">
|
||||
<span>45분</span>
|
||||
<a href="#reservation-section" class="btn-outline">코스 A 고르기</a>
|
||||
</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>
|
||||
</li>
|
||||
|
||||
<li class="course-card">
|
||||
<div class="course-header">
|
||||
<h2 class="course-title">코스 B. 캐스크 스트렝스와 빈티지 플라이트, 5잔</h2>
|
||||
<span class="course-price">120,000원</span>
|
||||
</div>
|
||||
<p>물을 타지 않은 캐스크 스트렝스와 1990년대 빈티지 캐스크 5종을 차례로 비교해 마십니다. 페어링 플레이트가 함께 나옵니다.</p>
|
||||
<table class="lineup-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">순서</th>
|
||||
<th scope="col">라인업 구성</th>
|
||||
<th scope="col">ABV</th>
|
||||
<th scope="col">라인업</th>
|
||||
<th scope="col">도수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>스프링뱅크 1993 (G&M 리필 셰리 호그스헤드 27y)</td>
|
||||
<td>51.6% CS</td>
|
||||
<td>스프링뱅크 1993 (Gordon & MacPhail 리필 셰리 호그스헤드 27년)</td>
|
||||
<td>51.6%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>모틀락 1989 (사마롤리 22y 싱글 캐스크)</td>
|
||||
<td>50.4% CS</td>
|
||||
<td>모틀락 1989 (사마롤리 22년 싱글 캐스크)</td>
|
||||
<td>50.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>맥캘란 1993 (카덴헤드 1842 클래식 레인지)</td>
|
||||
<td>54.8% CS</td>
|
||||
<td>54.8%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>쿨일라 2008 (PX 피니시 14y)</td>
|
||||
<td>56.4% CS</td>
|
||||
<td>쿨일라 2008 (PX 피니시 14년)</td>
|
||||
<td>56.4%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>벤네비스 1998 (아델피 버번 캐스크 22y)</td>
|
||||
<td>58.1% CS</td>
|
||||
<td>벤네비스 1998 (아델피 버번 캐스크 22년)</td>
|
||||
<td>58.1%</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>
|
||||
<div class="course-foot">
|
||||
<span>75분, 페어링 포함</span>
|
||||
<a href="#reservation-section" class="btn-fill">코스 B 고르기</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 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>
|
||||
<figure class="figure-aside mt-6">
|
||||
<img
|
||||
src="../assets/masterclass-lineup.webp"
|
||||
alt="코스 B에서 마시는 싱글 캐스크 위스키 5종과 테이스팅 카드"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>
|
||||
<strong>코스 B 라인업</strong>
|
||||
<span>도수가 낮은 순서로 잔을 놓습니다. 51.6%에서 58.1%까지.</span>
|
||||
<span>잔마다 테이스팅 카드를 한 장씩 둡니다.</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- Gastronomy Pairing Atelier -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);">
|
||||
<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;">
|
||||
향과 질감의 증폭을 위한<br />
|
||||
<span class="accent-text">아티잔 푸드 페어링</span>
|
||||
</h2>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); line-height: 1.8;">
|
||||
위스키의 높은 알코올 도수와 강렬한 탄닌을 부드럽게 감싸안고, 숨겨진 미세 에스테르를 끌어올리기 위해
|
||||
스페인산 이베리코 하몽 베요타, 에콰도르 싱글 오리진 70% 다크 카카오 트러플, 터키산 흑무화과를 페어링 플레이트로 함께 서브합니다.
|
||||
</p>
|
||||
<!-- 향 계열 -->
|
||||
<section class="section" id="aroma" aria-labelledby="aromaHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="aromaHeading">향을 네 계열로 나눠 하나씩 맡아 봅니다</h2>
|
||||
<p>아로마 휠의 계열 이름을 그대로 씁니다. 잔마다 어느 계열이 앞서는지 도슨트가 짚습니다.</p>
|
||||
</div>
|
||||
<div class="frame">
|
||||
|
||||
<figure class="figure-aside">
|
||||
<img
|
||||
src="../assets/aroma-wheel.webp"
|
||||
alt="위스키 향을 계열별로 나눈 아로마 휠 다이어그램"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>
|
||||
<strong>1. 피트 스모크</strong>
|
||||
<span>아일라 섬의 이탄 연기, 해초의 요오드 향, 정향과 재 냄새.</span>
|
||||
<strong>2. 건과일과 셰리</strong>
|
||||
<span>올로로소와 PX 셰리 캐스크에서 오는 말린 무화과, 건포도, 다크 초콜릿.</span>
|
||||
<strong>3. 꽃과 과수원</strong>
|
||||
<span>긴 발효와 구리 증류기의 환류에서 생기는 풋사과, 엘더플라워, 꿀.</span>
|
||||
<strong>4. 그을린 오크</strong>
|
||||
<span>1st Fill 버번 배럴에서 오는 그을린 오크, 토피, 시나몬.</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- 페어링 -->
|
||||
<section class="section" id="pairing" aria-labelledby="pairingHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="pairingHeading">코스 B에는 하몽, 다크 초콜릿, 흑무화과를 한 접시에 냅니다</h2>
|
||||
<p>도수가 높은 캐스크 스트렝스를 편하게 마실 수 있도록 짠맛, 쓴맛, 단맛을 하나씩 둡니다.</p>
|
||||
</div>
|
||||
|
||||
<figure class="figure-aside is-reverse">
|
||||
<img
|
||||
src="../assets/whisky-pairing.webp"
|
||||
alt="위스키 푸드 페어링 플레이트 (이베리코 하몽, 다크 초콜릿 트러플, 무화과)"
|
||||
style="width: 100%; display: block;"
|
||||
alt="위스키 페어링 플레이트. 이베리코 하몽, 다크 초콜릿 트러플, 무화과"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>
|
||||
<strong>페어링 플레이트</strong>
|
||||
<span>스페인산 이베리코 하몽 베요타</span>
|
||||
<span>에콰도르산 카카오 70% 다크 초콜릿 트러플</span>
|
||||
<span>터키산 흑무화과</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- 세션 선택 -->
|
||||
<section class="section" id="reservation-section" aria-labelledby="reservationHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="reservationHeading">세션은 하루 세 번, 19시, 20시 30분, 22시에 시작합니다</h2>
|
||||
<p>코스와 날짜, 시간을 고르고 이름과 연락처를 적습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="two-col">
|
||||
<figure class="figure-aside">
|
||||
<img
|
||||
src="../assets/docent-room.webp"
|
||||
alt="어두운 오크 바 카운터에 놓인 코피타 테이스팅 글라스와 도슨트 노트"
|
||||
width="1376"
|
||||
height="768"
|
||||
loading="lazy"
|
||||
/>
|
||||
<figcaption>
|
||||
<strong>캐스크 룸</strong>
|
||||
<span>한남동 한남 27길, 1:1 테이스팅 카운터</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<div class="form-panel">
|
||||
<h3>도슨트 세션 선택</h3>
|
||||
<form onsubmit="event.preventDefault(); alert('선택한 도슨트 세션을 확인했습니다. 실제 예약은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.');">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="courseSelect">코스</label>
|
||||
<select class="form-input" id="courseSelect" name="courseSelect" required>
|
||||
<option value="courseB">코스 B. 캐스크 스트렝스 플라이트 5잔 (120,000원)</option>
|
||||
<option value="courseA">코스 A. 입문 플라이트 3잔 (65,000원)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="resTime">시간</label>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="resDate">날짜</label>
|
||||
<input type="date" class="form-input" id="resDate" name="reservationDate" autocomplete="off" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="userName">이름</label>
|
||||
<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" name="userPhone" autocomplete="tel" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="flavorNote">좋아하는 위스키 스타일 (선택)</label>
|
||||
<input type="text" class="form-input" id="flavorNote" name="flavorNote" autocomplete="off" placeholder="예: 아일라 피트, 셰리 버트" />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-fill">선택한 세션 내용 확인</button>
|
||||
</form>
|
||||
<p class="demo-notice" role="note">가상 브랜드 쇼케이스입니다. 코스와 가격은 예시이며 입력 정보는 저장하거나 전송하지 않고 실제 예약으로 이어지지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 푸터: 다열 색인 (index.html 과 같은 셸) -->
|
||||
<footer class="site-foot">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<h2>차례</h2>
|
||||
<ul>
|
||||
<li><a href="../index.html#ledger">캐스크 목록</a></li>
|
||||
<li><a href="../index.html#bottlers">병입자</a></li>
|
||||
<li><a href="../index.html#docent">도슨트 세션</a></li>
|
||||
<li><a href="../index.html#events">시음회 일정</a></li>
|
||||
<li><a href="../index.html#subscribe">입고 알림</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>캐스크 번호</h2>
|
||||
<ul>
|
||||
<li><a href="../index.html#cask-6512">#6512 Clynelish 1996</a></li>
|
||||
<li><a href="../index.html#cask-29-281">#29.281 Laphroaig 2005</a></li>
|
||||
<li><a href="../index.html#cask-93-41">#93/41 Springbank 1993</a></li>
|
||||
<li><a href="../index.html#cask-px-88">#PX-88 Caol Ila 2008</a></li>
|
||||
<li><a href="../index.html#cask-98-12">#98/12 Ben Nevis 1998</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>도슨트</h2>
|
||||
<ul>
|
||||
<li><a href="#courses">코스 A, 3잔 65,000원</a></li>
|
||||
<li><a href="#courses">코스 B, 5잔 120,000원</a></li>
|
||||
<li><a href="#aroma">향 계열 네 가지</a></li>
|
||||
<li><a href="#pairing">페어링 플레이트</a></li>
|
||||
<li><a href="#reservation-section">세션 선택</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>찾아오기</h2>
|
||||
<p>캐스크 룸, 서울 한남동 한남 27길</p>
|
||||
<p>1부 19:00, 2부 20:30, 3부 22:00</p>
|
||||
<p>한 세션 최대 2인</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<p class="foot-note">캐스크 아카이브는 가상 브랜드 쇼케이스입니다. 코스, 가격, 신청 흐름은 예시이며 입력 정보는 저장하거나 전송하지 않습니다.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Live Reservation Form Section -->
|
||||
<section class="wrap" style="padding-bottom: var(--space-8);" id="reservation-section">
|
||||
<div class="card" style="max-width: 720px; margin: 0 auto;">
|
||||
<div class="eyebrow" style="color: var(--accent); margin-bottom: 4px;">세션 항목</div>
|
||||
<h2 style="font-size: var(--step-2); font-weight: 800; margin-bottom: var(--space-4);">
|
||||
도슨트 테이스팅 세션 선택
|
||||
</h2>
|
||||
<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" name="courseSelect" required>
|
||||
<option value="courseB">코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
|
||||
<option value="courseA">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
|
||||
</select>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
// 측면 색인 — 좁은 화면에서는 접고, 현재 위치를 표시한다(모션 없음)
|
||||
const toc = document.querySelector(".toc");
|
||||
const narrow = window.matchMedia("(max-width: 1023px)");
|
||||
const syncToc = () => { toc.open = !narrow.matches; };
|
||||
syncToc();
|
||||
narrow.addEventListener("change", syncToc);
|
||||
toc.querySelectorAll("a[href^='#']").forEach((a) => a.addEventListener("click", () => { if (narrow.matches) toc.open = false; }));
|
||||
|
||||
<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" name="reservationDate" autocomplete="off" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="resTime">예약 시간대</label>
|
||||
<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>
|
||||
</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" 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" 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" 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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- 푸터 (.site-foot SSOT) -->
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>캐스크 아카이브 · 독립병입 위스키 안내</p>
|
||||
<p class="muted">이 페이지의 코스·가격·신청 흐름은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
|
||||
</div>
|
||||
</footer>
|
||||
const links = [...toc.querySelectorAll("a[href^='#']")];
|
||||
const targets = links.map((a) => document.querySelector(a.getAttribute("href"))).filter(Boolean);
|
||||
if ("IntersectionObserver" in window && targets.length) {
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
links.forEach((a) => a.removeAttribute("aria-current"));
|
||||
const link = links.find((a) => a.getAttribute("href") === `#${entry.target.id}`);
|
||||
if (link) link.setAttribute("aria-current", "true");
|
||||
});
|
||||
}, { rootMargin: "-20% 0px -70% 0px" });
|
||||
targets.forEach((t) => io.observe(t));
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,150 +3,84 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>캐스크 아카이브 (CASK ARCHIVE) · 독립병입 위스키 안내</title>
|
||||
<title>캐스크 아카이브 — 독립병입 싱글 캐스크 5통</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="독립병입 위스키의 숙성 정보와 향미를 비교해 보는 안내입니다. 원장·가격·세션 정보는 예시이며 실제 예약을 받지 않습니다."
|
||||
content="독립병입 싱글 캐스크 위스키 5통의 캐스크 번호, 숙성 배럴과 연수, 도수, 병 수를 번호 순으로 적은 가상 위스키 바 안내. 도슨트 1:1 시음 코스와 시음회 일정을 함께 싣습니다."
|
||||
/>
|
||||
<meta property="og:title" content="캐스크 아카이브 (CASK ARCHIVE) · 독립병입 위스키 안내" />
|
||||
<meta property="og:description" content="독립병입 위스키의 숙성 정보와 향미를 비교해 보는 안내입니다." />
|
||||
<meta property="og:title" content="캐스크 아카이브 — 독립병입 싱글 캐스크 5통" />
|
||||
<meta property="og:description" content="캐스크 번호, 숙성 배럴과 연수, 도수, 병 수를 번호 순으로 적은 독립병입 위스키 바 안내." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="theme-color" content="#0b0b0d" />
|
||||
<meta property="og:image" content="https://designpaca.chanpaca.net/work/cask-archive/assets/whisky-hero.webp" />
|
||||
<meta property="og:image:alt" content="그을린 오크 배럴 상판 위에 놓인 싱글 캐스크 위스키 한 병과 테이스팅 글라스" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#1a1512" />
|
||||
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;600&family=Nanum+Myeongjo:wght@400;700&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
|
||||
<link rel="stylesheet" href="./styles/main.css?v=20261006" />
|
||||
<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"
|
||||
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='2' fill='%231A1512'/%3E%3Ccircle cx='16' cy='16' r='10' stroke='%23D18147' stroke-width='2' fill='none'/%3E%3Cpath d='M16 8v16M8 16h16' stroke='%23D18147' 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>
|
||||
<div class="shell">
|
||||
<!-- 측면 색인 — 두 페이지가 같은 셸을 쓴다 -->
|
||||
<header class="index">
|
||||
<a class="wordmark" href="./index.html" aria-label="캐스크 아카이브 홈">
|
||||
캐스크 아카이브
|
||||
<span class="wordmark-sub">독립병입 위스키 바, 한남동</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>
|
||||
<details class="toc" open>
|
||||
<summary></summary>
|
||||
<nav aria-label="차례">
|
||||
<ol>
|
||||
<li><a href="#ledger">캐스크 목록</a></li>
|
||||
<li><a href="#bottlers">병입자</a></li>
|
||||
<li><a href="#docent">도슨트 세션</a></li>
|
||||
<li><a href="#events">시음회 일정</a></li>
|
||||
<li><a href="#subscribe">입고 알림</a></li>
|
||||
<li><a href="./docent/index.html">도슨트 상세 페이지</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
|
||||
<div class="head-actions">
|
||||
<a href="#docent" class="btn">
|
||||
도슨트 세션
|
||||
</a>
|
||||
<div class="index-foot">
|
||||
<p>캐스크 5통, 코스 2개, 9월 시음회 2회</p>
|
||||
<a href="#docent" class="btn-outline">도슨트 세션 고르기</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main id="mainContent">
|
||||
<!-- 히어로 섹션 -->
|
||||
<section class="hero-section" aria-labelledby="heroHeading">
|
||||
<div class="wrap hero-grid">
|
||||
<div class="hero-content">
|
||||
<div class="eyebrow-amber">
|
||||
<span>INDEPENDENT BOTTLER TASTING ARCHIVE</span>
|
||||
</div>
|
||||
<h1 id="heroHeading" class="hero-title">
|
||||
시간과 배럴이 만든<br />
|
||||
단 하나의 <span class="gold">캐스크 원액</span>
|
||||
</h1>
|
||||
<p class="hero-desc">
|
||||
독립병입 위스키의 숙성 정보와 향미를 비교하며, 취향에 맞는 테이스팅 선택 방식을 살펴볼 수 있습니다.
|
||||
</p>
|
||||
<div class="hero-ctas">
|
||||
<a href="#ledger" class="btn-amber">
|
||||
캐스크 목록 살펴보기
|
||||
<span aria-hidden="true">↗</span>
|
||||
</a>
|
||||
<a href="./docent/index.html" class="btn-outline">
|
||||
도슨트 세션 상세 보기
|
||||
</a>
|
||||
</div>
|
||||
<p class="demo-notice" role="note">안내: 이 페이지의 원장·인증 정보·가격·예약·구독은 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 예약 또는 구독으로 이어지지 않습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<figure class="hero-frame">
|
||||
<img
|
||||
src="./assets/whisky-hero.webp"
|
||||
alt="차링된 오크 배럴 상판 위 싱글 캐스크 위스키 보틀과 테이스팅 글라스"
|
||||
width="1200"
|
||||
height="1600"
|
||||
loading="eager"
|
||||
/>
|
||||
<figcaption class="hero-cask-tag">
|
||||
<div class="cask-tag-no">CASK #8821 · 58.4% ABV</div>
|
||||
<div class="cask-tag-sub">Signatory Vintage 1997 · Bottle 42 of 186</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 공식 독립병입자 수입 인증 스트립 -->
|
||||
<section class="ib-cert-strip" aria-label="독립병입 위스키 정보 예시">
|
||||
<div class="wrap cert-grid">
|
||||
<div class="cert-item">
|
||||
<div class="cert-name">GORDON & MACPHAIL</div>
|
||||
<div class="cert-desc">병입자 표기를 원장에 연결하는 예시</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-name">SIGNATORY VINTAGE</div>
|
||||
<div class="cert-desc">숙성 조건과 도수 메타데이터 예시</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-name">THE SCOTCH MALT WHISKY SOCIETY</div>
|
||||
<div class="cert-desc">캐스크 번호와 향미 기준의 연결 예시</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-name">CADENHEAD'S</div>
|
||||
<div class="cert-desc">1842년 설립, 스코틀랜드에서 가장 오래된 독립병입자 라인업</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap"><p class="demo-notice" role="note">아래 병입자·수입 정보는 예시입니다. 실제 인증이나 입고 현황을 뜻하지 않습니다.</p></div>
|
||||
</section>
|
||||
|
||||
<!-- 캐스크 원장 (Interactive Cask Ledger) -->
|
||||
<section class="ledger-section" id="ledger" aria-labelledby="ledgerHeading">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<h2 id="ledgerHeading" class="section-title">독립병입 캐스크 목록</h2>
|
||||
<p class="section-sub">아래 병입 정보·수량·인증 표시는 예시입니다. 향미 기준으로 원하는 캐스크를 비교해 보세요.</p>
|
||||
<main id="mainContent" class="content">
|
||||
<!-- 첫 화면: 캐스크 번호 목록 -->
|
||||
<section class="section" id="ledger" aria-labelledby="ledgerHeading">
|
||||
<div class="ledger-head">
|
||||
<h1 id="ledgerHeading">독립병입 싱글 캐스크 5통, 도슨트와 1:1로 시음합니다</h1>
|
||||
<p>행 끝의 병입 정보 버튼을 누르면 통관 번호까지 보입니다.</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>
|
||||
<button type="button" class="filter-btn is-active" data-filter="all">전체 5통</button>
|
||||
<button type="button" class="filter-btn" data-filter="sherry">셰리 캐스크</button>
|
||||
<button type="button" class="filter-btn" data-filter="peat">피트</button>
|
||||
<button type="button" class="filter-btn" data-filter="bourbon">버번 배럴</button>
|
||||
<button type="button" class="filter-btn" data-filter="cs">캐스크 스트렝스</button>
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
id="caskSearch"
|
||||
class="search-input"
|
||||
placeholder="증류소명 또는 캐스크 번호 검색"
|
||||
placeholder="증류소 또는 캐스크 번호"
|
||||
aria-label="캐스크 검색"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -155,269 +89,313 @@
|
|||
<table class="ledger-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">캐스크 번호</th>
|
||||
<th scope="col">증류소 & 원액 명칭</th>
|
||||
<th scope="col">독립병입자 (Bottler)</th>
|
||||
<th scope="col">숙성 배럴 / 년수</th>
|
||||
<th scope="col">도수 (ABV)</th>
|
||||
<th scope="col">한정 수량</th>
|
||||
<th scope="col">향미 노트 요약</th>
|
||||
<th scope="col">인증 정보</th>
|
||||
<th scope="col">번호</th>
|
||||
<th scope="col">증류소</th>
|
||||
<th scope="col">병입자</th>
|
||||
<th scope="col">배럴, 연수</th>
|
||||
<th scope="col">도수</th>
|
||||
<th scope="col">병 수</th>
|
||||
<th scope="col">향미</th>
|
||||
<th scope="col"><span class="sr-only">병입 정보</span></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 data-cat="sherry cs" id="cask-6512">
|
||||
<td class="cask-no num">#6512</td>
|
||||
<td class="distillery" data-label="증류소"><span class="cask-name">Clynelish 1996</span><span class="cask-sub">하이랜드, 왁시한 꿀과 린덴</span></td>
|
||||
<td class="bottler" data-label="병입자">Signatory Vintage</td>
|
||||
<td class="cask-type" data-label="배럴, 연수">1st Fill Sherry Butt, 24년</td>
|
||||
<td class="abv num" data-label="도수">54.2%</td>
|
||||
<td class="bottles num" data-label="병 수">180병</td>
|
||||
<td class="notes" data-label="향미">말린 무화과, 밀랍, 시나몬, 다크초콜릿</td>
|
||||
<td class="act"><button type="button" class="btn-outline" data-cert data-name="Clynelish 1996 #6512" data-bottler="Signatory Vintage" data-age="24년 (1996 증류, 2020 병입)" data-abv="54.2% 캐스크 스트렝스" data-customs="식약처 정식통관 제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 data-cat="peat cs" id="cask-29-281">
|
||||
<td class="cask-no num">#29.281</td>
|
||||
<td class="distillery" data-label="증류소"><span class="cask-name">Laphroaig 2005</span><span class="cask-sub">아일라, 약용 피트와 해풍</span></td>
|
||||
<td class="bottler" data-label="병입자">SMWS</td>
|
||||
<td class="cask-type" data-label="배럴, 연수">1st Fill Ex-Bourbon, 15년</td>
|
||||
<td class="abv num" data-label="도수">57.8%</td>
|
||||
<td class="bottles num" data-label="병 수">214병</td>
|
||||
<td class="notes" data-label="향미">모닥불 연기, 바다 소금, 레몬 제스트, 피트 45ppm</td>
|
||||
<td class="act"><button type="button" class="btn-outline" data-cert data-name="Laphroaig 2005 (SMWS 29.281)" data-bottler="The Scotch Malt Whisky Society" data-age="15년 (2005 증류)" data-abv="57.8% 캐스크 스트렝스" data-customs="식약처 정식통관 제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 data-cat="sherry" id="cask-93-41">
|
||||
<td class="cask-no num">#93/41</td>
|
||||
<td class="distillery" data-label="증류소"><span class="cask-name">Springbank 1993</span><span class="cask-sub">캠벨타운, 미네랄과 오일</span></td>
|
||||
<td class="bottler" data-label="병입자">Gordon & MacPhail</td>
|
||||
<td class="cask-type" data-label="배럴, 연수">Refill Sherry Hogshead, 27년</td>
|
||||
<td class="abv num" data-label="도수">51.6%</td>
|
||||
<td class="bottles num" data-label="병 수">142병</td>
|
||||
<td class="notes" data-label="향미">열대 과일 잼, 가죽, 부드러운 유황, 정향</td>
|
||||
<td class="act"><button type="button" class="btn-outline" data-cert data-name="Springbank 1993 #93/41" data-bottler="Gordon & MacPhail Reserve" data-age="27년 (1993 증류)" data-abv="51.6%" data-customs="식약처 정식통관 제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 data-cat="peat cs" id="cask-px-88">
|
||||
<td class="cask-no num">#PX-88</td>
|
||||
<td class="distillery" data-label="증류소"><span class="cask-name">Caol Ila 2008</span><span class="cask-sub">아일라, 달콤한 훈연</span></td>
|
||||
<td class="bottler" data-label="병입자">Cadenhead's</td>
|
||||
<td class="cask-type" data-label="배럴, 연수">Pedro Ximenez Finish, 14년</td>
|
||||
<td class="abv num" data-label="도수">56.4%</td>
|
||||
<td class="bottles num" data-label="병 수">260병</td>
|
||||
<td class="notes" data-label="향미">스모크 베이컨, 건포도, 블랙베리, 훈제 파프리카</td>
|
||||
<td class="act"><button type="button" class="btn-outline" data-cert data-name="Caol Ila 2008 #PX-88" data-bottler="Cadenhead's Authentic Collection" data-age="14년" data-abv="56.4% 캐스크 스트렝스" data-customs="식약처 정식통관 제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 data-cat="bourbon cs" id="cask-98-12">
|
||||
<td class="cask-no num">#98/12</td>
|
||||
<td class="distillery" data-label="증류소"><span class="cask-name">Ben Nevis 1998</span><span class="cask-sub">서부 하이랜드, 묵직한 바디</span></td>
|
||||
<td class="bottler" data-label="병입자">Adelphi Distillery</td>
|
||||
<td class="cask-type" data-label="배럴, 연수">Ex-Bourbon Cask, 22년</td>
|
||||
<td class="abv num" data-label="도수">58.1%</td>
|
||||
<td class="bottles num" data-label="병 수">195병</td>
|
||||
<td class="notes" data-label="향미">바닐라 커스터드, 구운 코코넛, 청사과, 후추</td>
|
||||
<td class="act"><button type="button" class="btn-outline" data-cert data-name="Ben Nevis 1998 #98/12" data-bottler="Adelphi Selection" data-age="22년" data-abv="58.1%" data-customs="식약처 정식통관 제2024-IB-0771호">병입 정보</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 1:1 위스키 도슨트 테이스팅 코스 예약 -->
|
||||
<section class="docent-section" id="docent" aria-labelledby="docentHeading">
|
||||
<div class="wrap">
|
||||
<!-- 병입자 -->
|
||||
<section class="section" id="bottlers" aria-labelledby="bottlersHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="docentHeading" class="section-title">1:1 맞춤형 위스키 도슨트 테이스팅</h2>
|
||||
<p class="section-sub">공인 위스키 마스터가 당신의 향미 선호도를 분석하여 독립병입자 캐스크를 1:1로 해설하고 페어링합니다.</p>
|
||||
<h2 id="bottlersHeading">병입자 네 곳의 라벨 정보를 그대로 옮겨 적습니다</h2>
|
||||
<p>캐스크 번호, 숙성 배럴, 연수, 도수는 병 라벨에 적힌 값입니다. 향미는 도슨트가 시음한 메모입니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="docent-grid">
|
||||
<!-- 코스 설명 카드 -->
|
||||
<div class="course-list">
|
||||
<div class="course-card">
|
||||
<div class="two-col">
|
||||
<figure class="figure-aside is-portrait">
|
||||
<img
|
||||
src="./assets/whisky-hero.webp"
|
||||
alt="그을린 오크 배럴 상판 위에 놓인 싱글 캐스크 위스키 한 병과 테이스팅 글라스"
|
||||
width="896"
|
||||
height="1200"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<figcaption>
|
||||
<strong>#8821, 58.4%</strong>
|
||||
<span>Signatory Vintage 1997</span>
|
||||
<span>186병 가운데 42번째 병</span>
|
||||
<span>사진은 896×1200 원본 비율 그대로입니다.</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<ul class="bottler-list">
|
||||
<li>
|
||||
<strong>Gordon & MacPhail</strong>
|
||||
<p>라벨의 병입자 정보를 목록에 함께 적습니다.</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Signatory Vintage</strong>
|
||||
<p>숙성 배럴, 연수, 도수를 한 줄에 적습니다.</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>The Scotch Malt Whisky Society</strong>
|
||||
<p>캐스크 번호별 향미 메모를 싣습니다.</p>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Cadenhead's</strong>
|
||||
<p>1842년 설립, 스코틀랜드에서 가장 오래된 독립병입자입니다.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 도슨트 세션 -->
|
||||
<section class="section" id="docent" aria-labelledby="docentHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="docentHeading">도슨트 한 명이 한 팀만 맡아 3잔 또는 5잔을 설명합니다</h2>
|
||||
<p>좋아하는 향을 먼저 여쭙고, 그에 맞는 캐스크를 골라 잔마다 숙성 배럴과 도수의 차이를 짚습니다. 자세한 라인업은 <a href="./docent/index.html">도슨트 상세 페이지</a>에 있습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="two-col">
|
||||
<ul class="course-list">
|
||||
<li class="course-card">
|
||||
<div class="course-header">
|
||||
<h3 class="course-title">코스 A. 독립병입자 입문 탐색 플라이트 (3잔)</h3>
|
||||
<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">
|
||||
<p>같은 증류소의 오피셜 보틀과 독립병입 싱글 캐스크를 나란히 마셔 보며 숙성 배럴에 따른 차이를 비교합니다.</p>
|
||||
<ul class="course-meta">
|
||||
<li>45분</li>
|
||||
<li>도슨트 1:1</li>
|
||||
<li>글렌캐런 글라스</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="course-card">
|
||||
<div class="course-header">
|
||||
<h3 class="course-title">코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (5잔)</h3>
|
||||
<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>
|
||||
<p>1990년대 빈티지와 도수 55% 이상 캐스크 스트렝스 5종을 테이스팅 휠로 하나씩 짚어 보는 심화 코스입니다.</p>
|
||||
<ul class="course-meta">
|
||||
<li>75분</li>
|
||||
<li>수제 초콜릿과 샤퀴테리 페어링</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- 예약 입력 폼 -->
|
||||
<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>
|
||||
<div class="form-panel">
|
||||
<h3>도슨트 세션 선택</h3>
|
||||
<form id="docentForm" onsubmit="return false;">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bookingCourse">선택 코스</label>
|
||||
<select id="bookingCourse" name="bookingCourse" class="form-select">
|
||||
<option value="A">코스 A. 독립병입자 입문 탐색 플라이트 (65,000원)</option>
|
||||
<option value="B" selected>코스 B. 캐스크 스트렝스 & 빈티지 마스터 플라이트 (120,000원)</option>
|
||||
<label class="form-label" for="bookingCourse">코스</label>
|
||||
<select id="bookingCourse" name="bookingCourse" class="form-input">
|
||||
<option value="A">코스 A. 입문 플라이트 3잔 (65,000원)</option>
|
||||
<option value="B" selected>코스 B. 캐스크 스트렝스 플라이트 5잔 (120,000원)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bookingDate">예약 일자</label>
|
||||
<input type="date" id="bookingDate" name="bookingDate" autocomplete="off" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bookingTime">예약 시간대</label>
|
||||
<select id="bookingTime" name="bookingTime" class="form-select">
|
||||
<option>19:00 (1부)</option>
|
||||
<option selected>20:30 (2부)</option>
|
||||
<option>22:00 (3부 심야)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="guestName">예약자 성함</label>
|
||||
<input type="text" id="guestName" name="guestName" autocomplete="name" class="form-input" placeholder="성함" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="guestPhone">연락처</label>
|
||||
<input type="tel" id="guestPhone" name="guestPhone" autocomplete="tel" class="form-input" placeholder="연락처" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="bookingTime">시간</label>
|
||||
<select id="bookingTime" name="bookingTime" class="form-input">
|
||||
<option>19:00 (1부)</option>
|
||||
<option selected>20:30 (2부)</option>
|
||||
<option>22:00 (3부 심야)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="guestPref">향미 선호도 메모</label>
|
||||
<input type="text" id="guestPref" name="guestPreference" autocomplete="off" class="form-input" placeholder="예: 셰리 밤 선호, 스모키 피트 선호 등" />
|
||||
<label class="form-label" for="bookingDate">날짜</label>
|
||||
<input type="date" id="bookingDate" name="bookingDate" autocomplete="off" class="form-input" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="guestName">이름</label>
|
||||
<input type="text" id="guestName" name="guestName" autocomplete="name" class="form-input" required />
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-amber" id="btnBookDocent" style="width: 100%; padding: 14px; margin-top: 10px;">
|
||||
선택한 세션 내용 확인
|
||||
</button>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="guestPhone">연락처</label>
|
||||
<input type="tel" id="guestPhone" name="guestPhone" autocomplete="tel" class="form-input" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="guestPref">좋아하는 향 (선택)</label>
|
||||
<input type="text" id="guestPref" name="guestPreference" autocomplete="off" class="form-input" placeholder="예: 셰리, 피트" />
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-fill" id="btnBookDocent">선택한 세션 내용 확인</button>
|
||||
</form>
|
||||
<p class="demo-notice" role="note">가상 브랜드 쇼케이스입니다. 입력 정보는 저장하거나 전송하지 않으며 실제 예약으로 이어지지 않습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<!-- 이벤트 & 뉴스레터 & 인스타그램 -->
|
||||
<section class="events-section" id="events" aria-labelledby="eventHeading">
|
||||
<div class="wrap">
|
||||
<!-- 시음회 일정 -->
|
||||
<section class="section" id="events" aria-labelledby="eventHeading">
|
||||
<div class="section-head">
|
||||
<h2 id="eventHeading" class="section-title">프라이빗 시음회 & 릴리즈 이벤트</h2>
|
||||
<p class="section-sub">월별 한정 입고되는 독립병입자 캐스크 오프닝 파티 및 정기 세미나 일정입니다.</p>
|
||||
<h2 id="eventHeading">9월 12일과 26일 저녁에 시음회를 엽니다</h2>
|
||||
<p>매달 새로 들어오는 독립병입 캐스크로 시음회를 엽니다. 정원은 회마다 8명입니다.</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>
|
||||
<ul class="event-list">
|
||||
<li class="event-item">
|
||||
<div class="event-date">9월 12일<small>금요일 20:00</small></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>
|
||||
<h3>1990년대 올드 셰리 버트 4종 버티컬 시음회</h3>
|
||||
<p>Signatory와 Gordon & MacPhail의 90년대 빈티지 셰리 캐스크 4종을 비교합니다.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="event-item">
|
||||
<div class="event-date">9월 26일<small>토요일 21:00</small></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>
|
||||
<h3>옥토모어와 아일라 피트 위스키 심야 시음회</h3>
|
||||
<p>페놀 수치 80ppm 이상, 피트 향이 강한 독립병입 위스키를 블라인드로 마십니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 뉴스레터 & 인스타그램 카드 -->
|
||||
<div class="newsletter-card" id="subscribe">
|
||||
<div class="eyebrow-amber">EXCLUSIVE CASK NOTIFICATION</div>
|
||||
<h3 style="font-family: var(--font-serif); font-size: var(--step-2); margin-block: 8px 12px; color: var(--ink);">
|
||||
신규 캐스크 입고 알림 & 인스타그램
|
||||
</h3>
|
||||
<p style="font-size: var(--step--1); color: var(--ink-muted); max-width: 500px; margin-inline: auto;">
|
||||
신규 캐스크와 테이스팅 콘텐츠를 둘러보세요.
|
||||
</p>
|
||||
<p class="demo-notice" role="note">이메일은 이 화면에 저장되지 않으며 실제 구독으로 등록되지 않습니다.</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="newsletter" id="subscribe">
|
||||
<h3>새 캐스크가 들어오면 이메일로 알립니다</h3>
|
||||
<p>입고 소식과 시음회 일정만 보냅니다.</p>
|
||||
<form class="newsletter-form" onsubmit="return false;">
|
||||
<label class="sr-only" for="newsEmail">이메일 주소</label>
|
||||
<input
|
||||
type="email"
|
||||
id="newsEmail"
|
||||
name="newsletterEmail"
|
||||
autocomplete="email"
|
||||
class="form-input"
|
||||
placeholder="귀하의 이메일 주소를 입력하세요"
|
||||
placeholder="이메일 주소"
|
||||
required
|
||||
/>
|
||||
<button type="button" class="btn-amber" id="btnSubscribe">
|
||||
입력 내용 확인
|
||||
</button>
|
||||
<button type="button" class="btn-fill" id="btnSubscribe">입력 내용 확인</button>
|
||||
</form>
|
||||
<p class="demo-notice" role="note">이메일은 이 화면에 저장되지 않으며 실제 구독으로 등록되지 않습니다.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div style="margin-top: var(--space-5); display: inline-flex; align-items: center; gap: 8px;">
|
||||
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="btn-outline" style="font-size: 12px; padding: 6px 16px;">
|
||||
📸 인스타그램 살펴보기 ↗
|
||||
</a>
|
||||
</div>
|
||||
<!-- 푸터: 다열 색인 -->
|
||||
<footer class="site-foot">
|
||||
<div class="foot-grid">
|
||||
<div>
|
||||
<h2>차례</h2>
|
||||
<ul>
|
||||
<li><a href="#ledger">캐스크 목록</a></li>
|
||||
<li><a href="#bottlers">병입자</a></li>
|
||||
<li><a href="#docent">도슨트 세션</a></li>
|
||||
<li><a href="#events">시음회 일정</a></li>
|
||||
<li><a href="#subscribe">입고 알림</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>캐스크 번호</h2>
|
||||
<ul>
|
||||
<li><a href="#cask-6512">#6512 Clynelish 1996</a></li>
|
||||
<li><a href="#cask-29-281">#29.281 Laphroaig 2005</a></li>
|
||||
<li><a href="#cask-93-41">#93/41 Springbank 1993</a></li>
|
||||
<li><a href="#cask-px-88">#PX-88 Caol Ila 2008</a></li>
|
||||
<li><a href="#cask-98-12">#98/12 Ben Nevis 1998</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>도슨트</h2>
|
||||
<ul>
|
||||
<li><a href="./docent/index.html#courses">코스 A, 3잔 65,000원</a></li>
|
||||
<li><a href="./docent/index.html#courses">코스 B, 5잔 120,000원</a></li>
|
||||
<li><a href="./docent/index.html#aroma">향 계열 네 가지</a></li>
|
||||
<li><a href="./docent/index.html#pairing">페어링 플레이트</a></li>
|
||||
<li><a href="./docent/index.html#reservation-section">세션 선택</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>찾아오기</h2>
|
||||
<p>캐스크 룸, 서울 한남동 한남 27길</p>
|
||||
<p>1부 19:00, 2부 20:30, 3부 22:00</p>
|
||||
<p>한 세션 최대 2인</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<p class="foot-note">캐스크 아카이브는 가상 브랜드 쇼케이스입니다. 캐스크 정보, 통관 번호, 가격, 세션은 예시이며 입력 정보는 저장하거나 전송하지 않습니다.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- 수입 인증서 모달 다이얼로그 -->
|
||||
<!-- 병입 정보 모달 -->
|
||||
<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 class="cert-head">
|
||||
<h3 id="certTitle">병입 정보</h3>
|
||||
<button type="button" class="cert-close" data-close aria-label="닫기">닫기</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>
|
||||
<dl class="cert-list">
|
||||
<dt>증류소</dt>
|
||||
<dd id="mWhiskyName"></dd>
|
||||
<dt>병입자</dt>
|
||||
<dd id="mBottler"></dd>
|
||||
<dt>숙성</dt>
|
||||
<dd id="mAge"></dd>
|
||||
<dt>도수</dt>
|
||||
<dd id="mAbv"></dd>
|
||||
<dt>통관 번호</dt>
|
||||
<dd id="mCustoms"></dd>
|
||||
</dl>
|
||||
<div class="cert-foot">
|
||||
<button type="button" class="btn-fill" data-close>확인</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- 푸터 (.site-foot SSOT) -->
|
||||
<footer class="site-foot">
|
||||
<div class="wrap foot-inner">
|
||||
<p>캐스크 아카이브 · 독립병입 위스키 안내</p>
|
||||
<p class="muted">이 페이지의 원장·가격·신청 흐름은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- 인터랙티브 스크립트 -->
|
||||
<script>
|
||||
(function () {
|
||||
// 1. 캐스크 원장 검색 및 필터링
|
||||
// 1. 캐스크 목록 검색·분류
|
||||
const filterBtns = document.querySelectorAll(".filter-btn");
|
||||
const searchInput = document.getElementById("caskSearch");
|
||||
const rows = document.querySelectorAll("#caskTableBody tr");
|
||||
|
|
@ -425,66 +403,88 @@
|
|||
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"));
|
||||
filterBtns.forEach((b) => {
|
||||
b.classList.remove("is-active");
|
||||
b.removeAttribute("aria-pressed");
|
||||
});
|
||||
btn.classList.add("is-active");
|
||||
btn.setAttribute("aria-pressed", "true");
|
||||
filterLedger();
|
||||
});
|
||||
});
|
||||
if (searchInput) searchInput.addEventListener("input", filterLedger);
|
||||
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("input", filterLedger);
|
||||
}
|
||||
// 2. 병입 정보 모달
|
||||
const modal = document.getElementById("certModal");
|
||||
document.querySelectorAll("[data-cert]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
document.getElementById("mWhiskyName").textContent = btn.dataset.name;
|
||||
document.getElementById("mBottler").textContent = btn.dataset.bottler;
|
||||
document.getElementById("mAge").textContent = btn.dataset.age;
|
||||
document.getElementById("mAbv").textContent = btn.dataset.abv;
|
||||
document.getElementById("mCustoms").textContent = btn.dataset.customs;
|
||||
modal.showModal();
|
||||
});
|
||||
});
|
||||
modal.querySelectorAll("[data-close]").forEach((btn) => btn.addEventListener("click", () => modal.close()));
|
||||
|
||||
// 2. 도슨트 예약 버튼
|
||||
// 3. 도슨트 세션 선택
|
||||
const btnBook = document.getElementById("btnBookDocent");
|
||||
if (btnBook) {
|
||||
btnBook.addEventListener("click", () => {
|
||||
const name = document.getElementById("guestName").value || "고객님";
|
||||
const date = document.getElementById("bookingDate").value;
|
||||
const time = document.getElementById("bookingTime").value;
|
||||
const course = document.getElementById("bookingCourse").value;
|
||||
alert(`${name}님이 선택한 도슨트 세션(코스 ${course})을 확인했습니다.\n실제 예약은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.`);
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 뉴스레터 구독
|
||||
// 4. 입고 알림
|
||||
const btnSub = document.getElementById("btnSubscribe");
|
||||
if (btnSub) {
|
||||
btnSub.addEventListener("click", () => {
|
||||
const email = document.getElementById("newsEmail").value;
|
||||
if (!email || !email.includes("@")) {
|
||||
alert("유효한 이메일 주소를 입력해 주십시오.");
|
||||
const field = document.getElementById("newsEmail");
|
||||
if (!field.value || !field.value.includes("@")) {
|
||||
alert("이메일 주소를 정확히 입력해 주세요.");
|
||||
return;
|
||||
}
|
||||
alert(`${email} 주소는 이 화면에 저장되지 않으며 실제 구독으로 등록되지 않습니다.`);
|
||||
document.getElementById("newsEmail").value = "";
|
||||
alert(`${field.value} 주소는 이 화면에 저장되지 않으며 실제 구독으로 등록되지 않습니다.`);
|
||||
field.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();
|
||||
}
|
||||
// 5. 측면 색인 — 좁은 화면에서는 접고, 현재 위치를 표시한다(모션 없음)
|
||||
const toc = document.querySelector(".toc");
|
||||
const narrow = window.matchMedia("(max-width: 1023px)");
|
||||
const syncToc = () => { toc.open = !narrow.matches; };
|
||||
syncToc();
|
||||
narrow.addEventListener("change", syncToc);
|
||||
toc.querySelectorAll("a[href^='#']").forEach((a) => a.addEventListener("click", () => { if (narrow.matches) toc.open = false; }));
|
||||
|
||||
const links = [...toc.querySelectorAll("a[href^='#']")];
|
||||
const targets = links.map((a) => document.querySelector(a.getAttribute("href"))).filter(Boolean);
|
||||
if ("IntersectionObserver" in window && targets.length) {
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
links.forEach((a) => a.removeAttribute("aria-current"));
|
||||
const link = links.find((a) => a.getAttribute("href") === `#${entry.target.id}`);
|
||||
if (link) link.setAttribute("aria-current", "true");
|
||||
});
|
||||
}, { rootMargin: "-20% 0px -70% 0px" });
|
||||
targets.forEach((t) => io.observe(t));
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,59 +1,50 @@
|
|||
/* ==========================================================================
|
||||
캐스크 아카이브 (CASK ARCHIVE) — 디자인 토큰 SSOT
|
||||
프리셋: dark-instrument + editorial-archival
|
||||
컨셉: 독립병입자 희귀 캐스크 원장과 1:1 위스키 도슨트 — 오크와 피트의 시간
|
||||
단일 강조색: 앰버 골드 (#D99B38)
|
||||
캐스크 아카이브 — 디자인 토큰 (이 파일 한 곳에서만 정의한다)
|
||||
방향: 어두운 웜 바탕의 아카이브 문서. 캐스크 번호 목록이 첫 화면, 표제는 작게.
|
||||
표제 Nanum Myeongjo / 본문 IBM Plex Sans KR / 강조 25° 구리 / radius 2px
|
||||
========================================================================== */
|
||||
|
||||
: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 — 메인 디스플레이 */
|
||||
/* 타입 스케일 — 한글 본문 16px, 캡션 하한 13px(typography §6-5) */
|
||||
--step--1: 0.875rem; /* 14px — 캡션·보조 라벨 */
|
||||
--step-0: 1rem; /* 16px — 본문 */
|
||||
--step-1: 1.125rem; /* 18px — 소제목·h1(작게) */
|
||||
--step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); /* 22~28px — 섹션 제목 */
|
||||
--step-3: clamp(2rem, 1.5rem + 1.6vw, 3rem); /* 32~48px — 캐스크 번호 */
|
||||
|
||||
--leading-tight: 1.18;
|
||||
--leading-tight: 1.3;
|
||||
--leading-normal: 1.7;
|
||||
--measure: 54ch;
|
||||
--measure: 36em;
|
||||
|
||||
--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;
|
||||
--font-display: "Nanum Myeongjo", "Noto Serif KR", serif;
|
||||
--font-body: "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
|
||||
|
||||
/* 다크 럭셔리 색상 — 미드나이트 오닉스 + 앰버 골드 1강조색 */
|
||||
--surface: #0b0b0d;
|
||||
--surface-raised: #141418;
|
||||
--surface-card: #1c1c22;
|
||||
--surface-subtle: #24242c;
|
||||
--surface-sunken: #070708;
|
||||
--surface-inverse: #f4f4f0;
|
||||
--weight-regular: 400;
|
||||
--weight-strong: 600;
|
||||
--weight-display: 700;
|
||||
|
||||
--ink: #f4f4f0;
|
||||
--ink-muted: #9ca3af;
|
||||
--ink-faint: #6b7280;
|
||||
--ink-inverse: #0b0b0d;
|
||||
--ink-inverse-muted: #4b5563;
|
||||
/* 어두운 웜 바탕 — 숙성고의 오크색 그늘(#1a1512 계열) */
|
||||
--surface: #1a1512;
|
||||
--surface-raised: #211a16;
|
||||
--surface-card: #28201b;
|
||||
--surface-sunken: #140f0d;
|
||||
|
||||
--line: #2a2a34;
|
||||
--line-strong: #3f3f4e;
|
||||
--line-subtle: #1e1e26;
|
||||
--line-inverse: #d1d5db;
|
||||
--ink: #efe6da;
|
||||
--ink-muted: #b3a595; /* #1a1512 위 7.5:1, #28201b 위 6.7:1 */
|
||||
--ink-faint: #8f8071; /* 차례 번호 — #1a1512 위 4.7:1 */
|
||||
--ink-inverse: #1a1512;
|
||||
|
||||
/* 단일 강조색 — 오크 숙성 싱글 몰트 앰버 골드 */
|
||||
--accent: #d99b38;
|
||||
--accent-hover: #c28528;
|
||||
--accent-light: rgba(217, 155, 56, 0.12);
|
||||
--accent-surface: rgba(217, 155, 56, 0.2);
|
||||
--accent-ink: #0b0b0d;
|
||||
--line: #3a3029;
|
||||
--line-strong: #5a4b3f;
|
||||
|
||||
/* 단일 강조 — 25° 구리 */
|
||||
--accent: #d18147; /* hsl(25 60% 55%) — #1a1512 위 6.0:1 */
|
||||
--accent-hover: #dc9160;
|
||||
--accent-light: rgba(209, 129, 71, 0.12);
|
||||
--accent-ink: #1a1512;
|
||||
|
||||
--radius: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
|
||||
/* 간격 — SSOT 표준 */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 1rem;
|
||||
|
|
@ -61,16 +52,15 @@
|
|||
--space-5: 2.5rem;
|
||||
--space-6: 4rem;
|
||||
--space-7: 6rem;
|
||||
--space-8: clamp(4.5rem, 3rem + 6vw, 9rem);
|
||||
|
||||
/* 컨테이너 및 패딩 — 전체 쇼케이스 절대 통일 SSOT */
|
||||
--container: clamp(70rem, 62vw, 85rem);
|
||||
--pad-inline: clamp(1.25rem, 1rem + 2.5vw, 4rem);
|
||||
/* 측면 색인 + 본문의 두 열 */
|
||||
--index-width: 15rem;
|
||||
--content-max: 68rem;
|
||||
--pad-inline: clamp(1rem, 0.5rem + 2.5vw, 3rem);
|
||||
--control-block: 2.75rem;
|
||||
--control-pad-inline: 0.875rem;
|
||||
|
||||
/* 모션 */
|
||||
--dur-quick: 180ms;
|
||||
--dur-normal: 420ms;
|
||||
/* 모션 — hover·focus 상태 전환만 */
|
||||
--dur-quick: 160ms;
|
||||
--ease-soft: cubic-bezier(0.25, 1, 0.35, 1);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue