/* 목록 표의 칸 정돈 — /admin과 /center가 함께 불러 쓴다.
   진행 현황 목록에 먼저 적용했던 규칙(머리글이 잘리지 않게, 여백은 창 폭에 맞춰 줄이고,
   좁아지면 덜 중요한 칸부터 접기)을 시스템의 모든 목록으로 넓힌 것이다.

   선택자를 `table th`(0,0,2)로 둔 이유: 각 화면의 `th, td { padding: … }`(0,0,1)보다 세야
   여백 조정이 실제로 먹는다. 대신 `.defects-table-fixed th`(0,1,1)처럼 표 하나를 겨냥한
   규칙보다는 약해서, 이미 자기 폭을 따로 정해 둔 표는 건드리지 않는다. */

/* 머리글은 절대 두 줄로 접지 않는다.
   접히면 그 칸이 세로로 늘어나면서 폭을 빼앗겨, 정작 값은 두 글자인데 칸만 좁아 보인다.
   (실측: 현장 관리의 "확인서 일괄 처리"가 75px까지 눌려 두 줄이 됐다) */
table th { white-space: nowrap; }

/* 여백은 창이 좁아질수록 줄인다 — 칸 수가 많은 표에서 여백이 곧 잃어버린 글자 폭이다.
   표 양 끝은 12px를 지켜 카드 안에서 글이 벽에 붙어 보이지 않게 한다. */
@media (max-width: 1400px) {
  table th, table td { padding: 10px 9px; }
  table th:first-child, table td:first-child { padding-left: 12px; }
  table th:last-child, table td:last-child { padding-right: 12px; }
}
@media (max-width: 1200px) {
  table th, table td { padding: 9px 7px; }
  table th:first-child, table td:first-child { padding-left: 12px; }
  table th:last-child, table td:last-child { padding-right: 12px; }
}

/* 칸이 많아 가로로 밀어서 봐야 하는 표(회사 관리). 바닥 폭을 인라인 style로 박아 두면
   칸을 접어도 그 폭이 그대로 남아 4칸짜리 표에 가로 스크롤이 생긴다 — 접는 만큼 같이 낮춘다. */
.table-wide { min-width: 900px; }
@media (max-width: 1299px) { .table-wide { min-width: 700px; } }
@media (max-width: 1199px) { .table-wide { min-width: 0; } }

/* 줄바꿈할 곳이 없는 긴 문자열이 들어오는 칸(로그의 "상세"에는 JSON 한 줄이 통째로 들어온다).
   그냥 두면 그 한 줄이 표를 3500px까지 늘려 화면 밖으로 밀어낸다 — 실측값이다.
   글자 중간에서라도 끊을 수 있게 해주면 표가 카드 안으로 들어온다. */
table th.col-break, table td.col-break { white-space: normal; word-break: break-all; }

/* 창이 좁아지면 접을 칸. 머리글에만 붙이면 같은 자리의 값 칸에도 list-columns.js가 옮겨 붙인다.
   숫자는 "이 폭 미만에서 감춘다"는 뜻이라 머리글 정의(hideBelow)와 읽는 법이 같다. */
@media (max-width: 1399px) { .hide-1400 { display: none; } }
@media (max-width: 1299px) { .hide-1300 { display: none; } }
@media (max-width: 1199px) { .hide-1200 { display: none; } }
@media (max-width: 1099px) { .hide-1100 { display: none; } }
@media (max-width: 899px) { .hide-900 { display: none; } }
@media (max-width: 699px) { .hide-700 { display: none; } }
@media (max-width: 519px) { .hide-520 { display: none; } }

/* 칸을 접으면 그 값이 사라져버린다. 접히는 폭에서만 나타나는 보조 줄을 남은 칸 안에 두어,
   좁은 화면에서도 같은 내용을 읽을 수 있게 한다(넓은 화면에서는 중복이라 감춘다). */
.fold-line { display: none; font-size: 11px; color: var(--mw-muted, #777); margin-top: 2px; }
@media (max-width: 1199px) { .fold-1200 { display: block; } }
@media (max-width: 899px) { .fold-900 { display: block; } }
@media (max-width: 699px) { .fold-700 { display: block; } }

/* ---- 좁은 화면(폰): 표를 카드로 쌓는다 ----
   칸을 아무리 접어도 폰 폭에서는 한 칸에 두세 글자씩 끊겨 읽을 수 없다. 640px 아래에서는
   한 줄(tr)을 한 장의 카드로 바꾸고, 칸마다 "이름 : 값" 한 줄로 세로로 흘린다.
   센터 진행 현황이 먼저 쓰던 방식을 어느 목록에서나 쓸 수 있게 옮겨온 것이다.

   켜는 방법은 표에 as-cards를 붙이는 것 하나뿐이다(모든 표에 일괄 적용하지 않는 이유:
   달력·요약표처럼 칸 수가 적어 그대로 두는 편이 나은 표도 있기 때문).
   칸 이름은 list-columns.js가 머리글에서 읽어 data-label로 붙여준다.

   색 토큰은 두 화면이 서로 다르다 — 센터는 --warm-*, 관리자는 --mw-*를 쓰므로
   var() 대체값을 겹쳐 써서 어느 화면에서든 그 화면의 색을 따르게 한다. */
@media (max-width: 640px) {
  table.as-cards { background: transparent; box-shadow: none; border-radius: 0; }
  table.as-cards thead { display: none; }
  table.as-cards, table.as-cards tbody, table.as-cards tbody tr, table.as-cards tbody td { display: block; width: auto; }
  table.as-cards tbody tr {
    border: 1px solid var(--warm-line, var(--mw-line, #e5e5e5));
    border-radius: 12px; padding: 8px 12px; margin-bottom: 8px;
    background: var(--warm-card, var(--mw-surface, #fff));
  }
  table.as-cards tbody tr:hover td { background: transparent; }
  /* 동작 칸처럼 버튼이 여러 개 들어가는 칸은 한 줄에 다 못 들어간다 — 넘치지 않고
     다음 줄로 접히게 한다(안 접으면 마지막 버튼이 화면 밖으로 밀려난다). */
  table.as-cards tbody td {
    border: none; padding: 4px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start;
    white-space: normal; overflow: visible; text-overflow: clip; max-width: none;
  }
  table.as-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 84px; padding-top: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    color: var(--warm-sub, var(--mw-muted, #777));
  }
  /* 값이 비어 있는 칸은 이름만 남아 카드가 길어지므로 통째로 감춘다. */
  table.as-cards tbody td:empty { display: none; }
  /* 카드에서는 모든 칸을 펼쳐 보여주므로, 접힌 칸을 대신하던 보조 줄은 중복이라 감춘다. */
  table.as-cards .fold-line { display: none; }
  /* "자료가 없습니다" 같은 안내줄(colspan)은 이름표 없이 가운데로. */
  table.as-cards tbody td[colspan] { display: block; text-align: center; color: var(--warm-sub, var(--mw-muted, #777)); }
  table.as-cards tbody td[colspan]::before { content: none; }
}