/* =========================================================
   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;
}

/* ── 소스보기(HTML 직접 편집) ───────────────────────────── */
/* 툴바 버튼 — Quill 커스텀 버튼이라 아이콘을 CSS 로 그린다 */
.editor-wrap .ql-toolbar button.ql-source {
  width:34px;
}
.editor-wrap .ql-toolbar button.ql-source::before {
  content:"</>";
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1;
  color:#54677a;
}
.editor-wrap .ql-toolbar button.ql-source:hover::before,
.editor-wrap .ql-toolbar button.ql-source.be-on::before {
  color:var(--teal);
}

/* 소스 모드에서 잠긴 툴바 그룹 */
.editor-wrap .ql-toolbar .be-off {
  opacity:.35;
  pointer-events:none;
}

/* HTML 입력 영역 (.ql-container 안, .ql-editor 자리) */
.editor-wrap .be-source {
  display:none;
  width:100%;
  min-height:320px;
  box-sizing:border-box;
  margin:0;
  border:0;
  outline:0;
  padding:12px 15px;
  background:#fbfcfd;
  color:#26333f;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"D2Coding","Courier New",monospace;
  font-size:12.5px;
  line-height:1.7;
  tab-size:2;
  white-space:pre;
  overflow:auto;
  resize:vertical;
}
.editor-wrap.mini .be-source { min-height:110px; }

/* 툴바 아이콘 색(테마 색에 맞춤) */
.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; }

/* ── 댓글 인라인 수정 (board/view.php 에서 JS 로 생성) ───── */
.c-edit { margin-top:8px; }
.c-edit .editor-wrap { background:#fff; border-radius:12px; overflow:hidden; }
.c-edit-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:10px; }
.c-edit-actions .btn { padding:.5em 1.1em; font-size:.88rem; border-radius:999px; }
.c-actions { display:flex; gap:12px; }
.c-actions .c-del-btn:hover { color:#d9534f; }

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