Files
Aislo/M01_MasterData/M01_MasterData_UI_LogicLab_Style.css
T
eomsangdonandClaude Sonnet 5 f7dd866876 feat(m01): 단가산출 상세 수량 칸 알약화 — 표 찾기만 알약 · 나머지는 글자
수량 칸을 「알약 + 사칙연산 글자」로 그림 — 찾기(...) 표 호출만 알약(조각 계약
`ref/_분석_알약_상세줄.md` ㉮ 표대로) · 나머지(숫자·연산기호·중간값·설계입력
이름)는 글자. 서버 조각 API 는 아직이라 화면에서 임시로 쪼갬(Logic_Note.ts
찾기() 규칙과 같음) — 서버가 붙으면 걷어냄. 단가·금액 칸은 안 건드림.

알약을 누르면 그 표만 바로 모달로(모달 안 알약 목록은 없앰) · 줄을 누르면 그
줄의 단가·다른 로직을 바로 보임(알약 없이 한 가지만). 인력·재료·경비 세 표를
table-layout: fixed + 같은 칸 폭으로 맞춤 · 알약은 칸 폭 기준 줄바꿈.

원 단위 소수점 0 — 돈 자리(단가·금액·소계·계)만 정수 · 수량·비율은 그대로 ·
조합 미리 보기(Combo_Preview)도 같이 고침.

검증: typecheck 통과 · ORCA 로 13-4-1·12-4·12-17-1 열어 확인(알약 클릭·행
클릭·칸 폭 동일 729.57px·정수 표시 확인, data-sum 은 원래 값 그대로 유지).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01V1MKKZKpUHTPKb513FneU8
2026-09-22 19:59:48 +09:00

178 lines
3.3 KiB
CSS

/* M01 로직 개선 시험 — 상세 화면 컨테이너 넷 · 호표 묶음 · 자료 모달 */
.m01lab__box {
padding: var(--spacing-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
/* 컨테이너 넷 한 양식 — 바깥 간격 · 안쪽 칸 사이 간격 · 제목 크기(폭이 좁아도 같은 규칙) */
.m01lab__box + .m01lab__box {
margin-top: var(--spacing-12);
}
.m01lab__box.m01-logic__section {
gap: var(--spacing-8);
}
.m01lab__box > .m01-logic__section-head h3 {
font-size: var(--text-body);
font-weight: 600;
}
.m01lab__info {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--spacing-8);
}
.m01lab__cell {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.m01lab__cell--wide {
grid-column: 1 / -1;
}
.m01lab__group {
margin: var(--spacing-8) 0 var(--spacing-4);
}
/* 칸 폭 고정(`table-layout: fixed`) — 인력·재료·경비 세 표가 저마다 딴 `<table>` 이라
내용 기준으로 폭이 갈리던 것을 막고 셋이 같은 폭으로 맞춰짐(일감35 이어 — 수량 칸 알약화). */
.m01lab__ho {
table-layout: fixed;
}
.m01lab__ho th:nth-child(1) {
width: 26%;
}
.m01lab__ho th:nth-child(2) {
width: 8%;
}
.m01lab__ho th:nth-child(3) {
width: 40%;
}
.m01lab__ho th:nth-child(4),
.m01lab__ho th:nth-child(5) {
width: 13%;
}
.m01lab__line {
cursor: pointer;
}
.m01lab__line:hover,
.m01lab__line:focus {
background: var(--color-paper);
}
.m01lab__line--extra {
font-style: italic;
}
.m01lab__expr {
font-family: var(--font-mono, monospace);
font-size: var(--text-body-sm);
white-space: pre-wrap;
word-break: break-all;
}
/* 수량 칸 — 알약 + 사칙연산 글자를 이어 붙이고, 칸 폭을 넘으면 그 칸 폭 기준으로 줄바꿈 */
.m01lab__qty-cell {
overflow-wrap: anywhere;
}
.m01lab__qty-frags {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 4px;
min-width: 0;
}
.m01lab__qty-text {
font-family: var(--font-mono, monospace);
font-size: var(--text-body-sm);
white-space: pre-wrap;
}
.m01lab__subtotal td {
font-weight: 600;
background: var(--color-paper);
}
.m01lab__total {
margin: var(--spacing-8) 0 0;
font-weight: 700;
text-align: right;
}
.m01lab__modal {
overflow: auto;
}
.m01lab__modal-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-8);
}
.m01lab__modal-body,
.m01lab__tables {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
}
.m01lab__hit td {
background: color-mix(in srgb, gold 45%, transparent);
font-weight: 600;
}
.m01lab__calc > h3 {
display: none;
}
.m01lab__text {
font-family: var(--font-mono, monospace);
font-size: var(--text-body-sm);
word-break: break-all;
padding: var(--spacing-4) 0;
}
.m01lab__text--off {
opacity: 0.55;
}
.m01lab__subtotal-text {
margin: var(--spacing-4) 0;
font-weight: 600;
text-align: right;
}
/* 복사해서 만들기(3-4) — 별칭 꼴 식 시트 */
.m01copy__sheet {
width: min(1040px, 94vw);
max-height: 90vh;
}
.m01copy__head {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-8);
}
.m01lab__own > :first-child {
display: none;
}
.m01lab__edit {
margin-top: var(--spacing-12);
}