- 공용 화면 A00_Common/line_stack_* — 위 옵션 · 왼쪽 줄 쌓기 편집 · 오른쪽 산출근거(경쟁사 시트 꼴) · 맨 아래 합계 상자 - 모델 common_util_line_stack.ts — 수식 문서 ↔ 줄 쌓기 한 벌 왕복(차림 = 문서 칸 `쌓기` · 기본과 다를 때만) - 기계 · 단가산출 줄 단가 수 누름 = 그 문서를 같은 계산기로 셈해 펼침(손료 식 · 운전경비 · 노 · 재 · 경 · 계) - 공식 묶음 · 틀 풀기(단가산출 결과 → 이 문서 식) · 내 틀(이 브라우저) · 「내 틀 (… 에서 변경)」 - 수식 탭과 같은 길 · 같은 캐시 · 탭 바꾸면 다시 읽음 · [수식 저장] = 서버 정본 셈 - KaTeX(MIT) — vite 미리 묶기에서 뺌(rolldown 이 글자 규칙 서로게이트 범위를 깨뜨림) - 시험 test_804_2 6(왕복 1,518 · 금액 · 기계 펼침 = hourly · 틀 풀기 · 저장 · 이음) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
198 lines
3.4 KiB
CSS
198 lines
3.4 KiB
CSS
/* 줄 쌓기 탭(804-2) — 위 옵션 · 가운데 왼쪽 편집 | 오른쪽 산출근거 · 맨 아래 합계 상자 · 색은 공통 값만 */
|
|
.lstk {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
min-width: 0;
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.lstk__head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.lstk__bar,
|
|
.lstk__badges,
|
|
.lstk__tools {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.lstk__areas {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
|
|
gap: var(--spacing-12);
|
|
align-items: start;
|
|
}
|
|
|
|
.lstk:not([data-edit="1"]) .lstk__areas {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.lstk:not([data-edit="1"]) .lstk__left {
|
|
display: none;
|
|
}
|
|
|
|
/* 탭 폭이 좁으면(1366 화면 등) 편집 위 · 산출근거 아래 */
|
|
@container (max-width: 1240px) {
|
|
.lstk__areas {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
/* ── 왼쪽 편집 ── */
|
|
.lstk-edit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.lstk-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.lstk-ihead,
|
|
.lstk-row,
|
|
.lstk-fhead,
|
|
.lstk-frow,
|
|
.lstk-find,
|
|
.lstk-ltools {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-4) var(--spacing-8);
|
|
min-width: 0;
|
|
}
|
|
|
|
.lstk-frow {
|
|
align-items: center;
|
|
}
|
|
|
|
.lstk-line {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
padding: var(--spacing-8);
|
|
padding-inline-end: 120px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface-sunken);
|
|
}
|
|
|
|
.lstk-ltools {
|
|
position: absolute;
|
|
inset-block-start: var(--spacing-4);
|
|
inset-inline-end: var(--spacing-4);
|
|
gap: 0;
|
|
}
|
|
|
|
.lstk-kind {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.lstk-fhead[data-tpl="changed"] .lstk-kind {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.lstk-f-s {
|
|
width: 6em;
|
|
}
|
|
|
|
.lstk-f-m {
|
|
width: 9em;
|
|
}
|
|
|
|
.lstk-f-l {
|
|
flex: 1 1 12em;
|
|
min-width: 10em;
|
|
}
|
|
|
|
.lstk-sym {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.lstk-val,
|
|
.lstk-unit,
|
|
.lstk-tag,
|
|
.lstk-hint,
|
|
.lstk-link {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.lstk-link {
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.lstk-tag {
|
|
padding: 0 var(--spacing-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.lstk-empty {
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.lstk-miss,
|
|
.lstk-tex .lstk-miss {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
/* ── 오른쪽 산출근거 ── */
|
|
.lstk-out .lstk-h {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0 var(--spacing-4);
|
|
padding-inline-start: calc(var(--lstk-depth, 0) * var(--spacing-24));
|
|
white-space: normal;
|
|
}
|
|
|
|
.lstk-out tr.head,
|
|
.lstk-out tr.item,
|
|
.lstk-out tr.total {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.lstk-out tr.subsum,
|
|
.lstk-out tr.total {
|
|
background: var(--color-surface-sunken);
|
|
}
|
|
|
|
.lstk-out tr.is-sub .lstk-h {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.lstk-out tr.subhead .lstk-h {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.lstk-gap {
|
|
display: inline-block;
|
|
width: var(--spacing-24);
|
|
}
|
|
|
|
.lstk-pack {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.lstk-tex .katex {
|
|
font-size: 1.05em;
|
|
}
|