/* ============================================================
   pc-mod-master.css  —  기초정보(거래처/품목/목형) 레이아웃 규칙
   수정 금지: style.css, pc-polish.css
   ============================================================ */

/* CSP Phase 5: mes-cli.js 인라인 style 추출 클래스 (u-cli-*) */
@import url('./extracted-cli.css');

/* ── 1. 기초정보 테이블 가로 스크롤 제거 ───────────────────────
   u-scroll-x wrapper가 PC 화면에서 가로 스크롤을 만들지 않도록
   해당 3개 테이블을 감싸는 wrapper의 overflow-x를 visible로.
   모바일(@media) 예외는 하단에 별도 선언.
   ──────────────────────────────────────────────────────────── */
#t-cli  .u-scroll-x,
#t-prod .u-scroll-x,
#t-mold .u-scroll-x {
  overflow-x: visible !important;
  max-width: 100%;
}

/* 테이블 자체도 화면 폭에 맞게 — style.css의 min-width:900px 덮어쓰기 */
#cliTbl,
#prodTbl,
#moldTbl {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: fixed;
}

/* 체크박스 열은 고정 폭 유지 */
#cliTbl th:first-child,  #cliTbl  td:first-child,
#prodTbl th:first-child, #prodTbl td:first-child,
#moldTbl th:first-child, #moldTbl td:first-child {
  width: 36px !important;
  min-width: 36px !important;
  text-align: center;
  overflow: visible;
  white-space: normal;
}

/* 관리(마지막) 열 — 버튼 줄바꿈 방지 */
#cliTbl  td:last-child,
#prodTbl td:last-child,
#moldTbl td:last-child {
  white-space: nowrap;
  width: auto;
  overflow: visible;
}

/* 중간 셀 — 텍스트 말줄임으로 넘침 방지 */
#cliTbl  td:not(:first-child):not(:last-child),
#prodTbl td:not(:first-child):not(:last-child),
#moldTbl td:not(:first-child):not(:last-child) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0; /* table-layout:fixed 에서 flex처럼 공간 분배 */
}

/* ── 2. 카드/박스 내부 세로 스크롤 제거 ───────────────────────
   "안의 박스는 스크롤 X" — max-height + overflow-y 패턴 제거.
   페이지 자체 스크롤로 처리.
   ──────────────────────────────────────────────────────────── */
#t-cli  .card,
#t-prod .card,
#t-mold .card {
  overflow: visible !important;
  max-height: none !important;
}

/* ── 3. 사이드패널(ledger panel) 내 테이블 스크롤 제거 ─────────
   openProdLedgerPanel 에서 동적으로 생성되는 .u-scroll-x 처리.
   사이드패널(.ux-side-panel) 안에서도 가로 스크롤 X.
   JS가 생성하는 .ux-sp-sec / ux-advanced.js의 .ux-sp-section 모두 커버.
   ──────────────────────────────────────────────────────────── */
.ux-side-panel .u-scroll-x,
.ux-sp-sec .u-scroll-x,
.ux-sp-section .u-scroll-x {
  overflow-x: visible !important;
}

/* 사이드패널 내 .dt 테이블 — 폭 100%로 맞춤 */
.ux-side-panel table.dt,
.ux-sp-sec table.dt,
.ux-sp-section table.dt {
  min-width: 0 !important;
  width: 100% !important;
  table-layout: auto;
}

/* ── 4. 모바일 예외 — 좁은 화면에서는 가로 스크롤 허용 ─────────
   760px 미만에서는 기초정보 테이블도 스크롤 가능하도록.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  #t-cli  .u-scroll-x,
  #t-prod .u-scroll-x,
  #t-mold .u-scroll-x {
    overflow-x: auto !important;
  }

  #cliTbl,
  #prodTbl,
  #moldTbl {
    min-width: 600px !important;
    table-layout: auto;
  }
}

/* ── 5. 거래처 갤러리 뷰 — grid 반응형 (변경 없음, 확인용) ────── */
#cliGalleryArea,
#prodGalleryArea {
  /* grid-template-columns은 JS에서 인라인으로 설정됨 — 여기서는 건드리지 않음 */
  overflow: visible;
}