Aislo/M02_MasterTemplete/M02_MasterTemplete_Structure.css

/* M02 구조물집계표 아래 설계 컨테이너 — 카드 셋(도면 정보 · 면적산출 · 재료산출) ·
   카드 모양은 좌측 패널과 같은 공용 ui-sidebar-*(ui_template_overlay.css). */

/* 표 밖 형제 자리 — 비어 있을 때 메인 간격이 벌어지지 않게 칸을 지움. */
.m02-main__extra {
  display: contents;
}

/* 카드 넷(도면 정보 · 면적산출 · 재료산출 · 선택 입력) = 2행 2열 · 카드 높이 = 화면 높이에 맞춰 크게(PLAN 31-6) ·
   칸이 좁으면(720px 아래) 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(2, minmax(0, 1fr));
  padding-top: var(--spacing-12);
  border-top: 1px solid var(--color-border);
  min-width: 0;
}

@media (max-width: 720px) {
  .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(100vh - var(--spacing-64));
  overflow-y: auto;
}

/* 표는 줄어들지 않음(줄면 표가 카드 위로 넘침) */
.m02-main:has(> .m02-main__extra > .m02-struct:not([hidden])) > .m02-main__host {
  flex-shrink: 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: none;
  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);
}

.m02-struct__no {
  flex: none;
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 미리보기 — 웹캐드는 높이를 부모에서 받음(`.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(--spacing-64) + 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;
}

/* 면적산출 · 재료산출 미리보기 — `.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;
}

.m02-pick__item {
  display: flex;
  gap: var(--spacing-12);
  padding: var(--spacing-8);
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.m02-pick__item:hover,
.m02-pick__item:focus-visible {
  background: var(--color-surface-sunken);
}

.m02-pick__key {
  flex: none;
  min-width: 6rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 면적산출 · 재료산출 카드 미리보기 수정(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;
}