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

// 타일과 그 아래 글자 사이 — 시안 8px.
.thumbnail,
.slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: fox.gap(3);
}

.caption {
  font-size: fox.font-size(label-sm);
  color: fox.color(font-neutral-default);
}

// [+ 추가] 타일 아래 「추가 이미지」 — 시안은 「삭제」와 같은 11px 연한 글자다.
.captionSubtle {
  font-size: fox.font-size(label-xsm);
  color: fox.color(font-neutral-subtle);
}

.required {
  color: fox.color(font-system-danger);
}

// 「+ 추가」 타일 — 기획 BO-MAL-002의 160×160 점선 상자. 크기는 옆 이미지 칸과 같아야 줄이
// 맞는다(토큰 스케일이 96px에서 끝나 리터럴로 둔다, 꾸미기아이템 썸네일과 같은 처리).
// 안의 글자는 시안대로 "+ 추가" 한 줄이다.
.addTile {
  display: flex;
  inline-size: 16rem;
  block-size: 16rem;
  align-items: center;
  justify-content: center;
  gap: fox.gap(1);
  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-subtler);
  font-size: fox.font-size(label-sm);
  cursor: pointer;
  appearance: none;

  &:hover {
    background: fox.color(action-default-hover);
    color: fox.color(font-neutral-default);
  }
}