eomsangdonandClaude Opus 5.5
96326eaa35
- DataFlow/_sample 다섯 · CostFlow/_sample 셋 → fixtures_df(costflow) · 시험 길 고침(df_sample · df_model · cf_sample) - M02_DF_Sample.ts 지움(시험 밖에서 시작 화면만 씀) · Entry 견본 칸 · 글 · 부름 지움 · 시작 화면 한 칸 - CostFlow 폴더 나머지 · 시험판 단추 · 메뉴는 그대로 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BU9gbNE3aWFUvE61pS2WGt
288 lines
5.4 KiB
CSS
288 lines
5.4 KiB
CSS
/* 단가산출 다이어그램 — 화면 전체를 덮는 시험판 페이지 · 페이지 하나만 세로로 밀림(안쪽 스크롤 없음) */
|
|
|
|
.m02-df {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000; /* 공용 모달과 같은 층 — 뒤에 여는 물음 · 고르기 창은 그 위(--z-confirm 1050) */
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background: var(--color-canvas);
|
|
color: var(--color-text);
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
.m02-df:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.m02-df__muted {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
/* 위 띠 — 밀어도 위에 붙어 있음 */
|
|
.m02-df__head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-12);
|
|
padding: var(--spacing-12) var(--spacing-24);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
}
|
|
|
|
.m02-df__title {
|
|
margin: 0;
|
|
font-size: var(--text-subheading);
|
|
}
|
|
|
|
.m02-df__trial {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-df__strip {
|
|
display: flex;
|
|
flex: 1 1 480px;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.m02-df__name {
|
|
flex: 1 1 260px;
|
|
}
|
|
|
|
.m02-df__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.m02-df__body {
|
|
padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
|
|
}
|
|
|
|
/* 시작 화면 */
|
|
.m02-df__start {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--spacing-24);
|
|
}
|
|
|
|
.m02-df__start-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-df__start-col h3 {
|
|
margin: var(--spacing-8) 0 0;
|
|
}
|
|
|
|
/* 고치는 화면 — 위 다이어그램(크게) · 아래 고른 상자 판(크게) + 원가 */
|
|
.m02-df__layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
.m02-df__part {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.m02-df__part h3 {
|
|
margin: 0;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.m02-df__part-body {
|
|
padding: var(--spacing-12);
|
|
}
|
|
|
|
.m02-df__lower {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
|
|
gap: var(--spacing-16);
|
|
align-items: start;
|
|
}
|
|
|
|
.m02-df__box .m02-df__part-body {
|
|
min-height: 50vh;
|
|
}
|
|
|
|
.m02-df__box-slots {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.m02-df__slot {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-df__slot h4 {
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.m02-df__lower,
|
|
.m02-df__start,
|
|
.m02-df__box-slots {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.m02-df__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.m02-df__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
width: 100%;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.m02-df__item:hover {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.m02-df__item-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-df__item-unit {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-df__note {
|
|
margin: 0 0 var(--spacing-12);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.m02-df__note:empty {
|
|
display: none;
|
|
}
|
|
|
|
.m02-df__color {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-bottom: var(--spacing-8);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-df__color[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.m02-df__color-input {
|
|
width: 44px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 상세 내용 — 머리(왼쪽 「상세 내용」 · 오른쪽 고른 상자 제목 · 알약 이름) · 설정 · 본문 · 경고 */
|
|
.m02-df__detail-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-12);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.m02-df__detail-head h3 {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.m02-df__detail-name {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-df__detail-pill {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-df__detail-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-8) 0;
|
|
border-bottom: 1px dashed var(--color-border);
|
|
}
|
|
|
|
.m02-df__detail-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.m02-df__detail-row[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.m02-df__detail-row h4 {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-df__detail-warn {
|
|
margin: 0;
|
|
padding-left: var(--spacing-16);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-df__detail-dl {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: var(--spacing-4) var(--spacing-12);
|
|
margin: 0;
|
|
}
|
|
|
|
.m02-df__detail-dl dd {
|
|
margin: 0;
|
|
}
|
|
|
|
.m02-df__detail-trace {
|
|
margin: 0;
|
|
padding-left: var(--spacing-16);
|
|
}
|