/* SunEditor로 작성된 본문을 에디터 밖(사용자 화면)에서 렌더링할 때 정렬 보정.
   suneditor.min.css의 정렬 규칙은 .sun-editor-editable 하위로 스코프되어 있어
   에디터 외부 출력(th:utext)에서는 적용되지 않으므로 최소 규칙만 발췌해 전역으로 제공한다. */
.se-component { display: flex; padding: 1px; margin: 0 0 10px; }
.se-component > figure { margin: 0; }
.se-image-container img { max-width: 100%; height: auto; }
.__se__float-left  { float: left;  margin-right: 4px; }
.__se__float-right { float: right; margin-left: 4px; }
.__se__float-none  { float: none; }
.__se__float-center > figure,
.__se__float-left  > figure,
.__se__float-right > figure { margin: auto !important; }
/* 퍼센트 폭 이미지 가운데 정렬 시 에디터는 setAlign()이 컨테이너에 min-width:100%를
   동적으로 부여하지만 저장 HTML에는 남지 않으므로(inline width:75% 등만 저장됨)
   CSS로 동일하게 보정한다. 컨테이너를 본문 전체 폭으로 펼쳐야 figure가 중앙에 온다. */
.se-component.__se__float-center { min-width: 100%; }
/* 크기 지정 이미지는 figure에 inline width(px)가 저장된다. float(왼쪽/오른쪽 정렬)
   컨테이너는 fit-content로 늘어나 모바일 폭에서 화면 밖으로 넘치므로
   컨테이너와 figure를 본문 폭 이하로 제한해 이미지가 함께 줄어들게 한다. */
.se-component { max-width: 100%; }
.se-component > figure { max-width: 100%; }