/* ════════════════════════════════════════════════════════════════
   cj.css — 천지 ERP 전용 조정 (vc.css **뒤에** 로드)

   ★여기에는 "프로젝트 파라미터"만 둔다.★
   레이아웃 규칙 자체를 다시 쓰지 않는다 — 규칙의 정의처는 vc.css 한 곳이다(UI_기본검증규칙 §14-6).
   MAKE_UI 가 관리하는 파일이 아니므로 make-ui update 로 사라지지 않는다.
   ════════════════════════════════════════════════════════════════ */

/* ── 검색칸 라벨 폭 (52px → 76px) ────────────────────────────────
   공용 기본값 52px 은 VC 라벨(사업장·부서·사원·품목·기간 = 3글자 이하) 기준이다.
   천지 레거시 항목명은 `거래처 구분`·`품목명/코드`·`수주담당` 처럼 6글자가 흔해
   52px 에서는 말줄임(…)으로 잘린다 — scan-ui 가 '잘린 텍스트'로 잡는다.

   ★라벨을 width:auto 로 두지 않는다★ — 잘림은 없어지지만 줄마다 칸 x좌표가 어긋난다(§14-9).
   상세검색이 같은 이유로 이미 76px 고정을 쓰고 있어 값을 맞췄다.

   ⚠️ --fld-label 을 바꾸면 --fld-cell 도 ★반드시 같이★ 바꾼다(라벨 + 간격6 + 입력칸).
      한쪽만 바꿔 칸이 셀 경계와 어긋난 사고가 있었다(2026-08-06).
      한 줄 상한(max-width)은 vc.css 가 --fld-cell 로 계산하므로 자동으로 따라온다.

   ⚠️⚠️ ★입력칸 폭은 vc.css 의 --fld-w 에서 가져온다. 옛 숫자를 외워 쓰지 마라.★
      전에 282 = 76+6+200 으로 계산했는데, --fld-w 는 그 사이 216 으로 바뀌어 있었다.
      16px 이 모자라 ★전 화면 검색칸이 4px 씩 겹쳤다★(앞칸 입력상자가 뒷칸 라벨을 파고듦).
      화면이 "빽빽하고 지저분해" 보이던 가장 큰 원인이었다(VC 세션 실측 2026-08-09, 자체 재측정으로 확인).
      → --fld-w 를 줄여 맞추지 말 것. 기간칸(날짜2+~+번개)이 좁아져 ▾ 가 칸 밖으로 나간다.
        늘려야 하는 쪽은 ★셀★ 이다.
      확인: _verify/measure_ui.js — 검색칸 간격이 전부 ≥8px 이어야 한다. */
:root{ --fld-label:76px; --fld-cell:298px; }   /* 298 = 76 + 6 + 216(vc.css --fld-w) */

/* ── 화면 가장자리 여백 ─────────────────────────────────────────
   증상: 제목("수주현황 조회")이 브라우저 왼쪽·위 모서리에 ★딱 붙어★ 있었다(left 0 / top 0).
        검색패널·페이저도 마찬가지. 여백이 한 겹도 없으면 제품이 아니라 미완성 화면으로 보인다
        (VC 2차 캡처 실측 2026-08-09 — 숫자 지표로는 전부 '정상' 이라 오래 못 잡았다).
   ※ 전역 box-sizing:border-box + html,body{height:100%} 라서 padding 을 줘도 세로가 안 넘친다.
   ※ 화면(pages/*.html)마다 넣지 않는다 — 한 곳에서 정해야 전 화면이 같아진다. */
body{ padding:12px 14px; }
.vcs-head,.cj-bar,.cjd-head{ margin-bottom:8px; }
/* iframe 으로 끼워 넣는 껍데기(index)는 셸이 이미 여백을 준다 — 두 번 주면 안쪽이 밀린다 */
body.cj-embed{ padding:0; }

/* ── 그리드 컬럼 폭을 '지정한 대로' 고정 ────────────────────────────
   증상: 거래처코드에 width:90 을 줬는데 실제로는 228px 로 그려지고,
        경계를 드래그해 줄여도 곧바로 되돌아온다.
   원인: `table.grid{width:100%}` + table-layout **auto**.
        auto 레이아웃은 표를 컨테이너 폭에 맞추려고 남는 폭을 컬럼에 나눠 넣는데,
        이때 th 의 width/min/max 는 '참고값'일 뿐이라 지켜지지 않는다.
        (min/max 를 같이 준다는 기존 처방은 auto 레이아웃의 재분배까지는 못 막는다.)
   처방: UI_기본검증규칙 §2-1 대로 **table-layout:fixed** + 표 폭 = 지정 폭의 합.
        ★width 값 실측(1600px, 거래처 관리 12컬럼 / 지정합 1420)★
          max-content → 표 1602 · 거래처코드 228  ✗ (표 전체 '내용' 기준이라 소용없다)
          auto        → 표 1602 · 거래처코드 228  ✗
          min-content → 표 1421 · 거래처코드  90  ✓  (0 / 1px 도 같은 결과)
        fixed 레이아웃에서 표 폭이 지정 폭 합보다 작으면 브라우저가 합까지 늘려 주므로,
        min-content 를 주면 결과적으로 '지정 폭 그대로' 가 된다.
        → 표가 컨테이너보다 좁으면 오른쪽이 비지만, 그게 지정 폭을 지킨 상태다.
   ※ 이 규칙 때문에 **모든 컬럼에 width 를 준다.** 안 주면 그 컬럼이 최소폭으로 쭈그러든다.
   ※ fixed 는 넘치는 글자를 자르므로 말줄임을 반드시 같이 준다(§2-1: fixed + nowrap + ellipsis).
     잘린 글자는 셀에 마우스를 올리면 전문이 뜬다(vc-grid.js 가 td.title 을 붙인다).

   ★2026-08-09 추가 — 표가 화면을 안 채우고 중간에 끊기던 것★
     min-content 는 지정 폭을 정확히 지키지만, 컬럼이 적은 화면에서 표가 일찍 끝나
     오른쪽이 통째로 흰 종이였다(품목 정보 조회 = 표 1045 / 화면 1918 → ★873px 공백★).
     그렇다고 width:100% 만 주면 fixed 가 남는 폭을 컬럼에 ★비례 배분★ 해
     품목명 240px 이 441px 로 부풀어 지정 폭이 무의미해진다(실측).
     → width:100% + min-width:max-content 로 두고, ★맨 끝에 폭 없는 여백칸★(.vcg-filler)을
       vc-grid.js 가 붙인다. fixed 는 남는 폭을 전부 그 칸으로 몰아주므로
       ★다른 컬럼은 지정 폭 그대로★ 이면서 표는 화면을 채운다(110→110, 240→240 실측).
     컬럼이 많아 폭 합이 화면보다 크면 max-content 가 이겨 가로스크롤이 그대로 유지된다. */
.vcgrid-wrap table.grid{ table-layout:fixed; width:100%; min-width:max-content; }
/* 여백칸 — 글자도 테두리 강조도 없다. '표가 여기까지' 라는 바탕만 이어준다. */
.vcgrid-wrap table.grid th.vcg-filler,
.vcgrid-wrap table.grid td.vcg-filler{ padding:0; border-left:0; }
/* ★여백칸 ★앞★ 칸의 오른쪽 선도 지운다★ — 여백칸의 border-left 를 0 으로 해도
   선이 남아 보이는데, 그 선은 여백칸이 아니라 ★앞 칸이 그린 오른쪽 테두리★ 다.
   그대로 두면 표 한가운데에 세로줄이 아래까지 그어져 "표가 여기서 끝났다" 는 티가 난다
   (VC 3차 캡처 지적 2026-08-09). 머리글·본문·합계행 모두 같은 규칙이 필요하다. */
.vcgrid-wrap table.grid th:has(+ th.vcg-filler),
.vcgrid-wrap table.grid td:has(+ td.vcg-filler){ border-right:0; }
.vcgrid-wrap table.grid th,
.vcgrid-wrap table.grid td{ overflow:hidden; text-overflow:ellipsis; }
/* 합계행 첫 칸은 "이 페이지 100건 합계 / 전체 …" 라 한 칸을 넘는다 — 자르지 않는다.
   ⚠️ overflow:visible 만으로는 부족했다. 합계행 칸들은 position:sticky(bottom:0) 라
      칸마다 쌓임맥락이 생기고, ★뒤에 오는 칸이 흰 배경으로 넘친 글자를 덮는다.★
      캡처에서 "이 페이지 100건 ᄒ" 까지만 보이던 원인이다(2026-08-09 눈으로 확인).
      → 첫 칸을 z-index 로 위에 올려 옆 칸을 넘어가 보이게 한다.

   ⚠️⚠️ 예전엔 여기에 `background:transparent` 도 같이 줬는데 ★그게 더 나쁜 문제를 만들었다★ —
      칸이 투명해지니 sticky 로 떠 있는 합계행 뒤의 ★마지막 데이터 행이 그대로 비쳐★
      합계 글자와 본문 글자가 겹쳐 둘 다 못 읽었다(VC 5차 캡처 2026-08-10).
      배경은 옆 칸과 같이 두고, ★넘치는 글자는 span(.vcg-footlabel)이 배경을 끌고 간다★(vc-grid.js). */
.vcgrid-wrap table.grid tfoot td:first-child{ overflow:visible; z-index:3; white-space:nowrap; }

/* ── 전표(헤더+라인) 등록 화면 골격 — cj-doc.js ──────────────────
   좌: 전표 목록 / 우: 헤더 폼 + 라인 그리드. 그리드는 하단까지 채운다(패턴 A·C). */
.cjd-head{display:flex;align-items:center;gap:8px;padding:2px 2px 8px}
.cjd-title{font-size:15px;font-weight:800;color:var(--tx,#333)}
.cjd-msg{font-size:12.5px;font-weight:600}
.cjd-search{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 8px}
.cjd-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 8px;flex:none}
.cjd-fld{display:inline-flex;align-items:center;gap:6px}
.cjd-fld>label{font-size:12.5px;font-weight:600;color:var(--tx,#444);white-space:nowrap}
.cjd-fld input,.cjd-fld select{height:30px;font-size:12.5px;border:1px solid var(--bd,#ccd3db);border-radius:5px;padding:0 8px;width:130px}
.cjd-sub{font-size:12.5px;font-weight:700;color:var(--txm,#6b7684);padding:2px 2px 6px;flex:none}
.cjd-body{flex:1 1 0;min-height:0;display:grid;grid-template-columns:minmax(320px,1fr) minmax(480px,1.6fr);gap:10px}
.cjd-body>div{display:flex;flex-direction:column;min-height:0;min-width:0}
.cjd-grid{flex:1 1 0;min-height:0}
.cjd-right .cjd-grid{flex:1 1 0}

/* ── 현황 화면의 소계·총계 행 ────────────────────────────────────
   레거시 SQL 이 합계를 '행'으로 만들어 함께 내려준다(품목계·출고처계·총계).
   일반 행과 같은 모양이면 어디까지가 소계인지 안 보인다 → 배경·굵기로 구분한다.
   ※ 색은 토큰만 쓴다(하드코딩 hex 금지 — 다크 테마에서 깨진다). */
.vcgrid-wrap tbody tr.cjg > td{ font-weight:700; }
.vcgrid-wrap tbody tr.cjg-itemsub > td,
.vcgrid-wrap tbody tr.cjg-typesub > td,
.vcgrid-wrap tbody tr.cjg-outsub  > td,
.vcgrid-wrap tbody tr.cjg-custsub > td,
.vcgrid-wrap tbody tr.cjg-subtotal> td{ background:color-mix(in srgb, var(--ac, #2d73f5) 6%, var(--sf, #fff)); }
.vcgrid-wrap tbody tr.cjg-total > td{ background:color-mix(in srgb, var(--ac, #2d73f5) 14%, var(--sf, #fff)); }

/* ── 로그인 카드 — 입력칸을 카드 폭에 맞춘다 ─────────────────────────
   조회화면의 입력칸은 폭이 --fld-w(216px)로 고정돼 있다(칸 간격을 전부 같게 하려고).
   그 규칙이 로그인 카드에도 걸려서, 입력칸만 216px 로 좁고 [로그인] 버튼은 100% 라
   오른쪽 끝이 어긋나 보였다(2026-08-09 사장님 지적).
   로그인 카드는 한 줄에 칸이 하나뿐이라 폭을 맞출 이유가 없다 — 여기서만 예외로 늘린다. */
.login-card .fld > input:not([type=checkbox]):not([type=radio]),
.login-card .fld > select{ width:100%; flex:1 1 auto; height:42px; font-size:14px; padding:0 12px; }
.login-card .fld > label{ width:auto; min-width:0; text-align:left; font-size:13px; }