/* 고객 파일 표(T5b)와 관리자 상세의 서버 받기 명령 상자. 관리자 상세의 파일 표도 같은 .report-table 모양을 쓴다(고객이 보는 화면과 같게).
 * 360px 휴대폰에서는 표를 줄마다 쌓아 가로로 넘치지 않게 한다. 색은 app.css 변수만 쓴다. */

.customer-hint {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* ── 리포트 표: 분류 / 파일명 / 크기 / Download ───────────── */

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.report-table thead th {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* 묶인 분류 칸: 같은 분류의 줄을 왼쪽 한 칸으로 묶는다(기존 리포트의 Category 열). */
.report-category {
  width: 1%;
  border-right: 1px solid var(--color-border);
  font-weight: 600;
  white-space: nowrap;
  vertical-align: top;
}

.report-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.report-file-name {
  display: block;
  font-weight: 600;
}

.report-md5 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: 0.75rem;
}

.report-md5-label {
  font-weight: 600;
}

.report-md5 code {
  overflow-wrap: anywhere;
}

.report-size {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-action {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.report-action .row-actions {
  justify-content: flex-end;
}

/* 좁은 화면: 표를 줄마다 쌓는다. 분류는 묶음 제목처럼, 다운로드 버튼은 줄 전체 폭으로(엄지로 누르기 쉽게). */
@media (max-width: 560px) {
  .report-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .report-table,
  .report-table tbody,
  .report-table tr,
  .report-table th,
  .report-table td {
    display: block;
    width: auto;
  }

  .report-table td {
    border-bottom: 0;
    padding: var(--space-1) var(--space-4);
  }

  .report-table tr {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .report-category {
    border-right: 0;
    background: var(--color-surface-muted);
    margin: calc(-1 * var(--space-2)) 0 var(--space-2);
    white-space: normal;
  }

  .report-action {
    text-align: left;
    white-space: normal;
  }

  .report-action > .button {
    width: 100%;
  }
}

/* ── 서버에서 받기 명령(관리자 상세 접힌 영역, 고객 화면에서 옮김) ── */

.command-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* 서명 링크가 든 긴 명령. 공백 없는 링크도 글자 단위로 꺾어 가로로 넘치지 않게 한다. */
.command-text {
  flex: 1 1 280px;
  min-width: 0;
  padding: var(--space-3);
  border-radius: 10px;
  background: var(--color-surface-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-all;
}