/* ════════════════════════════════════════════════════════════
   ★ 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 가로형 단말) 전용
   ★ 사장 명시 2026-05-29: 실제 단말 사진 확인 — 짤림 다발 → 미디어쿼리 확장
   ★ 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) — 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; }

/* ── 2026-07-18 관리자 헤더 겹침 수정 ──
   pos.css 는 mode-mobile/tablet 에서 .admin-header{height:auto;flex-wrap:wrap} 로 맞춰두었으나
   pos-theme-base.css 의 .admin-header{height:56px !important} 가 이를 덮어써 헤더가 안 늘어나고
   감싸진 2·3번째 줄(브랜드/메뉴/우측 컨트롤)이 아래로 삐져나와 본문을 덮었음.
   모바일/태블릿 모드에서만 높이를 auto 로 되돌려 컨트롤이 하단으로 정상 줄바꿈되게 함. (PC 모드는 56px 유지) */
body.mode-mobile .admin-header,
body.mode-tablet .admin-header { height: auto !important; }

/* ── 🔴 2026-07-18 실사고 대응: 계산화면 장바구니 스크롤 복원 ──
   pos.css 는 .cart 에 overflow-y:auto 로 스크롤을 열어두었으나,
   뒤에 로드되는 pos-theme-base.css 의 .cart{overflow:hidden} 이 이를 덮어써
   **목록이 화면을 넘쳐도 스크롤이 전혀 안 되는 상태**였다.
   → 아래쪽 상품을 볼 방법이 없어(▲▼ 눌러도 화면이 안 따라감) 계산원이
     반복해 누르다 바로 옆 [전체취소] 를 눌러 장바구니가 통째로 지워지는
     사고 발생(물건은 이미 나감). 스크롤을 되살린다. */
.cart { overflow-y: auto !important; }
/* 터치 스크롤 관성 + 스크롤바를 눈에 보이게(스크롤 가능함을 알 수 있도록) */
.cart { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.cart::-webkit-scrollbar { width: 10px; }
.cart::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.cart::-webkit-scrollbar-track { background: #f1f5f9; }

/* ════════ 2026-07-18 사장님 요청: 계산화면 비율·글자 정리 ════════
   "금액만 크면 되고 글씨들은 작게. 면세는 필요할 때만. 상품리스트 칸이 더
    많이 보이면 된다 — 7:3 비율. 균일가 타일 글씨도 작아도 된다."
   → ①상품리스트가 남는 공간을 전부 차지(7:3 이상) ②합계 영역 압축
     ③금액만 크게 ④나머지 글씨 축소 */

/* ① 상품리스트(.cart) 가 좌측 남는 공간을 모두 차지 — pos.css 의 flex 를
      pos-theme-base 가 덮어 45% 밖에 안 되던 것 교정 */
.left > .cart { flex: 1 1 auto !important; min-height: 0 !important; }
.left > .totals { flex: 0 0 auto !important; }

/* ② 합계 영역 압축 (줄 간격·글자 축소) — 리스트에 공간 양보 */
.totals { font-size: 12px !important; padding: 6px 10px !important; gap: 0 !important; }
.totals > div { padding: 1px 0 !important; line-height: 1.35 !important; }
.totals > div > span { font-size: 12px !important; color: #64748b !important; }

/* ③ 🔴 금액만 크게 — 판매금액 열 + 받을금액 */
.cart tbody td:nth-child(5),
.cart tbody td:nth-child(5) b { font-size: 17px !important; font-weight: 900 !important; }
.totals > div:last-child b,
.totals > div b#t_due, .totals b#t_due { font-size: 26px !important; font-weight: 900 !important; }
.totals > div b { font-size: 15px !important; font-weight: 800 !important; }

/* ④ 나머지 글씨는 작게 — 상품명·단가·수량·헤더 */
.cart tbody td { font-size: 13px !important; }
.cart tbody td:nth-child(2) { font-size: 13px !important; }
.cart thead th { font-size: 11px !important; padding: 6px 4px !important; }
.cart tbody tr { line-height: 1.25 !important; }

/* ⑤ 균일가·단축키 타일 글씨 축소 (칸은 그대로, 글자만) */
#shortcut_grid button { font-size: 12px !important; line-height: 1.2 !important; }
#cat_tabs button, #sub_tabs button { font-size: 12px !important; }
/* ⑥ 받을금액(핵심 숫자)만 크게 — 실제 id 는 #t_pay */
.totals b#t_pay { font-size: 27px !important; font-weight: 900 !important; }
.totals .big > span { font-size: 13px !important; font-weight: 800 !important; color: #334155 !important; }
.totals .big { padding: 3px 0 !important; }
/* 0 원이라 숨긴 행 */
.totals > div.row-zero-hide { display: none !important; }

/* ⑦ 2026-07-18 — "상품리스트가 더 많이 보이게" 추가 압축.
   작은 POS 모니터(좌측 532px)에서는 고정요소(버튼42+바코드44+라벨29+합계) 때문에
   카트 70% 가 물리적으로 불가 → **행 높이를 줄여 한 화면에 보이는 상품 수**를 늘린다. */
/* 상품 행 컴팩트 — 바코드 보조줄 축소 */
.cart tbody td { padding: 4px 5px !important; }
.cart tbody td:nth-child(2) div { font-size: 0.58rem !important; margin-top: 0 !important; line-height: 1.1 !important; }
/* 합계 더 압축 */
.totals { padding: 4px 10px !important; }
.totals > div { padding: 0 !important; line-height: 1.25 !important; }
.totals > div > span { font-size: 11px !important; }
.totals > div b { font-size: 14px !important; }
.totals b#t_pay { font-size: 25px !important; }
/* 라벨바가 비어 있으면 자리 차지하지 않게 */
#posLblBar:empty { display: none !important; margin: 0 !important; }

/* ⑧ flex-basis 를 0 으로 — auto 는 콘텐츠 기준이라 남는 공간을 다 못 가져갔음(실측 41%).
   0 으로 두면 카트가 좌측의 남은 공간 전체를 차지한다. */
.left > .cart { flex: 1 1 0 !important; }
/* 행 더 컴팩트 — 한 화면에 보이는 상품 수 증가 */
.cart tbody td { padding: 2px 5px !important; }
.cart tbody td:nth-child(2) { line-height: 1.15 !important; }

/* ⑨ main.html 안의 인라인 <style> 이 .cart tbody td{padding:9px!important} 로
   외부 CSS 를 이기고 있어(인라인 style 태그가 뒤에 옴) 행이 안 줄었다.
   → body 접두사로 특이도를 높여(0,1,3 > 0,1,2) 확실히 적용. */
body .cart tbody td { padding: 3px 5px !important; font-size: 13px !important; }
body .cart tbody td:nth-child(5) { font-size: 17px !important; font-weight: 900 !important; }
body .cart tbody td:nth-child(2) div { font-size: 0.56rem !important; line-height: 1.05 !important; margin-top: 0 !important; }
body .cart thead th { padding: 5px 4px !important; font-size: 11px !important; }
/* 라벨바 여백 제거 — 리스트에 공간 양보 */
body #posLblBar { margin: 0 !important; }

/* ⑩ 2026-07-18 사장님: "할인금액 받은금액은 작아도 된다" */
body .totals > div:has(#t_disc) > span, body .totals > div:has(#t_disc) b,
body .totals > div:has(#t_received) > span, body .totals > div:has(#t_received) b,
body .totals > div:has(#t_round) > span, body .totals > div:has(#t_round) b { font-size: 10.5px !important; color:#94a3b8 !important; font-weight:700 !important; }

/* ⑪ 2026-07-18 사장님: "결제수단 크기 맞춰. 비는 칸(지역화폐 옆)에 회원조회와 결제수단을 넣어줘"
   main.html 인라인 <style> 이 pay-main 을 grid-column:1/3(2칸) + 66px 로 키워
   혼자 줄을 차지하고 지역화폐 옆이 비어 있었다. → 다른 버튼과 같은 1칸 크기로 통일.
   (body 접두사로 인라인 style 태그의 !important 를 이김) */
/* ★ 2026-07-23 사장님 "결제하기 버튼은 크게" — 0718 축소 규칙을 결제버튼에서 해제.
   0718 당시엔 결제수단 아이콘 5개가 하단에 깔려 자리가 모자라 같은 크기로 맞췄지만,
   0723 에 아이콘을 걷어내고 결제를 전체화면 페이지로 바꿔 하단이 7개로 줄었다.
   .primary 축소는 다른 버튼에 필요하므로 유지하고, pay-main 만 예외로 둔다. */
body .bottom-menu.bottom-menu-grid button.primary:not([data-role="pay-main"]) {
  grid-column: auto !important;
  min-height: 52px !important;
  font-size: 13px !important;
}
body .bottom-menu.bottom-menu-grid button[data-role="pay-main"] {
  grid-column: 1 / -1 !important;
  min-height: 84px !important;
  font-size: 22px !important;
}

/* ⑫ 2026-07-18 사장님: "균일가 아이콘 너무 커. 글자 크기도 작게"
   main.html 인라인 <style> 이 label 15px / price 17px / 타일 92px 로 키워놨음.
   body 접두사로 특이도를 이겨 타일·글자를 함께 축소 → 한 화면에 더 많이 보임. */
body .shortcut-grid { grid-auto-rows: minmax(62px, auto) !important; gap: 5px !important; }
body .shortcut-grid button { padding: 5px 4px !important; gap: 2px !important; font-size: 11px !important; border-radius: 7px !important; }
body .shortcut-grid button .label { font-size: 11.5px !important; line-height: 1.15 !important; font-weight: 700 !important; }
body .shortcut-grid button .price { font-size: 12.5px !important; font-weight: 800 !important; }
body .shortcut-grid .auto-col-head { font-size: 10.5px !important; }