File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
@use "@fox/styles/abstracts" as fox;
.root {
display: flex;
flex-direction: column;
gap: fox.gap(3);
}
.tiles {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: fox.gap(4);
}
.thumbnail,
.slot {
display: flex;
flex-direction: column;
gap: fox.gap(2);
}
.slotFooter {
display: flex;
align-items: center;
justify-content: space-between;
gap: fox.gap(2);
}
.caption {
font-size: fox.font-size(label-sm);
color: fox.color(font-neutral-default);
}
.required {
color: fox.color(font-system-danger);
}
// 「+ 추가」 타일 — 기획 BO-MAL-002의 160×160 점선 상자. 크기는 옆 이미지 칸과 같아야 줄이
// 맞는다(토큰 스케일이 96px에서 끝나 리터럴로 둔다, 꾸미기아이템 썸네일과 같은 처리).
.addTile {
display: flex;
inline-size: 16rem;
block-size: 16rem;
flex-direction: column;
align-items: center;
justify-content: center;
gap: fox.gap(2);
padding: 0;
margin: 0;
border: fox.border(1) dashed fox.color(border-neutral-subtle);
border-radius: fox.radius(3);
background: fox.color(surface-neutral-gray);
color: fox.color(font-neutral-default);
font-size: fox.font-size(label-md);
cursor: pointer;
appearance: none;
&:hover {
background: fox.color(action-default-hover);
}
}
.addHint {
font-size: fox.font-size(label-xsm);
color: fox.color(font-neutral-subtle);
}