@charset "utf-8";

/* editor-content.css
 *
 * 에디터(froala)로 작성한 본문의 서식 복원용.
 *
 * common.css 의 `li { list-style: none }`, reset.css 의 `ol, ul { list-style: none }`
 * 과 `strong/b/em/i/h1~h6 { font: inherit }` 가 전역으로 걸려 있어서,
 * 관리자에서 굵게/목록/제목으로 작성한 본문이 사용자 화면에서 평범한 문단으로만 보인다.
 * froala 가 제공하는 본문 스타일(froala_style.css / .fr-view)은 로드하지 않고
 * 래퍼 클래스도 .view-content-editor 이므로 그쪽 규칙도 타지 않는다.
 *
 * 그래서 레이아웃 UI 에는 손대지 않고 본문 영역(.view-content-editor)에만
 * 한정해서 브라우저 기본 서식을 되살린다.
 * reset.css / common.css / style2.css / style3.css 보다 뒤에 로드해야 한다.
 */

/* ---------- 인라인 서식 ---------- */

.view-content-editor strong,
.view-content-editor b {
  font-weight: 700;
}

.view-content-editor em,
.view-content-editor i {
  font-style: italic;
}

.view-content-editor u {
  text-decoration: underline;
}

.view-content-editor s,
.view-content-editor strike,
.view-content-editor del {
  text-decoration: line-through;
}

.view-content-editor sub {
  vertical-align: sub;
  font-size: smaller;
}

.view-content-editor sup {
  vertical-align: super;
  font-size: smaller;
}

.view-content-editor a {
  color: #1f5fbf;
  text-decoration: underline;
}

/* ---------- 목록 ---------- */

/* 목록은 마커가 글머리에 붙는 구조라 가운데 정렬(.view-content)과 맞지 않는다.
   에디터 편집 화면(.fr-element)도 좌측 정렬이므로 동일하게 맞춘다.
   개별 li/p 에 인라인 정렬이 지정된 경우에는 그 값이 우선한다. */
.view-content-editor ul,
.view-content-editor ol {
  padding-left: 2.6rem;
  margin: 0.8rem 0;
  text-align: left;
}

.view-content-editor ul {
  list-style: disc outside;
}

.view-content-editor ol {
  list-style: decimal outside;
}

.view-content-editor ul ul {
  list-style-type: circle;
}

.view-content-editor ul ul ul {
  list-style-type: square;
}

.view-content-editor ol ol {
  list-style-type: lower-alpha;
}

.view-content-editor ol ol ol {
  list-style-type: lower-roman;
}

/* common.css 의 `li { list-style: none }` 때문에 부모의 list-style 상속이 끊긴다 */
.view-content-editor li {
  list-style: inherit;
  margin-bottom: 0.4rem;
}

.view-content-editor li > ul,
.view-content-editor li > ol {
  margin: 0.4rem 0;
}

/* froala 의 체크리스트/들여쓰기 목록은 마커를 쓰지 않는다 */
.view-content-editor ul.fr-list-none,
.view-content-editor ol.fr-list-none {
  list-style: none;
  padding-left: 0;
}

/* ---------- 제목 ---------- */

.view-content-editor h1,
.view-content-editor h2,
.view-content-editor h3,
.view-content-editor h4,
.view-content-editor h5,
.view-content-editor h6 {
  margin: 1.6rem 0 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.view-content-editor h1 { font-size: 2.8rem; }
.view-content-editor h2 { font-size: 2.4rem; }
.view-content-editor h3 { font-size: 2.1rem; }
.view-content-editor h4 { font-size: 1.9rem; }
.view-content-editor h5 { font-size: 1.7rem; }
.view-content-editor h6 { font-size: 1.5rem; }

/* ---------- 인용 / 코드 / 구분선 ---------- */

.view-content-editor blockquote {
  margin: 1.2rem 0;
  padding: 0.4rem 0 0.4rem 1.6rem;
  border-left: 3px solid #d0d0d0;
  color: #666;
  text-align: left;
}

.view-content-editor pre {
  margin: 1.2rem 0;
  padding: 1.6rem;
  border-radius: 0.6rem;
  background: #f5f5f5;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
}

.view-content-editor code {
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  background: #f0f0f0;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

.view-content-editor hr {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid #e0e0e0;
}

/* ---------- 표 ---------- */

.view-content-editor table {
  max-width: 100%;
  margin: 1.2rem auto;
  border-collapse: collapse;
  empty-cells: show;
}

.view-content-editor table td,
.view-content-editor table th {
  min-width: 5px;
  padding: 0.8rem 1.2rem;
  border: 1px solid #ddd;
}

.view-content-editor table th {
  background: #f7f7f7;
  font-weight: 700;
}

.view-content-editor table[border="0"] td:not([class]),
.view-content-editor table[border="0"] th:not([class]) {
  border-width: 0;
}

.view-content-editor table.fr-dashed-borders td,
.view-content-editor table.fr-dashed-borders th {
  border-style: dashed;
}

.view-content-editor table.fr-alternate-rows tbody tr:nth-child(2n) {
  background: #f5f5f5;
}

/* ---------- froala 이미지 배치 클래스 ---------- */

/* common.css 의 `img { display: block }` 때문에 글 중간 이미지(fr-dii)가 줄바꿈된다 */
.view-content-editor img.fr-dii {
  display: inline-block;
  float: none;
  margin: 0.5rem 0.5rem;
  max-width: calc(100% - 1rem);
  vertical-align: bottom;
}

/* 가운데 배치. 세로 여백은 기존 `.view-content-editor p img` 규칙을 그대로 둔다 */
.view-content-editor img.fr-dib {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: auto;
  vertical-align: top;
}

.view-content-editor img.fr-fil,
.view-content-editor img.fr-dii.fr-fil {
  float: left;
  margin: 0.5rem 1.5rem 0.5rem 0;
}

.view-content-editor img.fr-fir,
.view-content-editor img.fr-dii.fr-fir {
  float: right;
  margin: 0.5rem 0 0.5rem 1.5rem;
}

.view-content-editor img.fr-dib.fr-fil {
  float: none;
  margin-left: 0;
}

.view-content-editor img.fr-dib.fr-fir {
  float: none;
  margin-right: 0;
}

.view-content-editor img.fr-rounded,
.view-content-editor .fr-img-caption.fr-rounded img {
  border-radius: 100%;
}

.view-content-editor img.fr-bordered,
.view-content-editor .fr-img-caption.fr-bordered img {
  border: solid 5px #ccc;
  box-sizing: content-box;
}

.view-content-editor .fr-img-caption .fr-img-wrap > span {
  display: block;
  padding: 0.5rem;
  color: #666;
  font-size: 1.4rem;
  text-align: center;
}

/* float 이미지가 다음 블록으로 흘러나오지 않게 한다 */
.view-content-editor::after {
  content: "";
  display: block;
  clear: both;
}