eomsangdonandClaude Opus 5.5
09134bab84
- DataFlow: 표 넷 = 데이터표 · 함수 판 알림 · 선/알약 경고 · 끊긴 곳 = 띠 알림 · 알약 · 칸 종류 = 배지 · 고르는 줄 = 목록 줄 · 입력 넷 = 입력 · 도구줄 여섯 · 날 색 → 공통 값 - 구조물 옵션 · 구조물 · 도면 · 면적 · 품목 고르기: 판 띠 = 띠 알림 · 한눈/종류별/부품 = 탭 · 표 둘 = 데이터표 · 체크 둘 = 체크 · 카드 · 번호 = 카드 · 배지 · 도면 도구줄 - 일위대가 · 호표 · 실무자료 · 본 화면 · 서고: 알림 = 띠 알림 · 빈 상태 · 보조 글 · 도구줄 여섯 · 옛 보라 별칭 0 - M01 로직 입력칸 = 입력 부품(작은 칸) · 일위대가 상세 줄 수 고정 시험 693 · 지킴 시험 M02 몫 더함 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
296 lines
8.2 KiB
CSS
296 lines
8.2 KiB
CSS
/* M02 구조물집계표 아래 설계 컨테이너 — 카드 셋(도면 정보 · 일위대가 · 면적산출) ·
|
|
카드 모양은 좌측 패널과 같은 공용 ui-sidebar-*(ui_template_overlay.css). */
|
|
|
|
/* 표 밖 형제 자리 — 비어 있을 때 메인 간격이 벌어지지 않게 칸을 지움. */
|
|
.m02-main__extra {
|
|
display: contents;
|
|
}
|
|
|
|
/* 카드 셋(도면 정보 · 일위대가 · 면적산출) = 1행 3열(40-2) · 카드 높이 = 화면 높이에 맞춰 크게(PLAN 31-6) ·
|
|
상세 칸이 좁으면 1열 */
|
|
.m02-struct {
|
|
/* 카드 본문은 카드 높이를 채움 — 넘치면 카드 안에서 스크롤 */
|
|
--m02-struct-body-min: 0;
|
|
--m02-struct-card-h: min(640px, 70vh);
|
|
/* 엑셀 카드 격자 최소 높이 — 카드에서 제목 · 머리 · 알약 줄 몫을 뺀 만큼(자재 조합 판은 그 아래 · 카드 안 스크롤) */
|
|
--m02-struct-grid-min: calc(var(--m02-struct-card-h) - 8rem);
|
|
display: grid;
|
|
flex: none;
|
|
grid-auto-rows: var(--m02-struct-card-h);
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 도면 · 일위대가 · 면적산출(40-2) */
|
|
min-width: 0; /* 표와 사이 = 메인 칸 간격 하나 · 구분선 없음(45-5) */
|
|
}
|
|
|
|
/* 상세 칸이 좁으면(카드 하나 300px 아래) 1열 — 좌측 패널을 접어도 맞게 상세 칸 폭으로 잼
|
|
(카드 자리 `m02-main__extra` 는 상자 없음 — 상세 칸이 잣대) */
|
|
.m02-main:has(> .m02-main__extra > .m02-struct) {
|
|
container-type: inline-size;
|
|
}
|
|
|
|
@container (max-width: 960px) {
|
|
.m02-struct {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|
|
|
|
.m02-struct > * {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 카드가 보이면 상세 칸은 창 높이까지 — 표 + 카드가 넘치면 상세 칸 전체가 스크롤 */
|
|
.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) {
|
|
box-sizing: border-box;
|
|
max-height: calc(100dvh - var(--app-header-h));
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 표는 줄어들지 않음(줄면 표가 카드 위로 넘침) · 표 높이만큼만(빈 칸 최소 높이 없음 · 45-5) */
|
|
.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) > .m02-main__host {
|
|
flex-shrink: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 분류 표 틀 아래 줄 없음 — 마지막 줄 칸 선이 표를 닫음(45-5) */
|
|
.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden]))
|
|
> .m02-main__host
|
|
> .ui-sheet--combo
|
|
> .ui-sheet__scroll {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* 카드 = 제목 + 머리 + 본문 — 본문이 남는 높이를 채움 · 넘치면 카드 안 스크롤 */
|
|
.m02-struct__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.m02-struct__card > :last-child {
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* ui-sidebar-panel 은 display:flex 라 hidden 속성을 덮어씀 — 안 보일 땐 확실히 안 보이게 */
|
|
.m02-struct[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
/* 공용 카드 틀(PLAN 31-7 · CardShell) — 제목 줄 = 제목 · 점(●) · 오른쪽 단추 자리 · 부제 한 줄 = 번호 · 이름 */
|
|
.m02-struct__card {
|
|
position: relative; /* ? 단축키 상자 자리 */
|
|
}
|
|
|
|
.m02-struct__card > .ui-collapsible__title {
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-struct__dot {
|
|
color: var(--color-accent);
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.m02-struct__dot[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.m02-struct__card-tools {
|
|
display: inline-flex;
|
|
flex: 0 1 auto; /* 좁은 카드(1열 · 400px)에서 단추가 많으면 줄 바꿈 — 카드 밖으로 안 넘침(40-2) */
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-left: auto;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.m02-struct__card-tools .ui-btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-struct__sub {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 넘치면 말줄임 — 번호는 그대로 · 이름 · 요약이 줄어듦 */
|
|
.m02-struct__sub > * {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.m02-struct__title {
|
|
flex: 1 1 auto;
|
|
color: var(--color-text);
|
|
font-size: var(--text-body);
|
|
}
|
|
|
|
/* 카드 번호 = 배지 부품(ui-badge) · 배지 아닌 옛 자리(일위대가 값 요약)만 옛 꼴 */
|
|
.m02-struct__no {
|
|
flex: none;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-struct__no:not(.ui-badge) {
|
|
padding: 0 var(--spacing-8);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* 미리보기 — 웹캐드는 높이를 부모에서 받음(`.m02-drawing` 이 flex: 1 1 0).
|
|
`.cad-host` 는 원래 상세 페이지 몫이라 min-height:420px 를 가짐 — 카드 밖으로 넘쳐 0 으로 덮어씀. */
|
|
.m02-struct__preview {
|
|
display: flex;
|
|
overflow: hidden;
|
|
flex: 1 1 0;
|
|
min-height: var(--m02-struct-body-min);
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-struct__preview .cad-host {
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ? 도움말 상자 — 카드 오른쪽 위(제목 줄 · 부제 아래 · 도면 · 엑셀 카드) */
|
|
.m02-struct__card > .m02-struct__keys {
|
|
top: calc(var(--app-header-h) + var(--spacing-8));
|
|
}
|
|
.m02-struct__keys {
|
|
position: absolute;
|
|
top: var(--spacing-8);
|
|
right: var(--spacing-8);
|
|
z-index: 2;
|
|
max-height: calc(100% - 2 * var(--spacing-8));
|
|
overflow: auto;
|
|
padding: var(--spacing-8) var(--spacing-12);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-buttons);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.m02-struct__keys[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.m02-struct__keys dl {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 2px var(--spacing-12);
|
|
margin: var(--spacing-8) 0 0;
|
|
}
|
|
|
|
.m02-struct__keys dt {
|
|
font-family: var(--font-mono, monospace);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.m02-struct__keys dd {
|
|
margin: 0;
|
|
}
|
|
|
|
/* ? — 제목 바로 옆(47-1) · 도움말 네 절(설명 · 단축키 · 기능 · 사용법) */
|
|
.m02-struct__help {
|
|
flex: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.m02-struct__keys h4 {
|
|
margin: var(--spacing-12) 0 0;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.m02-struct__keys p,
|
|
.m02-struct__keys ol {
|
|
margin: var(--spacing-8) 0 0;
|
|
}
|
|
|
|
.m02-struct__keys ol {
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
/* 면적산출 · 재료산출 미리보기 — `.ss` 는 height:100% 로 부모 높이를 그대로 받는데 부모(이 칸)에 높이가
|
|
없으면 0 이 되어 칸이 안 보였음(진짜 원인). 약 30행이 늘 보이게 높이를 정하고
|
|
넘치면 격자 안쪽(.ss-grid-host)이 스스로 스크롤(spreadsheet_grid.css). */
|
|
.m02-struct__sheet {
|
|
flex: 1 1 0;
|
|
min-height: var(--m02-struct-body-min);
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-struct__empty {
|
|
margin: 0;
|
|
padding: var(--spacing-16);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 조회 후 선택 창 — 찾기 칸 + 목록(번호 · 이름) */
|
|
.m02-pick__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 55vh;
|
|
overflow: auto;
|
|
margin: var(--spacing-8) 0;
|
|
}
|
|
|
|
/* 줄 = 목록 줄 부품(ui-list-row) · 여기는 왼쪽부터 늘어놓기만 */
|
|
.m02-pick__item {
|
|
justify-content: flex-start;
|
|
gap: var(--spacing-12);
|
|
}
|
|
|
|
.m02-pick__key {
|
|
flex: none;
|
|
min-width: 6rem;
|
|
color: var(--color-text-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 신규 자재 입력 */
|
|
.m02-pick__new {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 면적산출 · 재료산출 카드 미리보기 수정(31-3) — 시트는 카드 높이 · 아래 자재 조합 판은 카드 안에서 스크롤 */
|
|
.m02-struct__sheet.is-edit {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
overflow: auto;
|
|
}
|
|
|
|
.m02-struct__sheet-grid {
|
|
flex: 1 0 var(--m02-struct-grid-min); /* 판이 없으면 카드를 채우고 · 있으면 최소 높이 뒤에 판 */
|
|
min-width: 0;
|
|
}
|
|
|
|
/* 알약 줄 [자재 추가] 창은 시트 칸 안에서 위로 열림 — 카드 높이에 맞게 목록을 줄임(안 잘리게) */
|
|
.m02-struct__sheet-grid .ss-links__list {
|
|
max-height: 8rem;
|
|
}
|
|
|
|
/* 면적산출 카드 [알약] 끔(기본) — 아래 알약 줄만 숨김 · 연결 · 칸 세모는 그대로 */
|
|
.m02-struct__sheet.is-pills-off .ss-links {
|
|
display: none;
|
|
}
|
|
|
|
/* [알약] 켬 — 눌린 단추를 강조색으로(밝음 · 어두움 같은 토큰) */
|
|
.m02-struct__card-tools .ui-btn[aria-pressed="true"] {
|
|
border-color: var(--color-accent);
|
|
color: var(--color-accent);
|
|
}
|