/* =========================================================
   editor.css — 게시판 위지윅(Quill) 외형 + 본문/댓글 렌더링
   글쓰기 / 수정 / 댓글에서 공유. style.css 의 변수(--teal 등) 사용.
   ========================================================= */

/* ── 에디터 컨테이너 ───────────────────────────────────── */
.editor-wrap { width:100%; }
.editor-wrap .ql-toolbar.ql-snow {
  border:1px solid var(--line);
  border-bottom:none;
  border-radius:10px 10px 0 0;
  background:var(--bg-soft);
  padding:8px 10px;
}
.editor-wrap .ql-container.ql-snow {
  border:1px solid var(--line);
  border-radius:0 0 10px 10px;
  font-family:inherit;
}
.editor-wrap .ql-editor {
  min-height:320px;
  font-size:1rem;
  line-height:1.85;
  color:var(--ink);
}
.editor-wrap .ql-editor.ql-blank::before {
  color:#9aa9b4;
  font-style:normal;
  left:15px;
  right:15px;
}
/* 댓글용 축소 에디터 */
.editor-wrap.mini .ql-editor { min-height:110px; }

/* 포커스 강조 */
.editor-wrap .ql-container.ql-snow:focus-within { border-color:var(--teal); }

/* 에디터 안 이미지 */
.editor-wrap .ql-editor img { border-radius:8px; }

/* 이미지 업로드 중 버튼 표시 */
.editor-wrap .ql-toolbar .ql-image.is-loading {
  opacity:.45; pointer-events:none; position:relative;
}

/* 툴바 아이콘 색(테마 색에 맞춤) */
.editor-wrap .ql-snow .ql-stroke { stroke:#54677a; }
.editor-wrap .ql-snow .ql-fill { fill:#54677a; }
.editor-wrap .ql-snow .ql-picker { color:#54677a; }
.editor-wrap .ql-snow.ql-toolbar button:hover .ql-stroke,
.editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke:var(--teal); }
.editor-wrap .ql-snow.ql-toolbar button:hover .ql-fill,
.editor-wrap .ql-snow.ql-toolbar button.ql-active .ql-fill { fill:var(--teal); }
.editor-wrap .ql-snow.ql-toolbar button:hover,
.editor-wrap .ql-snow.ql-toolbar button.ql-active { color:var(--teal); }

/* ── 저장된 본문 렌더링 (보기 화면) ──────────────────────
   .ql-editor 클래스를 부여해 정렬/리스트/들여쓰기 스타일을 재사용하되,
   에디터 전용 여백/최소높이는 제거한다. ───────────────────── */
.bv-body.ql-editor,
.c-body.ql-editor {
  padding:0;
  min-height:0;
  font-family:inherit;
  white-space:normal;     /* 저장된 HTML 태그 사이 줄바꿈이 빈 줄로 보이지 않도록 */
  word-break:break-word;
}
.bv-body.ql-editor img { max-width:100%; height:auto; border-radius:8px; margin:6px 0; }
.c-body.ql-editor img  { max-width:min(100%,360px); height:auto; border-radius:8px; margin:6px 0; }

/* ── 댓글 입력 영역(위지윅) ─────────────────────────────── */
.comment-form .cf-editor { background:#fff; border-radius:12px; overflow:hidden; }
.comment-form .cf-actions { display:flex; justify-content:flex-end; margin-top:10px; }

/* ── 모바일 대응 ────────────────────────────────────────── */
@media (max-width:640px){
  .editor-wrap .ql-editor { min-height:240px; }
  .editor-wrap.mini .ql-editor { min-height:96px; }
  .editor-wrap .ql-toolbar.ql-snow { padding:6px 6px; }
}