/* M02 면적산출 · 재료산출 오른쪽 조합 패널 — 틀은 공용 사이드바 카드 · 접기 · 폭 손잡이 · 접기 손잡이 */

/* 편집 칸 = 시트 | 패널 — 패널 폭은 손잡이가 `--m02-cpanel-width` 로 줌 */
.m02-cpanel {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: var(--m02-cpanel-width, 24rem);
  min-width: 280px;
  max-width: 60%;
  min-height: 0;
  border-left: 1px solid var(--color-border);
}

.m02-cpanel.is-resizing {
  transition: none;
}

.m02-cpanel.is-collapsed {
  width: 0;
  min-width: 0;
}

.m02-cpanel.is-collapsed > .m02-cpanel__body,
.m02-cpanel.is-collapsed > .ui-resizer {
  display: none;
}

/* 접기 손잡이 — 패널 왼쪽 밖 세로 가운데(시트 위로) */
.m02-cpanel > .ui-workflow-overlay__handle--side {
  z-index: 6;
  right: auto;
  left: calc(-1 * var(--spacing-24));
  border-right: 0;
  border-radius: var(--radius-buttons) 0 0 var(--radius-buttons);
}

/* 안쪽만 굴림 — 페이지 스크롤 안 생김 */
.m02-cpanel__body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  padding: var(--spacing-8);
}

.m02-cpanel__list {
  max-height: 24rem;
  overflow: auto;
}

.m02-cpanel__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--spacing-8);
  text-align: left;
}

.m02-cpanel__key {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.m02-cpanel__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m02-cpanel__meta {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

/* 고른 줄 + 바로 아래 [이 열에 쓰기] */
.m02-cpanel__pick {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

.m02-cpanel__pick > .ui-btn {
  align-self: flex-end;
}

/* 이 열이 쓰는 조합 — 테두리로 늘 보임(고름 is-active 와 따로) */
.m02-cpanel__row.is-current {
  box-shadow: inset 3px 0 0 var(--color-primary);
}