// FoxDescriptionList — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) modal 5227:809의 form-list
//   inline 변형: FOX PAY_2.0(VqFRgEzMW4CuDLDwa5vYSn) BO-MAL-003 2805:1760의 등록 정보
//
// 마크업 계약 (React 밖 소비자용):
//   <dl class="fox-description-list [fox-description-list--inline]">
//     <div class="fox-description-list__item">
//       <dt class="fox-description-list__term"><span class="fox-form-label">이름</span></dt>
//       <dd class="fox-description-list__description">홍길동</dd>
//     </div>
//   </dl>
//
// 줄마다 아래에 구분선이 있다 — 시안이 마지막 줄에도 그어 두었으므로 걷어내지 않는다.
// `--inline`은 쌍을 가로 한 줄에 놓고 구분선을 긋지 않는다. 이름은 한 단계 작고 옅게(label-sm ·
// subtle), 값은 body-sm — 시안 실측(12/13px)과 같다. 쌍 사이 60px는 토큰에 없어 gap-11(64px)로
// 맞춘다.
//
// 토큰이 아닌 값:
//   - line-height / letter-spacing: 시안 텍스트 스타일(body/md)의 값이나 Figma가 변수로
//     export하지 않는다.

@use "abstracts" as fox;

.fox-description-list {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  margin: 0;
  // flex 부모가 `align-items: flex-start`여도 가로로 꽉 차게 한다 — 이 목록은 줄마다 구분선을
  // 긋기 때문에 폭이 내용에 맞춰 줄면 선이 중간에서 끊긴 것처럼 보인다.
  align-self: stretch;

  &__item {
    display: flex;
    inline-size: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: fox.gap(3);
    padding-block: fox.padding(6);
    border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
  }

  &__term {
    margin: 0;
  }

  &__description {
    inline-size: 100%;
    margin: 0;
    color: fox.color(font-neutral-default);
    font-family: fox.font-family(body);
    font-size: fox.font-size(body-md);
    font-weight: fox.font-weight(regular);
    line-height: 1.5;
    letter-spacing: -0.025em;
  }

  &--inline {
    flex-flow: row wrap;
    gap: fox.gap(11);
  }

  &--inline &__item {
    inline-size: auto;
    gap: fox.gap(2);
    padding-block: 0;
    border-block-end: 0;
  }

  &--inline &__term .fox-form-label {
    color: fox.color(font-neutral-subtle);
    font-size: fox.font-size(label-sm);
  }

  &--inline &__description {
    inline-size: auto;
    font-size: fox.font-size(body-sm);
  }
}