/* Lounge M Menu Guide — 토스 [주문] 버튼 (hf154, assets/js/toss-order.js)
   가격 바로 옆의 작은 버튼. EN 버튼(테두리만 금색)과 헷갈리지 않게 안을 금색으로 채운다.
   hf216 (마스터 결정 3안, 실험 /lab/order-button): 손님이 잘 못 찾아서 22px 반투명 → 25px 금색 채움 + 작은 장바구니 그림,
   글자 13.5px·어둡게. 5초마다 화면에 보이는 버튼에만 빛이 한 번 지나간다(B, toss-order.js sheenVisibleChips). */
body.phone-mode .toss-order-chip,
.toss-order-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important; /* hf226: 4 → 3 (그림이 3px 커진 만큼 안쪽 여백에서 덜어 버튼 크기는 그대로) */
  height: 25px !important;
  min-width: 0 !important;
  margin: 0 0 0 7px !important;
  padding: 0 10px 0 7px !important; /* hf226: 왼쪽 9 → 7 */
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #e6c27a, #c99a45) !important;
  box-shadow: 0 2px 8px rgba(214, 160, 82, 0.3), inset 0 1px 0 rgba(255, 245, 215, 0.55) !important;
  color: #1b130a !important;
  -webkit-text-fill-color: #1b130a !important;
  font-family: inherit !important;
  font-size: 13.5px !important; /* hf169 13 → hf216 13.5 */
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  position: relative; /* 빛 지나감(::after) 자리 — 가운데 줄은 아래 is-order-center 규칙의 absolute가 이긴다 */
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.toss-order-chip .toss-order-chip-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 16px; /* hf226 (마스터 요청): 13 → 16px, 선도 굵게(toss-order.js CHIP_ICON) — 버튼 크기는 그대로 */
  height: 16px;
}

body.phone-mode .toss-order-chip:active,
.toss-order-chip:active {
  transform: scale(0.95);
  filter: brightness(0.92);
}

/* hf216 B: 빛이 왼쪽에서 오른쪽으로 한 번 지나감 (toss-order.js가 is-sheen을 붙였다 뗀다) */
.toss-order-chip::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 250, 235, 0.75), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.toss-order-chip.is-sheen::after { animation: toss-order-sheen 0.95s ease-out 1; }
@keyframes toss-order-sheen { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 100% { left: 125%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toss-order-chip.is-sheen::after { animation: none; } }

.toss-order-chip:focus {
  outline: none;
}

.toss-order-chip:focus-visible {
  outline: 2px solid rgba(222, 188, 116, 0.9);
  outline-offset: 2px;
}

/* hf156: [주문]으로 토스에 다녀온 손님에게 띄우는 [장바구니] 알약. 모달(직원 호출 9999, 가격 안내 9998 등)보다 아래.
   hf158(마스터 요청): 화면 맨 아래 가까이 — 상세 화면의 ←(뒤로)·↑(맨 위로) 동그란 버튼(바닥에서 72~78px)보다 아래라
   그 버튼들과 겹치지 않는다. 가로 가운데는 캡슐만 기준(✕는 캡슐 오른쪽에 따로 붙인다). */
body.phone-mode .toss-cart-pill-wrap,
.toss-cart-pill-wrap {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  z-index: 9990 !important;
  display: flex !important;
  align-items: center !important;
  transform: translateX(-50%) !important;
  pointer-events: auto !important;
}

body.phone-mode .toss-cart-pill-wrap[hidden],
.toss-cart-pill-wrap[hidden] {
  display: none !important;
}

body.phone-mode .toss-cart-pill,
.toss-cart-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px 0 14px !important;
  border: 1px solid rgba(216, 180, 106, 0.8) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(70, 53, 26, 0.97), rgba(42, 31, 15, 0.97)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.46), 0 0 0 3px rgba(216, 180, 106, 0.08) !important;
  color: #f4e4bd !important;
  -webkit-text-fill-color: #f4e4bd !important;
  font-family: inherit !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

.toss-cart-pill-icon {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 auto !important;
  color: #e3c27f !important;
}

body.phone-mode .toss-cart-pill-close,
.toss-cart-pill-close {
  position: absolute !important;
  left: calc(100% + 6px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(214, 188, 132, 0.5) !important;
  border-radius: 999px !important;
  background: rgba(8, 7, 6, 0.86) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
  color: rgba(245, 224, 169, 0.9) !important;
  -webkit-text-fill-color: rgba(245, 224, 169, 0.9) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

.toss-cart-pill:active {
  background: linear-gradient(180deg, rgba(88, 66, 32, 0.98), rgba(52, 38, 18, 0.98)) !important;
}

.toss-cart-pill-close:active {
  transform: translateY(-50%) scale(0.94) !important;
}

.toss-cart-pill:focus,
.toss-cart-pill-close:focus {
  outline: none;
}

.toss-cart-pill:focus-visible,
.toss-cart-pill-close:focus-visible {
  outline: 2px solid rgba(222, 188, 116, 0.9);
  outline-offset: 2px;
}

/* 알약이 떠 있는 동안 페이지 끝에 여백 — 짧은 폰에서도 맨 아래 내용을 알약 위로 올려 볼 수 있게.
   첫 화면(phone.css의 is-landing 규칙)·상세 화면 규칙보다 우선하도록 선택자를 한 단계 더 구체적으로 쓴다. */
body.phone-mode.has-toss-cart-pill.is-landing:not(.ipad-detail) .page-shell {
  padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
}

body.phone-mode.has-toss-cart-pill.ipad-detail .page-shell {
  padding-bottom: calc(136px + env(safe-area-inset-bottom)) !important;
}

/* 나타날 때 처음 몇 초만 위아래로 일렁인다 (0.8초 × 3번) */
@keyframes toss-cart-pill-bob {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-7px); }
}

.toss-cart-pill-wrap.is-bobbing .toss-cart-pill {
  animation: toss-cart-pill-bob 0.8s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .toss-cart-pill-wrap.is-bobbing .toss-cart-pill {
    animation: none;
  }
}

@media (max-width: 390px) {
  body.phone-mode .toss-cart-pill,
  .toss-cart-pill {
    height: 42px !important;
    min-height: 42px !important;
  }
}

/* hf168: 품절 카드에는 [주문]을 보이지 않는다. 그리는 단계에서 빼지만(isSoldOutNow), 서버 품절 값이 그린 뒤에
   도착하면 soldout.js가 카드에 is-sold-out만 붙이므로 그때를 위한 안전망. */
.mini-card.is-sold-out .toss-order-chip {
  display: none !important;
}

/* hf239: 보틀만 품절이면 Bottle [담기]만 감춘다(Shot [담기]는 그대로). 그리는 단계에서도 빼고(isBottleSoldOutNow),
   서버 값이 나중에 오면 soldout.js가 붙이는 is-bottle-sold-out으로 감춘다. */
.mini-card.is-bottle-sold-out .toss-order-chip[data-toss-order-field="bottle"] {
  display: none !important;
}

/* hf169: 위스키·스피릿 줄의 첫 [주문]은 칸 맨 앞(Shot 앞)에 있으므로 여백을 오른쪽에 둔다. */
.detail-price-cell > .toss-order-chip:first-child {
  margin: 0 7px 0 0 !important;
}

/* hf216: 좁은 폰에서 Shot/Bottle 두 칸 줄이 넘치면(toss-order.js fitShotBottleRows) 그 화면의 Shot/Bottle [주문]만
   그림을 빼고 양옆 여백을 조금 줄인다 — 360px 코냑 줄의 「35Bottle」 붙음(hf215부터)도 같이 띄운다. */
#app.is-order-tight .whisky-price-row .toss-order-chip {
  gap: 0 !important;
  padding: 0 8px !important;
  margin: 0 0 0 5px !important;
}
#app.is-order-tight .whisky-price-row .detail-price-cell > .toss-order-chip:first-child {
  margin: 0 5px 0 0 !important;
}
#app.is-order-tight .whisky-price-row .toss-order-chip-icon {
  display: none !important;
}

/* hf169: 한 줄에 [주문]이 1개면 줄 가운데. 겹치는 줄은 toss-order.js가 is-order-center를 붙이지 않아 예전처럼 가격 옆. */
.detail-price-row.is-order-center {
  position: relative !important;
}

.detail-price-row.is-order-center .price-value,
.detail-price-row.is-order-center .detail-price-cell {
  position: static !important;
}

.detail-price-row.is-order-center .toss-order-chip {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important; /* hf170: toss-order.js가 글자 가운데 높이로 다시 넣는다(inline top) */
  margin: 0 !important;
  transform: translate(-50%, -50%);
  transition: filter 0.12s ease !important; /* hf170: 가운데로 옮길 때 미끄러지는 움직임 없이 */
}

.detail-price-row.is-order-center .toss-order-chip:active {
  transform: translate(-50%, -50%) scale(0.95);
}


/* hf215: 첫 [주문] 연결 중 덮개 — 새 탭(/toss-connect)과 같은 어두운 화면이라, 새 탭이 잠깐 열렸다 닫혀도
   손님 눈에는 「연결 중 → 상품 화면」으로 보인다. 신청곡·테이블 차지 창(10020)보다 위. */
.toss-connecting {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  background: #0c0906;
}
.toss-connecting[hidden] { display: none; }
.toss-connecting-box { display: grid; justify-items: center; gap: 14px; }
.toss-connecting-ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(218, 180, 102, 0.25);
  border-top-color: #dab466;
  animation: toss-connecting-spin 0.9s linear infinite;
}
.toss-connecting p {
  margin: 0;
  color: rgba(243, 234, 219, 0.8);
  font-size: 16px;
  letter-spacing: -0.01em;
}
@keyframes toss-connecting-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .toss-connecting-ring { animation: none; } }

/* hf223 (마스터 결정 A안): [장바구니] 알약만 [주문]과 같은 금색 채움 + 어두운 글자·그림.
   [담기]만 하고 돌아온 손님이 장바구니 → 주문하기까지 가야 실제 주문이 들어가서 가장 눈에 띄게 한다.
   같은 자리에 뜨는 안내 알약(.toss-order-hint)은 어두운 그대로 — 주문 전엔 어두운 안내, 주문 뒤엔 금색 장바구니. ✕도 어두운 그대로. */
body.phone-mode .toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill,
.toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill {
  border: 1px solid rgba(246, 214, 146, 0.9) !important;
  background: linear-gradient(180deg, #e6c27a, #c99a45) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 16px rgba(214, 160, 82, 0.32), inset 0 1px 0 rgba(255, 245, 215, 0.55) !important;
  color: #1b130a !important;
  -webkit-text-fill-color: #1b130a !important;
  font-weight: 760 !important;
}

/* hf225 (마스터 요청): 글자를 「장바구니」로 되돌리는 대신 장바구니 그림을 19 → 26px로 키워 존재감을 준다 */
body.phone-mode .toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill,
.toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill {
  gap: 8px !important;
  padding-left: 12px !important;
}

body.phone-mode .toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill-icon,
.toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill-icon {
  width: 26px !important;
  height: 26px !important;
  color: #1b130a !important;
}

body.phone-mode .toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill:active,
.toss-cart-pill-wrap:not(.toss-order-hint) .toss-cart-pill:active {
  background: linear-gradient(180deg, #e6c27a, #c99a45) !important;
  filter: brightness(0.92);
}

/* hf216: 「메뉴별 주문 버튼을 눌러주세요」 안내 알약 — [장바구니] 알약(.toss-cart-pill-wrap)과 같은 자리·모양.
   그날 처음 [주문]을 누르거나 ✕로 닫으면 더 뜨지 않고, 그 자리를 [장바구니] 알약이 잇는다. */
.toss-order-hint .toss-cart-pill { gap: 7px; }
.toss-order-hint-icon { width: 17px; height: 17px; flex: 0 0 auto; }
/* hf217 (마스터 요청): 떠 있는 동안 5초마다 좌우로 살짝 두 번 흔들림 (toss-order.js nudgeHint, [주문] 빛보다 0.3초 먼저) */
@keyframes toss-order-hint-nudge {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-2.5deg); }
  40% { transform: rotate(2.5deg); }
  60% { transform: rotate(-1.5deg); }
  80% { transform: rotate(1.5deg); }
}
.toss-order-hint.is-nudging .toss-cart-pill { animation: toss-order-hint-nudge 0.6s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .toss-order-hint.is-nudging .toss-cart-pill { animation: none; } }
.toss-order-toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9995;
  max-width: calc(100vw - 40px);
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(20, 15, 10, 0.96);
  border: 1px solid rgba(216, 180, 106, 0.35);
  color: #f3eadb;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
.toss-order-toast[hidden] { display: none; }