/* ═══════════════════════════════
   KM ERP — 모바일 최적화
   (max-width: 768px)
   ═══════════════════════════════ */

/* 스크롤바 공간 항상 예약 → 헤더 너비 일정하게 유지 */
html { scrollbar-gutter: stable; }

/* 데스크톱: 햄버거 버튼 숨김 */
#hamburger-btn { display: none; }

@media (max-width: 768px) {

  /* ─── 헤더 ─── */
  .header {
    flex-wrap: wrap;
    padding: 8px 14px;
    font-size: 14px;
    gap: 0;
    align-items: center;
  }

  /* ─── 햄버거 버튼 ─── */
  #hamburger-btn {
    display: flex;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: white;
    font-size: 20px;
    line-height: 1;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
    min-height: 30px;
    align-items: center;
    flex-shrink: 0;
  }

  /* ─── 네비게이션: 기본 숨김 ─── */
  .header-right {
    display: none !important;
    order: 99;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 4px;
  }

  /* ─── 네비게이션: 열림 상태 ─── */
  .header-right.open {
    display: flex !important;
  }

  /* ─── 네비게이션 각 항목 ─── */
  .header-right > a,
  .header-right > span {
    font-size: 12px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    width: auto;
  }
  .header-right > span {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    pointer-events: none;
    width: 100%;
    padding: 3px 4px 2px;
    border-bottom: none;
  }

  /* ─── 레이아웃 ─── */
  .container {
    padding: 8px;
    max-width: 100%;
  }

  /* ─── 카드 ─── */
  .card-body {
    padding: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card-title {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* ─── 테이블 스크롤 영역 ─── */
  #table-wrap,
  .table-wrap,
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── 테이블 ─── */
  table {
    font-size: 11px;
  }
  th {
    padding: 6px 5px;
    font-size: 11px;
  }
  td {
    padding: 5px 5px;
  }
  /* 표 안의 입력요소(수량 input, 박스NO input, select, 버튼)는 위의 버튼/입력창 터치타깃 확대(min-height:36px)를
     적용 안 함 — 표는 이미 촘촘한 데이터 나열용이라 늘어나면 행 하나하나가 위아래로 커져 목록이 너무 길어짐.
     (최근 동기화 상태점 버튼과 같은 원인의 문제 — 이번엔 표 전체로 확산 방지)
     ⚠️ 아래 버튼/입력창 규칙과 특이성이 같은 attribute-selector라 table 접두어로 살짝 더 높여서 이겨야 함. */
  table button {
    min-height: 26px;
    padding: 2px 6px;
    font-size: 12px;
  }
  table input[type="text"],
  table input[type="number"],
  table input[type="password"],
  table input[type="search"],
  table select {
    min-height: 26px;
    padding: 2px 6px;
    font-size: 12px;
  }

  /* ─── 페이지 가로 넘침 방지 ─── */
  html, body { overflow-x: hidden; }

  /* ─── RG 로켓입고: 테이블 컨테이너 가로 스크롤 ─── */
  .tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* sticky 헤더가 카드 밖으로 나오지 않도록 */
  .tbl-wrap table { min-width: max-content; }
  .tbl-wrap table th,
  .tbl-wrap table td {
    white-space: nowrap;
  }

  /* ─── RG 입고중/입고완료: 카드 내부 테이블 한 줄 스크롤 ─── */
  .rg-card-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rg-card-body table {
    min-width: max-content;
  }
  .rg-card-body table th,
  .rg-card-body table td {
    white-space: nowrap;
    font-size: 11px;
    padding: 4px 8px;
  }

  /* ─── 로켓입고 범례 바: 모바일 세로 스택 ─── */
  .inbound-legend-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    font-size: 11px;
    color: #555;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
  }
  .inbound-legend-bar button { margin-left: 0 !important; }

  /* ─── 급여관리 테이블: 줄바꿈 없이 가로 스크롤 ─── */
  #pay-sub-income table th,
  #pay-sub-income table td,
  #pay-sub-docs table th,
  #pay-sub-docs table td {
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 6px;
  }
  /* 급여대장 카드 타이틀 필터 모바일 줄바꿈 */
  #pay-sub-docs .card-title {
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
  }

  /* ─── 버튼 (터치 최적화) ─── */
  button {
    min-height: 36px;
    font-size: 13px;
    touch-action: manipulation;
  }
  .btn-sm {
    min-height: 28px;
    font-size: 12px;
    padding: 4px 8px;
  }

  /* ─── 입력창 ─── */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select {
    min-height: 36px;
    font-size: 14px;
    padding: 6px 10px;
    touch-action: manipulation;
  }

  /* ─── 검색행 ─── */
  .search-row {
    flex-wrap: wrap;
    gap: 6px;
  }
  .search-row input {
    min-width: 0;
  }

  /* ─── 탭 버튼 ─── */
  .tab-bar {
    flex-wrap: wrap;
    gap: 4px;
  }
  .tab-bar button,
  .tab-btn {
    font-size: 12px;
    padding: 6px 10px;
    min-height: 32px;
  }

  /* ─── 뱃지 ─── */
  .badge {
    font-size: 10px;
  }

  /* ─── 입고패킹 박스 카드 (compact 유지) ─── */
  #packing-summary-body button {
    min-height: 28px;
    font-size: 11px;
  }
  #packing-summary-body input[type="text"] {
    min-height: 28px;
    font-size: 12px;
    padding: 4px 8px;
  }
  #packing-summary-body select {
    min-height: 28px;
    font-size: 12px;
    padding: 3px 6px;
  }

}