/* ============================================================
 * 오버레이 — NB_3100M 수량 바텀시트 / NB_3100P·NB_3300P 장바구니 토스트
 * ============================================================ */

/* 딤 오버레이 (모바일 프레임 폭 안에서만) */
.sheet-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--layout-mobile-width));
  background: var(--color-overlay-dim);
  z-index: 100;
}

/* 수량 선택 바텀시트 */
.qty-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-radius: 20px 20px 0 0;
  padding: var(--space-2) var(--space-page) calc(var(--space-5) + var(--safe-bottom));
}
.qty-sheet__grabber {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-gray-400);
  margin: var(--space-1-5) auto var(--space-3-5);
}
.qty-sheet__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-tight);
}
.qty-sheet__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  color: var(--color-fg);
}
.qty-sheet__product {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}
.qty-sheet__thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--color-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}
.qty-sheet__product-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.qty-sheet__product-name { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-fg); line-height: var(--line-height-snug); }
.qty-sheet__product-farm { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-fg-subtle); line-height: var(--line-height-tight); }
.qty-sheet__product-unit { font-size: var(--font-size-sm); color: var(--color-fg-muted); line-height: var(--line-height-snug); }
.qty-sheet__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-normal);
  margin-top: var(--space-4);
}
.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2-5);
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-subtle);
  border-radius: 10px;
}
.qty-stepper__btn {
  border: none;
  background: none;
  padding: var(--space-1);
  cursor: pointer;
  display: flex;
  color: var(--color-fg-muted);
}
.qty-stepper__count {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  line-height: var(--line-height-tight);
}
.qty-sheet__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-6);
}
.qty-sheet__total-label { font-size: var(--font-size-base); color: var(--color-fg-muted); line-height: var(--line-height-normal); }
.qty-sheet__total-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-fg); letter-spacing: -0.2px; line-height: 1.35; }
.qty-sheet__cta {
  width: 100%;
  height: 52px;
  margin-top: var(--space-4);
  border: none;
  border-radius: 10px;
  background: var(--color-bg-inverse);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-on-inverse);
  line-height: var(--line-height-normal);
}

/* 스타일가이드 정적 데모 — fixed 해제 */
.sg-demo .sheet-overlay {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  padding-top: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sg-demo .qty-sheet { position: relative; border-radius: 20px 20px 0 0; }