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);
}

/* 실무문서 화면(PLAN 39-2) — 위 막대(개수 · 통째 지우기 / 목록으로 · 이름 · 정보) + 표 */
.m02-practice {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-width: 0;
}

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

.m02-practice__bar > button:last-child:not(:first-child) {
  margin-left: auto;
}

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

.m02-practice__memo {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  white-space: pre-wrap;
}

.m02-practice__row {
  cursor: pointer;
}

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

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

/* 일위대가 조합 서고(50-3) — 하위 단가승격 · 사전조합 */
.m02-side__sub {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
}

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

.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);
}

.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) */
}

.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 {
  display: inline-flex;
  margin-left: auto;
}

.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-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;
}