@use "@fox/styles/abstracts" as fox;

.form {
  display: flex;
  inline-size: 100%;
  flex-direction: column;
  border-block-start: fox.border(1) solid fox.color(border-neutral-subtle);
}

.row {
  display: flex;
  inline-size: 100%;
  align-items: flex-start;
  gap: fox.gap(6);
  padding-block: fox.padding(5);
  padding-inline: fox.padding(4);
  border-block-end: fox.border(1) solid fox.color(border-neutral-subtler);
}

.label {
  flex: 0 0 140px;
  padding-block-start: fox.padding(2);
}

.field {
  display: flex;
  flex: 1 1 0;
  min-inline-size: 0;
  flex-direction: column;
  gap: fox.gap(3);
}

.inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: fox.gap(3);
}

.grades {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
}

.keywordRow {
  display: flex;
  align-items: center;
  gap: fox.gap(2);
}

.keywordName {
  flex: 0 0 200px;
  min-inline-size: 0;
}

.keywordDescription {
  flex: 1 1 0;
  min-inline-size: 0;
}

// 시안 tbl-form(5449:10857)의 슬롯 — 테두리 컨테이너 안에 회색 판(컷 카드들)과 흰 푸터(컷 추가).
.cutBox {
  inline-size: 100%;
  overflow: hidden;
  border: fox.border(1) solid fox.color(border-neutral-default);
  border-radius: fox.radius(4);
  background: fox.color(surface-neutral-default);
}

.cutBody {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: fox.gap(4);
  padding-block: fox.padding(5);
  padding-inline: fox.padding(6);
  background: fox.color(surface-neutral-gray-strong);
}

.cutCard {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
  padding: fox.padding(3);
  border-radius: fox.radius(4);
  background: fox.color(surface-neutral-default);
  box-shadow:
    fox.shadow(location1) fox.shadow(location1) fox.shadow(blur1) 0
      fox.primitive(alpha-black10);
}

.cutFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: fox.gap(3);
}

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

.cutActions {
  display: flex;
  align-items: center;
  gap: fox.gap(3);
}

.cutBoxFooter {
  display: flex;
  padding-block: fox.padding(4);
  padding-inline: fox.padding(6);
}

.thumbnail {
  display: flex;
  align-items: flex-start;
  gap: fox.gap(4);
}

.answerLines {
  display: flex;
  flex-direction: column;
  gap: fox.gap(3);
}

.answerMessage {
  flex: 1 1 0;
  min-inline-size: 0;
  max-inline-size: 360px;
}