- 공용 줄 쌓기 화면: 페이지가 저장을 맡는 꼴(`page`)을 M02 단가산출 화면에도 — 탭 위 [고침 버림] · [수식 저장] 걷음 · M02 사본 [단가 갱신] · [재생성] · 「M01 새 판」 배지는 그대로 · 「줄 쌓기에서 못 고치는 칸」 안내 줄 걷음(금액 줄 기호 = 율 줄이 앞 줄 금액을 부르는 속 이름 · 화면에서 고칠 값 아님 · 보존 그대로) - M02 머리 단추 = [초기화] · [삭제] · [되돌림] · [저장] — 단가산출 상세는 [새로고침] 숨김 · [되돌림] · [저장] = 고침 있을 때만(기본정보 + 수식) · [저장] 한 번 = 수식 먼저 저장(새 판 · 수식 칸 받음) → 단가산출 문서 저장 · [되돌림] · 버리고 떠남 = 수식 캐시도 비움 - 보기 고르기(수식 · 단가산출 상세) = M01 처럼 머리 줄 · [항목 추가] · [율 줄 추가] 걷음(줄 더하기 = 수식 탭 [+] 단가산출 · 일위대가 복사) · 일위대가 줄 모달 안 상세는 그대로 - 머리 단추 줄 맞춤(부품 상자 `fitButtonRow`): 단추가 아래로 떨어지거나 제목이 여러 줄이면 아이콘 단추는 아이콘만(글 = 풍선 도움말) · M01 단추 다섯 · M02 단추 넷 아이콘 · 단가산출 상세 긴 이름은 제목 안에서 줄바꿈 - 사본 할일 막힘 알림 글 = [저장] 또는 [되돌림] 먼저 - 시험: test_804_7 에 M02 단추 · 저장 한 번 · 줄 맞춤 지킴 더함 · test_804_4 권한 시험에 수식 저장 판 = 페이지 저장 판 이어 씀 확인 더함 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
211 lines
5.0 KiB
CSS
211 lines
5.0 KiB
CSS
/* M02 마스터 템플릿 — 좌측 패널 + 메인. 카드·목록·줄 모양은 공용 ui-sidebar-*
|
|
(ui_template_overlay.css, M01 과 한 벌) — 여기는 패널 위 여백만. */
|
|
.m02-side {
|
|
padding-top: var(--spacing-8);
|
|
}
|
|
|
|
.m02-side__empty {
|
|
margin: 0;
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-side__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* 일위대가 조합 서고 목록표(51-4) — 표 꼴은 M01 목록(`m01-master__grid`) · 첫 칸 = 고름 */
|
|
.m01-master__grid .m02-lib__pick {
|
|
width: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.m02-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-12);
|
|
min-width: 0;
|
|
padding: var(--spacing-16) var(--spacing-24);
|
|
}
|
|
|
|
.m02-main__head {
|
|
position: relative; /* 상세 [?] 도움말 상자의 기준(49-7) */
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
/* ☰ 들여쓰기(7-2) */
|
|
html.is-bm-route .m02-main__head {
|
|
padding-left: max(0px, calc(var(--wf-burger-pad, 0px) - var(--spacing-24)));
|
|
}
|
|
|
|
.m02-main__title {
|
|
flex: 0 1 auto;
|
|
min-width: 3rem;
|
|
overflow-wrap: anywhere; /* 번호 + 이름 — 잘리지 않게 줄바꿈 */
|
|
margin: 0;
|
|
color: var(--color-text);
|
|
font-size: 18px; /* M01 머리 제목과 같음(39-5) */
|
|
}
|
|
|
|
/* 단가산출 상세(804-8) — 제목이 남는 자리를 차지 · 긴 이름은 제목 안에서 줄바꿈(단추가 아래로 안 떨어짐) */
|
|
.m02-main__head:has(> .m02-main__slot [data-sk-views]) > .m02-main__title {
|
|
flex: 1 1 8rem;
|
|
}
|
|
|
|
.m02-main__head:has(> .m02-main__slot [data-sk-views]) > .m02-main__slot {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.m02-main__head .ui-btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 상세 [?] — 단추는 제목 바로 옆 흐름 · 상자는 머리 아래 오른쪽에 뜸 */
|
|
.m02-main__help {
|
|
display: contents;
|
|
}
|
|
|
|
.m02-main__head > .m02-main__help > .m02-struct__keys {
|
|
top: calc(100% + var(--spacing-8));
|
|
right: 0;
|
|
width: max-content;
|
|
max-width: min(36rem, 100%);
|
|
max-height: 70vh;
|
|
z-index: 20;
|
|
}
|
|
|
|
.m02-main__slot {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 제목 줄 오른쪽 끝 도구(일위대가 「새 조합」 · PLAN 30-5) */
|
|
.m02-main__tools {
|
|
flex-wrap: nowrap; /* 도구줄 부품은 감김 — 여기는 한 줄 그대로 */
|
|
display: inline-flex;
|
|
gap: var(--spacing-8); /* M01 머리 줄(`m01-head`)과 같은 틈 */
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* 겉 = 띠 알림 부품(ui-banner--danger) · 여기는 가운데 맞춤만 */
|
|
.m02-main__notice {
|
|
align-items: center;
|
|
}
|
|
|
|
.m02-main__host {
|
|
min-height: 240px;
|
|
}
|
|
|
|
/* 면적산출 · 재료산출 전체 편집 — `.ss` 는 height:100% 로 부모 높이를 받음 · 도면 편집과 같이 메인 칸을 화면 높이로 채움 */
|
|
.m02-main:has(> .m02-main__host > .ss) {
|
|
box-sizing: border-box;
|
|
height: calc(100dvh - var(--app-header-h));
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-main__host:has(> .ss) {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-main__host > .ss {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 일위대가 상세(85-5) — 면적 상세와 같은 고정 높이 · 본문 칸만 굴림 · 오른쪽 패널은 칸 높이(따로 스크롤) */
|
|
.m02-main:has(> .m02-main__host > .ui-side-panels-row) {
|
|
box-sizing: border-box;
|
|
height: calc(100dvh - var(--app-header-h));
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-main__host:has(> .ui-side-panels-row) {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-main__host > .ui-side-panels-row {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.m02-main__host > .ui-side-panels-row > :first-child {
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.m02-modal__field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
/* 층 화면 — 회사용 읽기만 안내 막대 · 회사 없음 안내 */
|
|
.m02-layer-bar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-layer-need {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-12);
|
|
padding: var(--spacing-24);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* 상세 제목 줄 오른쪽 끝 「새 항목」 · 「새 조합」(PLAN 30-5 · 공용) — 늘어나는 칸이 없어도 끝으로 */
|
|
.m02-main__new {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.m02-main__new[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 「구조물 조합」 제목 = 표 접기 · 펴기(PLAN 31-2) — 캐럿은 공용 접기 컨테이너와 같은 모양 */
|
|
.m02-main__title--fold {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.m02-main__title--fold::after {
|
|
content: "▾";
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.m02-main__title--fold.is-folded::after {
|
|
content: "▸";
|
|
}
|
|
|
|
.m02-main__host[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 상세 이동 [도면][일위대가][면적산출](105-4) — 지금 상세 단추는 숨김(113-2) */
|
|
.m02-main__nav[hidden] {
|
|
display: none;
|
|
}
|