/* =====================================================================
   거래명세서

   거래처에 나가는 종이다. 화면 디자인이 아니라 서식이다.
   그래서 ODDGO 의 굵은 타이포·둥근 모서리를 쓰지 않는다 —
   받는 쪽이 익숙한 형태여야 읽는다.
   ===================================================================== */

.stmt-wrap { background: var(--ux-canvas); padding: 16px; border-radius: var(--r-sm); overflow-x: auto; }

.stmt {
  background: #fff;
  color: #000;
  width: 186mm;              /* A4 가로 210mm - 여백 12mm×2 */
  margin: 0 auto;
  padding: 6mm;
  font-family: var(--font);
  font-size: 10.5px;
  line-height: 1.45;
}

.stmt__title {
  text-align: center;
  font-size: 22px; font-weight: 850; letter-spacing: 6px;
  padding-bottom: 6px;
}
.stmt__no {
  text-align: center; font-size: 11px; font-weight: 700; color: #444;
  padding-bottom: 10px;
}
.stmt__date { margin-left: 12px; color: #666; font-weight: 650; }

/* 공급받는자를 왼쪽에 둔다. 받는 사람이 자기 정보를 먼저 본다. */
.stmt__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stmt__party { border: 1px solid #333; }
.stmt__party--sup { background: #fafafa; }
.stmt__ph {
  background: #333; color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-align: center; padding: 3px;
}
.stmt__pt { width: 100%; border-collapse: collapse; }
.stmt__pt th, .stmt__pt td {
  border: 1px solid #ccc; padding: 3px 6px; font-size: 10px;
}
.stmt__pt th {
  width: 72px; background: #f4f4f4; font-weight: 700; color: #333;
  text-align: left; white-space: nowrap;
}
.stmt__pt td { font-weight: 650; }

/* 합계는 명세서에서 제일 먼저 확인하는 값이다. 표 위로 올린다. */
.stmt__sum {
  display: flex; align-items: baseline; gap: 8px;
  border: 2px solid #333; border-top: none;
  padding: 7px 12px; margin-top: -1px;
  font-size: 11px; font-weight: 700;
}
.stmt__sum b {
  font-size: 19px; font-weight: 850; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stmt__sumk { color: #555; font-weight: 650; }

.stmt__items { width: 100%; border-collapse: collapse; margin-top: 8px; }
.stmt__items th, .stmt__items td {
  border: 1px solid #999; padding: 4px 6px; font-size: 10px;
}
.stmt__items thead th {
  background: #eee; font-weight: 800; text-align: center; color: #222;
}
.stmt__items td.c { text-align: center; }
.stmt__items td.r { text-align: right; font-variant-numeric: tabular-nums; }
.stmt__code { color: #777; font-size: 9px; margin-left: 5px; font-weight: 650; }
.stmt__miss { color: #c00; }
.stmt__ref { color: #c00; font-size: 8px; }
.stmt__blank td { height: 19px; border-color: #ccc; }

.stmt__items tfoot th {
  text-align: right; background: #f7f7f7; font-weight: 750;
}
.stmt__items tfoot td { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.stmt__items tfoot .stmt__total th { background: #333; color: #fff; font-size: 11px; }
.stmt__items tfoot .stmt__total td { background: #333; color: #fff; font-size: 12px; }

.stmt__note { margin-top: 6px; font-size: 9px; color: #c00; font-weight: 650; }
.stmt__memo { margin-top: 6px; font-size: 10px; font-weight: 650; }
.stmt__foot {
  display: flex; gap: 18px; justify-content: flex-end;
  margin-top: 10px; padding-top: 6px; border-top: 1px solid #ddd;
  font-size: 9px; color: #777; font-weight: 650;
}

@media print {
  .stmt { width: auto; padding: 0; }
  .stmt-wrap { padding: 0; background: none; }
}