@charset "utf-8";
/*
 * vx-overrides.css — 우리가 쓴 CSS. 벤더(플럭스) 산출물을 고치는 대신 여기서 덮는다.
 *
 * 벤더 파일(base/ components/ layout/ view/)을 직접 고치면 다음 납품본을 받을 때 조용히 되돌아간다.
 * style.css 의 **맨 마지막**에 import 되므로 같은 특이도면 여기가 이긴다.
 */

/* ══════════════════════════════════════════════════════════════════════
   디자인 토큰 보정
   ══════════════════════════════════════════════════════════════════════ */
/* --color-mint — 표 헤더와 GNB 가 함께 쓰는 색.
   벤더 원값 #3DA29C 는 흰 글씨 대비가 3.07:1 로 WCAG AA(4.5:1) 미달이고, 표 헤더·메뉴 글자가
   13~14px 이라 '큰 글씨' 예외도 못 받는다. 색조를 유지하면서 4.74:1 로 올린 값이다.
   ★ 벤더 base/variable.css 를 직접 고치지 않고 여기서 덮는다 — 다음 납품본에 되돌아가지 않게.
   ★ 이 한 줄이 표 헤더(components/table.css)와 헤더(--vx-header-bg)를 동시에 바꾼다. */
:root { --color-mint: #2E7F7A; }

/* GNB 선택 메뉴 밑줄.
   벤더가 .btn-gnb-nav:after 로 밑줄 요소를 만들어 두고 opacity:0 인 채로 두었다 —
   켜 주는 규칙이 어디에도 없어 死코드였다(.gnb-cell.active 는 글자색만 바꾼다).
   활성 메뉴 판정은 NavMenuResolver → layouts/default.html 의 th:classappend 참조. */
.gnb-cell.active .btn-gnb-nav:after { opacity: 1; }


/* ══════════════════════════════════════════════════════════════════════
   전역 헤더 — 풀폭 · 컴팩트 · 브랜드 파랑 (형님 2026-08-19)
   ──────────────────────────────────────────────────────────────────────
   벤더 기본은 "떠 있는 흰 카드" 다 — #dHead 는 height:0 이고, 둥근 .gnb-wrap 위에
   로고와 우측 메뉴를 position:absolute 로 얹은 뒤, 본문이 page-top 의 193px 여백으로
   그 아래를 피해 간다. 그래서 매 화면이 본문 전에 약 283px 을 버리고 있었다.

   여기서는 그 구조를 흐름(flex 한 줄)으로 되돌린다:
     · #dHead 가 실제 높이(56px)를 갖고 sticky → 본문이 여백으로 피할 필요가 없다
     · .header-inner 를 flex 로 → 로고 / 메뉴 / 사용자영역이 자연스러운 한 줄
     · 배경은 #dHead 가 칠한다 → 화면 좌우 끝까지 꽉 찬다

   ★ 색: 지도 마커·선택 딱지가 #2563eb 라, 헤더까지 같은 파랑이면 '누를 수 있는 것' 과
     '크롬' 이 구분되지 않는다. 한 단계 깊은 남색 계열로 내려 대비를 만든다.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --vx-header-h: 56px;
  /* 헤더 = 진한 남색(형님 2026-08-20). 표 헤더의 민트와는 일부러 다른 색이다 —
     남색은 '틀(크롬)', 민트는 '내용 강조', 파랑(#2563eb)은 '지도에서 누를 수 있는 것' 으로
     역할이 갈린다. 흰 글씨 대비 14.62:1 로 여유가 크다(측정값). */
  --vx-header-bg: #1d293d;
  --vx-header-bg-hover: rgba(255, 255, 255, .10);
  --vx-header-bg-active: rgba(255, 255, 255, .16);
  /* 배경이 어두워 반투명 글자도 대비가 넉넉하다. 켜진 메뉴는 '판 + 굵기 + 흰색' 으로 구분한다. */
  --vx-header-fg: rgba(255, 255, 255, .72);
  --vx-header-fg-strong: #fff;
}

/* ★ 선택자에 #dHead 를 붙이는 이유 — 벤더 header.css 가 <b>중첩 문법</b>으로 쓰여 있어
   `.header-wrap .header-user .item-name .txt` 처럼 클래스가 4단으로 펼쳐진다. 클래스만으로 덮으려
   하면 특이도에서 져서, 파일이 뒤에 와도 적용되지 않는다(실제로 글자색이 하나도 안 먹었다).
   id 하나면 어떤 클래스 조합보다 세다. */
#dHead {
  height: var(--vx-header-h);          /* 벤더 0 → 실제 높이. 본문이 그만큼 자연히 밀린다 */
  background: var(--vx-header-bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
/* 드롭다운(요청조회/내역조회)이 열려도 바 높이는 그대로. 벤더는 여기서 180px 로 늘렸다. */
#dHead.enter .gnb-wrap { height: var(--vx-header-h); }
#dHead.enter .gnb-wrap:before { opacity: 0; }

#dHead .header-wrap { max-width: none; padding: 0; }
#dHead .header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--vx-header-h);
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── 로고 ── */
#dHead .logo { position: static; flex-shrink: 0; }
#dHead .logo > a {
  height: var(--vx-header-h);
  padding: 0 12px 0 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;               /* 짧은 워드마크라 자간을 살짝 벌린다 */
  color: var(--vx-header-fg-strong);
  gap: 8px;
}
/* 'VX' 만 민트로 — 브랜드 강조색이 헤더에서도 한 번 드러난다(형님 2026-08-20). */
#dHead .logo .vx { color: var(--color-mint); font-style: normal; }
/* 로고 png 가 어두운 색이라 파란 바에서 묻힌다 — 흰색으로 뒤집는다. */
#dHead .logo > a:before { width: 26px; height: 28px; filter: brightness(0) invert(1); }

/* ── 메뉴 ── */
#dHead .gnb-wrap {
  height: var(--vx-header-h);
  background: transparent;
  border: 0;
  border-radius: 0;
  /* 남는 폭을 전부 먹고 그 안에서 가운데 — 로고(좌)와 사용자영역(우) 사이 중앙에 놓인다.
     (형님 2026-08-20) */
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  min-width: 0;
  /* ★ 여기에 overflow 를 주면 안 된다. 한 번 넣었다가 2depth 드롭다운이 통째로 잘려 안 보였다
     (패널은 .gnb-cell 의 자식이라 조상 중 하나만 잘라도 사라진다 — 크기는 정상인데 화면에만
     없어서 원인을 찾기 어렵다). 좁은 폭은 아래 미디어쿼리로 '줄여서' 대응한다. */
  overflow: visible;
}
#dHead .gnb-list { flex-wrap: nowrap; }
/* 2depth 가 '바 아래' 에 붙도록 cell 이 바 높이를 통째로 차지하게 한다.
   cell 을 버튼 높이(36px)로 두면 top:100% 가 바 중간에 걸려 드롭다운이 10px 떠 보인다. */
#dHead .gnb-cell {
  padding: 0 2px;
  position: relative;
  height: var(--vx-header-h);
  display: flex;
  align-items: center;
}

#dHead .btn-gnb-nav {
  height: 36px;
  padding: 0 12px;
  gap: 7px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vx-header-fg);
  white-space: nowrap;
}
#dHead .btn-gnb-nav:hover { background: var(--vx-header-bg-hover); color: var(--vx-header-fg-strong); }
#dHead .gnb-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* 선택된 메뉴 — 옅은 판 + 굵은 글씨. 글자색은 비활성과 같다(위 주석: 대비 여유가 없어 흰색 고정).
   벤더는 여기서 글자를 --color-primary 로 칠하는데, 색 있는 바 위에서는 글자가 묻힌다. */
#dHead .gnb-cell.active .btn-gnb-nav {
  background: var(--vx-header-bg-active);
  color: var(--vx-header-fg-strong);
  font-weight: 700;
}
#dHead .gnb-cell.active .btn-gnb-nav:after { opacity: 0; }

/* 드롭다운 화살표 아이콘(검정/파랑 png)은 파란 바에서 안 보인다 → 흰색으로. */
#dHead .gnb-cell:not(.single) .btn-gnb-nav > span:before { filter: brightness(0) invert(1); opacity: .7; }
#dHead .gnb-cell:not(.single) .btn-gnb-nav > span:after  { filter: brightness(0) invert(1); }

/* ── 2depth(요청조회 / 내역조회) — 바 아래 떠 있는 흰 패널 ── */
#dHead .snb {
  top: 100%;
  left: 0;
  width: auto;
  min-width: 190px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
  padding: 6px;
}
#dHead .snb .snb-list { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; }
#dHead .btn-snb-nav {
  height: 38px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
}
#dHead .btn-snb-nav:hover { background: #f2f4f6; color: #3a3a3a; }

/* ── 좁은 화면 — 메뉴가 우측 사용자영역을 밀어내지 않게 줄인다 ──
   ★ 이 앱의 하한은 뷰포트가 아니라 body 다 — 벤더 reset.css 가 body{min-width:1600px} 를 걸어 둬서
     창을 더 줄여도 내용은 1600px 을 유지하고 가로 스크롤이 생긴다(우리 변경과 무관한 기존 동작).
     그래서 1600 아래를 더 잘게 나눠 봐야 실제로 좁아지지 않는다 — 이 한 단계면 충분하다.
     관리자 메뉴 7개 기준 1600px 에서 우측 영역과 겹치지 않음을 실측했다. */
@media (max-width: 1600px) {
  #dHead .btn-gnb-nav { padding: 0 9px; gap: 6px; font-size: 13px; }
  #dHead .header-inner { gap: 4px; padding: 0 12px; }
}

/* ── 우측 사용자 영역 ── */
#dHead .menus {
  position: static;
  margin-left: auto;
  height: var(--vx-header-h);
  padding: 0;
  gap: 6px;
  flex-shrink: 0;
}
#dHead .menus .menu-cell:nth-child(3) { margin-left: 8px; }
#dHead .menus .btn-icon-nav { width: 34px; height: 34px; background-color: var(--vx-header-bg-hover); }
#dHead .menus .btn-icon-nav .icon { filter: brightness(0) invert(1); }
#dHead .menus .alarm-badge { top: -2px; right: -2px; }
#dHead .header-user { gap: 8px; }
#dHead .header-user .btn-mypage-nav { background: var(--vx-header-bg-active); }
#dHead .header-user .item-info { gap: 1px; }
#dHead .header-user .item-name { gap: 6px; }
#dHead .header-user .item-name .txt { font-size: 13px; color: var(--vx-header-fg-strong); }
#dHead .header-user .item-name > a .icon { filter: brightness(0) invert(1); }
#dHead .header-user .item-id { font-size: 11px; color: var(--vx-header-fg); }
/* 알림 드롭다운은 흰 패널 그대로 — 바 바로 아래에 붙도록 여백만 줄인다. */
#dHead .header-alarm-wrap .header-alarm-inner { margin-top: 12px; }


/* ══════════════════════════════════════════════════════════════════════
   제목 영역 — 컴팩트 (전 화면)
   ──────────────────────────────────────────────────────────────────────
   벤더 기본 padding: 193px 0 15px 은 "떠 있는 헤더를 본문이 여백으로 피한다" 는 전제였다.
   헤더가 이제 제 높이를 가지므로 그 전제가 사라졌다 — 순수한 여백만 남긴다.
   마크업은 layouts/default :: pageTop fragment 하나가 만든다.
   ══════════════════════════════════════════════════════════════════════ */
.page-top { padding: 22px 0 14px; }
.page-top .container { align-items: center; }

.page-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-heading-ico {
  width: 26px; height: 26px; flex-shrink: 0;
  /* 민트(내용 강조색)로 칠한다. 헤더의 남색으로 칠하면 거의 검정이라 옆 제목 글씨와 구분이
     안 되고 '아이콘' 으로 읽히지 않는다. */
  color: var(--color-mint);
}
.page-heading-text { min-width: 0; }
.page-top .display-1 { font-size: 22px; line-height: 1.3; }
.page-heading-desc {
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.page-top .breadcrumbs { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════════════════
   지도 — 둥근 흰 카드 위에 올린다 (형님 2026-08-19)
   지금은 지도가 페이지 바닥에 그대로 붙어 있어 '깔려 있는' 느낌이다.
   표·폼이 쓰는 카드 문법과 같은 모서리/그림자를 줘서 같은 층위로 보이게 한다.
   ══════════════════════════════════════════════════════════════════════ */
.video-map-wrap {
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
/* 지도 타일이 카드 모서리 밖으로 삐져나오지 않게 안쪽도 같이 둥글린다. */
.video-map-wrap .video-map-view { border-radius: 8px; overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════
   대시보드(옛 히어로 레이아웃) × 전역 푸터 — 겹치는 두 가지만 정리
   ──────────────────────────────────────────────────────────────────────
   메인은 형님 판단으로 종전 디자인을 유지한다(2026-08-20 롤백). 다만 그 화면은 전역 푸터가
   없던 시절에 만들어져서, 푸터가 생긴 지금 두 가지가 어긋난다:
     ① 카피라이트가 두 번 나온다 — 페이지 안 .main-footer + 전역 #dFoot
     ② height:100vh 짜리 히어로 + 헤더 56px + 푸터 43px = 100vh 초과 → 세로 스크롤
   디자인은 건드리지 않고 이 둘만 없앤다. .main-wrap 은 이 화면에만 있어 범위가 저절로 좁다.

   ★ 헤더까지 빼야 한다. 종전 히어로는 '헤더가 height:0 으로 떠 있던' 시절 기준이라 100vh 를
     통째로 썼다. 헤더가 제 높이를 갖게 된 지금은 그만큼 넘친다(푸터만 빼고 재보니 56px 남았다).
   ══════════════════════════════════════════════════════════════════════ */
/* ★ min-height 도 같이 풀어야 한다 — 벤더 view/main.css 가 .main-wrap 에 min-height:768px 를
     박아 두어, 높이 768px 짜리 화면에서는 헤더 56 + 본문 768 + 푸터 43 = 867px 가 되어 우리가
     height 를 줄여도 여전히 세로 스크롤이 생긴다(코덱스 리뷰 2026-08-20). */
.main-wrap { height: calc(100vh - var(--vx-header-h) - 43px); min-height: 0; }
/* 전역 푸터가 같은 내용을 더 자세히 담고 있다 — 페이지 안쪽 것을 접는다. */
.main-wrap .main-footer { display: none; }

/* ── 대시보드 2행 배치 (형님 2026-08-20) ──────────────────────────────
   그룹1(6): 승인대기 · 반출완료 · 다운로드대기 · 반려 · 기간임박 · 접근수임박
   그룹2(3): 반출 현황 그래프 · 공지사항 · 최근 반출 목록
   ★ 12칸 격자를 쓴다 — 6등분(각 2칸)과 6:3:3 을 같은 격자로 표현할 수 있다.
     벤더 원본은 5열에 nth-child 로 자리를 못박아 두었어서(1번 셀 2행 span, 8번 2열 span)
     셀 수가 8→9 로 바뀌는 순간 배치가 어긋난다. 그 규칙을 여기서 덮는다.
   ★ 서버 스토리지 카드는 뺐다(형님 지시) — 관리자 관심사인데 메인 첫 칸을 크게 먹고 있었다. */
.main-wrap .dashboard {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    align-content: end;
}
.main-wrap .dashboard .dashboard-cell { grid-column: span 2; grid-row: auto; }
/* 그룹2 — 그래프 6칸, 공지 3칸, 최근목록 3칸 */
.main-wrap .dashboard .dashboard-cell:nth-child(7) { grid-column: span 6; }
.main-wrap .dashboard .dashboard-cell:nth-child(8),
.main-wrap .dashboard .dashboard-cell:nth-child(9) { grid-column: span 3; }
/* 임박 카드(주황) — 설명문은 살린다(형님 2026-08-20). 6등분 폭에서 3줄이 되므로 줄간격만
   좁히고, 카드가 설명문 높이에 끌려가지 않게 숫자·화살표와 균형을 맞춘다. */
.main-wrap .dashboard .dashboard-cell:nth-child(5) .desc,
.main-wrap .dashboard .dashboard-cell:nth-child(6) .desc {
    font-size: 12px; line-height: 1.45; margin-top: 6px;
}
/* 주황 카드의 '더보기' 화살표 — 제목이 흰 글씨라 아이콘도 흰색으로 맞춘다(원본은 검정 svg). */
.main-wrap .main-card.point .title .btn-more .icon { filter: brightness(0) invert(1); }

/* ★ 카드 높이 맞추기 — 격자 칸(.dashboard-cell)은 이미 같은데 그 안의 .main-card 가 내용 높이를
   따라가 들쭉날쭉했다(실측 그룹1 163~213, 그룹2 226~378). 칸을 꽉 채우게 한다. */
.main-wrap .dashboard .dashboard-cell { display: flex; }
.main-wrap .dashboard .main-card { height: 100%; width: 100%; }
/* 흰 카드의 설명문 — 주황 카드는 흰 글씨지만 흰 배경에서는 보조색이어야 읽힌다. */
.main-wrap .main-card:not(.point) .desc {
    font-size: 12px; line-height: 1.45; margin-top: 6px; color: var(--color-text-secondary);
}
/* 숫자를 카드 아래쪽에 붙여 설명문 길이가 달라도 숫자 줄이 가로로 정렬된다. */
.main-wrap .dashboard .main-card .value,
.main-wrap .dashboard .main-card .info { margin-top: auto; }
.main-wrap .dashboard .main-card { display: flex; flex-direction: column; }

/* ★ 그룹2 아래 숨 쉴 자리 — 종전에는 카피라이트 한 줄이 그 역할을 했다(형님 2026-08-20).
   그 줄을 접었으니 여백으로 대신한다. .main-wrap 은 height 가 calc 이고 border-box 라
   padding 을 주면 내용 영역이 그만큼 줄어 카드가 위로 올라간다. */
.main-wrap { padding-bottom: 34px; box-sizing: border-box; }

/* ── 상태 색 (형님 2026-08-20, 마크애니 상태 표기 참고) ──────────────
   색만으로 뜻을 전달하지 않는다 — 라벨 문구가 항상 함께 있다(색각 이상 대비).
   문구는 vxRequestStatusKo 단일 소스를 쓰고, 여기서는 색만 고른다.

   ★ 색값은 토큰으로만 둔다 — 대시보드 '최근 반출 목록' 과 '내 요청' 표가 같은 상태를 각자
     칠하는데, 값을 두 번 적어 두면 한쪽만 바뀌어 같은 상태가 화면마다 다른 색이 된다.
     대시보드 그래프 범례와 같은 계열이고, 원본 파스텔은 흰 배경 대비가 1.2:1 이라 글자로
     못 쓰므로 같은 계열을 짙게 내렸다(모두 4.9:1 이상, WCAG AA 통과). */
:root {
    --vx-st-progress: #0B7A64;   /* 반출중 — 그래프 '승인' 계열 (5.27:1) */
    --vx-st-done:     #8A6D00;   /* 반출완료 — 그래프 '반출' 계열 (4.92:1) */
    --vx-st-blocked:  #B3380A;   /* 반려·반출실패·저장공간부족 — 그래프 '반려' 계열 (6.02:1) */
    --vx-st-waiting:  #5B6470;   /* 대기 — 그래프에 없는 상태라 중립색 (6.00:1) */
    --vx-st-ended:    #919191;   /* 취소·종결 — 끝나서 더 할 일이 없는 상태 */
}
/* 대시보드 '최근 반출 목록' 과 '내 요청' 표가 같은 규칙을 쓴다.
   ★ 표 쪽 선택자에 .table 을 끼운 이유 — 벤더 `.table td { color: … }` 가 클래스+요소(0,0,1,1)라
     단일 클래스(0,0,1,0)로는 못 이긴다. 실제로 옛 목록의 `.color-error` 가 이 이유로 죽은
     클래스였다(반려가 검정으로 나왔다). 특이도를 맞춰 둔다. */
.main-wrap .dash-list-item .st,
.table td .vx-st { font-style: normal; font-weight: 700; }

.main-wrap .dash-list-item .st[data-status="APPROVED"],
.table td .vx-st[data-status="APPROVED"]              { color: var(--vx-st-progress); }
.main-wrap .dash-list-item .st[data-status="EXPORTED"],
.table td .vx-st[data-status="EXPORTED"]              { color: var(--vx-st-done); }
.main-wrap .dash-list-item .st[data-status="REJECTED"],
.main-wrap .dash-list-item .st[data-status="EXPORT_FAILED"],
.main-wrap .dash-list-item .st[data-status="INSUFFICIENT_STORAGE"],
.table td .vx-st[data-status="REJECTED"],
.table td .vx-st[data-status="EXPORT_FAILED"],
.table td .vx-st[data-status="INSUFFICIENT_STORAGE"]  { color: var(--vx-st-blocked); }
.main-wrap .dash-list-item .st[data-status="PENDING"],
.table td .vx-st[data-status="PENDING"]               { color: var(--vx-st-waiting); }
.main-wrap .dash-list-item .st[data-status="CANCELED"],
.main-wrap .dash-list-item .st[data-status="CLOSED"],
.table td .vx-st[data-status="CANCELED"],
.table td .vx-st[data-status="CLOSED"]                { color: var(--vx-st-ended); }

/* 그룹2 목록(공지·최근) — 카드 안에서만 스크롤. 히어로 높이가 고정이라 카드가 넘치면 안 된다. */
.main-wrap .dash-list { overflow-y: auto; margin-top: 8px; }
.main-wrap .dash-more { margin-left: auto; font-size: 12px; color: var(--color-text-secondary); }
.main-wrap .dash-more:hover { color: var(--color-mint); text-decoration: underline; }
.main-wrap .dash-empty { font-size: 13px; color: var(--color-text-secondary); }
.main-wrap .dash-list-item { display: block; padding: 7px 0; border-bottom: 1px solid #f2f3f5; }
.main-wrap .dash-list-item:last-child { border-bottom: none; }
.main-wrap .dash-list-item .t {
    display: block; font-size: 13px; color: var(--color-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.main-wrap .dash-list-item .m { display: block; margin-top: 2px; font-size: 11px; color: var(--color-text-secondary); }
.main-wrap a.dash-list-item:hover .t { color: var(--color-mint); }
.main-wrap .main-card .title { display: flex; align-items: center; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════════
   하단 회사 정보 — vision-x-dms 하단과 같은 한 줄 (형님 2026-08-19)
   벤더 footer.css 는 빈 파일이라 규칙 충돌은 없다.
   ══════════════════════════════════════════════════════════════════════ */
/* ★ 내용이 짧은 화면(표 1줄 등)에서 푸터가 화면 중간에 떠 있지 않게 바닥으로 밀어 준다.
   벤더는 body 를 block 으로 두고 푸터가 없었으므로 이 장치가 없었다.
   #wrap 이 남는 높이를 먹고, 푸터는 줄어들지 않는다. */
body { display: flex; flex-direction: column; min-height: 100vh; }
#wrap { flex: 1 0 auto; }
#dFoot { flex-shrink: 0; }

#dFoot {
  border-top: 1px solid #e5e7eb;
  background: #fafbfc;
  padding: 12px 20px;
}
.site-footer-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;                     /* 좁으면 두 줄로 — 잘라내지 않는다 */
  justify-content: center;             /* 중앙 정렬 (형님 2026-08-20) */
  gap: 6px 14px;
  max-width: 1920px;
  margin: 0 auto;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.site-footer-logo { width: 16px; height: 16px; flex-shrink: 0; }
.site-footer-inner strong { color: var(--color-text-primary); font-weight: 600; }
/* 항목 사이 구분점 — 마크업에 문자를 넣지 않아 복사할 때 딸려가지 않는다. */
.site-footer-inner span + span:before,
.site-footer-inner strong + span:before {
  content: "";
  display: inline-block;
  width: 1px; height: 10px;
  margin-right: 14px;
  background: #d9d9d9;
  vertical-align: -1px;
}
.site-footer-inner a { color: inherit; }
.site-footer-inner a:hover { color: var(--color-mint); text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════
   지도 높이 — 아래 여백을 위쪽 여백과 같게 맞춘다 (형님 2026-08-20)
   ──────────────────────────────────────────────────────────────────────
   벤더 값은 calc(100vh - 253px - 50px) 였고 253px 은 옛 크롬 높이(헤더 90 + 제목영역 193 어림)다.
   헤더를 56px 로 줄였는데도 아래에 71px 이 남아(카드 margin 20 + #contents padding 50) 지도가
   바닥에서 떠 보였다. 위쪽 여백은 제목영역의 아래 padding 14px 뿐이라 위아래가 어긋났다.

   그래서 아래 여백도 14px 로 맞추고 그만큼 지도를 늘린다:
     100vh − 헤더 56 − 제목영역 86 − 아래여백 14 − 푸터 43 = 100vh − 199
   (카드는 border-box 라 이 높이에 안쪽 padding 10+10 과 테두리가 포함된다.)

   ★ 이 값은 헤더·제목영역·푸터 높이에 묶여 있다 — 그 셋을 건드리면 여기도 같이 본다.
   ★ 아래 여백을 줄이는 것은 지도 화면 한정이다(.contents-map). 표 화면은 벤더 여백 50px 유지 —
     표 마지막 줄이 푸터에 붙으면 답답하다.
   ══════════════════════════════════════════════════════════════════════ */
/* ★ #contents 는 ID 선택자(벤더 padding-bottom:50px)라 클래스 하나로는 못 이긴다 —
   처음에 .contents-map 만 썼다가 50px 이 그대로 남아 아래 여백이 64px 이 됐다. */
#contents.contents-map { padding-bottom: 0; }
#contents.contents-map .video-map-wrap {
  height: calc(100vh - 199px);
  margin-bottom: 14px;                 /* 제목영역 아래 padding 과 같은 값 */
}

/* ══════════════════════════════════════════════════════════════════════════════
   상태 탭 — 내 요청 목록(/requests) 상단
   ──────────────────────────────────────────────────────────────────────────────
   벤더 CSS 에 탭 컴포넌트가 없어 여기에 만든다. 이름을 vx- 로 시작하는 이유 —
   나중에 벤더가 .tab-* 를 들고 오면 이름이 겹쳐 서로를 덮는다.

   '반출목록'(승인 이후)과 '요청목록'(전 상태) 두 화면을 하나로 합치면서, 나뉘어 있던
   구분을 이 탭이 대신한다. 그래서 탭은 장식이 아니라 그 화면의 기능 전부다 —
   0건 상태도 자리를 지킨다(사라지면 탭 줄이 움찔거려 위치를 잃는다).
   ══════════════════════════════════════════════════════════════════════════════ */
.vx-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: flex-end;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--color-line, #e5e7eb);
}
.vx-status-tab {
    appearance: none;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 9px 14px 8px;
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    /* 선택 시 굵어지면서 폭이 변해 탭 줄이 밀리는 것을 막는다 — 미리 굵은 폭을 잡아 둔다. */
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.vx-status-tab:hover { color: var(--color-mint); background: rgba(46, 127, 122, 0.06); }
.vx-status-tab .cnt {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    background: #f1f3f5;
    border-radius: 9px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}
/* 0건 — 자리는 지키되 눌러야 할 것처럼 보이지 않게 낮춘다. disabled 로 만들지는 않는다:
   "0건인 걸 확인하려고" 누르는 것도 정상 행위다. */
.vx-status-tab.is-zero { color: #b6bcc4; }
.vx-status-tab.is-zero .cnt { color: #b6bcc4; background: #f7f8f9; }
/* 선택 — 아래 테두리를 흰색으로 덮어 표와 이어 붙은 '앞으로 나온 탭' 모양을 만든다. */
.vx-status-tab.active {
    color: var(--color-mint);
    font-weight: 700;
    border-color: var(--color-line, #e5e7eb);
    background: #fff;
    box-shadow: 0 1px 0 0 #fff;   /* border-bottom 을 덮는 1px */
    margin-bottom: -1px;
    padding-bottom: 9px;
}
.vx-status-tab.active .cnt { color: #fff; background: var(--color-mint); }
.vx-status-tab:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 2px; }

/* 표 셀 안 보조 줄 — 접수번호 아래 '구분', 의뢰사유 아래 '공문 번호'.
   마크애니 목록이 접수번호/CCTV위치를 한 칸에 쌓아 열 수를 줄인 것과 같은 방식이다.
   단 마크애니의 2단 헤더(th 를 두 줄로 쪼갠 구조)는 따라가지 않는다 — 헤더와 값의
   대응이 눈으로 안 잡혀서, 여기서는 헤더 1줄 + 셀 안에서만 쌓는다. */
.vx-cell-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--color-text-secondary, #6b7280);
    line-height: 1.35;
}
/* 보조 줄 안의 배지(구분: 영상반출/열람)는 벤더 기본이 30px 이라 그 한 칸이 행 높이를 정해버린다
   (실측: 접수번호 24 + 배지 30 → 행 86px). 지금은 모든 행이 같은 값이라 더더욱 무게를 줄 이유가
   없다 — 열람이 들어오면 구분이 실제로 갈리므로 그때도 이 크기로 충분하다. */
.vx-cell-sub .badge {
    height: auto;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.5;
}

/* 접수번호 — 절대 두 줄로 쪼개지지 않게 한다. 'R-2026-00 / 0010' 으로 끊기면 번호로 안 읽힌다
   (전화로 부르려고 만든 값이다). 폭이 부족하면 열을 넓히는 쪽이 맞다. */
.table td .vx-receipt-no { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════════
   표 행 높이 압축 (형님 2026-08-20 "row 가 너무 높아 공간이 벙쪄 보인다")
   ──────────────────────────────────────────────────────────────────────────────
   벤더 값이 과했다. 측정치:
     .table-list  th/td  padding 25px 12px  → 데이터 행 114px, 헤더 78px
     .table-view  td     padding 18px 30px + height:80px 고정 → 행 80px
   4행짜리 목록이 535px 을 먹어 페이지 절반이 빈 칸이었다.

   ★ 페이지별로 덮지 않고 여기 한 곳에서 누른다 — 화면마다 따로 줄이면 표 높이가
     화면마다 달라진다(같은 앱인데 목록과 관리자 목록의 행 높이가 다르면 조잡해 보인다).

   ★ height:80px 를 같이 눌러야 한다 — padding 만 줄이면 높이가 그대로다.

   ★ 선택자를 벤더와 <b>똑같은 모양</b>으로 쓴다(.table-list .table > tbody > tr > td).
     벤더 CSS 는 네이티브 중첩이라 펼치면 이 형태가 되고 특이도가 (0,0,2,3) 이다.
     .table-list td 처럼 짧게 쓰면 특이도가 낮아 조용히 안 먹는다 — 이 프로젝트에서
     이미 두 번 당했다(.color-error, .contents-map). 같은 특이도면 나중에 로드되는
     쪽이 이기고, vx-overrides.css 는 style.css 뒤에 링크된다.

   버튼이 들어가는 칸(처리 열 등)은 버튼 높이가 하한이라 이 값으로 찌그러지지 않는다.
   ══════════════════════════════════════════════════════════════════════════════ */
.table-list .table > thead > tr > th {
    padding-top: 13px;
    padding-bottom: 13px;
}
.table-list .table > tbody > tr > td {
    padding-top: 11px;
    padding-bottom: 11px;
}
.table-view .table > tbody > tr > td {
    padding-top: 11px;
    padding-bottom: 11px;
    height: auto;          /* 벤더 80px 고정 해제 */
}
.table-view .table > tbody > tr > th {
    padding-top: 11px;
    padding-bottom: 11px;
    /* 행이 낮아지면 라벨을 위로 붙일 이유가 없다(벤더 기본 top) — 값과 눈높이를 맞춘다. */
    vertical-align: middle;
}
/* 값이 여러 줄인 칸(카메라 목록 등)은 라벨을 위로 — 가운데 정렬하면 라벨이 허공에 뜬다. */
.table-view .table > tbody > tr > td[colspan] { vertical-align: top; }
.table-view .table > tbody > tr:has(> td[colspan]) > th { vertical-align: top; }

/* ══════════════════════════════════════════════════════════════════════════════
   검색조건 박스 — 신청내역(/requests) 목록 위
   ──────────────────────────────────────────────────────────────────────────────
   처음엔 목록 위에 한 줄짜리 인라인 바로 넣었는데 두 가지가 어긋났다(형님 2026-08-20):
     ① 좌/우로 갈라 놓으니 '신청 날짜' 와 '검색어' 라벨이 같은 열에 서지 않았다.
     ② 배경도 테두리도 없어 어디까지가 검색 영역인지 경계가 없었다("영역을 가진 듯이
        박싱이라도 하는 게 낫겠다").
   → 반출신청 화면의 '요청 정보'/'이용 보호 설정' 그룹 박스와 <b>같은 모양</b>으로 맞춘다
     (#f7f8fa 배경 + #e5e7eb 테두리 + 10px 라운드). 제목도 상세 화면의 .vx-block-title 을
     그대로 써서, 앱 안에서 '제목 붙은 묶음' 이 한 가지 모양만 갖게 한다.
   → 라벨은 <b>고정폭 열</b>로 세운다(grid). 줄마다 라벨 길이가 달라도 값의 시작점이 같다.
   ══════════════════════════════════════════════════════════════════════════════ */
.vx-search-box {
    margin-bottom: 14px;
    padding: 12px 14px 14px;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.vx-search-box .vx-block-title { margin-bottom: 10px; }
.vx-search-rows { display: flex; flex-direction: column; gap: 8px; }
/* 라벨 열 + 값 열. 라벨 폭을 고정해 두 줄의 값 시작점이 정확히 맞는다. */
.vx-search-row {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    column-gap: 12px;
}
.vx-search-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-secondary, #6b7280);
    white-space: nowrap;
}
/* 값 영역 — 항목들이 한 줄에 늘어서고, 폭이 부족하면 여기서만 접힌다. */
.vx-search-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.vx-search-tilde { color: var(--color-text-secondary, #6b7280); }

/* 한 줄에 놓이는 것들의 키를 40px 로 통일한다 — 벤더 기본은 요소마다 달라서(검색 필드 68px,
   날짜 40px, 버튼 40px) 그대로 두면 줄이 들쭉날쭉하다. */
.vx-search-box .btn-datepicker input,
.vx-search-box .form-btns-input.form-simple-search .input-value input,
.vx-search-box .form-btns-input.form-simple-search .btn-form-input { height: 40px; }
.vx-search-box .form-btns-input.form-simple-search .btn-form-input { width: 40px; }
/* 벤더 검색 필드는 기본이 617px(실측 — 게시판 본문 폭을 다 쓰는 크기)라 줄을 깨뜨린다. */
.vx-search-box .form-btns-input.form-simple-search { width: 340px; }
/* 배경 위에서는 입력칸이 흰색이어야 눌러야 할 곳으로 보인다(반출신청 그룹 박스와 같은 규칙). */
.vx-search-box input { background: #fff; }
.vx-search-box .btn-basic { background: #fff; }

/* 기간 퀵버튼 — 날짜 두 개를 직접 고르는 것보다 실제로 훨씬 많이 쓰인다. */
.vx-range-quick { display: flex; align-items: center; margin-left: 4px; }
.vx-range-btn {
    appearance: none;
    border: 1px solid var(--color-line, #e5e7eb);
    background: #fff;
    color: var(--color-text-secondary, #6b7280);
    font-size: 13px;
    height: 40px;
    padding: 0 12px;
    cursor: pointer;
    margin-left: -1px;   /* 이웃과 테두리 한 줄 공유 — 붙은 한 덩이로 보이게 */
}
.vx-range-btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.vx-range-btn:last-child { border-radius: 0 6px 6px 0; }
.vx-range-btn:hover { color: var(--color-mint); }
/* 선택 — 테두리까지 바뀌므로 이웃 위로 올려야 겹친 1px 에 가려지지 않는다. */
.vx-range-btn.active {
    background: var(--color-mint);
    border-color: var(--color-mint);
    color: #fff;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.vx-range-btn:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 1px; z-index: 2; }

/* 검색 대상 드롭다운 — 벤더 기본은 테두리 없는 텍스트 토글(실측 24px)이라, 40px 입력들 사이에서
   혼자 작고 '누를 수 있는 칸' 으로 보이지 않는다. 옆의 날짜·검색어 칸과 같은 모양으로 맞춘다. */
.vx-search-box .dropdown { height: 40px; }
.vx-search-box .btn-dropdown-nav {
    height: 40px;
    min-width: 112px;
    padding: 0 32px 0 12px;   /* 우측은 벤더 화살표 자리 */
    background: #fff;
    border: 1px solid var(--color-line, #e5e7eb);
    border-radius: 6px;
    text-align: left;
    /* ★ 벤더가 display:flex 만 주고 align-items 를 주지 않아(normal=stretch) 글자가 박스 맨 위
         1px 에 붙는다(실측: 글자 상단 - 버튼 상단 = 1px). 높이를 40px 로 키우면 그만큼 더 도드라진다.
         justify-content 까지 명시해야 화살표 자리를 뺀 왼쪽에 정렬된다. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 글꼴 — 벤더 기본 14px 은 옆 칸들(날짜 16px, 검색어 20px)보다 작아 혼자 작아 보였다.
       한 줄에 놓인 것들끼리는 눈에 같은 크기로 읽혀야 한다. */
    font-size: 16px;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   목록 묶음 판 — 신청내역(/requests). 검색조건 박스와 같은 회색 판.
   ──────────────────────────────────────────────────────────────────────────────
   ★ 높이를 고정하지 않는다(형님이 먼저 걱정한 지점). 내용을 감싸게 두면 건수에 따라
     박스가 늘고 줄어드는데 그게 맞는 동작이다 — 높이를 박으면 3건일 때 아래가 텅 비고
     20건일 때 넘친다.
   ★ 표는 흰색으로 남는다 — 회색은 표 주위 여백으로만 보여 '판 위에 올라간 표' 가 된다.
     표 배경까지 회색으로 만들면 행 구분선이 안 보인다.
   ══════════════════════════════════════════════════════════════════════════════ */
.vx-list-box {
    padding: 10px 14px 14px;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
/* 탭은 이 판의 머리 — 판 안에서 표 바로 위에 붙는다. 판 경계선과 탭의 밑줄이 겹쳐 두 줄로
   보이지 않게 탭 밑줄은 지우고(표가 바로 아래 있어 경계는 이미 분명하다) 여백만 남긴다. */
.vx-list-box .vx-status-tabs { border-bottom: none; margin-bottom: 8px; }
/* 선택 탭의 '앞으로 나온' 흰 배경은 흰 바탕 위에서 성립하던 것이다 — 회색 판 위에서는
   흰 조각이 붕 떠 보이므로, 판 위에서는 밑줄 강조로 바꾼다. */
.vx-list-box .vx-status-tab.active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    margin-bottom: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-mint);
    border-radius: 0;
}
/* 표는 흰 바탕 위에 올린 카드처럼 — 판과 표 사이 경계가 있어야 '올라간' 것으로 읽힌다. */
.vx-list-box .table-list { background: #fff; }
/* 페이저는 판 안에 두되 여백을 줄인다 — 벤더 기본 50px 은 판을 불필요하게 키운다. */
.vx-list-box .table-list ~ .paging-wrap,
.vx-list-box .no-data ~ .paging-wrap { margin-top: 18px; }
/* 0건 — 벤더 .no-data 는 padding 180px(위아래 360px)이라 '없습니다' 한 줄에 거대한 회색 판이
   붙는다. 판 안에서는 흰 카드로, 높이는 표 두어 줄 정도로 줄인다. */
.vx-list-box .no-data {
    padding: 46px 0;
    background: #fff;
    border: 1px solid var(--color-border-default, #e5e7eb);
    border-radius: 12px;
}