@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);
}