/* ============================================================
   테마 토큰 — 종이 메뉴판에서 뽑은 색
   ============================================================ */
:root {
  --navy:   #1e1a4b;   /* 메뉴판 남색 */
  --cream:  #f2ede1;   /* 일러스트 선 색 */
  --paper:  #f6f4ee;   /* 메뉴 페이지 배경 */
  --ink:    #16143a;   /* 본문 글자 */
  --ink-2:  #6a6788;   /* 보조 글자 */
  --line:   #d8d4c6;   /* 구분선 */

  --font-en: "Poppins", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-ko: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --max: 760px;
  --hero-scroll: 280vh;   /* 히어로 연출에 쓰는 스크롤 길이 (길수록 천천히) */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ko);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   1. 히어로
   ============================================================ */
.hero {
  position: relative;
  height: var(--hero-scroll);
  /* 사파리 하단 툴바가 접혔다 펴질 때 고정 무대 아래로 틈이 보이는 것을 막는
     2차 안전장치. 틈이 생겨도 남색이라 눈에 띄지 않음 */
  background: var(--navy);
  /* JS 가 갱신하는 진행도 (0~1). 기본값은 애니메이션 시작 상태 */
  --pour: 0; --splash: 0; --tip: 1; --zoom: 1; --wash: 0; --end: 0; --copy: 1; --cue: 1;
}

.hero__stage {
  position: sticky;
  top: 0;
  /* svh 는 툴바가 펼쳐졌을 때의 높이라, 툴바가 접히면 아래에 흰 띠가 생긴다.
     lvh(툴바가 접힌 최대 높이)로 잡아 항상 화면을 덮게 한다. */
  height: 100svh;
  height: 100lvh;
  overflow: hidden;
  background: var(--navy);
  display: grid;
  place-items: center;
}

/* ---- SVG 일러스트 ---- */
.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 줌인 : 음료 줄기를 중심으로 확대 */
#zoom {
  transform-box: view-box;
  transform-origin: 396px 300px;
  transform: scale(var(--zoom));
  will-change: transform;
}

/* 포스터 선화 (크림색 면으로 그려짐) */
.art .ink { fill: var(--cream); fill-rule: evenodd; }

/* 줄기 : 클립 사각형의 아랫변이 화면 위 → 잔 입구까지 내려옴 */
#pourRect, #pourTip {
  transform-box: view-box;
  transform: translateY(calc(-650px + var(--pour) * 590px));
}
#pourTip { opacity: var(--tip); }

/* 잔에 이는 물결 */
#splash { opacity: var(--splash); }

/* ---- 화면을 덮는 크림색 ---- */
.hero__wash {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: var(--wash);
  pointer-events: none;
}

/* ---- 가게 이름 ---- */
.hero__copy {
  position: relative;
  text-align: center;
  color: var(--cream);
  padding: 0 24px;
  margin-bottom: 46vh;          /* 잔 위쪽에 배치 */
  opacity: var(--copy);
  pointer-events: none;
}

.hero__name {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: .02em;
  margin: 0 0 .4em;
  text-transform: uppercase;
}

.hero__tagline {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(.65rem, 2.8vw, .8rem);
  letter-spacing: .34em;
  font-weight: 500;
  opacity: .8;
}

/* ---- 크림색 위에 떠오르는 메뉴 타이틀 ---- */
.hero__end {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 14px;
  opacity: var(--end);
  pointer-events: none;
}

.hero__endName {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--navy);
}

.hero__endLabel {
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .5em;
  font-weight: 500;
  color: var(--ink-2);
  padding-left: .5em;
}

.hero__cue {
  position: absolute;
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 56px);
  left: 50%;
  translate: -50% 0;
  color: var(--cream);
  font-family: var(--font-en);
  font-size: .62rem;
  letter-spacing: .42em;
  padding-left: .42em;
  opacity: var(--cue);
  animation: cue 2.4s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: translateY(0);   }
  50%      { transform: translateY(7px); }
}

/* 메뉴로 바로 건너뛰기 */
.hero__skip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 20px;
  z-index: 2;
  color: var(--cream);
  font-family: var(--font-en);
  font-size: .66rem;
  letter-spacing: .22em;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(242,237,225,.35);
  border-radius: 999px;
  opacity: var(--copy);
}
.hero__skip:hover { border-color: var(--cream); }

/* ============================================================
   2. 메뉴
   ============================================================ */
.menu {
  position: relative;
  z-index: 1;
  background: var(--paper);
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 26px;
}

/* ---- 표지 : 종이 메뉴판 1면의 남색 얼룩 ---- */
.cover {
  position: relative;
  height: clamp(190px, 34vh, 300px);
  margin-bottom: 6px;
}

.cover__blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cover__inner {
  position: absolute;
  left: 50%;
  bottom: 27%;
  translate: -50% 0;
  width: 100%;
  max-width: var(--max);
  padding: 0 26px;
}

.cover__title {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(2.1rem, 11vw, 3.2rem);
  letter-spacing: .01em;
  color: var(--cream);
}

/* ---- 큰 묶음 (ALIMENTS 등) ---- */
.group { margin-bottom: 34px; }

.group__head { margin: 0 0 30px; padding-top: 24px; }

.group__title {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(1.9rem, 9vw, 2.6rem);
  letter-spacing: .01em;
  color: var(--navy);
}

/* ---- 카테고리 ---- */
.section { margin-bottom: 40px; }

.section__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .04em;
  color: var(--navy);
  margin: 0 0 12px;
}

.section__mark { margin-left: 4px; font-size: .85em; }

.items { list-style: none; margin: 0; padding: 0; }

.item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 5px 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.item.is-in { opacity: 1; transform: none; }

.item__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: .93rem;
  letter-spacing: .015em;
  text-transform: uppercase;
  line-height: 1.4;
  word-break: keep-all;   /* 한글이 낱자 단위로 끊기지 않게 */
}

.item__ko {
  font-family: var(--font-ko);
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  margin-left: .35em;
  color: var(--ink);
}

.item__price {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: .93rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.item__sig { color: var(--navy); margin-left: .3em; }

/* ============================================================
   3. 푸터
   ============================================================ */
.foot__wave {
  display: block;
  width: 100%;
  height: 52px;
  margin-top: 30px;      /* 여백은 물결 위쪽에 준다 */
  margin-bottom: -1px;
}

.foot {
  position: relative;
  padding: 46px 0 56px;   /* 물결과 붙어야 하므로 위 여백 없음 */
  text-align: center;
  color: var(--cream);
  background: var(--navy);
  font-size: .8rem;
}

.foot__name {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.foot__notice {
  white-space: pre-line;
  margin-top: 20px;
  font-size: .72rem;
  opacity: .7;
  letter-spacing: .02em;
}

.foot a { color: inherit; }

/* ============================================================
   접근성 : 모션 최소화 설정이면 연출을 끄고 바로 메뉴를 보여줌
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { height: 100lvh; --pour: 0; --splash: 0; --tip: 0; }  /* 빈 잔 상태로 고정 */
  #zoom { transform: none; }
  .hero__cue { animation: none; }
  .item { opacity: 1; transform: none; transition: none; }
}