/* ════════════════════════════════════════════════════════════════
   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; }

/* ── 버튼 ── */
.btn { display: inline-flex; align-items: 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); }
table.grid th { position: sticky; top: 0; background: var(--header-bg); color: var(--header-fg); font-weight: 700;
  font-size: 12px; padding: 7px 8px; border: 1px solid var(--header-line); border-bottom: 1px solid var(--bd); white-space: nowrap; z-index: 2; }
table.grid td { padding: 6px 8px; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
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)); }