/* PC 층: public/shared/user-item-row.css 위에 얹는 넓은 화면 배치
 * 같은 행이 넓은 목록(탐색 · 사건번호 결과)과 좁은 옆 패널(지도)에 모두 쓰이므로, 화면이 아니라 목록이 실제로 받은 폭으로 모양을 정합니다.
 * - 목록 폭 680px 이상: 금액이 세로 열로 맞는 장부 행. 좁으면 공통 CSS 의 행 카드 그대로. */
.item-rows {
  container: item-rows / inline-size;
}

.item-row__pr,
.item-row__line {
  font-variant-numeric: tabular-nums;
}

.item-row:not([aria-disabled="true"]):hover {
  background: var(--color-bg-muted);
}

@container item-rows (min-width: 680px) {
  /* 흰 카드 반복 대신 한 장의 장부: 행 사이는 가는 줄 */
  .item-rows > li > .item-row {
    gap: var(--space-4);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: 0;
  }

  .item-rows > li + li > .item-row {
    border-top: 1px solid var(--color-border-default);
  }

  .item-rows > li:first-child > .item-row {
    border-radius: var(--radius-box) var(--radius-box) 0 0;
  }

  .item-rows > li:last-child > .item-row {
    border-radius: 0 0 var(--radius-box) var(--radius-box);
  }

  .item-rows > li:only-child > .item-row {
    border-radius: var(--radius-box);
  }

  /* 유형 · 위치 | 최저가 | 감정가 대비 | 예상 수익. 행마다 같은 고정 폭이라 금액 열이 위아래로 맞음.
   * 최저가 칸이 있는 행만(홈 더보기 행 hl-row 는 칸 구성이 달라 제외) */
  .item-row__tx:has(> .item-row__pr) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 108px 142px;
    column-gap: var(--space-3);
    align-items: center;
    font-size: var(--font-size-sm);
  }

  /* 유형 칩 한 줄, 그 아래 위치 · 면적. 말줄임 없이 다 보임 */
  .item-row__l1:has(+ .item-row__pr) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    overflow: visible;
    white-space: normal;
  }

  .item-row__l1:has(+ .item-row__pr) > .item-row__loc {
    flex-basis: 100%;
    word-break: keep-all;
  }

  .item-row__pr,
  .item-row__pr ~ .item-row__line {
    margin: 0;
    text-align: right;
    word-break: keep-all;
  }

  /* '예시' 배지는 금액 오른쪽 바깥의 자기 자리에: 배지 유무와 관계없이 금액 끝이 맞음 */
  .item-row__pr ~ .item-row__line:last-child {
    position: relative;
    padding-right: 34px;
  }

  .item-row__pr ~ .item-row__line:last-child .usr-sample {
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    transform: translateY(-50%);
  }
}

/* 본문 폭을 다 쓰는 목록은 열을 넓혀 금액을 더 크게 비교 */
@container item-rows (min-width: 960px) {
  .item-rows > li > .item-row {
    gap: var(--space-5);
    padding: var(--space-3) var(--space-5);
  }

  .item-row__tx:has(> .item-row__pr) {
    grid-template-columns: minmax(0, 1fr) 200px 136px 178px;
    column-gap: var(--space-5);
    font-size: var(--font-size-md);
  }

  .item-row__pr {
    font-size: var(--font-size-xl);
  }
}