/* ══════════════════════════════════════════════════════════════════
   반응형 — 화면 비율이 어떻든 **한눈에 다 보이게** (v7.4 담당자 지시)

   담당자 지시
     "100%보기로 하면 화면이 짤려. 75%로 해야 전체 화면이 보여. …
      PC, 모바일에서 화면 비율에 따라 항상 전체 화면이 보일 수 있도록
      반응형으로 최적화 될 수 있도록 해줘."

   무엇이 문제였나 (재어 본 결과)
     문서 자체는 넘치지 않았습니다. **표 하나**가 문제였습니다 —
     지원자 관리 표가 `<colgroup>` 에 픽셀 폭이 박혀 있어 **1,622px 고정**이었고,
     좌측 메뉴(262px)를 빼면 1,280px 화면에서 604px 이 잘렸습니다.
     그래서 75% 로 줄여야 다 보였던 것입니다.

   이미 있던 것 (다시 만들지 않았습니다)
     화면 곳곳의 표 칸에 `data-label="사업부"` 같은 **이름표가 이미 붙어 있었습니다.**
     좁은 화면에서 표를 카드로 접으려고 만들어 둔 자리인데 **CSS 가 없어서 놀고**
     있었습니다. 그 이름표를 그대로 씁니다.

   규칙 세 가지
     ① 넓은 표는 폭에 따라 **덜 중요한 열부터 접습니다** (`data-p` 우선순위).
     ② 접은 것은 **조용히 감추지 않습니다** — 몇 개를 접었는지 적고,
        «모든 열 보기» 로 언제든 되돌립니다.
     ③ 휴대폰 폭에서는 표를 **카드**로 세웁니다 (`data-label` 을 제목으로).

   접는 기준은 «화면 폭» 입니다. 좌측 메뉴가 있는 화면은 그만큼 좁으므로
   기준점에 이미 반영해 두었습니다 (메뉴 262px + 여백 56px ≈ 318px).
   ══════════════════════════════════════════════════════════════════ */

/* ── 0. 어떤 화면도 가로로 밀리지 않게 ────────────────────────────── */
html, body { max-width: 100%; }
img, svg, canvas, video { max-width: 100%; height: auto; }
/* 긴 메일주소·파일이름이 칸을 밀어내지 않도록 */
.ds-table td, .ds-card, .ds-page { overflow-wrap: anywhere; }

/* ── 1. 열 접기 (data-p 우선순위) ──────────────────────────────────
   p2 = 없어도 일이 되는 열 · p3 = 참고용 · p4 = 가끔 보는 열
   숫자가 클수록 먼저 접힙니다. 표시가 없는 열은 **항상 보입니다.** */
.ds-table[data-fold] [data-p] { }                 /* 기본은 표시 */
/* v7.9.4 : 열이 많은 접는 표(지원자 관리)는 폭과 관계없이 조밀한 여백 — 1920px 에서도 16열이 카드 안에 들어가게 */
.ds-table[data-fold] th, .ds-table[data-fold] td { padding-left: 6px; padding-right: 6px; }
.ds-table[data-fold] th.sortable { padding: 0; }
.ds-table[data-fold] th.sortable a { padding-left: 6px; padding-right: 6px; }

@media (max-width: 1700px) {
  table[data-fold]:not([data-fold="fit"]):not(.show-all) [data-p="4"] { display: none; }
}
@media (max-width: 1450px) {
  table[data-fold]:not([data-fold="fit"]):not(.show-all) [data-p="3"] { display: none; }
}
/* v7.9.4 : 공통 반응형 기준(uigrid.css 머리말)에 맞춥니다 — Desktop 1280 이상 / Narrow 1279 이하 / Compact 1199 이하 */
@media (max-width: 1279px) {
  table[data-fold]:not([data-fold="fit"]):not(.show-all) [data-p="2"] { display: none; }
}
@media (max-width: 1199px) {
  table[data-fold]:not([data-fold="fit"]):not(.show-all) [data-p="1"] { display: none; }
}

/* v7.9.6 : 재어 보고 더 접기 (table-tools.js fit) — 확대 배율 · 긴 글에도 오른쪽 끝 버튼이 보이게
   data-fold="fit" 표는 위의 폭 기준을 쓰지 않고 **넘칠 때만** 접습니다 (들어가면 모든 열을 보여 줌). */
table[data-fold].tt-fit-4:not(.show-all) [data-p="4"],
table[data-fold].tt-fit-3:not(.show-all) [data-p="3"],
table[data-fold].tt-fit-2:not(.show-all) [data-p="2"],
table[data-fold].tt-fit-1:not(.show-all) [data-p="1"] { display: none; }

/* «모든 열 보기» 를 켠 표는 접지 않고, 대신 그 표만 가로로 밀립니다 */
.ds-table-scroll { overflow-x: auto; }
.ds-table-scroll .ds-table.show-all, .ds-table-scroll table[data-fold].show-all { min-width: max-content; }

/* 접었다는 사실을 알리는 줄 (table-tools.js 가 만듭니다) */
.tt-fold {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 12px; color: var(--muted, #667085);
  background: var(--sect, #EDF5F7); border-bottom: 1px solid var(--line, #e3e8ef);
}
.tt-fold b { color: var(--title, #102d4b); font-weight: 700; }
.tt-fold button {
  border: 1px solid var(--line, #e3e8ef); background: #fff; cursor: pointer;
  border-radius: 8px; padding: 4px 11px; font: inherit; font-weight: 700;
  color: var(--title, #102d4b);
}
.tt-fold button:hover { border-color: var(--primary, #6E9CB8); }

/* ── 2. 폭이 줄면 표의 밀도도 함께 줄입니다 ────────────────────────── */
@media (max-width: 1450px) {
  .ds-table th, .ds-table td { padding: 8px 6px; }   /* v7.9.4 : 9 → 6 (1280 폭에서 처리 버튼이 잘리지 않게) */
  .ds-table th.sortable a { padding: 9px 6px; }       /* 정렬 머리글도 같은 여백 (머리글 · 칸 시작선 일치) */
  .ds-table { font-size: 12.5px; }
}
@media (max-width: 1180px) {
  .ds-table { font-size: 12.5px; }
  .ds-table th, .ds-table td { padding: 7px 7px; }
  .ds-page, .ds-main { padding-left: 16px; padding-right: 16px; }
}

/* ── 2-B. 조회 조건 칸이 자기 자리를 넘지 않게 ──────────────────────
   «업로드일» 은 날짜 칸이 둘(150px+150px)이라 격자 한 칸(180px)을 넘겼습니다.
   폭이 모자라면 아래로 접히게 합니다. */
.ds-filter-grid > *, .ds-form-field { min-width: 0; }
.ds-filter-grid .ds-form-field > div { flex-wrap: wrap; }
.ds-filter-grid .ds-input[type="date"] {
  width: auto !important; min-width: 128px; max-width: 100%; flex: 1 1 128px;
}

/* ── 3. 좁아지면 좌측 메뉴가 위로 올라갑니다 (기존 900px 규칙 보강) ─── */
@media (max-width: 900px) {
  .ds-side { max-height: 46vh; overflow-y: auto; }
  .ds-header { padding: 11px 16px; }
  .ds-tabbar { padding: 10px 14px 0; }
}

/* ── 4. 휴대폰 — 표를 카드로 세웁니다 (data-label 을 제목으로) ─────── */
@media (max-width: 760px) {
  table[data-stack] { display: block; background: none; width: 100%; }
  table[data-stack] thead { display: none; }
  table[data-stack] tbody { display: block; }
  table[data-stack] tbody tr {
    display: block; background: #fff; margin-bottom: 10px;
    border: 1px solid var(--line, #e3e8ef); border-radius: 12px; padding: 4px 2px;
  }
  table[data-stack] tbody td {
    display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
    border: 0; padding: 6px 12px; text-align: left !important;
    flex-wrap: wrap;   /* v7.9.6 : 값이 여러 조각인 칸이 카드 밖으로 밀리지 않게 줄을 바꿉니다 */
  }
  table[data-stack] tbody td > * { max-width: 100%; min-width: 0; }
  table[data-stack] tbody td::before {
    content: attr(data-label);
    flex: 0 0 34%; font-size: 11.5px; font-weight: 700;
    color: var(--muted, #667085); padding-top: 1px;
  }
  /* 이름표가 없는 칸(체크상자·처리 버튼)은 제목 없이 한 줄을 다 씁니다 */
  table[data-stack] tbody td[data-label=""]::before { content: none; }
  table[data-stack] tbody td[data-label=""] { justify-content: flex-start; }
  table[data-stack] tbody td:last-child { border-top: 1px solid var(--line, #e3e8ef);
                                              margin-top: 4px; padding-top: 9px; }
  /* 카드에서는 접기를 하지 않습니다 — 모든 값을 한 장에 적습니다.
     (접었다는 안내줄도 숨깁니다 — 숨기는 판단은 table-tools.js 가 함께 합니다) */
  table[data-stack] tbody td[data-p] { display: flex !important; }
  table[data-stack] thead th[data-p] { display: none !important; }

  .ds-btn-row, .ds-form { flex-wrap: wrap; }
  .ds-page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ds-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 5. 인쇄 — 접은 열도 모두 나옵니다 ────────────────────────────── */
@media print {
  table[data-fold] [data-p] { display: table-cell !important; }
  .tt-fold, .tt-bar { display: none !important; }
}