/**
 * content-quill.css
 * Quill 에디터로 작성된 콘텐츠를 뷰어 페이지에서 올바르게 표시하기 위한 스타일
 * 에디터가 없는 상세/조회 페이지에 포함
 */

/* ── 적용 범위 ─────────────────────────────────────────── */
/* .cd-content       : 커뮤니티/교육/멤버 상세 */
/* .detail-body      : 관리자 게시글 상세 */
/* .content-view     : 관리자 강좌 상세 */

.cd-content,
.detail-body,
.content-view {
  line-height: 1.85;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 기본 블록 요소 ──────────────────────────────────────── */
.cd-content p,
.detail-body p,
.content-view p {
  margin: 0 0 0.4em;
}

.cd-content h1, .detail-body h1, .content-view h1 { font-size: 2em;   font-weight: 700; margin: 0.67em 0; }
.cd-content h2, .detail-body h2, .content-view h2 { font-size: 1.5em;  font-weight: 700; margin: 0.75em 0; }
.cd-content h3, .detail-body h3, .content-view h3 { font-size: 1.17em; font-weight: 700; margin: 0.83em 0; }
.cd-content h4, .detail-body h4, .content-view h4 { font-size: 1em;    font-weight: 700; margin: 1.12em 0; }
.cd-content h5, .detail-body h5, .content-view h5 { font-size: 0.83em; font-weight: 700; margin: 1.5em 0; }
.cd-content h6, .detail-body h6, .content-view h6 { font-size: 0.75em; font-weight: 700; margin: 1.67em 0; }

/* ── 이미지 ──────────────────────────────────────────────── */
/* 기본은 좌측정렬 - Quill 은 좌측일 때 클래스를 붙이지 않으므로
   여기서 margin 을 auto 로 두면 정렬을 지정하지 않은 이미지가 전부 가운데로 간다.
   가운데 정렬은 아래 .ql-align-center 규칙이 담당한다 */
.cd-content img,
.detail-body img,
.content-view img {
  max-width: 80%;
  width: auto;
  height: auto;
  display: block;
  margin: 0.4em 0;
}

.cd-content .ql-align-center img,
.detail-body .ql-align-center img,
.content-view .ql-align-center img,
.cd-content img.ql-align-center,
.detail-body img.ql-align-center,
.content-view img.ql-align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.cd-content .ql-align-right img,
.detail-body .ql-align-right img,
.content-view .ql-align-right img,
.cd-content img.ql-align-right,
.detail-body img.ql-align-right,
.content-view img.ql-align-right {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.cd-content .ql-align-justify img,
.detail-body .ql-align-justify img,
.content-view .ql-align-justify img,
.cd-content img.ql-align-justify,
.detail-body img.ql-align-justify,
.content-view img.ql-align-justify {
  display: block;
  width: 100%;
}

/* ── 텍스트 정렬 ─────────────────────────────────────────── */
.cd-content .ql-align-center,
.detail-body .ql-align-center,
.content-view .ql-align-center { text-align: center; }

.cd-content .ql-align-right,
.detail-body .ql-align-right,
.content-view .ql-align-right { text-align: right; }

.cd-content .ql-align-justify,
.detail-body .ql-align-justify,
.content-view .ql-align-justify { text-align: justify; }

/* ── 텍스트 방향 ──────────────────────────────────────────── */
.cd-content .ql-direction-rtl,
.detail-body .ql-direction-rtl,
.content-view .ql-direction-rtl { direction: rtl; text-align: inherit; }

/* ── 글꼴 (class attributor: ql-font-*) ─────────────────── */
.cd-content .ql-font-malgun,
.detail-body .ql-font-malgun,
.content-view .ql-font-malgun { font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; }

.cd-content .ql-font-nanum,
.detail-body .ql-font-nanum,
.content-view .ql-font-nanum { font-family: 'NanumGothic', '나눔고딕', sans-serif; }

.cd-content .ql-font-noto,
.detail-body .ql-font-noto,
.content-view .ql-font-noto { font-family: 'Noto Sans KR', sans-serif; }

.cd-content .ql-font-gulim,
.detail-body .ql-font-gulim,
.content-view .ql-font-gulim { font-family: '굴림', Gulim, sans-serif; }

.cd-content .ql-font-dotum,
.detail-body .ql-font-dotum,
.content-view .ql-font-dotum { font-family: '돋움', Dotum, sans-serif; }

.cd-content .ql-font-batang,
.detail-body .ql-font-batang,
.content-view .ql-font-batang { font-family: '바탕', Batang, serif; }

.cd-content .ql-font-georgia,
.detail-body .ql-font-georgia,
.content-view .ql-font-georgia { font-family: Georgia, 'Times New Roman', serif; }

.cd-content .ql-font-arial,
.detail-body .ql-font-arial,
.content-view .ql-font-arial { font-family: Arial, Helvetica, sans-serif; }

/* ── 들여쓰기 ────────────────────────────────────────────── */
.cd-content .ql-indent-1,  .detail-body .ql-indent-1,  .content-view .ql-indent-1  { padding-left:  3em; }
.cd-content .ql-indent-2,  .detail-body .ql-indent-2,  .content-view .ql-indent-2  { padding-left:  6em; }
.cd-content .ql-indent-3,  .detail-body .ql-indent-3,  .content-view .ql-indent-3  { padding-left:  9em; }
.cd-content .ql-indent-4,  .detail-body .ql-indent-4,  .content-view .ql-indent-4  { padding-left: 12em; }
.cd-content .ql-indent-5,  .detail-body .ql-indent-5,  .content-view .ql-indent-5  { padding-left: 15em; }
.cd-content .ql-indent-6,  .detail-body .ql-indent-6,  .content-view .ql-indent-6  { padding-left: 18em; }
.cd-content .ql-indent-7,  .detail-body .ql-indent-7,  .content-view .ql-indent-7  { padding-left: 21em; }
.cd-content .ql-indent-8,  .detail-body .ql-indent-8,  .content-view .ql-indent-8  { padding-left: 24em; }

/* ── 목록 ────────────────────────────────────────────────── */
.cd-content ol,
.cd-content ul,
.detail-body ol,
.detail-body ul,
.content-view ol,
.content-view ul {
  padding-left: 1.5em;
  margin: 0 0 0.4em;
}

.cd-content ol li,
.detail-body ol li,
.content-view ol li {
  list-style-type: decimal;
}

.cd-content ul li,
.detail-body ul li,
.content-view ul li {
  list-style-type: disc;
}

/* Quill 2.x data-list 기반 목록 */
.cd-content li[data-list="ordered"],
.detail-body li[data-list="ordered"],
.content-view li[data-list="ordered"] { list-style-type: decimal; }

.cd-content li[data-list="bullet"],
.detail-body li[data-list="bullet"],
.content-view li[data-list="bullet"] { list-style-type: disc; }

.cd-content li[data-list="checked"],
.detail-body li[data-list="checked"],
.content-view li[data-list="checked"] { list-style-type: none; }

.cd-content li[data-list="checked"]::before,
.detail-body li[data-list="checked"]::before,
.content-view li[data-list="checked"]::before {
  content: '☑';
  margin-right: 0.4em;
}

.cd-content li[data-list="unchecked"],
.detail-body li[data-list="unchecked"],
.content-view li[data-list="unchecked"] { list-style-type: none; }

.cd-content li[data-list="unchecked"]::before,
.detail-body li[data-list="unchecked"]::before,
.content-view li[data-list="unchecked"]::before {
  content: '☐';
  margin-right: 0.4em;
}

/* ── 인용 / 코드 ──────────────────────────────────────────── */
.cd-content blockquote,
.detail-body blockquote,
.content-view blockquote {
  border-left: 4px solid #ccc;
  margin: 0.5em 0;
  padding: 4px 16px;
  color: #555;
}

.cd-content pre,
.detail-body pre,
.content-view pre {
  background: #23241f;
  color: #f8f8f2;
  border-radius: 4px;
  padding: 12px 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0.5em 0;
}

/* ── 링크 ────────────────────────────────────────────────── */
.cd-content a,
.detail-body a,
.content-view a {
  color: #2c7a4b;
  text-decoration: underline;
}

.cd-content a:hover,
.detail-body a:hover,
.content-view a:hover {
  color: #1a5235;
}