File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-14
08-19
08-19
08-14
08-14
08-18
08-18
08-14
08-18
08-18
08-19
08-19
08-19
// 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});
}
}
}