/* ════════════════════════════════════════════════════════════════
   vc.css — VC 시리얼관리 디자인 토큰 + 공통 컴포넌트
   아마란스10 톤앤매너 (실화면 분석 기준: 흰 배경·블루 포인트·회색 그리드헤더)
   PC + 모바일 반응형
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── 테마 토큰 (사용자 조정 대상 — vc-theme.js가 :root에 덮어씀) ── */
  --bg:  #f5f6f8;   /* 배경면 */
  --sf:  #ffffff;   /* 표면1 — 카드·사이드바·상단바 */
  --sf2: #eef1f5;   /* 표면2 — 헤더행·입력·호버 */
  --bd:  #d9dee5;   /* 테두리 */
  --tx:  #222831;   /* 기본 글자 */
  --txm: #6b7684;   /* 보조 글자 */
  --txd: #9aa4b2;   /* 흐린 글자 */
  --ac:  #2d73f5;   /* 강조 */
  --ac2: #1d5fd6;   /* 강조(진/밝) */
  --font-scale: 1;  /* 글자 배율 (vc-theme.js가 갱신, 모달 보정에 사용) */

  /* ── 시맨틱 별칭 (토큰에서 파생 — 기존 컴포넌트 호환) ── */
  --primary: var(--ac);
  --primary-dark: var(--ac2);
  --primary-bg: color-mix(in srgb, var(--ac) 12%, var(--sf));
  --danger: #dc2626;
  --ok: #16a34a;
  --text: var(--tx);
  --text-sub: var(--txm);
  --line: var(--bd);
  --panel: var(--sf);
  --header-bg: var(--sf2);
  --header-fg: var(--tx);
  --header-line: var(--bd);
  --row-first: color-mix(in srgb, var(--ac) 13%, var(--sf));
  --row-hover: color-mix(in srgb, var(--ac) 7%, var(--sf));
  --footer-bg: var(--sf2);
  --gnb-bg: #2b3440;
  --gnb-w: 232px;
  --gnb-w-min: 52px;
  --topbar-h: 48px;
  --radius: 8px;
  --shadow: 0 2px 10px rgba(20, 30, 50, .08);
  --font: 'Pretendard', 'Malgun Gothic', '맑은 고딕', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 13px; }

/* ── 버튼 ── */
/* 버튼 라벨은 ★가로 가운데 정렬★ (사장님 지시 2026-08-02) — justify-content 가 없으면
   min-width 를 준 버튼(확인·닫기·취소 등)에서 글자가 왼쪽으로 쏠린다. */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center;
  gap: 6px; height: 30px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--sf); color: var(--text); font-size: 13px; }
.btn:hover { background: var(--sf2); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.danger { background: var(--sf); border-color: var(--danger); color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }

/* ── 폼 필드 ── */
.fld { display: flex; align-items: center; gap: 8px; }
.fld > label { width: 84px; color: var(--text-sub); font-size: 12px; flex: none; text-align: right; }
.fld input, .fld select { height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; width: 100%; background: var(--sf); color: var(--text); }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(45,115,245,.15); }
.fld input[readonly] { background: var(--sf2); }
/* 체크박스는 공통 input 스타일(30px 박스) 제외 — 작게(전 화면 공통, 편집그리드와 동일 규격) */
.fld input[type=checkbox] { width: 15px; height: 15px; min-width: 15px; padding: 0; margin: 0; accent-color: var(--primary); cursor: pointer; box-shadow: none; }

/* ── 카드/패널 ── */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ── 메시지 ── */
.msg-ok { color: var(--ok); font-size: 12.5px; }
.msg-err { color: var(--danger); font-size: 12.5px; }

/* ════════ 로그인 페이지 ════════ */
.login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2d73f5 0%, #1b4fc4 55%, #133a96 100%); padding: 20px; }
.login-card { width: 380px; max-width: 100%; background: rgba(255,255,255,.97); border-radius: 14px;
  padding: 34px 30px 26px; box-shadow: 0 18px 50px rgba(10, 25, 60, .35); }
.login-brand { font-size: 13px; font-weight: 700; color: var(--primary); letter-spacing: .4px; }
.login-title { font-size: 24px; font-weight: 800; margin: 4px 0 2px; }
.login-sub { font-size: 12.5px; color: var(--text-sub); margin-bottom: 22px; }
.login-card .fld { flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 13px; }
.login-card .fld > label { width: auto; text-align: left; }
.login-btn { width: 100%; height: 42px; border: none; border-radius: 8px; background: var(--primary);
  color: #fff; font-size: 15px; font-weight: 700; margin-top: 6px; }
.login-btn:hover { background: var(--primary-dark); }
.login-btn:disabled { opacity: .6; }
.login-foot { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--text-sub); }

/* ════════ 앱 셸 (좌측 메뉴 + 상단바 + 컨텐츠) ════════ */
.shell { display: flex; height: 100vh; overflow: hidden; }

/* 좌측 메뉴 (아마란스풍 라이트 — 숨김/축소 가능) */
.gnb { width: var(--gnb-w); background: var(--sf); color: var(--tx); display: flex; flex-direction: column;
  transition: width .18s ease; flex: none; border-right: 1px solid var(--line); }
.shell.gnb-min .gnb { width: var(--gnb-w-min); }
.gnb-head { height: var(--topbar-h); display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--sf); color: var(--text); font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--line); }
.gnb-head .logo-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; flex: none; font-weight: 800; }
.shell.gnb-min .gnb-head .logo-text { display: none; }
.gnb-menu { flex: 1; overflow-y: auto; padding: 6px 0; }
.gnb-group { margin-bottom: 1px; }
.gnb-group > .grp-title { display: flex; align-items: center; gap: 9px; padding: 9px 16px; font-size: 12.5px;
  color: var(--txm); font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; }
.gnb-group > .grp-title:hover { color: var(--primary); }
.gnb-group > .grp-title .ico { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; flex: none; color: var(--txd); }
.gnb-group > .grp-title:hover .ico { color: var(--primary); }
.gnb-group > .grp-title .caret { margin-left: auto; font-size: 10px; color: var(--txd); transition: transform .15s; }
.gnb-group.closed > .grp-title .caret { transform: rotate(-90deg); }
.shell.gnb-min .grp-title .txt, .shell.gnb-min .gnb-item .txt, .shell.gnb-min .grp-title .caret { display: none; }
.gnb-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px 8px 43px; font-size: 13px;
  color: var(--tx); cursor: pointer; white-space: nowrap; border-left: 3px solid transparent; }
.shell.gnb-min .gnb-item { padding-left: 16px; }
.gnb-item:hover { background: var(--sf2); color: var(--text); }
.gnb-item.active { background: var(--primary-bg); color: var(--primary-dark); border-left-color: var(--primary); font-weight: 700; }
.gnb-group.closed .gnb-item { display: none; }
.gnb-foot { padding: 9px 14px; font-size: 11px; color: var(--txd); border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; }

/* 상단바 */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: var(--topbar-h); background: var(--sf); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 14px; flex: none; }
.topbar .menu-toggle { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--sf); color: var(--tx); font-size: 15px; }
.topbar .crumb { font-size: 14px; font-weight: 700; }
.topbar .spacer { flex: 1; }
.topbar .user { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-sub); }
.topbar .user b { color: var(--text); }

/* 컨텐츠 */
.content { flex: 1; overflow: auto; padding: 14px; }
.content .placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 10px; color: var(--text-sub); }
.content .placeholder .big { font-size: 38px; }

/* ── 그리드 (아마란스풍) ── */
table.grid { width: 100%; border-collapse: collapse; background: var(--sf); color: var(--tx); }
/* ★행 높이 규격 — 전 그리드 공통 · 여기가 유일한 정의처★ (대표님 지시 2026-08-08)
     · 머리글 30px · 데이터행 30px 로 못박는다. 화면별로 다시 정의하지 마라.
     · 왜 못박나 — 글자만 있는 칸(약 22px)과 ★입력창이 들어간 칸★(24px+기준선여백)이
       높이가 달라, S/N 등록 모달처럼 좌우 그리드가 나란히 서면 줄이 어긋나 보였다(좌 30 / 우 33).
       천지 V2 에서도 머리글줄 31 · 필터줄 27 로 갈려 표 상단이 어긋났다(2026-08-09 실측).
     · height 는 표에서 '최소높이'로 동작한다 → 내용이 크면 늘어나므로 글자가 잘리지 않는다. */
table.grid th { position: sticky; top: 0; background: var(--header-bg); color: var(--header-fg); font-weight: 700;
  font-size: 12px; height: 30px; padding: 4px 8px; border: 1px solid var(--header-line); border-bottom: 1px solid var(--bd); white-space: nowrap; z-index: 2; }
table.grid td { height: 30px; padding: 2px 8px; line-height: 1.4; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
/* 칸 안의 요소가 글자 기준선에 얹히면 아래로 여백이 더 생겨 그 행만 높아진다 → 가운데로 붙인다.
   (블록 요소에는 영향이 없다 — 기준선에 얹히는 inline/inline-block 만 교정된다) */
table.grid td > *, table.grid th > * { vertical-align: middle; }
/* 칸 안에 들어가는 컨트롤은 26px 이하 — 그래야 위아래 여백 2px 과 합쳐 행 30px 이 유지된다 */
table.grid td input:not([type=checkbox]), table.grid td select, table.grid td .veg-view { max-height: 26px; }
/* ★화면이 직접 그린 맨 div 도 같은 규격★ — 위 목록은 input·select·.veg-view 만 잡아서
   `<div>1</div>` 처럼 클래스 없는 div 를 셀에 넣은 화면만 행이 31px 로 1px 높았다
   (품목 추가정보 등록 · 품목분류 등록 · 출고계획 등록 — VC 7차 전수검사 2026-08-10).
   "모든 그리드의 셀 높이는 공통" 이 사장님 지시라 1px 이라도 맞춘다.
   ※ 코드도움(.veg-help)처럼 안에 버튼을 품은 묶음은 제외한다 — 눌러 열어야 해서 높이를 죄면 안 된다. */
table.grid td > div:not(.veg-help):not([class*="cjh"]) { max-height: 26px; line-height: 24px; }
/* ★체크박스 크기 — 전 그리드 공통 · 여기가 유일한 정의처★ (대표님 지시 2026-08-08 · VC 에서 흡수 2026-08-11)
     머리글(th)에는 규칙이 없어 브라우저 기본크기가 나오고 데이터칸(td)만 15px 라, 한 표 안에서
     체크박스 크기가 제각각으로 보였다. 머리글·데이터칸을 같은 값으로 못박는다. */
table.grid th input[type=checkbox], table.grid td input[type=checkbox] {
  width: 15px; height: 15px; min-width: 15px; margin: 0 auto; padding: 0;
  display: block; cursor: pointer; accent-color: var(--primary, #2d73f5); box-shadow: none; }
/* ★검색줄 콤보·입력칸 = 데이터칸 컨트롤과 같은 크기★ (대표님 지시 2026-08-08 · VC 에서 흡수 2026-08-11)
     예전엔 검색줄 22px / 데이터칸 26px 이라 같은 열에서 콤보 크기가 달라 보였다. 24px 로 맞춘다.
     ※ 클래스만 정의한다 — 이 클래스를 붙이는 쪽은 vc-grid.js 의 헤더 검색칸이다. */
table.grid .vcg-filter-ctl { width:100%; height:24px; border:1px solid var(--bd,#ccd3db); border-radius:4px;
  font-size:11px; padding:0 4px; background:#fff; box-sizing:border-box; vertical-align:middle; }
table.grid tbody tr:hover { background: var(--row-hover); }
table.grid tbody tr.selected { background: var(--row-first); }
table.grid tfoot td { background: var(--footer-bg); font-weight: 700; border-top: 1px solid var(--header-line); }
/* 공통 컬럼 리사이즈 핸들 (드래그=폭조정 / 더블클릭=내용맞춤) — vc-common.js가 처리 */
.vc-colgrip { position: absolute; top: 0; right: -1px; width: 8px; height: 100%; cursor: col-resize; user-select: none; z-index: 4; }
.vc-colgrip:hover { background: var(--ac); }

/* ── 모바일 (반응형 — 요구사항: PC+모바일 동시) ── */
@media (max-width: 768px) {
  .gnb { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  .shell.gnb-open .gnb { transform: translateX(0); width: var(--gnb-w); }
  /* ★넓은 화면에서 메뉴를 접어둔(gnb-min) 채 창을 좁히면, 서랍을 열어도 라벨이 계속 숨겨져
     아이콘만 보이던 문제 — 서랍이 열린 동안에는 접힘 상태를 무시하고 글자를 되살린다. */
  .shell.gnb-open.gnb-min .gnb { width: var(--gnb-w); }
  .shell.gnb-open.gnb-min .gnb-head .logo-text,
  .shell.gnb-open.gnb-min .grp-title .txt,
  .shell.gnb-open.gnb-min .gnb-item .txt { display: inline; }
  .shell.gnb-open.gnb-min .grp-title .caret { display: inline; margin-left: auto; }
  .shell.gnb-open.gnb-min .gnb-item { padding-left: 43px; }
  .gnb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 40; }
  .shell.gnb-open .gnb-backdrop { display: block; }
  .content { padding: 10px; }
  .fld > label { width: 70px; }
  /* 터치 타깃 — 버튼/입력 높이 확대 (a11y) */
  .btn { height: 36px; }
  .fld input, .fld select { height: 34px; }
  .topbar .menu-toggle { width: 38px; height: 38px; }
}

/* ════════ 글자배율(html zoom) 모달 보정 — 규격서 §7 (래퍼 역zoom + 박스 재zoom + 화면내 캡) ════════
   글자 크기를 키우면 html에 zoom이 걸려 position:fixed 모달이 화면 밖으로 밀린다.
   VC 모달은 [래퍼 > 마스크 + 박스] 구조라, 래퍼에 역-zoom(=net 1, 마스크 정위치) + 박스에 재-zoom(내용 확대)
   + max-height/width 를 1/배율로 캡해 항상 화면 안에 들어오게 한다. 본문 내부스크롤로 버튼 항상 도달. */
#vc-snm, #vc-snr, #vc-snerr, #vc-help, #vc-snb { zoom: calc(1 / var(--font-scale, 1)); }
#vc-snm .snm-box, #vc-snr .snr-box, #vc-snerr .snm-errbox, #vc-help .vch-box, #vc-snb .snb-box {
  zoom: var(--font-scale, 1);
  max-height: calc(94vh / var(--font-scale, 1));
  max-width:  calc(97vw / var(--font-scale, 1));
}
/* 직접 박스(래퍼 없는 소형 유틸): 높이만 캡 */
#vc-coldlg, #vc-calc { max-height: calc(88vh / var(--font-scale, 1)); }

/* ════════════════════════════════════════════════════════════════
   검색칸 규격  ★여기가 유일한 정의처★   (2026-08-05 확정)
     엔진(vc-screen.js)과 화면 인라인에 같은 규칙이 흩어져 있어 서로 덮어썼다.
     전부 걷어내고 이 블록 하나만 남긴다. !important 로 덮지 말 것 —
     덮어야 한다면 앞 규칙이 틀린 것이니 앞 규칙을 고친다.

     칸 폭 200 · 라벨 52 · 라벨↔칸 6 · 칸 사이 12 → 한 칸 258px
     한 줄 5칸 고정 (auto-fill 금지: 화면 배율 바꾸면 열 수가 변해 칸이 움직인다)
   ════════════════════════════════════════════════════════════════ */
/* 칸 규격 — 라벨 최대치(출고담당자 5자 ≈ 66px) + 컨트롤(216px) + 여백이 한 칸에 들어가야 한다.
   274px 이면 컨트롤이 11px 삐져나가 옆칸 라벨에 달라붙었다(2026-08-06 출고등록관리 실측). */
/* 라벨 66px — 5글자(창고담당자·거래처그룹)까지 안 잘리고, 위·아래 줄의 칸이 세로로 맞는다.
   52px 이면 긴 라벨만 넓어져 아래줄이 10px 씩 어긋났다(2026-08-06 실측). */
:root{--fld-w:216px;--fld-label:66px;--fld-cell:290px}

/* 한 줄 최대 5칸. 칸 크기는 고정이되 ★화면이 좁으면 칸 수가 줄며 접힌다★.
   5칸으로 못박으면(=repeat(5,..)) 좁은 화면에서 넘쳐 조회버튼을 밀어낸다.
   max-width 로 5칸까지만 허용하므로 넓은 화면에서도 6칸으로 벌어지지 않는다. */
/* ⚠️ auto-fit 으로 바꿔 봤지만 ★빈 트랙이 접히지 않았다★(실측: 조건 3개인데 304px 트랙 5개 그대로).
   부모가 max-content 로 크기를 정하는 중이라 접힘 판정이 안 걸린다. auto-fill 로 되돌리고,
   대신 ★칸 수만큼만 max-width★ 를 vc-screen.js 가 직접 계산해 넣는다(2026-08-09). */
.vcs-fields,.oe-row,.om-row{
  display:grid;grid-template-columns:repeat(auto-fill,var(--fld-cell));
  max-width:calc(var(--fld-cell) * 5 + 12px * 4);
  gap:6px 12px;align-items:center;justify-content:start;min-width:0}
.vcs-fields>.vcs-fld,.vcs-fields>.fld,.oe-row>.fld,.om-row>.fld{
  display:flex;align-items:center;gap:6px;min-width:0}
.vcs-fld>label,.fld>label{
  flex:none;width:var(--fld-label);min-width:var(--fld-label);
  text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:12.5px;font-weight:600;color:var(--tx,#444c56)}

/* 코드도움 칸 — 모든 칸이 같은 폭 */
.vcs-help-ctl{display:flex;align-items:center;flex:none;width:var(--fld-w);
              min-width:0;position:relative;flex-wrap:nowrap}
.vcs-help-ctl>input{flex:1 1 auto;min-width:0;width:100%;padding:0 50px 0 9px}

/* 기간 칸 — 코드도움 칸과 같은 폭. 날짜 2개 + 물결 + 번개가 다 들어간다 */
.vcs-range{display:flex;align-items:center;gap:2px;flex:none;width:var(--fld-w);
           height:30px;padding:0 3px;border:1px solid var(--bd,#ccd3db);border-radius:6px;
           background-color:#fff;overflow:visible}
/* ★기간칸★ — 폭은 다른 칸과 똑같이 200px 를 지킨다(칸 간격이 전부 같아야 한다는 규칙).
   폭을 키웠더니 옆칸(거래처)을 밀어 라벨이 달라붙었다(2026-08-06).
   대신 안쪽을 아낀다: 달력아이콘 12px·물결 6px·번개 16px → 날짜칸 82px 확보. */
/* ★.vcs-dateinput 을 두 번 적는다★ — 달력을 커스텀으로 바꾸면서 날짜칸이 type=text 가 되어,
   화면마다 정의한 `.xx-row input[type=text]{font-size/padding}` 규칙에 걸려 글자가 커지고
   아이콘 자리가 사라졌다(2026-08-06 감사로그에서 3px 잘림). 우선순위를 올려 공용이 이기게 한다.
   ※ !important 를 쌓지 말고 선택자 우선순위로 해결한다 — 규격 14-12 */
.vcs-range input[type=date],.vcs-range .vcs-dateinput.vcs-dateinput{
  border:none;background-color:transparent;height:26px;flex:1 1 0;
  min-width:0;width:auto;font-size:11.5px;padding:0 14px 0 0;text-align:center;
  background-position:right 1px center;background-size:12px 12px}
.vcs-range>span{flex:none;color:var(--txd,#9aa4b2);font-size:11px;width:6px;text-align:center}
.vcs-preset{flex:none;width:16px;min-width:16px;height:26px;border:none;background:transparent;
            color:var(--txm,#6b7684);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}
.vcs-preset:hover{color:var(--ac,#2d73f5)}

/* 체크박스 묶음처럼 긴 항목은 두 칸 — 열 위치는 그대로 유지 */
.vcs-fields>.vcs-fld:has(input[type=checkbox]),.oe-row>.fld:has(input[type=checkbox]),
.om-row>.fld:has(input[type=checkbox]){grid-column:span 2}
.vcs-fld:has(input[type=checkbox])>label:first-child{width:auto;min-width:auto}

/* 조회 버튼 — 정사각형 돋보기, 항상 우측 상단 */
.vcs-topact{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.vcs-searchbtn{width:34px;height:34px;min-width:34px;padding:0;border-radius:7px;
               display:inline-flex;align-items:center;justify-content:center;font-size:0;color:#fff}
.vcs-searchbtn svg{display:block;width:16px;height:16px}

/* 검색패널이 넘쳐 조회버튼을 가리지 않도록 */
.vcs-search>[data-basic],.vcs-search>.vcs-ext{min-width:0;overflow:visible}
.vcs-topact{flex:none;align-self:start}

/* 검색패널 = 칸 영역 + 우측 상단 조회버튼 (엔진·수기 화면 공통) */
.vcs-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:start;position:relative}
.vcs-search>.vcs-topact{grid-row:1;grid-column:2;justify-self:end;align-self:start}
.vcs-search>.vcs-btnrow,.vcs-search>.vcs-ext{grid-column:1 / -1}

/* ════════════════════════════════════════════════════════════════
   버튼 표준 (대표님 지시 2026-08-05)
     · 색상 없앤다 — 저장·주문확정·출고의뢰 등 전부 흰 배경. 화면이 알록달록하면 어디를 봐야 할지 모른다
     · 빨간 테두리(삭제)도 없앤다
     · 크기 통일 — 조회·추가·삭제·저장이 제각각이면 각이 안 맞는다
     · ★유일한 예외 = 조회 돋보기★ 파란색 유지. 이것만 눈에 띄면 된다
   ════════════════════════════════════════════════════════════════ */
.btn,.btn.primary,.btn.danger{
  height:30px;min-width:92px;padding:0 14px;
  background:var(--sf);border:1px solid var(--line);color:var(--text);font-weight:500}
.btn:hover,.btn.primary:hover,.btn.danger:hover{background:var(--sf2);border-color:var(--line)}
.btn:disabled{opacity:.5;cursor:default}

/* 조회 돋보기 — 유일하게 색을 쓴다. 정사각형, 다른 버튼과 같은 높이 */
.vcs-searchbtn,.btn.vcs-searchbtn,.btn.primary.vcs-searchbtn{
  width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;
  background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important;
  display:inline-flex;align-items:center;justify-content:center;font-size:0;border-radius:6px}
.vcs-searchbtn:hover{background:var(--primary-dark)!important;border-color:var(--primary-dark)!important}
.vcs-searchbtn svg{display:block;width:15px;height:15px}

/* 화면 전용 버튼 변종(btn-req 등)도 표준과 동일하게 — 색·크기 예외 없음 */
.btn[class*="btn-"]{background:var(--sf)!important;border-color:var(--line)!important;color:var(--text)!important}
.sec-btns .btn,.veg-bar .btn{height:30px;min-width:80px}

/* 편집그리드 날짜·구분 칸 — td 자체도 가운데 (내부 span 만 맞추면 td 는 여전히 왼쪽) */
.vcgrid-wrap td:has(.veg-ctr),.vcgrid-wrap td:has(input[type=date]),.vcgrid-wrap td:has(select){text-align:center}

/* ────────────────────────────────────────────────────────────
   규격 적용 범위 확대 (2026-08-05)
     ① 검색줄 클래스가 화면마다 달랐다(vcs-fields·sr-row·al-row·oe-row·om-row).
        → .vcs-search 바로 아래 줄이면 클래스 이름과 무관하게 규격을 적용한다.
     ② 코드도움이 아닌 ★일반 입력칸★(접수유형·상품·고객명 등)에는 폭 규칙이 없어
        내용에 따라 제멋대로 늘어났다. 같은 폭으로 묶는다.
   ──────────────────────────────────────────────────────────── */
.vcs-search>div:not(.vcs-topact):not(.vcs-ext):not(.vcs-btnrow):not(.vcs-actrow){
  display:grid;grid-template-columns:repeat(auto-fill,var(--fld-cell));
  max-width:calc(var(--fld-cell) * 5 + 12px * 4);
  gap:6px 12px;align-items:center;justify-content:start;min-width:0}
.vcs-search>div>.vcs-fld,.vcs-search>div>.fld{display:flex;align-items:center;gap:6px;min-width:0;max-width:none}

/* 일반 입력칸·선택칸도 코드도움 칸과 같은 폭 */
.vcs-fld>input:not([type=checkbox]):not([type=radio]),
.fld>input:not([type=checkbox]):not([type=radio]),
.vcs-fld>select,.fld>select{
  width:var(--fld-w);min-width:0;flex:none;height:30px;font-size:12.5px;
  border:1px solid var(--bd,#ccd3db);border-radius:6px;background-color:#fff;padding:0 8px;box-sizing:border-box}
.vcs-fld>input[type=date],.fld>input[type=date]{text-align:center}
/* ★로그인 카드는 검색칸 고정폭(--fld-w) 대상이 아니다★ (사장님 지적 2026-08-08 · VC 에서 흡수 2026-08-11)
   위 규칙이 로그인 입력칸까지 잡아채 216px 고정이 걸리면서 카드(380px) 밖으로 삐져나왔다.
   로그인은 카드 폭에 맞춰 늘어나야 한다 — [로그인] 버튼과 같은 폭. */
.login-card .fld>input:not([type=checkbox]):not([type=radio]),
.login-card .fld>select{width:100%;min-width:0;flex:1 1 auto}

/* 코드도움 아이콘 — ★공통 CSS 에 빠져 있어 vc-screen.js 를 안 부르는 화면에서
   ▦/✕ 가 입력칸 밖으로 튀어나왔다★ (일괄주문접수등록, 2026-08-05) */
.vcs-ic{position:absolute;width:26px;height:30px;flex:none;padding:0;border:none;background:transparent;
        color:var(--txd,#8a94a3);font-size:13px;cursor:pointer;
        display:inline-flex;align-items:center;justify-content:center}
.vcs-ic:hover{color:var(--primary,var(--ac,#2d73f5))}
.vcs-ic:not(.vcs-hbtn){right:26px}
.vcs-hbtn{right:2px;border-left:1px solid var(--bd,#e3e8ee)}

/* 타이틀 줄 — 오른쪽 버튼 묶음이 끝까지 밀리도록 (flex 아니면 margin-left:auto 가 안 먹는다) */
.vcs-head{display:flex;align-items:center;gap:8px}
.vcs-head>.oe-headbtn,.vcs-head>.vcs-topact{margin-left:auto}

/* ── 검색패널 액션 버튼줄 (2026-08-05) ────────────────────────
   출고의뢰 등록/취소 같은 기능 버튼이 ★검색조건 격자 안★ 에 있어
   258px 로 늘어나고 창 크기마다 자리가 바뀌었다. 격자 밖 별도 줄로 뺀다. */
.vcs-search>.vcs-btnrow{
  grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center;
  gap:8px; margin-top:6px; padding-top:8px; border-top:1px solid var(--bd,#eef1f5)}
.vcs-search>.vcs-btnrow .btn{flex:none;min-width:120px}

/* 상세검색 — 아마란스 원본 항목명이 길다(거래처그룹·관리구분·프로젝트 등).
   라벨을 auto 로 두면 잘림은 없어지지만 ★열이 어긋난다★ → 넓게 '고정' 해야 둘 다 잡힌다. */
.vcs-ext .vcs-fld>label,.vcs-ext .fld>label{
  width:76px!important;min-width:76px!important;
  overflow:visible;text-overflow:clip;white-space:nowrap}
/* 상세검색 — 셀 폭을 넓히면 ★상한(max-width)도 같이★ 바꿔야 열이 맞는다.
   한쪽만 바꿔서 칸이 셀 경계와 어긋나 있었다(2026-08-06). */
.vcs-ext{--fld-cell:298px;max-width:calc(298px * 5 + 12px * 4)!important}
.vcs-ext .vcs-help-ctl,.vcs-ext .vcs-range,
.vcs-ext .vcs-fld>input:not([type=checkbox]),.vcs-ext .vcs-fld>select{width:200px}

/* 조회 + 접기 는 한 묶음으로 우측 끝 */
.vcs-topact{display:flex;align-items:center;gap:6px;justify-self:end}

/* 쇼핑몰 필터 — 상단 [조회] 줄 (2026-08-06) */
.vcs-topact .vcs-shopflt{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;
  border:1px solid var(--bd,#ccd3db);border-radius:6px;background-color:var(--sf,#fff);
  font-size:12.5px;color:var(--text,#1f2937);white-space:nowrap;cursor:pointer;flex:none}
.vcs-topact .vcs-shopflt input{margin:0;cursor:pointer}

/* 실행줄 — 왼쪽에 입력칸, 오른쪽 끝에 버튼 (2026-08-06 출고의뢰등록)
   격자(.vcs-fields)에 넣으면 버튼이 칸 하나를 통째로 먹고 가운데에 멈춘다.
   ★버튼만 따로 아래 줄에 두는 .vcs-btnrow 와 달리, 입력칸과 같은 줄에 둘 때 쓴다★ */
.vcs-search>.vcs-actrow{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--bd,#dfe5ec)}
.vcs-search>.vcs-actrow>.vcs-fld,.vcs-search>.vcs-actrow>.fld{flex:none}
.vcs-search>.vcs-actrow>.vcs-fld>label,.vcs-search>.vcs-actrow>.fld>label{
  width:var(--fld-label);min-width:var(--fld-label);flex:none}
.vcs-search>.vcs-actrow .vcs-sp{flex:1 1 auto;min-width:8px}
.vcs-search>.vcs-actrow .btn{flex:none;min-width:120px}
/* 실행줄 안의 입력칸도 규격 폭 — 안 주면 홀로 넓어져 줄이 어긋난다(의뢰일자, 2026-08-06) */
.vcs-search>.vcs-actrow>.vcs-fld>input:not([type=checkbox]),
.vcs-search>.vcs-actrow>.fld>input:not([type=checkbox]),
.vcs-search>.vcs-actrow>.vcs-fld>select,
.vcs-search>.vcs-actrow>.fld>select{width:var(--fld-w);flex:none}

/* 코드도움 [×] 지우기 — 값이 비어 있으면 숨긴다.
   자바스크립트로 맞추면 로그인 기본값이 늦게 채워질 때 어긋난다(2026-08-07).
   :placeholder-shown 은 '값이 비었을 때'만 참이라 항상 정확하다. */
.vcs-help-ctl>input:placeholder-shown+.vcs-clr{display:none}