/* =========================================================================
   LOW MODE (v4.4)
   - Wrapper: 화면 하단 66% 고정
   - 좌측 btn-panel 높이 = 우측 cart 높이 (정확히 동일)
   - 내부 요소 "크기"는 유지, 간격만 컴팩트
   - bottom-nav: translate(-50%, -50%) 고정
   - 중요: 모달/오버레이(pay.css)는 "절대" 건드리지 않음 (콘텐츠 크기대로)
   ========================================================================= */

/* ===================== 토큰 ===================== */
.kiosk-wrapper.low-screen-mode {
  --low-viewport:    66vh; /* 낮은 화면 모드에서 wrapper 높이 */
  --low-nav-h:       88px; /* 하단 네비 높이 */
  --low-header-h:    56px;
  --low-gap:         12px;

  /* cart / btn-panel 공통 높이 파라미터 */
  --panel-min-px:    480px;
  --panel-max-px:    560px;
  --panel-max-ratio: 48%;
  --panel-size: clamp(var(--panel-min-px), var(--panel-max-ratio), var(--panel-max-px));

  
  --modal-viewport: 66vh;   /* ★ 기존 66vh → 60vh로 낮춤 */
}

/* ===================== Wrapper 프레임 ===================== */
.kiosk-wrapper.low-screen-mode {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  bottom: var(--low-nav-h) !important;

  width: 100% !important;
  max-width: 1080px !important;
  height: var(--low-viewport) !important;
  max-height: var(--low-viewport) !important;

  background: var(--mono-bg, #f5f6f8) !important;
  border-top-left-radius: 24px !important;
  border-top-right-radius: 24px !important;

  /* 모달이 pay.css대로 위에 오르도록 래퍼 z-index는 낮게 유지(모달: 1100) */
  z-index: 1000 !important;

  /* 모달이 래퍼에 클립되지 않도록 visible */
  overflow: visible !important;

  box-shadow:
    0 -8px 24px rgba(0,0,0,.12),
    0 -2px  8px rgba(0,0,0,.08) !important;
}

/* ===================== 고정 height/강제치 무효화(필요 범위만) ===================== */
.kiosk-wrapper.low-screen-mode .content-area,
.kiosk-wrapper.low-screen-mode .category-area,
.kiosk-wrapper.low-screen-mode .main-panel,
.kiosk-wrapper.low-screen-mode .category-area .category-panel,
.kiosk-wrapper.low-screen-mode .category-area .btn-panel,
.kiosk-wrapper.low-screen-mode .main-panel .product-area,
.kiosk-wrapper.low-screen-mode .main-panel .cart-area {
  height: auto !important;
  max-height: none !important;
}

/* ===================== 헤더 & 컨텐츠 레이아웃 ===================== */
.kiosk-wrapper.low-screen-mode .kiosk-header {
  height: var(--low-header-h) !important;
  margin: 8px 0 !important;
  border-bottom-width: 1px !important;
}

.kiosk-wrapper.low-screen-mode .content-area {
  height: calc(var(--low-viewport) - var(--low-header-h) - var(--low-gap)) !important;
  margin-top: calc(var(--low-header-h) + 4px) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: auto auto !important; /* 2열 유지 */
}

/* ===================== 좌측: Category ===================== */
.kiosk-wrapper.low-screen-mode .category-area {
  display: grid !important;
  min-height: 0 !important;
  /* 상단 리스트는 남는 영역, 하단 버튼 패널은 cart와 동일 높이 */
}

.kiosk-wrapper.low-screen-mode .category-area .category-panel {
  min-height: 720px !important;
  overflow: auto !important; /* 리스트는 스크롤 */
}


.btn-panel {
  background-color: var(--mono-surface, #fff);
  border: 1px solid var(--mono-outline, rgba(17,24,39,.12)) !important;
  border-radius: var(--r-xl, 24px) !important;
  padding: 20px !important;
  box-shadow: none !important;
}
.kiosk-wrapper.low-screen-mode .category-area .btn-panel {
  display: flex !important;
  flex-direction: column !important;
  gap:32px !important;
  justify-content: start !important;
  overflow: hidden auto !important;
  min-height: var(--panel-min-px) !important;
  height: 480px !important;
  /* cart 톤과 유사 */
  background-color: var(--mono-surface, #fff);
  border: 1px solid var(--mono-outline, rgba(17,24,39,.12)) !important;
  border-radius: var(--r-xl, 24px) !important;
  padding: 20px !important;
  box-shadow: none !important;
}

.kiosk-wrapper.low-screen-mode .category-area .btn-panel button {
  height: auto;
  padding: 1.0rem 1rem;
}

.kiosk-wrapper.low-screen-mode .main-panel .product-area {
  min-height: 0 !important;
  overflow: auto !important;
}

.kiosk-wrapper.low-screen-mode .main-panel .cart-area {
  min-height: var(--panel-min-px) !important;
  overflow: auto !important;
}

/* ===================== 간격 컴팩트(크기 축소 없음) ===================== */
.kiosk-wrapper.low-screen-mode .product-list { gap: 16px !important; }
.kiosk-wrapper.low-screen-mode .product-item { border-radius: 12px !important; }
.kiosk-wrapper.low-screen-mode .product-item img { border-radius: 10px !important; }
.kiosk-wrapper.low-screen-mode .cart-list { padding: 6px 8px !important; }
.kiosk-wrapper.low-screen-mode .cart-footer { gap: 10px !important; margin-top: 0 !important; padding-bottom: 44px;}
.kiosk-wrapper.low-screen-mode .cart-total .amount-wrapper { }
.kiosk-wrapper.low-screen-mode .checkout-btn { min-width: 200px !important; }

/* 장바구니 헤더 버튼 줄바꿈 방지 */
.kiosk-wrapper.low-screen-mode .cart-header button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  padding: 0 14px !important;
  min-width: 132px !important;
}

/* ===================== bottom-nav (고정) ===================== */
.bottom-nav {
  position: fixed !important;
  left: 50% !important;
  transform: translate(-50%, 0) !important; /* 사용자 환경 기준 */
  bottom: 0 !important;
  width: 100% !important;
  max-width: 1080px !important;
  height: 176px !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  z-index: 3000 !important;
}

/* ===================== 기타 ===================== */
.kiosk-wrapper.low-screen-mode .waiting-text {
  padding: 8px 16px !important;
  border-radius: 999px !important;
}

.kiosk-wrapper.low-screen-mode .scroll-indicator { bottom: 8px !important; }

/* 다크 테마 그림자 보정 */
html.dark-theme .kiosk-wrapper.low-screen-mode {
  background: var(--hc-bg, #111f2e) !important;
  box-shadow:
    0 -8px 24px rgba(0,0,0,.35),
    0 -2px  8px rgba(0,0,0,.25) !important;
}

/* 세로 짧은 화면에서 패널 최소치 상향 (btn-panel/cart에 동일 적용) */
@media (max-height: 1200px) {
  .kiosk-wrapper.low-screen-mode { --panel-min-px: 500px; }
}


/* ============= 모달/오버레이: 하단 고정, 절대 확장 금지 ============= */
.kiosk-wrapper.low-screen-mode .payment-modal,
.kiosk-wrapper.low-screen-mode .order-confirm-modal,
.kiosk-wrapper.low-screen-mode .payment-screen,
.kiosk-wrapper.low-screen-mode .modal{
  position: fixed !important;

  /* 상단 확장 방지 */
  top: auto !important;
  bottom: var(--low-nav-h) !important;  /* nav 바로 위에서 시작 */
  left: 50% !important; transform: translateX(-50%) !important;

  /* 높이 절대값(변수) 고정 */
  height: var(--modal-viewport) !important;
  max-height: var(--modal-viewport) !important;
  width: 100% !important; max-width: 1080px !important;

  z-index: 2900 !important; /* nav(3000) 아래 */
  border-top-left-radius: 24px !important; border-top-right-radius: 24px !important;
  overflow: hidden !important; /* 내부 박스가 스크롤 담당 */
}

/* 모달 내부 박스: 부모 높이 안에서만 스크롤 */
.kiosk-wrapper.low-screen-mode .payment-modal-box,
.kiosk-wrapper.low-screen-mode .modal-box,
.kiosk-wrapper.low-screen-mode .screen-box{
  min-height: 0 !important;  /* ★ 컨텐츠가 부모 높이 넘겨도 확장 금지 */
  height: auto !important;
  display: flex !important; flex-direction: column !important;
  box-sizing: border-box !important;

  padding: 22px 26px !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
}