/* 값 목록(552-3) — 이름 왼쪽 · 값 오른쪽 · 줄 24 */
.ui-kv {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--color-text);
}
.ui-kv__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-height: 24px;
  padding: 2px 0;
}
.ui-kv__row + .ui-kv__row {
  border-top: 1px solid var(--color-border);
}
.ui-kv__label {
  color: var(--color-text-muted);
  font-size: var(--text-caption);
}
.ui-kv__value {
  margin: 0;
  font-size: var(--text-body-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ui-kv__row--big .ui-kv__value {
  font-size: 18px;
  font-weight: 700;
}
/* 규칙 꼴(557-2) — 왼쪽 15em · 설명 왼쪽 맞춤 · 줄마다 아래 선 · 값 없는 줄은 이름이 통째 */
.ui-kv--rule {
  margin-bottom: var(--spacing-8);
}
.ui-kv--rule .ui-kv__row {
  display: grid;
  grid-template-columns: minmax(0, 15em) 1fr;
  align-items: center;
  gap: var(--spacing-12);
  padding: var(--spacing-4) 0;
  border-top: 0;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.ui-kv--rule .ui-kv__label {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  color: inherit;
  font-size: inherit;
}
.ui-kv--rule .ui-kv__label:only-child {
  grid-column: 1 / -1;
}
.ui-kv--rule .ui-kv__value {
  font-size: inherit;
  text-align: left;
}
.ui-kv__mark {
  margin-right: var(--spacing-4);
  font-weight: 700;
}
.ui-kv__mark.is-ok {
  color: var(--color-success);
}
.ui-kv__mark.is-bad {
  color: var(--color-danger);
}

/* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */
:is(.ui-kv, .ui-kv__row, .ui-kv__label)[hidden] {
  display: none !important;
}