/* ════════════════════════════════════════════════════════════
   ★ POSAI Responsive — Grid 레이아웃 v3 (확정판)
   ★ 사장 명시 2026-05-28: "포스화면 레이아웃 맞춰. 깨졌다"
   ★ 전략: body.pos 를 CSS Grid (header / main / bottom-menu) 3행 으로 강제
   ★       → 헤더 높이 변동/wrap 에 영향 안 받음. main 이 자동으로 남는 공간 차지.
   ★       → bottom-menu 절대 짤리지 않음 (auto 행)
   ════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   ★ body 전체를 3행 그리드로 — viewport 100% 자동 분배
   ────────────────────────────────────────────── */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  /* overflow:hidden 제거 — admin 페이지 스크롤 허용 */
}

/* viewport 잠금은 매장POS (body.pos) 에만 적용 */
body.pos {
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  grid-template-columns: 1fr !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

/* ──────────────────────────────────────────────
   ★ 헤더 — 자연 높이 (auto), 단일 행, 가로 스크롤
   ────────────────────────────────────────────── */
body.pos > .header {
  grid-row: 1 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
  min-height: 48px;
}
body.pos > .header::-webkit-scrollbar { display: none; }
body.pos > .header > * { flex-shrink: 0 !important; }

/* 음악/언어/음성안내 항상 visible */
body.pos > .header #posLangDropdown,
body.pos > .header #posVoiceDropdown,
body.pos > .header .actions a[href="/music.html"],
body.pos > .header .actions a[href*="music"] {
  display: inline-flex !important;
}

/* ──────────────────────────────────────────────
   ★ 메인 — base 의 fixed-height calc 무시, 그리드의 1fr 행이 자동 채움
   ★ overflow:hidden 으로 .left/.right 내부 스크롤
   ────────────────────────────────────────────── */
body.pos > .main {
  grid-row: 2 !important;
  height: auto !important;
  min-height: 0 !important;     /* grid item 의 implicit min-height 제거 */
  max-height: none !important;
  overflow: hidden !important;
}

/* .left/.right 내부 스크롤 허용 — 합계/단축키 짤림 방지 */
body.pos > .main > .left,
body.pos > .main > .right {
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* ──────────────────────────────────────────────
   ★ 하단 메뉴 — auto 행, 항상 viewport 바닥에 고정
   ────────────────────────────────────────────── */
body.pos > .bottom-menu,
body.pos > .bottom-menu-grid {
  grid-row: 3 !important;
  height: auto !important;
  min-height: 120px;
}

/* ──────────────────────────────────────────────
   ★ POS PC 단말 (1440px 이하) — 폰트 압축
   ────────────────────────────────────────────── */
@media (max-width: 1440px) {
  .header .actions button,
  .header .actions .link-btn { font-size: 11.5px; padding: 5px 9px; }
  .header .info { font-size: 11px; gap: 10px; margin-left: 12px; }
  .header .info span:nth-child(n+6) { display: none; }
  .bottom-menu-grid button { font-size: 11.5px; }
}

@media (max-width: 1280px) {
  .header .actions button,
  .header .actions .link-btn { font-size: 11px; padding: 4px 7px; }
  .header .info span:nth-child(n+5) { display: none; }
  .header .brand { font-size: 13px; }
  .bottom-menu-grid button { font-size: 11px; min-height: 42px; }
}

@media (max-width: 1024px) {
  .header .info span:nth-child(n+4) { display: none; }
  .header .info { font-size: 10.5px; gap: 8px; }
  .header .actions button,
  .header .actions .link-btn { font-size: 10.5px; padding: 4px 6px; }
  .main { gap: 8px !important; padding: 8px !important; }
  .sd-kpis { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ──────────────────────────────────────────────
   ★ 매장 POS 1024-1366 가로형 단말 (Windows 10 + EasyPOS) 전용
   ★ 사장 명시 2026-05-29: 실제 EasyPOS 사진 확인 — 짤림 다발 → 미디어쿼리 확장
   ★ height 820 이하 + 모든 가로형 단말에 적용 (1024/1280/1366 다 커버)
   ────────────────────────────────────────────── */
@media (max-height: 820px) and (orientation: landscape) {
  /* 헤더 — 한 줄, 정보 최소화 */
  body.pos > .header {
    padding: 0 8px !important;
    gap: 4px !important;
    min-height: 44px !important;
  }
  body.pos > .header .logo { width: 28px !important; height: 28px !important; font-size: 9.5px !important; }
  body.pos > .header .brand { font-size: 12px !important; }
  body.pos > .header .info {
    font-size: 9.5px !important; gap: 6px !important; margin-left: 8px !important;
  }
  body.pos > .header .info span:nth-child(n+3) { display: none !important; }  /* 시간만 */
  body.pos > .header .actions { gap: 3px !important; }
  body.pos > .header .actions button,
  body.pos > .header .actions .link-btn {
    font-size: 10px !important;
    padding: 4px 6px !important;
    min-height: 28px;
  }
  body.pos > .header #tenant_badge {
    font-size: 9px !important; padding: 2px 5px !important;
  }
  body.pos > .header .view-mode-toggle { padding: 1px !important; }
  body.pos > .header .view-mode-toggle button {
    font-size: 9px !important; padding: 2px 5px !important;
  }

  /* 메인 — 5:4 비율 (카트 우대) + 패딩 압축 */
  body.pos > .main {
    grid-template-columns: 5fr 4fr !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  /* 카트 — thead/td 컴팩트, 5컬럼 (No/상품명/단가/수량/금액) */
  .cart { width: 100% !important; }
  .cart thead th {
    padding: 6px 6px !important;
    font-size: 10px !important;
    line-height: 1.2;
  }
  .cart tbody td {
    padding: 7px 6px !important;
    font-size: 11.5px !important;
    line-height: 1.25;
  }
  .cart tbody td:first-child { width: 28px; }     /* No */
  .cart tbody td:nth-child(3) { width: 70px; }    /* 단가 */
  .cart tbody td:nth-child(4) { width: 50px; }    /* 수량 */
  .cart tbody td:nth-child(5) { width: 80px; }    /* 금액 */

  /* 카트 액션 버튼들 (▲▼/-+/취소) */
  .cart-actions { gap: 4px !important; }
  .cart-actions button {
    font-size: 11px !important; padding: 6px 4px !important; min-height: 32px;
  }

  /* 바코드 input */
  .barcode-input input {
    height: 36px !important; font-size: 12.5px !important; padding: 0 10px !important;
  }

  /* 합계 영역 — 폰트 축소 */
  .totals { padding: 8px 10px !important; }
  .totals > div { font-size: 11px !important; padding: 2px 0 !important; }
  .totals > div.big > b { font-size: 17px !important; }

  /* 회원 정보 — 4컬럼 → 2×2 */
  .member-info {
    grid-template-columns: 1fr 1fr !important;
    padding: 8px 10px !important; gap: 5px !important;
  }
  .member-info > div > span { font-size: 9.5px !important; }
  .member-info > div > b { font-size: 11.5px !important; }

  /* 카테고리 탭 */
  .category-tabs { padding: 2px !important; }
  .category-tabs button {
    padding: 5px 8px !important; font-size: 10.5px !important;
  }
  .sub-tabs button {
    padding: 3px 7px !important; font-size: 10px !important;
  }

  /* 단축키 그리드 — 3열, 카드 컴팩트 */
  .shortcut-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .shortcut-grid .card,
  .shortcut-grid button {
    padding: 6px !important;
    font-size: 10px !important;
    min-height: 42px !important;
  }
  .shortcut-grid .card .name,
  .shortcut-grid .card .price {
    font-size: 9.5px !important;
  }

  /* 하단 결제 메뉴 6×2 — 폰트/높이 축소 */
  body.pos > .bottom-menu,
  body.pos > .bottom-menu-grid {
    min-height: 100px !important;
    padding: 5px !important;
    gap: 4px !important;
  }
  .bottom-menu-grid button {
    font-size: 10.5px !important;
    min-height: 38px !important;
    padding: 4px 3px !important;
    line-height: 1.15;
  }
  .bottom-menu-grid button .icon {
    font-size: 13px !important;
    margin-bottom: 1px !important;
  }
}

/* ──────────────────────────────────────────────
   ★ 세로 단말 (portrait + width ≤ 1100) — Easypos 1080×1920
   ────────────────────────────────────────────── */
@media (orientation: portrait) and (max-width: 1100px) {
  body.pos > .header { padding: 0 8px !important; gap: 4px !important; min-height: 48px; }
  body.pos > .header .info { gap: 6px !important; font-size: 9.5px !important; margin-left: 8px !important; }
  body.pos > .header .info span:nth-child(n+3) { display: none; }
  body.pos > .header .logo { width: 28px !important; height: 28px !important; font-size: 9px !important; }
  body.pos > .header .brand { font-size: 11.5px !important; }
  body.pos > .header .actions button,
  body.pos > .header .actions .link-btn {
    font-size: 9.5px !important; padding: 3px 6px !important;
  }

  /* portrait 에서 main 위/아래 스택 */
  body.pos > .main {
    flex-direction: column !important;
  }
  body.pos > .main > .left { flex: 0 0 auto !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
  body.pos > .main > .right { flex: 0 0 auto !important; width: 100% !important; }
}

/* ──────────────────────────────────────────────
   ★ 모바일 (768px 이하)
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.pos > .header .info { display: none !important; }
  body.pos > .main { flex-direction: column !important; gap: 8px !important; padding: 8px !important; }
  body.pos > .main > .left { flex: 0 0 auto !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; }
  body.pos > .main > .right { flex: 0 0 auto !important; width: 100% !important; }
  .bottom-menu-grid { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(4, 1fr) !important; }
  .bottom-menu-grid button { font-size: 10.5px; min-height: 44px; }
  .member-info { grid-template-columns: 1fr 1fr !important; }
  .sd-wrap { padding: 10px !important; }
  .sd-kpis { grid-template-columns: 1fr 1fr !important; }
  .sd-charts { grid-template-columns: 1fr !important; }
  .sd-tables { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .bottom-menu-grid { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(6, 1fr) !important; }
  .sd-kpis { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────
   ★ 수동 view-mode (헤더 PC/탭/모바일 버튼)
   ────────────────────────────────────────────── */
body.pos.mode-mobile > .header .info { display: none !important; }
body.pos.mode-mobile > .main { flex-direction: column !important; }
body.pos.mode-mobile .bottom-menu-grid { grid-template-columns: repeat(3, 1fr) !important; }
body.pos.mode-tablet > .header .info span:nth-child(n+5) { display: none !important; }
body.pos.mode-tablet .bottom-menu-grid { grid-template-columns: repeat(6, 1fr) !important; }