.floater {
  position: var(--floater-position, static);
  inset: var(--floater-inset, auto);
  display: flex;
  flex-direction: column;
  width: var(--floater-width, var(--measure-floater));
  /* 든 것이 길면 창이 아니라 몸이 밀림. 자리가 화면 높이라 이 줄이 창 높이의 한도임 */
  max-height: 100%;
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface-raised);
  pointer-events: auto;
}

/* 치워 둔 창. 창 CSS 가 display 를 정하므로 브라우저 기본 숨김을 여기서 다시 걸어야 함 */
.floater[hidden] { display: none; }

.floater__head {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  padding: var(--space-inset-sm);
  border-bottom: var(--border-width) solid var(--border-default);
}

.floater__title { flex: 1; min-width: 0; }
.floater__ctl { display: flex; gap: var(--space-inline-sm); }

.floater__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-inset-md);
}

.floater--max {
  width: var(--floater-top-width, var(--measure-floater-max));
  max-width: var(--measure-floater-max);
  margin: auto;
}

/* 뒤를 막는 창(최대화나 덮는 폭)은 자리를 옮기지 않고 이 클래스로만 나타냄. 요소를 다른 부모로
   옮기면 그 안 입력칸이 새 요소가 되어 쓰던 글이 사라짐(docs/lib/morph.md 의 부모 절) */
.floater--top {
  position: var(--floater-top-position, static);
  inset: var(--floater-top-inset, auto);
}

/* 없음: 하단 액션 영역의 공통 규격 */
.floater__foot {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  padding: var(--space-inset-sm);
  border-top: var(--border-width) solid var(--border-default);
}