/* M02 도면 양식 편집 부품 — 위 도구 줄 한 줄(작도 영역 · 단추) + 아래 웹캐드. */

/* 도면 칸이 메인을 꽉 채우고 창 크기를 따른다 — 메인 칸(`ui-workflow-layout__main`)은
   높이가 정해지지 않아(min-height 만) 100% 가 안 먹으므로 화면 높이로 잡는다.
   표 양식일 때는 페이지 쪽 모양 그대로 두려고 도면을 품은 때만 건다. */
.m02-main:has(> .m02-main__host > .m02-drawing) {
  box-sizing: border-box;
  height: calc(100vh - var(--spacing-64));
  min-height: 0;
}

.m02-main__host:has(> .m02-drawing) {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}

.m02-drawing {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.m02-drawing > .cad-host {
  flex: 1 1 0;
}

.m02-drawing__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16, 16px);
}

.m02-drawing__title {
  align-self: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
}

.m02-drawing__areabtn {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.m02-drawing__areabtn.is-invalid {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* 작은 창 안 칸 넷 — 이름이 다 보이는 넉넉한 폭 */
.m02-drawing__areaform {
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: var(--spacing-12);
  min-width: min(22rem, 80vw);
}

.m02-drawing__toolbar--slot {
  flex: 1 1 0;
  min-width: 0;
  gap: var(--spacing-8);
}

.m02-drawing__actions {
  display: flex;
  gap: var(--spacing-8);
  margin-left: auto;
  white-space: nowrap;
}

.m02-pop {
  display: block;
}

.m02-pop > .ui-modal {
  position: absolute;
  width: 23rem;
  max-width: calc(100vw - 16px);
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}