/* min-height 0 은 자리가 모자랄 때 바가 제 내용 높이 밑으로 줄어들 수 있게 함. 이것이 없으면 자동
   최소 크기가 작성 중 묶음의 못박은 키까지 셈에 넣어 바가 안 줄고 자리 밖으로 나감 */
.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  min-height: 0;
  padding: var(--space-inset-sm);
}

.rail > .btn {
  flex: 1 1 0;
  padding-inline: var(--space-inset-sm);
  word-break: keep-all;
}

.rail--wide { min-width: var(--measure-rail-wide); }
.rail--wide .btn { text-align: left; }

/* 떠 있는 버튼 하나. 상자가 버튼과 같은 크기라 그 밖은 아래 화면이 클릭을 받음 */
.rail--phone { padding: 0; }

.rail--phone > .btn {
  flex: none;
  inline-size: var(--measure-rail-float);
  block-size: var(--measure-rail-float);
  padding: 0;
}

/* 만들기 항목은 옆으로 늘어놓고 폭이 모자라면 다음 줄로 감음. 다섯이 세로로 서면 시트 높이를 다
    쓰고 그 아래 작성 중 묶음이 스크롤 밖으로 밀림 */
.rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-stack-sm) var(--space-inline-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rail__item { display: flex; }

/* 세로 바의 작성 중 묶음은 키가 못박혀 있고 길어지면 그 안에서 밀림. 만들기 버튼은 늘 위에 있어
   안 밀림. 바가 자기 자리보다 길면 이 키가 그만큼 줄고 밀리는 칸은 그대로 하나임. 폰 시트 안 묶음은
   이 규칙을 안 받음. 시트가 이미 제 키를 못박고 몸이 밀어서임(docs/components/BottomSheet.md) */
.rail .rail__drafts {
  height: var(--measure-rail-drafts);
  overflow-y: auto;
}

/* 작성 중 묶음. 만들기 묶음과 줄 하나로 가름 */
.rail__drafts {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
  margin: 0;
  padding: var(--space-stack-sm) 0 0;
  list-style: none;
  border-top: var(--border-width) solid var(--border-default);
}

.rail__draft { display: flex; gap: var(--space-inline-sm); }
.rail__draft > .btn:first-child { flex: 1; min-width: 0; text-align: left; word-break: keep-all; }

/* 접힌 바에는 약어 배지만 서고 삭제가 없음. 약어는 안 잘려야 무엇인지 알 수 있으므로 배지가
   글자만큼은 늘고 글자를 가운데 둠 */
.rail:not(.rail--wide) .rail__draft > .btn {
  min-width: max-content;
  text-align: center;
}