/* VIALOG — 사이트 스타일 (index.html에서 분리: 보안 정책(CSP)상 인라인 스타일을 쓰지 않음) */
/* ==========================================================================
   0. 웹폰트 — 우리 사이트에서 직접 제공(외부 글꼴 서버 요청 없음)
   - Cormorant Garamond: 영문 제목용. 가변 글꼴 파일 1개로 300~700 굵기
   - VIALOG Myeongjo: 사이트에 쓰인 한글만 담은 명조(나눔명조 기반 부분 글꼴, tools/build-fonts.py로 생성)
   - 한글 본문(고딕)은 기기 기본 글꼴 사용: Apple SD Gothic Neo · 맑은 고딕 · Noto Sans CJK
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* FONT-FACE-MYEONGJO:START — tools/build-fonts.py가 자동 생성 */
@font-face {
  font-family: "VIALOG Myeongjo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vialog-myeongjo-hero.6abd1aa2.woff2") format("woff2");
  unicode-range: U+0020, U+002E, U+AC04, U+AE30, U+AE4C, U+B294, U+BD80, U+BE44, U+C21C, U+C5B5, U+C5EC, U+C744, U+C900, U+C9C0, U+D130, U+D558, U+D589;
}
@font-face {
  font-family: "VIALOG Myeongjo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vialog-myeongjo.513450eb.woff2") format("woff2");
  unicode-range: U+0021-002D, U+002F-007E, U+00B7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+203B, U+AC00-AC01, U+AC10-AC11, U+AC19, U+AC1C-AC1D, U+AC31, U+AC70, U+AC74, U+AC77, U+AC83, U+AC8C, U+ACA0, U+ACA8, U+ACB0, U+ACC1, U+ACC4, U+ACE0, U+ACF3, U+ACF5, U+ACFC, U+AD00, U+AD50, U+AD6C-AD6D, U+AD81, U+AD8C, U+ADF8, U+ADFC, U+AE00, U+AE08, U+AE34, U+AE38, U+AEBC, U+AED8, U+AF2D, U+AF34, U+AFB8, U+B00C, U+B05D, U+B098, U+B09C, U+B0A0, U+B0A8, U+B0AF, U+B0B4, U+B0BC, U+B110, U+B123-B124, U+B178, U+B193, U+B204, U+B274, U+B2A5, U+B2C8, U+B2E4, U+B2E8, U+B2EB-B2EC, U+B2F4-B2F5, U+B2F9, U+B2FF-B300, U+B354, U+B358, U+B370, U+B3C4, U+B3CC, U+B3D9, U+B418, U+B41C, U+B429, U+B450, U+B4A4, U+B4DC, U+B4E0, U+B4E4, U+B4EC-B4ED, U+B4F1, U+B514, U+B530, U+B54C, U+B5A0, U+B610, U+B77C-B77D, U+B78C, U+B798, U+B79C, U+B7A8, U+B7EC, U+B7FD, U+B809, U+B824-B825, U+B828, U+B85C-B85D, U+B8CC, U+B8E8, U+B974, U+B978, U+B97C, U+B984-B985, U+B9AC, U+B9BC-B9BD, U+B9C1, U+B9C8, U+B9CC, U+B9CE, U+B9D0, U+B9E4, U+BA3C, U+BA54, U+BA70, U+BA74, U+BAA8-BAA9, U+BABB, U+BB34, U+BB38, U+BB3C, U+BBF8, U+BBFC, U+BC00, U+BC0F, U+BC14, U+BC18, U+BC1B, U+BC24, U+BC29, U+BC30, U+BC84, U+BC88, U+BC95, U+BCA8, U+BCBC, U+BCC0, U+BCCD, U+BCF4, U+BCF8, U+BCFC, U+BD07, U+BD84, U+BD88, U+BE0C, U+BE14, U+C0AC, U+C0C1, U+C0C8, U+C0D8, U+C0DD, U+C11C, U+C120, U+C124, U+C12C, U+C138-C139, U+C13C, U+C158, U+C18C-C18D, U+C190, U+C1A1, U+C1FC, U+C218-C219, U+C26C, U+C2A4, U+C2AC, U+C2B5, U+C2B9, U+C2DC-C2DD, U+C2E0, U+C2E4, U+C2EC, U+C313, U+C4F0, U+C529, U+C544, U+C548, U+C54A, U+C54C, U+C558, U+C55E, U+C57C-C57D, U+C591, U+C5B4, U+C5C4-C5C8, U+C5D0, U+C5ED, U+C5F0, U+C5F4, U+C601, U+C608, U+C624, U+C628, U+C62C, U+C640, U+C644, U+C678, U+C694, U+C6A9, U+C6B0-C6B1, U+C6B4, U+C6B8, U+C6CC, U+C6D0, U+C6F9, U+C704, U+C720, U+C73C, U+C740, U+C74C, U+C751, U+C758, U+C774-C775, U+C778, U+C77C, U+C784-C785, U+C788, U+C790-C791, U+C7A5, U+C7AC, U+C800-C801, U+C804, U+C808, U+C810-C811, U+C815, U+C81C, U+C838, U+C84C, U+C870, U+C88B, U+C8FC, U+C904, U+C911, U+C9C1, U+C9C4, U+C9D0-C9D1, U+C9E7, U+CABD, U+CC28, U+CC3D-CC3E, U+CC44-CC45, U+CC59, U+CC98, U+CCAB, U+CCAD, U+CCB4, U+CD09, U+CD5C, U+CD94, U+CD9C, U+CDA9, U+CE20, U+CE58, U+CE5C, U+CE68, U+CE74, U+CE78, U+CE90, U+CEEC, U+CF1C, U+CF54, U+CF58, U+D06C, U+D0C0, U+D0D1, U+D0DC-D0DD, U+D14C, U+D150, U+D154, U+D15C, U+D1A0-D1A1, U+D1B5, U+D2B8, U+D2BC, U+D30C, U+D310, U+D398, U+D3B8, U+D3D0, U+D3F0, U+D45C, U+D478, U+D480, U+D488, U+D504, U+D50C, U+D544, U+D551, U+D55C, U+D560, U+D568-D569, U+D56D, U+D574, U+D588, U+D5A5, U+D604, U+D615, U+D638, U+D648, U+D654-D655, U+D658, U+D6C4, U+D734, U+D769;
}
/* FONT-FACE-MYEONGJO:END */

/* ==========================================================================
   1. 디자인 토큰
   ========================================================================== */
:root {
  --ivory: #F6F3ED;          /* 메인 배경 */
  --ink: #222222;            /* 텍스트·버튼 */
  --warm: #A39B90;           /* 보조 텍스트(다크 배경)·구분선 */
  --gold: #B08D4F;           /* 로고·극히 제한적인 포인트 */
  --dark: #141414;           /* SHOP·푸터 다크 섹션 */
  --ph-bg: #E7E2D7;          /* 이미지 자리표시 바탕 */
  --ink-soft: #5F584F;       /* 아이보리 위 보조 텍스트(웜 그레이 계열, 대비 4.5:1 이상 확보) */
  --line: #A39B90;
  --line-soft: #D9D3C9;
  --field-line: #8C847A;     /* 입력창 테두리(비텍스트 대비 3:1 이상) */
  --error: #8A2B1F;
  --line-dark: #3A3835;
  /* 반투명 값도 토큰으로 관리 (색을 바꿀 때 한 곳만 고치면 되도록) */
  --ph-inner-line: rgba(34, 34, 34, .1);       /* 이미지 자리표시 안쪽 테두리 */
  --header-bg: rgba(246, 243, 237, .86);       /* 헤더 반투명 배경 */
  --header-bg-solid: rgba(246, 243, 237, .97); /* 흐림 효과 미지원 브라우저용 */
  --buybar-rule: rgba(246, 243, 237, .14);     /* 하단 구매 바 위쪽 선 */
  --buybar-divider: rgba(246, 243, 237, .18);  /* 구매 바 안 구분선 */
  --buybar-outline: rgba(246, 243, 237, .28);  /* 플로팅 구매 버튼 테두리 */
  --scrim: rgba(20, 20, 20, .56);              /* 모달 뒤 어둡게 */
  --flag-edge: rgba(34, 34, 34, .18);          /* 흰 국기(태극기·일장기)가 배경에 묻히지 않게 하는 얇은 테두리 */
  color-scheme: light;                         /* 이 사이트는 밝은 테마 전용 — 입력창·스크롤바도 밝게 */

  --serif: "Cormorant Garamond", "VIALOG Myeongjo", "Nanum Myeongjo", Georgia, serif;
  --serif-ko: "VIALOG Myeongjo", "Nanum Myeongjo", "Cormorant Garamond", Georgia, serif;
  --sans: "Noto Sans KR", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --maxw: 1536px;
  /* 좌우 여백 — 가로로 돌린 휴대폰에서는 노치·둥근 모서리 영역(safe-area)보다 안쪽으로 */
  --gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --side: max(var(--gutter), (100% - var(--maxw)) / 2);
  --gap-x: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(80px, 11vw, 168px);
  --header-h: 60px;
  --buybar-h: 56px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 240ms;
}
@media (min-width: 1024px) {
  :root { --header-h: 76px; }
}

/* ==========================================================================
   2. 기본
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ivory);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  scrollbar-gutter: stable;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 모바일 하단 고정 구매 바에 본문이 가려지지 않도록 하단 여백 확보 */
  padding-bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  body { font-size: 16px; padding-bottom: 0; }
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  border-radius: 0; cursor: pointer; text-align: inherit;
  -webkit-tap-highlight-color: transparent;
}
input, textarea { font: inherit; color: inherit; border-radius: 0; caret-color: var(--ink); }
/* 더블탭 확대 지연 없이 바로 반응 (확대 자체는 막지 않음) */
a, button, input, textarea, label { touch-action: manipulation; }
/* 텍스트 선택색도 브랜드 팔레트로 */
::selection { background: var(--ink); color: var(--ivory); }
.on-dark ::selection { background: var(--ivory); color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--ivory); }
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 300;
  padding: 12px 18px; background: var(--ink); color: var(--ivory); font-size: 14px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.i-arrow { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1; }

/* ==========================================================================
   3. 공통 타이포그래피 · 버튼
   ========================================================================== */
.section { padding-block: var(--section-y); }

.sec-head { display: grid; row-gap: 18px; margin-bottom: clamp(48px, 7vw, 104px); }
.sec-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.12;
  letter-spacing: .2em; text-transform: uppercase;
  text-wrap: balance;
}
.sec-lead {
  font-family: var(--serif); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.7;
  text-wrap: pretty;
}
.on-dark .sec-lead { color: var(--warm); }
@media (min-width: 1024px) {
  .sec-head:not(.sec-head--stack) {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-x); align-items: end;
  }
  .sec-head:not(.sec-head--stack) .sec-title { grid-column: 1 / span 8; }
  .sec-head:not(.sec-head--stack) .sec-lead { grid-column: 9 / -1; padding-bottom: .35em; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .06em;
  border: 1px solid var(--ink);
  transition: opacity var(--dur) var(--ease);
}
.btn--solid { background: var(--ink); color: var(--ivory); }
.btn--line { background: transparent; color: var(--ink); }
@media (hover: hover) { .btn:hover { opacity: .78; } }
.btn[aria-disabled="true"] { opacity: .56; cursor: progress; }

/* ==========================================================================
   4. 이미지 자리표시 / 미디어
   ========================================================================== */
.media {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  background-color: var(--ph-bg);
  overflow: hidden;
}
.media > img, .media > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; text-align: center;
  /* 아주 옅은 사선 텍스처 (SVG 패턴) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M-3.5 3.5l7-7M0 14L14 0M10.5 17.5l7-7' stroke='%23222222' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E");
}
.ph::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid var(--ph-inner-line);
  pointer-events: none;
}
.ph__label {
  font-family: var(--sans); font-size: 11px; font-weight: 500; line-height: 1.5;
  letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; color: var(--ink-soft);
}
.ph__note { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.media.is-loaded > .ph { visibility: hidden; }

/* 로고 */
.logo-img { width: 100%; height: 100%; object-fit: contain; }
.logo-fallback {
  font-family: var(--serif); font-weight: 500; color: var(--gold);
  letter-spacing: .3em; margin-right: -.3em; line-height: 1; white-space: nowrap;
}

/* ==========================================================================
   5. 00 헤더 / 전체화면 메뉴
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--header-bg-solid); }
}
.site-header.is-scrolled { border-bottom-color: var(--line-soft); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1;
  letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase;
}

.site-nav { display: none; }
.nav-list { display: flex; gap: clamp(22px, 2.8vw, 48px); }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  transition: opacity var(--dur) var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: 9px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav-link[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav-link:hover { opacity: .72; } }   /* 호버 중에도 글자 대비 4.5:1 이상 (0.72 → 5.98:1) */

.menu-btn {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: 44px; min-width: 64px;
  font-size: 12px; font-weight: 500; letter-spacing: .28em; margin-right: -.28em;
}
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .menu-btn { display: none; }
}

/* 언어 선택 — 국기 + 언어 코드 버튼, 펼치면 국기 + 그 나라 말로 쓴 언어 이름 */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.flag { display: block; flex: none; width: 21px; height: 14px; outline: 1px solid var(--flag-edge); outline-offset: -1px; }
.lang { position: relative; flex: none; margin-left: auto; }   /* 모바일: MENU 버튼 바로 왼쪽 */
.site-header__inner > .lang + .menu-btn { margin-left: 0; }
@media (min-width: 1024px) {
  .site-nav { margin-left: auto; }
  .lang { margin-left: 0; }
}
.lang__btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
}
.i-chevron { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform var(--dur) var(--ease); }
.lang__btn[aria-expanded="true"] .i-chevron { transform: rotate(180deg); }
@media (hover: hover) { .lang__btn:hover { opacity: .72; } }
.lang__list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 70;
  min-width: 184px; padding: 6px 0;
  background: var(--ivory); border: 1px solid var(--line-soft);
}
.lang__opt {
  display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 18px;
  font-size: 14px; letter-spacing: .02em;
}
.lang__opt[aria-current="true"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (hover: hover) { .lang__opt:hover { opacity: .72; } }
.lang__opt:active { opacity: .72; }
@media (max-width: 1023.98px) {
  .site-header__inner { gap: 16px; }
}
@media (max-width: 399.98px) {
  .lang__btn .i-chevron { display: none; }   /* 좁은 화면: 국기 + 코드만 */
}

/* 언어별 서체·줄바꿈 — 한국어 원문은 위 기본값(명조 부분 글꼴 + keep-all) */
html[data-lang="en"], html[data-lang="es"] {
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-ko: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}
html[data-lang="zh"] {
  --serif: "Cormorant Garamond", "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --serif-ko: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
}
html[data-lang="ja"] {
  --serif: "Cormorant Garamond", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --serif-ko: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, system-ui, sans-serif;
}
/* 중국어·일본어는 띄어쓰기가 없으므로 글자 사이에서 줄바꿈(한국어용 keep-all 해제), 문장부호 규칙은 엄격하게 */
html[data-lang="zh"] body, html[data-lang="ja"] body { word-break: normal; line-break: strict; }
/* 영어 페이지: 영문 제목과 같은 뜻의 보조 줄은 반복이라 숨김 */
html[data-lang="en"] .menu__ko, html[data-lang="en"] .pillar__ko { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ivory);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 280ms var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__panel { min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
.menu__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; flex: none; }
.menu__close {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: 44px; min-width: 64px;
  font-size: 12px; font-weight: 500; letter-spacing: .28em; margin-right: -.28em;
}
.menu__nav { flex: 1; display: flex; align-items: center; padding-block: 32px; }
.menu__list { width: 100%; border-top: 1px solid var(--line-soft); }
.menu__list li { border-bottom: 1px solid var(--line-soft); }
.menu__list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline;
  padding: 18px 0; min-height: 64px;
}
.menu__no { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); }
.menu__en {
  display: block; font-family: var(--serif); font-size: clamp(26px, 7vw, 40px); line-height: 1.15;
  letter-spacing: .2em; text-transform: uppercase;
}
.menu__ko { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-soft); }
.menu__foot { flex: none; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }

/* ==========================================================================
   6. 01 HERO + 제품 슬라이드
   ========================================================================== */
.hero { padding-top: clamp(28px, 5vw, 48px); padding-bottom: clamp(64px, 9vw, 104px); }
.hero__grid {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr) var(--side);
  row-gap: clamp(44px, 8vw, 64px);
}
.hero__copy { grid-column: 2; max-width: 680px; }
.hero__media { grid-column: 1 / -1; min-width: 0; }

.hero__title {
  margin-top: 22px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 8.6vw, 64px); line-height: 1.04;
  letter-spacing: .2em; text-transform: uppercase;
}
.hero__line { display: block; }
.hero__line--indent { padding-left: .9em; }
.hero__lead {
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--serif-ko); font-size: clamp(19px, 1.9vw, 27px); line-height: 1.62;
  letter-spacing: -.01em;
}
.hero__text { margin-top: 18px; font-size: 15px; }
.hero__sub { margin-top: 4px; font-size: 13px; color: var(--ink-soft); letter-spacing: .02em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 3.4vw, 44px); }
@media (max-width: 479.98px) {
  .hero__actions .btn { flex: 1 1 0; padding: 0 12px; }
}
/* 화면 높이가 낮은 휴대폰(아이폰 SE 등): 문구 사이 여백만 줄여 첫 화면에 제품 슬라이드가 더 보이게 (문구·배치는 그대로) */
@media (max-width: 1023.98px) and (max-height: 740px) {
  .hero { padding-top: 14px; }
  .hero__grid { row-gap: 26px; }
  .hero__mark { width: 38px; }
  .hero__title { margin-top: 12px; }
  .hero__lead { margin-top: 14px; font-size: 18px; line-height: 1.55; }
  .hero__text { margin-top: 10px; }
  .hero__actions { margin-top: 18px; }
}

@media (min-width: 1024px) {
  .hero { padding-top: 32px; padding-bottom: 56px; }
  .hero__grid {
    grid-template-columns: var(--side) minmax(0, 6fr) var(--gap-x) minmax(0, 6fr) var(--side);
    align-items: center;
    min-height: calc(100vh - var(--header-h) - 88px);
  }
  @supports (height: 100svh) {
    .hero__grid { min-height: calc(100svh - var(--header-h) - 88px); }
  }
  .hero__copy { grid-column: 2; grid-row: 1; max-width: none; }
  .hero__media { grid-column: 4 / -1; grid-row: 1; }
  .hero__title { font-size: clamp(44px, 4.3vw, 76px); }
  .hero__line--indent { padding-left: 1.6em; }
}

/* 슬라이드: 자동재생 없음 · 버튼/스와이프로만 이동 */
.slider {
  position: relative;
  --start: var(--side);
  --slide-gap: 14px;
  --slide-w: calc(100% - var(--start) - 60px);
}
@media (min-width: 640px) {
  .slider { --slide-gap: 18px; --slide-w: min(calc(100% - var(--start) - 200px), 460px); }
}
@media (min-width: 1024px) {
  .slider {
    --start: 0px; --slide-gap: 20px;
    --slide-w: min(clamp(300px, calc((100vh - 330px) * .8), 560px), calc(100% - 120px));
  }
  @supports (height: 100svh) {
    .slider { --slide-w: min(clamp(300px, calc((100svh - 330px) * .8), 560px), calc(100% - 120px)); }
  }
}
.slider__track {
  position: relative;
  display: flex; gap: var(--slide-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--start);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track::after {
  content: ""; flex: 0 0 max(0px, calc(100% - var(--slide-w) - var(--start) - var(--slide-gap)));
}
.slide { flex: 0 0 var(--slide-w); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.slide:first-child { margin-left: var(--start); }
.slide__btn { display: block; width: 100%; }
.slide__frame { --ratio: 4 / 5; transition: opacity var(--dur) var(--ease); }
@media (hover: hover) { .slide__btn:hover .slide__frame { opacity: .9; } }
/* 최소 높이 = 가장 큰 캡션(영상 일시정지 버튼이 보일 때 109px) + 글꼴 차이 여유
   → 콘텐츠·영상이 늦게 들어와도 화면이 밀리지 않음 (tests/perf.test.mjs가 확인) */
.slide__cap { display: grid; align-content: start; min-height: 120px; padding-top: 16px; }
.slide__name {
  font-family: var(--serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3;
  letter-spacing: .2em; text-transform: uppercase;
}
.slide__ko { font-size: 13px; color: var(--ink-soft); }
.slide__cta {
  justify-self: start; margin-top: 10px; padding-bottom: 3px;
  font-size: 13px; font-weight: 500; border-bottom: 1px solid currentColor;
}
.slide__toggle {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* 브랜드 모노그램: 배경 없이 금색 로고만 (자리를 미리 잡아 화면 밀림 방지) */
.hero__mark {
  width: clamp(44px, 4.4vw, 64px); aspect-ratio: 41 / 46;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.hero__mark .logo-img { width: 100%; height: 100%; }
.hero__mark.is-fallback { width: auto; aspect-ratio: auto; }
.hero__mark .logo-fallback { font-size: 15px; }

.slider__controls {
  display: flex; align-items: center; gap: 6px;
  width: var(--slide-w); margin-left: var(--start); margin-top: 18px;
}
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  border: 1px solid var(--line);
  transition: opacity var(--dur) var(--ease);
}
.icon-btn .i-arrow { width: 18px; height: 18px; }
.icon-btn--prev .i-arrow { transform: scaleX(-1); }
.icon-btn[aria-disabled="true"] { opacity: .32; cursor: default; }
@media (hover: hover) { .icon-btn:not([aria-disabled="true"]):hover { opacity: .6; } }
.slider__count {
  margin-left: 12px; font-family: var(--serif); font-size: 15px; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.slider__bar { position: relative; flex: 1; height: 1px; margin-left: 14px; background: var(--line-soft); }
.slider__bar > span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ink);
  transition: width 420ms var(--ease);
}

/* ==========================================================================
   7. 02 COLLECTION
   ========================================================================== */
.products { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 8vw, 104px); }
@media (min-width: 768px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-x); align-items: start; }
  .product--1 { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product--1 { grid-column: span 2; }
  .product--4 { margin-top: clamp(48px, 6vw, 96px); }
}
.product__btn { display: block; width: 100%; }
.product__media { transition: opacity var(--dur) var(--ease); }
.product__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px;
  max-width: 560px; padding-top: 22px;
}
.product__no { grid-row: 1 / span 3; padding-top: 3px; font-family: var(--serif); font-size: 15px; color: var(--ink-soft); }
.product__head { display: grid; }
.product__en {
  font-family: var(--serif); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3;
  letter-spacing: .2em; text-transform: uppercase;
}
.product__ko { margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.product__desc { display: block; margin-top: 14px; font-size: 14px; line-height: 1.85; text-wrap: pretty; }
.product__cta {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-bottom: 4px;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; border-bottom: 1px solid currentColor;
  transition: opacity var(--dur) var(--ease);
}
.product__cta .i-arrow { width: 16px; height: 16px; }
@media (hover: hover) {
  .product__btn:hover .product__media { opacity: .88; }
  .product__btn:hover .product__cta { opacity: .72; }
}

/* ==========================================================================
   8. 03 BRAND
   ========================================================================== */
.brand__statement { display: grid; row-gap: 40px; margin-bottom: clamp(72px, 9vw, 136px); }
.brand__lede {
  font-family: var(--serif); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.75;
  letter-spacing: -.01em; text-wrap: pretty;
}
.brand__words { display: grid; gap: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.brand__words dt { font-size: 11px; font-weight: 500; letter-spacing: .3em; }
.brand__words dd { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .brand__statement { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-x); }
  .brand__lede { grid-column: 1 / span 7; }
  .brand__words { grid-column: 9 / -1; align-self: end; }
}

.pillars { display: grid; row-gap: 56px; }
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-x); }
}
.pillar { padding-top: 24px; border-top: 1px solid var(--ink); }
.pillar__top { display: flex; align-items: flex-start; justify-content: space-between; }
.pillar__no { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; }
.pillar__icon { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 1; }
.pillar__title {
  margin-top: 40px; font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(25px, 2.3vw, 33px); line-height: 1.2;
}
.pillar__ko { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.pillar__text { margin-top: 18px; font-size: 14px; line-height: 1.85; text-wrap: pretty; }
.brand__note { margin-top: clamp(48px, 6vw, 72px); font-size: 12px; color: var(--ink-soft); }

/* ==========================================================================
   9. 04 JOURNAL (12칼럼 비대칭 그리드) + 샘플 후기
   ========================================================================== */
.journal-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-x); row-gap: clamp(48px, 7vw, 112px);
  align-items: start;
}
.jfig--1 { grid-column: 1 / -1; }
.jfig--2 { grid-column: 4 / -1; }
.jfig--3 { grid-column: 1 / span 8; }
.jfig--4 { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .jfig--1 { grid-column: 1 / span 8; }
  .jfig--2 { grid-column: 9 / -1; margin-top: clamp(64px, 12vw, 200px); }
  .jfig--3 { grid-column: 2 / span 4; }
  .jfig--4 { grid-column: 6 / -1; margin-top: clamp(48px, 8vw, 144px); }
}
@media (min-width: 1024px) {
  .jfig--1 { grid-column: 1 / span 7; }
  .jfig--2 { grid-column: 9 / span 4; }
}
.jfig__cap { display: grid; gap: 4px; max-width: 440px; margin-top: 16px; }
.jfig__no { font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.jfig__title { font-family: var(--serif); font-size: 19px; line-height: 1.5; }
.jfig__text { font-size: 13px; line-height: 1.75; color: var(--ink-soft); }

.voices { margin-top: clamp(96px, 12vw, 176px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.voices__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 32px; margin-bottom: clamp(36px, 5vw, 64px);
}
.voices__title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; }
.reviews { display: grid; row-gap: 48px; }
@media (min-width: 900px) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-x); }
}
.review { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.badge {
  display: inline-block; padding: 6px 10px;
  font-size: 11px; line-height: 1.4; letter-spacing: .02em; color: var(--ink-soft);
  border: 1px solid var(--line);
}
.review__quote { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.75; text-wrap: pretty; }
.review__quote p::before { content: "\201C"; }
.review__quote p::after { content: "\201D"; }
.review__meta { font-size: 12px; letter-spacing: .04em; color: var(--ink-soft); }

/* ==========================================================================
   10. 05 SHOP (다크) · 판매 채널 버튼
   ========================================================================== */
.shop { background: var(--dark); color: var(--ivory); }
.shop__grid { display: grid; row-gap: 48px; }
.shop__head .sec-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .shop__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-x); align-items: start; }
  .shop__head { grid-column: 1 / span 5; }
  .shop__body { grid-column: 7 / -1; padding-top: 10px; }
}
.shop__note { margin-top: 28px; font-size: 13px; line-height: 1.8; color: var(--warm); }

.channel-list { border-top: 1px solid var(--ch-line, var(--line-soft)); }
.channel-list > li { border-bottom: 1px solid var(--ch-line, var(--line-soft)); }
.on-dark .channel-list { --ch-line: var(--line-dark); --ch-soft: var(--warm); }
.ch {
  width: 100%; min-height: 84px; padding: 18px 0;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
  text-align: left; transition: opacity var(--dur) var(--ease);
}
.ch__no { font-family: var(--serif); font-size: 15px; color: var(--ch-soft, var(--ink-soft)); }
.ch__main { display: grid; min-width: 0; }
.ch__label { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4; }
.ch__sub { margin-top: 2px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ch-soft, var(--ink-soft)); }
.ch__end { display: inline-flex; align-items: center; gap: 12px; }
.ch__state { font-size: 12px; color: var(--ch-soft, var(--ink-soft)); white-space: nowrap; }
@media (max-width: 479.98px) { .ch__state { display: none; } }
@media (hover: hover) { .ch:hover { opacity: .86; } }   /* 보조 글자(웜 그레이)까지 대비 4.5:1 유지 */

.status-line { min-height: 1.8em; margin-top: 18px; font-size: 14px; line-height: 1.8; }
.status-line:not(:empty)::before {
  content: ""; display: inline-block; width: 20px; height: 1px; margin-right: 10px;
  vertical-align: middle; background: var(--gold);
}

/* ==========================================================================
   11. 06 CONTACT · 문의 폼
   ========================================================================== */
.contact__grid { display: grid; row-gap: 72px; }
@media (min-width: 1024px) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-x); align-items: start; }
  .guide-list { grid-column: 1 / span 5; }
  .inquiry { grid-column: 7 / -1; }
}
.guide-list { border-top: 1px solid var(--line); }
.guide {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px;
  padding: 26px 0; border-bottom: 1px solid var(--line-soft);
}
.guide__no { grid-row: 1 / span 2; padding-top: 1px; font-family: var(--serif); font-size: 15px; color: var(--ink-soft); }
.guide__title { font-size: 16px; font-weight: 500; line-height: 1.6; }
.guide__text { margin-top: 6px; font-size: 14px; line-height: 1.85; text-wrap: pretty; }

.inquiry { display: grid; row-gap: 26px; align-content: start; }
.inquiry__title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; }
.inquiry__note { margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.field { display: grid; row-gap: 10px; }
.field label { font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.req { margin-left: 4px; font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  font-size: 16px; line-height: 1.5;
  background: transparent; border: 1px solid var(--field-line);
  transition: border-color var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 176px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field__hint { font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.field__error { font-size: 13px; line-height: 1.6; color: var(--error); }
.inquiry__submit { justify-self: start; min-width: 168px; }
.form-status { font-size: 14px; line-height: 1.75; }
.form-status:not(:empty) { padding: 16px 18px; border: 1px solid var(--line); }

/* ==========================================================================
   12. 푸터
   ========================================================================== */
.site-footer { background: var(--dark); color: var(--ivory); padding-top: clamp(72px, 9vw, 128px); padding-bottom: 40px; }
@media (min-width: 768px) {
  /* PC 플로팅 구매 버튼에 저작권 영역이 가려지지 않도록 여백 확보 */
  .site-footer { padding-bottom: 112px; }
}
.footer__top { display: grid; row-gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-x); }
  .footer__brand { grid-column: 1 / span 6; }
  .footer__nav { grid-column: 8 / -1; }
}
.footer__wordmark {
  font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 72px); line-height: 1;
  letter-spacing: .3em; margin-right: -.3em;
}
.footer__slogan { margin-top: 26px; font-size: 11px; font-weight: 500; letter-spacing: .32em; color: var(--warm); }
.footer__tagline { margin-top: 8px; font-size: 14px; }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-x); }
.footer__label { font-size: 11px; font-weight: 500; letter-spacing: .3em; color: var(--warm); margin-bottom: 8px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; transition: opacity var(--dur) var(--ease); }
@media (hover: hover) { .footer__nav a:hover, .footer__top-link:hover { opacity: .64; } }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding-top: 24px; font-size: 12px; color: var(--warm);
}
.footer__top-link { display: inline-flex; align-items: center; min-height: 44px; letter-spacing: .2em; color: var(--ivory); transition: opacity var(--dur) var(--ease); }

/* ==========================================================================
   13. 최근 본 제품 (화면 오른쪽)
   ========================================================================== */
.recent { position: fixed; z-index: 55; background: var(--ivory); border: 1px solid var(--line-soft); }
.recent__head-ko { display: none; }
.recent__count { font-family: var(--serif); line-height: 1; font-variant-numeric: tabular-nums; }
.recent__item { position: relative; display: block; }
.recent__thumb { --ratio: 4 / 5; }
.recent__thumb .ph { padding: 4px; }
.recent__thumb .ph::before { inset: 4px; }
.recent__thumb .ph__label { font-family: var(--serif); font-size: 13px; font-weight: 400; letter-spacing: .08em; margin-right: 0; }
.recent__text { display: grid; }
.recent__en { font-family: var(--serif); font-size: 15px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.recent__ko { font-size: 12px; color: var(--ink-soft); }
.recent__clear { min-height: 44px; color: var(--ink-soft); }
@media (hover: hover) { .recent__item:hover .recent__thumb, .recent__clear:hover { opacity: .72; } }

/* PC: 오른쪽 세로 레일 (항상 표시, 이름은 호버·포커스 시 표시) */
@media (min-width: 1024px) {
  .recent {
    right: 0; top: 50%; transform: translateY(-50%);
    width: 84px; padding: 16px 0 0; border-right: 0;
    display: flex; flex-direction: column; align-items: center;
  }
  .recent__head { display: grid; justify-items: center; gap: 6px; padding-bottom: 10px; }
  .recent__head-en { font-size: 10px; font-weight: 500; letter-spacing: .28em; margin-right: -.28em; }
  .recent__count { font-size: 18px; }
  .recent__list { display: grid; }
  .recent__item { padding: 6px 16px; }
  .recent__item.is-new::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 1px; background: var(--gold);
  }
  .recent__thumb { width: 52px; }
  .recent__text {
    position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    padding: 10px 14px; white-space: nowrap; text-align: right;
    background: var(--ivory); border: 1px solid var(--line-soft);
    opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
  }
  .recent__item:hover .recent__text, .recent__item:focus-visible .recent__text { opacity: 1; }
  .recent__clear {
    width: 100%; margin-top: 6px; border-top: 1px solid var(--line-soft);
    font-size: 10px; font-weight: 500; letter-spacing: .2em; text-align: center;
  }
  .recent__clear-ko { display: none; }
}

/* 모바일·태블릿: 하단 '최근 본 제품' 버튼으로 여닫는 오른쪽 패널 */
@media (max-width: 1023.98px) {
  .recent {
    right: 0; bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom));
    width: min(340px, 100%); max-height: min(64vh, 480px); max-height: min(64svh, 480px); overflow-y: auto; overscroll-behavior: contain;
    padding: 18px 20px 6px; border-right: 0; border-bottom: 0;
  }
  .recent__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
  .recent__head-en { display: none; }
  .recent__head-ko { display: inline; font-size: 13px; font-weight: 500; }
  .recent__count { font-size: 17px; }
  .recent__item {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: center;
    width: 100%; min-height: 44px; padding: 10px 0; text-align: left; border-bottom: 1px solid var(--line-soft);
  }
  .recent__clear { font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
  .recent__clear-en { display: none; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .recent { right: 24px; bottom: calc(24px + 52px + 10px + env(safe-area-inset-bottom)); border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
}

/* ==========================================================================
   14. 하단 고정 '구매하기' — 모바일: 전체 폭 바 / PC: 우측 하단 플로팅
   ========================================================================== */
.buybar {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--buybar-rule);
}
.buybar__buy {
  flex: 1 1 auto; min-height: var(--buybar-h);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ivory); font-size: 14px; font-weight: 500; letter-spacing: .1em;
  transition: opacity var(--dur) var(--ease);
}
.buybar__buy .i-arrow { width: 18px; height: 18px; }
.buybar__recent {
  flex: 0 0 auto; min-height: var(--buybar-h); padding: 0 18px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ivory); font-size: 12px; letter-spacing: .04em;
  border-left: 1px solid var(--buybar-divider);
  transition: opacity var(--dur) var(--ease);
}
.buybar__count { font-family: var(--serif); font-size: 16px; line-height: 1; }
.buybar__recent[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 5px; }
@media (min-width: 768px) {
  .buybar {
    left: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom));
    gap: 8px; padding-bottom: 0; border-top: 0; background: transparent;
  }
  .buybar__buy {
    min-height: 52px; padding: 0 24px; font-size: 13px;
    background: var(--ink); border: 1px solid var(--buybar-outline);
  }
  .buybar__recent { min-height: 52px; background: var(--ivory); color: var(--ink); border: 1px solid var(--ink); }
}
@media (min-width: 1024px) {
  .buybar__recent { display: none !important; }
}
@media (hover: hover) { .buybar__buy:hover, .buybar__recent:hover { opacity: .86; } }

/* ==========================================================================
   15. 구매 채널 모달 — PC: 중앙 다이얼로그 / 모바일: 바텀시트
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal__backdrop {
  position: absolute; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity 260ms var(--ease);
  touch-action: none;
}
.modal__panel {
  position: relative; width: 100%;
  max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--ivory);
  opacity: 0; transform: translateY(24px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
@supports (height: 100svh) { .modal__panel { max-height: 88svh; } }
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: none; }
@media (min-width: 768px) {
  .modal { align-items: center; padding: 24px; }
  .modal__panel { width: min(560px, 100%); padding: 44px 48px 40px; transform: translateY(8px); }
}
.modal__title {
  padding-right: 64px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3vw, 31px); line-height: 1.2;
  letter-spacing: .14em;
}
.modal__title-en { display: block; text-transform: uppercase; letter-spacing: .2em; }
.modal__title-ko { display: block; margin-top: 6px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--ink-soft); }
.modal__product { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 18px; align-items: start; margin-top: 22px; }
.modal__thumb { --ratio: 4 / 5; }
.modal__thumb .ph { padding: 6px; }
.modal__thumb .ph::before { inset: 5px; }
.modal__thumb .ph__label { font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: .08em; margin-right: 0; }
.modal__pdesc { font-size: 13px; line-height: 1.8; }
.modal__desc { margin-top: 20px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.modal__channels { margin-top: 16px; }
.modal__channels .ch { min-height: 72px; padding: 14px 0; }
.modal__suggest { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.modal__suggest-label { font-size: 11px; font-weight: 500; letter-spacing: .3em; color: var(--ink-soft); }
.modal__suggest-btn {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px;
  font-size: 14px; text-decoration: underline; text-underline-offset: 5px;
}
.modal__note { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--ink-soft); }
.modal__close {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 8px;
  font-size: 12px; letter-spacing: .12em;
}
.modal__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1; }
@media (hover: hover) { .modal__close:hover, .modal__suggest-btn:hover { opacity: .72; } }

/* ==========================================================================
   16. 번호·카운터 숫자 — 산세리프 라이닝 숫자로 또렷하게
   (Cormorant 기본 숫자는 올드스타일이라 작은 크기에서 'o1'처럼 읽힘)
   ========================================================================== */
.menu__no, .product__no, .pillar__no, .ch__no, .guide__no {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.product__no, .guide__no { padding-top: 6px; }
.ch__no { padding-top: 0; }
.slider__count, .recent__count, .buybar__count {
  font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums;
}
.slider__count { font-size: 13px; letter-spacing: .14em; }
.recent__count { font-size: 14px; letter-spacing: .06em; }
.buybar__count { font-size: 13px; }
.recent__thumb .ph__label, .modal__thumb .ph__label {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

/* 누르는 순간의 반응 — 터치 화면에서도 보이도록 hover 조건 밖에 둠
   투명도만 미세하게, 누르는 동안에도 글자 대비 4.5:1 이상 (글자 0.72 · 보조 글자가 있는 채널 버튼 0.86) */
.btn:active, .nav-link:active, .icon-btn:not([aria-disabled="true"]):active,
.footer__nav a:active, .footer__top-link:active, .recent__clear:active,
.buybar__buy:active, .buybar__recent:active, .modal__close:active, .modal__suggest-btn:active { opacity: .72; }
.ch:active { opacity: .86; }
.slide__btn:active .slide__frame, .product__btn:active .product__media, .recent__item:active .recent__thumb { opacity: .8; }

/* ==========================================================================
   17. 동작 줄이기
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   18. 테스트(MOCK) 모드 · 불러오기 오류 · 문의 폼 보안 요소
   ========================================================================== */
/* 테스트 모드 안내 바: 화면 아래 고정 — 문서 흐름 밖이라 늦게 나타나도 다른 내용을 밀어내지 않음 */
.mock-bar {
  --mock-h: 44px;
  position: fixed; z-index: 58; left: 0; right: 0;
  bottom: calc(var(--buybar-h) + env(safe-area-inset-bottom));   /* 모바일: 하단 구매 바 바로 위 */
  min-height: var(--mock-h);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px;
  padding: 0 var(--gutter);
  background: var(--dark); color: var(--ivory); border-top: 1px solid var(--buybar-rule);
  font-size: 12px; line-height: 1.6; text-align: center;
}
@media (max-width: 767.98px) {
  .mock-bar__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-content="mock"] body { padding-bottom: calc(var(--buybar-h) + 44px + env(safe-area-inset-bottom)); }
  html[data-content="mock"] .recent { bottom: calc(var(--buybar-h) + 44px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .mock-bar {
    left: 24px; right: auto; bottom: calc(24px + env(safe-area-inset-bottom));
    max-width: calc(100% - 400px); justify-content: flex-start; padding: 4px 20px; text-align: left;
  }
}
.mock-bar strong { font-weight: 500; letter-spacing: .24em; color: var(--gold); }
.mock-bar a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-underline-offset: 4px;
}

.load-error {
  width: min(100% - 2 * var(--gutter), 760px);
  margin: 24px auto 0; padding: 18px 22px;
  border: 1px solid var(--line); font-size: 14px; line-height: 1.8;
}
.load-error code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }

/* 허니팟(자동 입력 방지): 화면과 화면낭독기 모두에서 숨김 */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* 개인정보 수집·이용 동의 */
.consent { display: grid; row-gap: 8px; }
.consent__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.consent__row input { width: 20px; height: 20px; margin: 12px 0 0; accent-color: var(--ink); }
.consent__row label { display: block; padding-block: 10px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.consent__notice { margin-left: 34px; font-size: 12px; line-height: 1.75; color: var(--ink-soft); white-space: pre-line; }
.consent .field__error { margin-left: 34px; }

/* 자동 입력 방지(Cloudflare Turnstile) 위젯 자리 */
.turnstile-box { min-height: 65px; }

/* ==========================================================================
   19. 404 페이지
   ========================================================================== */
.notfound-page { padding-bottom: 0; }
.notfound {
  display: grid; justify-items: start; row-gap: 20px; align-content: center;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-block: 80px;
}
.notfound__title { margin-top: 0; }
.notfound .btn { margin-top: 16px; }
.notfound__code { font-size: 12px; letter-spacing: .3em; color: var(--ink-soft); }