/*
 * ADM-12(/admin/esg/:id) — 계약 상세(헤더 · 요약 · 티어·모듈 · 작품 할당 · 결제 · 신청 · 세금계산서 ·
 * 이메일 · 리포트 · 상태 변경 · 지표 요약 · P5-S9-T1)
 * 색은 tokens.css 의 var(--…) 로만 씁니다.
 *
 * 모달(.esg-contracts-modal) · 표(.data-table) · 카드(.esg-contracts-card) 는 admin_esg_contracts.css(ADM-11)의
 * 것을 그대로 씁니다(propshaft 가 app/assets/**\/*.css 를 모두 읽어서 application.css 에 다시 @import 하지 않습니다).
 */

.esg-contract-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.esg-contract-detail-card {
  border: 1px solid var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  background: var(--color-background);
}

.esg-contract-detail-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ── 헤더 ──────────────────────────────────────────────────────── */
.esg-contract-detail-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.esg-contract-detail-header__back {
  color: var(--color-text-muted);
}

.esg-contract-detail-header__org {
  color: var(--color-text-muted);
}

.esg-contract-detail-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.esg-contract-detail-header__meta dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

/* ── 핵심 숫자 4칸 ──────────────────────────────────────────────── */
.esg-contract-detail-summary__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
}

.esg-contract-detail-summary__stats dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.esg-contract-detail-summary__stats dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.esg-contract-detail-summary__billing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.esg-contract-detail-summary__history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── 티어 · 모듈 ───────────────────────────────────────────────── */
.esg-contract-detail-tier__grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
}

/* ── 작품 할당 ─────────────────────────────────────────────────── */
.esg-contract-detail-work__slots {
  color: var(--color-text-muted);
}

.esg-contract-detail-work__results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── 무통장 신청서 · 세금계산서 그리드 ──────────────────────────── */
.esg-contract-detail-bank__grid,
.esg-contract-detail-invoice__grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
}

/* ── 지표 요약 6칸 ─────────────────────────────────────────────── */
.esg-contract-detail-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-4);
}

.esg-contract-detail-stats__grid dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.esg-contract-detail-stats__grid dd {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-title-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}