/* 왼쪽에 큰 줄과 작은 줄, 오른쪽 끝에 동작. 아주 좁아 둘이 같이 못 서면 오른쪽이 아래로 내려옴 */
.identity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-inline-md);
}

/* flex: 1 이라 왼쪽이 남는 폭을 다 먹고 오른쪽 동작은 줄 오른쪽 끝에 붙어 있음. 이것이 없으면 왼쪽이
   제 내용 폭(작은 줄 다섯의 합)을 우겨 오른쪽이 다음 줄로 내려감. min-width: 0 은 그렇게 커진 왼쪽이
   다시 줄어들 수 있게 함(없으면 담는 화면이 가로로 넘침) */
.identity-row__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-inset-xs);
  min-width: 0;
}

.identity-row__title { margin: 0; font-size: var(--font-title); line-height: var(--line-title); }

/* 값이 여럿이라 좁은 폭에서는 한 줄에 안 들어감. 잘라 숨기지 않고 여러 줄로 접음 - 번호나 날짜가
   잘리면 이 줄을 두는 뜻 자체가 없어짐 */
.identity-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-inline-sm);
  row-gap: var(--space-inset-xs);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-label);
}

/* 한 칸이 줄보다 길면 그 칸 안에서 줄바꿈함. 칸 사이가 먼저 접히므로 이 줄바꿈은 정말 긴 값에만 걸림 */
.identity-row__item { min-width: 0; overflow-wrap: anywhere; }

/* 라벨과 값이 갈라져 서면 무슨 값인지 흐려져 라벨은 안 쪼갬 */
.identity-row__label { white-space: nowrap; }

/* 값과 값 사이 가운뎃점. 앞 칸에 붙여 줄이 바뀌어도 점이 다음 줄 머리로 안 넘어가고, 마지막 값
   뒤에는 안 붙음 */
.identity-row__item:not(:last-child)::after { content: '·'; margin-inline-start: var(--space-inline-sm); }

.identity-row__right { display: flex; align-items: center; gap: var(--space-inline-sm); }