/* Lounge M Menu Order — 칵테일 재료 알약·재료 창 (hf211, render-cocktail.js)
   알약: 카드 오른쪽 사진 칸(64~70px) 안, 사진 바로 아래. EN 알약과 같은 금색 테두리.
   재료 창: 인기 순위 창(.cocktail-popularity-*)과 같은 패널 모양.
   hf212 (마스터 결정): 창은 화면 위쪽에 열고, 둥근 ←/↑ 버튼(z-index 9999)보다 위층(10020, 테이블 차지·신청곡 창과 같은 층).
   재료마다 맛 역할 한 줄. hf219: 가운데 정렬·큰 사진으로 다시 꾸밈(아래 「재료 창」). */

body.phone-mode .cocktail-card .cocktail-media {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  justify-self: end !important;
  align-self: start !important;
}

body.phone-mode .cocktail-card .cocktail-media .cocktail-image-wrap {
  justify-self: auto !important;
  align-self: auto !important;
}

body.phone-mode .cocktail-card .cocktail-ingredients-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 8px 0 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(226, 188, 105, 0.82) !important;
  background: linear-gradient(180deg, rgba(76, 52, 27, 0.66), rgba(34, 24, 14, 0.72)) !important;
  color: rgba(250, 226, 170, 0.98) !important;
  -webkit-text-fill-color: rgba(250, 226, 170, 0.98) !important;
  font-size: 12px !important;
  font-weight: 740 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.13), 0 0 8px rgba(214, 160, 82, 0.12) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.phone-mode .cocktail-card .cocktail-ingredients-chevron {
  font-size: 13px !important;
  line-height: 1 !important;
  transform: translateY(-0.5px) !important;
}

body.phone-mode .cocktail-card .cocktail-ingredients-chip:active {
  border-color: rgba(238, 199, 113, 0.92) !important;
  background: linear-gradient(180deg, rgba(92, 63, 30, 0.72), rgba(44, 30, 15, 0.78)) !important;
}

body.phone-mode .cocktail-card .cocktail-ingredients-chip:focus { outline: none !important; }
body.phone-mode .cocktail-card .cocktail-ingredients-chip:focus-visible {
  outline: 1px solid rgba(238, 199, 113, 0.92) !important;
  outline-offset: 2px !important;
}

/* 재료 창
   hf219 (마스터 요청 + 제안 1~6): 맨 위 가운데 칵테일명(26px)·영어 이름(16px) → 사진 228px(전 76px의 3배) →
   「── 베이스 ──」「── 부재료 ──」 19px 금색(재료명 18px보다 크게) → 재료명·맛 한 줄(16px), 모두 가운데.
   INGREDIENTS 글씨는 뺐다. ✕는 스크롤 칸 밖이라 재료가 많아 내려 봐도 보인다. 열릴 때 0.2초 살짝 커지며 나타남. */
body.is-cocktail-ingredients-open { overflow: hidden; }

body.phone-mode .cocktail-ingredients-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10020 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 140ms ease !important;
}

body.phone-mode .cocktail-ingredients-modal.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.phone-mode .cocktail-ingredients-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(3, 2, 1, 0.68) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
}

body.phone-mode .cocktail-ingredients-panel {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 520px) !important;
  max-height: calc(100svh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(214, 188, 132, 0.26) !important;
  background: radial-gradient(circle at 50% 0%, rgba(214, 188, 132, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(24, 18, 12, 0.98), rgba(10, 7, 5, 0.98)) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: rgba(242, 236, 225, 0.94) !important;
  animation: cocktail-ingredients-in 0.2s ease-out 1;
}

@keyframes cocktail-ingredients-in {
  from { transform: scale(0.96); }
  to { transform: scale(1); }
}

body.phone-mode .cocktail-ingredients-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 20px 18px 22px !important;
}

body.phone-mode .cocktail-ingredients-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 3 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(214, 188, 132, 0.32) !important;
  background: rgba(10, 7, 5, 0.72) !important;
  color: rgba(232, 214, 174, 0.92) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body.phone-mode .cocktail-ingredients-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 2px 34px 0 !important; /* ✕와 겹치지 않게 양옆 같은 여백 */
  text-align: center !important;
}

body.phone-mode .cocktail-ingredients-title {
  margin: 0 !important;
  color: rgba(247, 240, 225, 0.97) !important;
  font-size: 26px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
  font-weight: 780 !important;
  text-wrap: balance;
  word-break: keep-all !important;
}

body.phone-mode .cocktail-ingredients-subtitle {
  margin: 4px 0 0 !important;
  color: rgba(214, 188, 132, 0.86) !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

body.phone-mode .cocktail-ingredients-header .cocktail-ingredients-photo {
  position: relative !important;
  display: block !important;
  width: 228px !important;
  height: 228px !important;
  max-width: 100% !important;
  margin: 16px auto 2px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: visible !important;
  border: 1px solid rgba(214, 188, 132, 0.34) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important;
}

body.phone-mode .cocktail-ingredients-header .cocktail-ingredients-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 17px !important;
}

body.phone-mode .cocktail-ingredients-header .cocktail-ingredients-photo .image-expand-badge {
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  font-size: 16px !important;
}

body.phone-mode .cocktail-ingredients-block {
  margin-top: 20px !important;
}

/* 「── 베이스 ──」: 양옆 가는 금색 선이 가운데 글자 쪽으로 진해진다 */
body.phone-mode .cocktail-ingredients-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
  color: #dab466 !important;
  font-size: 19px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
}

/* 글자는 한 줄 그대로, 좁으면 양옆 선이 줄어든다 (EN 「Other Ingredients」 360px) */
body.phone-mode .cocktail-ingredients-heading > span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

body.phone-mode .cocktail-ingredients-heading::before,
body.phone-mode .cocktail-ingredients-heading::after {
  content: "" !important;
  flex: 0 1 64px !important;
  min-width: 14px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(218, 180, 102, 0), rgba(218, 180, 102, 0.6)) !important;
}

body.phone-mode .cocktail-ingredients-heading::after {
  background: linear-gradient(90deg, rgba(218, 180, 102, 0.6), rgba(218, 180, 102, 0)) !important;
}

body.phone-mode .cocktail-ingredients-list {
  list-style: none !important;
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.phone-mode .cocktail-ingredients-item {
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  text-align: center !important;
}

/* 재료 사이: 가운데 짧은 옅은 선 (메뉴판처럼) */
body.phone-mode .cocktail-ingredients-item + .cocktail-ingredients-item::before {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  margin: 10px auto 11px !important;
  background: rgba(214, 188, 132, 0.24) !important;
}

body.phone-mode .cocktail-ingredients-name {
  color: rgba(247, 240, 225, 0.97) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body.phone-mode .cocktail-ingredients-role {
  color: rgba(232, 220, 196, 0.74) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 450 !important;
  letter-spacing: -0.01em !important;
  word-break: keep-all !important;
}

@media (prefers-reduced-motion: reduce) {
  body.phone-mode .cocktail-ingredients-modal { transition: none !important; }
  body.phone-mode .cocktail-ingredients-panel { animation: none !important; }
}