// FoxCard — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
//                  card (441:6006 · 섹션 463:5649)
//
// 마크업 계약 (React 밖 소비자용):
//   <div class="fox-card fox-card--md">
//     <div class="fox-card__image">…img…</div>          <!-- 선택 -->
//     <div class="fox-card__contents">
//       <p class="fox-card__title">타이틀</p>
//       <p class="fox-card__description">설명</p>
//     </div>
//     <div class="fox-card__actions">…fox-text-button…</div>   <!-- 선택 -->
//   </div>
//
// 크기 넷은 여백과 모서리만 바꾼다 — 폭은 놓이는 자리가 정한다(시안은 320px 자리에 뒀다).
//
// 그림은 16:9로 잘린다. 상자가 `overflow: clip`이라 위쪽 모서리를 그림이 넘지 않는다.
//
// 아래쪽 줄은 좌우·아래 여백만 갖는다 — 위쪽은 글 영역의 아래 여백이 이미 띄워 준다.
//
// 토큰이 아닌 값:
//   - 그림 비율 16/9: 시안 값이나 Figma가 변수로 export하지 않는다(사용자 승인).
//   - line-height / letter-spacing: 시안 텍스트 스타일의 값이나 Figma가 변수로
//     export하지 않는다.
//   - object-fit / overflow: 구조 규칙.

@use "abstracts" as fox;

.fox-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  inline-size: 100%;
  overflow: clip;
  border: fox.border(1) solid fox.color(border-neutral-subtle);
  background: fox.color(surface-neutral-default);

  &__image {
    inline-size: 100%;
    // 시안 값이나 변수로 export되지 않는다 — 파일 상단 참고.
    aspect-ratio: 16 / 9;

    > * {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  &__contents {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: fox.gap(2);
    inline-size: 100%;
    word-break: break-word;
  }

  &__title {
    inline-size: 100%;
    margin: 0;
    color: fox.color(font-neutral-strong);
    font-family: fox.font-family(title);
    font-size: fox.font-size(heading-sm);
    font-weight: fox.font-weight(bold);
    line-height: 1.4;
    letter-spacing: -0.025em;
  }

  &__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;
  }

  // 위쪽은 글 영역의 아래 여백이 이미 띄워 준다.
  &__actions {
    display: flex;
    align-items: flex-start;
    gap: fox.gap(5);
    inline-size: 100%;
  }

  // ── 크기 ──────────────────────────────────────────────────────────────────
  @each $size in (xlg, lg, md, sm) {
    &--#{$size} {
      border-radius: fox.card(radius-#{$size});
    }

    &--#{$size} > .fox-card__contents {
      padding: fox.card(padding-#{$size});
    }

    &--#{$size} > .fox-card__actions {
      padding-inline: fox.card(padding-#{$size});
      padding-block-end: fox.card(padding-#{$size});
    }
  }
}