/* Lounge M — 첫 화면 하단 무대 · 필수템 테마 (hf284, 마스터) — assets/js/landing-stage.js
   hf286 (마스터 「너무 작아서 읽기가 어려워」): 카드 여백으로 아래 띠 40px 확보 → 리본 높이 32 → 36, 글자 14 → 16px,
   메뉴판 아래 띠 안으로 내려 아랫선을 눈 둔덕 바닥선에 맞춤(landing-stage.js place). 「50% 할인」 → 「50%↓」.
   메뉴 테두리 아랫선에 걸친 리본(높이 32). 리본이 나와 있는 동안 눈사람 장면(.xmas-ground)과 빌드 번호는 숨긴다.
   첫 줄: 금색 [필수템] + 글자가 왼쪽부터 흐르듯(정보 카드 hf281과 같은 0.35초 · 전체 0.8초).
   둘째 줄 순서(hf292): 구성(0) → 할인 도장(0.45초) → 할인가(0.75초) → [담기](1.05초). 정가 · 점선은 hf292에서 뺐다. */
.page-shell > .must-have-stage {
  position: absolute !important;
  left: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 44px; /* hf286: 32 → 36 · hf291 (마스터 「세로 크기도 넓히고」): 36 → 44 */
  width: 404px; /* hf291 (마스터 「가로 크기는 상단의 검색창의 넓이로」): 검색창 · 메뉴판과 같은 18~422 */
  max-width: none;
  padding: 0 10px; /* hf291: 12 → 10 (17px 둘째 줄 + [메뉴 보기]가 들어가게) */
  border: 1px solid rgba(214, 174, 104, 0.6);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 22, 13, 0.97), rgba(12, 9, 6, 0.97));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 12px rgba(214, 160, 82, 0.18);
  color: rgba(238, 226, 206, 0.92);
  font-family: inherit;
  font-size: 17px; /* hf286: 14 → 16 · hf291: 16 → 17 */
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  z-index: 14;
  transition: opacity 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}

.page-shell > .must-have-stage.is-on {
  opacity: 1;
  pointer-events: auto;
}

.page-shell > .must-have-stage:focus-visible {
  outline: 2px solid #e6c27a;
  outline-offset: 2px;
}

body:not(.is-landing) .page-shell > .must-have-stage {
  display: none !important;
}

.must-have-stage .stage-line {
  display: inline-flex;
  align-items: center;
  gap: 5px; /* hf291: 7 → 5 (폭 404 안에 17px 둘째 줄) */
  transition: opacity 0.3s ease;
}

.must-have-stage.is-swapping .stage-line {
  opacity: 0;
}

.must-have-stage .stage-label {
  display: inline-flex;
  align-items: center;
  height: 26px; /* hf286: 20 → 22 · hf291: 22 → 26 */
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e6c27a, #c99a45);
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, 0.55);
  color: #1b130a;
  font-size: 15px; /* hf286: 12 → 13 · hf291: 13 → 15 */
  font-weight: 800;
  letter-spacing: 0.04em;
}

.must-have-stage .stage-text {
  font-size: 18px; /* hf291: 첫 줄은 폭에 여유가 있어 18 (440 기준 약 371/382) */
  letter-spacing: -0.02em;
}

.must-have-stage .stage-char {
  display: inline-block;
  font-style: normal;
  animation: stage-flow 0.35s ease-out both;
}

/* hf284 (마스터): 「스페인 와인 칵테일」 초록 · 「특별 행사」 붉은색
   hf308 (마스터 A안 「Menu의 'M' 색깔로」): 값은 이미 M과 같은 #7fcf95였지만 18px 보통 굵기의 가는 획은 어두운 바탕에 섞여 탁해 보였다 —
   굵기는 그대로 두고(「칼리모초」 강조 유지) 초록만 밝혀 46px 굵은 M과 같은 밝기로 보이게 한다. */
.must-have-stage .stage-text .is-green {
  color: #a6eab9;
}

.must-have-stage .stage-text .is-red {
  color: #f26b5f;
}

.must-have-stage .stage-text .is-bold {
  font-weight: 700; /* hf286 (마스터): 「칼리모초」 굵게 */
}

@keyframes stage-flow {
  from { opacity: 0; filter: blur(2px); transform: translateX(-4px); } /* hf285: 3 → 2px */
  to { opacity: 1; filter: none; transform: none; }
}

/* hf292 (마스터 「3만원과 점선을 없애고 확보된 공간으로 문자를 키워줘」): 둘째 줄 = 구성 · 50%↓ · 할인가 · [담기], 17 → 19px.
   나타나는 순서도 정가 · 점선이 빠진 만큼 당긴다(도장 0.45초 · 할인가 0.75초 · [담기] 1.05초) */
.must-have-stage .stage-what {
  font-size: 19px;
  font-weight: 700; /* hf284 (마스터 「존재감이 약해」): 굵게 */
  letter-spacing: -0.02em;
  animation: stage-in 0.35s ease-out both;
}

.must-have-stage .stage-off {
  display: inline-flex;
  align-items: center;
  height: 28px; /* hf286: 20 → 22 · hf291: 22 → 25 · hf292: 28 */
  padding: 0 9px;
  border-radius: 4px;
  background: #b8322a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  color: #fff3e8;
  font-size: 17px; /* hf286: 12 → 14 (「50%↓」) · hf291: 15 · hf292: 17 */
  font-weight: 800;
  animation: stage-stamp 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) 0.45s both;
}

.must-have-stage .stage-sale {
  color: #f0cf8a;
  font-size: 19px; /* hf284 (마스터 「너무 강해」): 16 → 14, 굵게 뺌 · hf286: 16 · hf291: 17 · hf292: 19 (보통 굵기 그대로) */
  font-weight: 400;
  letter-spacing: -0.01em;
  animation: stage-rise 0.35s ease-out 0.75s both;
}

.must-have-stage .stage-action {
  display: inline-flex;
  animation: stage-in 0.3s ease-out 1.05s both;
}

.page-shell > .must-have-stage .stage-action .toss-order-chip {
  height: 32px !important; /* hf286: 24 → 26 · hf291: 30 · hf292: 32 */
  padding: 0 13px 0 10px !important;
  font-size: 16px !important; /* hf291: 13.5 → 15 · hf292: 16 */
  margin: 0 !important;
}

.must-have-stage .stage-more {
  display: inline-flex;
  align-items: center;
  height: 32px; /* hf286: 22 → 26 · hf291: 30 · hf292: 32 ([담기]와 같게) */
  padding: 0 12px;
  border: 1px solid rgba(214, 174, 104, 0.7);
  border-radius: 999px;
  color: #e6c27a;
  font-size: 16px; /* hf286: 12.5 → 14 · hf291: 14 · hf292: 16 */
  font-weight: 700;
}

@keyframes stage-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes stage-stamp {
  from { opacity: 0; transform: rotate(-12deg) scale(1.7); }
  to { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@keyframes stage-rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* 리본이 나와 있는 동안 눈사람 장면 · 빌드 번호는 쉰다 (같은 자리) */
.page-shell > .xmas-ground {
  transition: opacity 0.5s ease;
}

.page-shell > .xmas-ground.is-offstage {
  opacity: 0 !important;
}

/* hf291: 서서히(opacity 0.4초) → 바로 숨김 — 마스터 사파리 사진에서 리본이 나와 있는데도 빌드 번호가 그대로 보였다 */
body.has-must-have-stage.is-landing .page-shell > .landing-build-badge {
  visibility: hidden !important;
}

/* hf285: 줄이 다 나타나면(is-settled) 애니메이션을 걷어 내고 끝 모습 그대로 둔다 — iPhone 사파리가 흐린 채 남긴 글자를 새로 그리게.
   움직임 줄이기 폰은 처음부터 이 모습 */
.page-shell > .must-have-stage.is-settled *,
.page-shell > .must-have-stage.is-settled *::after {
  animation: none !important;
}

.page-shell > .must-have-stage.is-settled .stage-off {
  transform: rotate(-4deg);
}

@media (prefers-reduced-motion: reduce) {
  .must-have-stage *,
  .must-have-stage *::after {
    animation: none !important;
  }

  .must-have-stage .stage-off {
    transform: rotate(-4deg);
  }
}

/* hf289 (마스터 「배포까지 고」): 첫 화면은 위아래로 끌리지 않게.
   - style.css body의 min-height 100vh를 크롬은 「도구 막대가 숨었을 때 높이」(마스터 폰 872)로 계산해, 보이는 화면(762)보다
     110px 길어져 첫 화면이 끌렸다(scrollY 14로 남아 있던 사진). 첫 화면에서만 0으로 — 높이는 landing-fit.js가 화면에 맞춘다.
   - 사파리에서 리본을 화면 높이 아래(떠 있는 도구 막대 위)까지 내려도 스크롤이 생기지 않게 첫 화면만 overflow: hidden.
     메뉴 화면으로 가면(body.is-landing이 빠지면) 원래대로 스크롤된다. */
/* hf290: 떠 있는 도구 막대가 있는 사파리(html.has-floating-toolbar, landing-stage.js)는 잠그지 않는다 — 막대 둘레도 페이지라
   잠그면 그 아래가 흰 띠가 되고 리본이 잘렸다(마스터 사진). 크롬 · 카카오톡 · 네이버만 잠근다. */
html:not(.has-floating-toolbar) body.phone-mode.landing-fit.is-landing:not(.ipad-detail) {
  min-height: 0 !important;
}

html:not(.has-floating-toolbar):has(> body.phone-mode.landing-fit.is-landing:not(.ipad-detail)) {
  overflow: hidden;
}

/* hf290: 페이지 배경은 그라데이션뿐이라 페이지 밖(막대 둘레 · 끌어 내렸을 때)을 브라우저가 흰색으로 채웠다 — 아랫색 그대로 어둡게 */
/* phone.css의 body.phone-mode … { background: … !important }가 바탕색을 지우므로 그보다 강하게(바탕색만) */
html body.phone-mode,
html body.phone-mode:not(.ipad-detail).is-landing {
  background-color: #050505 !important;
}

/* hf300 (마스터 「장바구니 알약의 위치가 어중간해. 필수템 알약의 가운데에 오도록」): 첫 화면에서만
   [장바구니]·「메뉴별 담기 버튼을 눌러주세요」 알약(높이 44, toss-order.css)의 가운데를 리본 가운데(landing-stage.js dock)에 맞춘다.
   상세 화면은 그대로 화면 맨 아래(hf158 — ←·↑ 동그란 버튼과 겹치지 않게). 리본 가운데는 알약에 가려진다(마스터 A안).
   hf301 (마스터 「높이를 필수템 알약과 완전히 동일하게」): 화면 고정(fixed) 대신 페이지 위치(absolute)에 두어 사파리 아래 띠에서도
   잘리지 않게 하고, 첫 화면과 같은 비율(landing-fit.js)로 줄여 어느 폰에서나 리본과 높이가 같다. */
html.has-stage-dock body.phone-mode.is-landing:not(.ipad-detail) .toss-cart-pill-wrap {
  position: absolute !important;
  top: calc(var(--landing-stage-center) - 22px) !important;
  bottom: auto !important;
  transform: translateX(-50%) scale(var(--landing-stage-scale, 1)) !important;
}