/* 접기 하나의 겉 테두리. 제목줄과 몸이 한 상자 안에 있어 접혀도 자리가 흔들리지 않음 */
.collapsible {
  border: var(--border-width) solid var(--border-muted);
  border-radius: var(--radius);
  background: var(--surface-raised);
}

.collapsible__head { margin: 0; }

/* 제목줄 자체가 누르는 버튼임. 너비를 다 채워 손가락으로 누르는 자리를 넓힘 */
.collapsible__toggle {
  display: flex;
  align-items: baseline;
  gap: var(--space-inline-xs);
  font: inherit;
  text-align: left;
  padding: var(--space-inset-sm) var(--space-inset-md);
  border: 0;
  background: transparent;
  color: var(--text-default);
  cursor: pointer;
}
.collapsible__toggle:focus-visible { outline: var(--border-width) solid var(--focus-ring); }

.collapsible__title { font-weight: bold; }
.collapsible__sub { color: var(--text-muted); font-size: var(--font-label); }

/* 화살표는 늘 줄 오른쪽 끝에 섬. 열림/닫힘은 글자 자체를 바꿔서 보임(▾/▸) */
.collapsible__icon { margin-left: auto; color: var(--text-muted); }

.collapsible__body {
  padding: 0 var(--space-inset-md) var(--space-inset-md);
  border-top: var(--border-width) solid var(--border-muted);
}