/* ============================================================
 * 오버레이 — 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__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-sheet__availability { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-fg-subtle); }
.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__btn:disabled { cursor: not-allowed; opacity: 0.4; }
.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);
}
.qty-sheet__cta:disabled { cursor: not-allowed; opacity: 0.4; }

/* ============================================================
 * 로그인 유도 팝업 (TASK-038 ① — D-025 게이트 지점 공통)
 * ============================================================ */
.login-gate {
  /* 전역 리셋(home.css `*{margin:0}`)이 UA의 dialog 중앙 정렬(margin:auto)을 덮어써
     showModal() 시 좌상단(inset:0 + margin:0)에 고정되던 버그 — margin:auto 복원 (T38-D12).
     다른 오버레이(qty-sheet·postcode-layer)는 명시 배치라 무관 — <dialog>는 이거 하나. */
  margin: auto;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5) var(--space-4);
  width: min(calc(100% - 48px), 320px);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  text-align: center;
}
.login-gate::backdrop { background: rgba(26, 28, 32, 0.5); }
.login-gate__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.login-gate__desc {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-snug);
}
.login-gate__cta {
  width: 100%;
  height: 48px;
  margin-top: var(--space-5);
  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);
}
.login-gate__later {
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
}

/* ============================================================
 * 중복 미결제 주문 2택 팝업 (TASK-122 — orders/new)
 * ============================================================ */
.order-gate {
  /* margin:auto = 전역 리셋이 UA dialog 중앙 정렬을 덮는 버그 대응 — login-gate와 동일 (T38-D12) */
  margin: auto;
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5) var(--space-4);
  width: min(calc(100% - 48px), 320px);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  text-align: center;
}
.order-gate::backdrop { background: rgba(26, 28, 32, 0.5); }
.order-gate__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.order-gate__desc {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-snug);
}
.order-gate__summary {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
}
.order-gate__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: var(--space-5);
  border: none;
  border-radius: 10px;
  background: var(--color-bg-inverse);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg-on-inverse);
}
.order-gate__cancel {
  width: 100%;
  min-height: 44px; /* 터치 타깃 하한 (DEV-057 감사 기준) */
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-subtle);
}

/* ============================================================
 * 다음(카카오) 우편번호 검색 레이어 (TASK-038 ②)
 * ============================================================ */
.postcode-layer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--layout-mobile-width));
  z-index: 120;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.postcode-layer[hidden] { display: none; } /* display:flex가 hidden 속성을 이기지 않게 */
.postcode-layer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-page);
  border-bottom: var(--border-width) solid var(--color-border);
}
.postcode-layer__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.postcode-layer__close {
  border: none;
  background: none;
  padding: var(--space-1);
  cursor: pointer;
  display: flex;
  color: var(--color-fg);
}
.postcode-layer__frame { flex: 1; } /* embed iframe이 100% 높이로 채움 */

/* 공통 뒤로가기 헤더(구 shared/_back_header, TASK-044 ④)는 대형 배너 표준
 * (shared/_page_header — home.css .page-header--title)으로 흡수 — TASK-092.
 * 구 .back-header* 규칙 이관 제거 (메타 = .page-header__meta 승계, __action은 사용처 0). */

/* 스타일가이드 정적 데모 — 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; }

/* ============================================================
 * 전역 flash 토스트 (TASK-051 ② — 레이아웃 영역 비점유 오버레이)
 * notice = 자동 소멸 / alert = 닫기까지 유지 (toast_controller.js)
 * ============================================================ */
.flash-toast-region {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - var(--space-page) * 2), calc(var(--layout-mobile-width) - var(--space-page) * 2));
  z-index: 140; /* 바텀시트(120)·팝오버(50) 위 */
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none; /* 지나가는 알림이 아래 UI 조작을 막지 않게 — 닫기 버튼만 복원 */
}
.flash-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-float);
  animation: flash-toast-in 0.25s ease-out;
  transition: opacity 0.3s ease, transform 0.3s ease; /* .is-leaving — LEAVE_MS와 일치 */
}
.flash-toast--notice {
  background: var(--color-bg-brand-solid);
  color: var(--color-fg-on-brand);
}
.flash-toast--alert {
  background: var(--color-bg);
  color: var(--color-fg);
  border: var(--border-width) solid var(--color-red-500);
  pointer-events: auto; /* 닫기 버튼 조작 */
}
.flash-toast__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-fg-subtle);
}
.flash-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}
@keyframes flash-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}