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;
.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;
}