Aislo/M02_MasterTemplete/M02_MasterTemplete_UI_Style.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__summary > .ui-sidebar-card {
  margin-left: var(--spacing-8);
}

.m02-side__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.m02-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-width: 0;
  padding: var(--spacing-16) var(--spacing-24);
}

.m02-main__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-12);
}

.m02-main__title {
  flex: 0 1 auto;
  min-width: 3rem;
  overflow-wrap: anywhere; /* 번호 + 이름 — 잘리지 않게 줄바꿈 */
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-body);
}

.m02-main__head .ui-btn {
  white-space: nowrap;
}

.m02-main__slot {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.m02-main__notice {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-8) var(--spacing-12);
  border-left: 4px solid var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-canvas));
  color: var(--color-danger);
  font-size: var(--text-body-sm);
}

.m02-main__host {
  min-height: 240px;
}

/* 면적산출 · 재료산출 전체 편집 — `.ss` 는 height:100% 로 부모 높이를 받음 · 도면 편집과 같이 메인 칸을 화면 높이로 채움 */
.m02-main:has(> .m02-main__host > .ss) {
  box-sizing: border-box;
  height: calc(100vh - var(--spacing-64));
  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;
}

.m02-main__empty {
  margin: 0;
  padding: var(--spacing-24);
  color: var(--color-text-muted);
  text-align: center;
}

.m02-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

/* 좌측 「자재 조합」 상세(메인 칸) — 이름 · 비고 · 본뜬키 + 담은 자재 표(줄 모양은 재료산출 옆 판 `m02-mat__row`) */
.m02-matset {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  max-width: 56rem;
  font-size: var(--text-body-sm);
}

.m02-matset__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-12);
}

.m02-matset__head {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-body);
}

/* 좌측 「구조물 옵션 보이기」 화면(메인 칸) — 왼쪽 종류(군별) · 오른쪽 옵션 체크 */
.m02-opts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  max-width: 64rem;
  font-size: var(--text-body-sm);
}

.m02-opts__panes {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: var(--spacing-16);
  align-items: start;
}

.m02-opts__kinds,
.m02-opts__list {
  max-height: calc(100vh - 20rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

.m02-opts__group {
  margin: var(--spacing-8) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.m02-opts__kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-8);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.m02-opts__kind:hover {
  background: var(--color-mist-violet);
}

.m02-opts__kind.is-active {
  border-color: var(--color-accent);
  background: var(--color-mist-violet);
}

.m02-opts__option {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-8);
  padding: var(--spacing-4) 0;
  cursor: pointer;
}

.m02-opts__key {
  color: var(--color-text-muted);
  font-size: 11px;
}

/* 층 화면 — 회사용 읽기만 안내 막대 · 회사 없음 안내 */
.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);
}