/* ─────────────────────────────────────────────────────────────
   본문 에디터 (Quill 2.0.3)
   quill.snow.css 위에 얹어 사이트 팔레트·둥근 모서리에 맞춘다.
   글쓰기 화면에서만 불러온다 (header.php 의 $needs_editor).
   ───────────────────────────────────────────────────────────── */

.editor-field { margin-bottom: 22px; }

.editor-label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.editor-label-row label { margin-bottom: 0; }

/* HTML 소스 토글 */
.editor-html-toggle {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-500);
  font-family: var(--font); font-size: .8rem; font-weight: 700;
  padding: 6px 12px; border-radius: var(--r-sm); cursor: pointer;
  white-space: nowrap; transition: border-color .15s, color .15s, background .15s;
}
.editor-html-toggle:hover { border-color: var(--forest-500); color: var(--forest-700); }
.editor-html-toggle.is-on {
  background: var(--forest-700); border-color: var(--forest-700); color: #fff;
}

/* ── 툴바 ── */
.ql-toolbar.ql-snow {
  border: 1.5px solid var(--line); border-bottom: 0;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--bg-soft); padding: 10px 12px;
  font-family: var(--font);
}
.ql-snow .ql-stroke { stroke: var(--ink-500); }
.ql-snow .ql-fill   { fill:   var(--ink-500); }
.ql-snow .ql-picker { color:  var(--ink-700); }

.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--forest-700); }
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--forest-700); }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active {
  background: var(--forest-100); border-radius: 6px;
}
.ql-snow .ql-picker-options {
  border-radius: var(--r-sm); border-color: var(--line);
  box-shadow: var(--shadow-md);
}

/* ── 입력 영역 ──
   높이를 고정해 글이 길어져도 화면 밖으로 밀려나지 않고 안에서 스크롤된다.
   에디터가 무한정 늘면 저장 버튼이 저 아래로 사라져 쓰기 어려워진다. */
.ql-host.ql-container.ql-snow {
  height: 420px;
  border: 1.5px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: #fff;
  font-family: var(--font); font-size: var(--fs-body);
}
.ql-host .ql-editor {
  overflow-y: auto; padding: 18px 20px;
  line-height: var(--lh-body); color: var(--ink-900); word-break: keep-all;
}
.ql-host .ql-editor.ql-blank::before {
  color: var(--ink-300); font-style: normal; left: 20px; right: 20px;
}
.ql-host .ql-editor h2 { font-size: 1.4rem; color: var(--forest-900); margin: 1.2em 0 .5em; }
.ql-host .ql-editor h3 { font-size: 1.15rem; color: var(--forest-900); margin: 1.1em 0 .45em; }
.ql-host .ql-editor blockquote {
  border-left: 4px solid var(--forest-300); background: var(--forest-050);
  padding: 10px 16px; margin: 1em 0; border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-700);
}
.ql-host .ql-editor a { color: var(--forest-700); }
.ql-host .ql-editor img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* 포커스 시 테두리 강조 — 다른 입력칸과 동작을 맞춘다 */
.ql-host.ql-container.ql-snow:focus-within { border-color: var(--forest-500); }
.editor-field:focus-within .ql-toolbar.ql-snow { border-color: var(--forest-500); }

/* ── HTML 소스 모드 ──
   textarea 는 기본으로 보인다. Quill 이 정상적으로 뜬 뒤에야 JS 가
   .editor-ready 를 붙여 숨긴다. CDN 이 막히거나 스크립트가 죽으면
   평범한 textarea 가 그대로 남아 글쓰기는 어떤 경우에도 막히지 않는다. */
.editor-field .ql-host { display: none; }
.editor-field.editor-ready .ql-host { display: block; }
.editor-field.editor-ready .editor-source { display: none; }
.editor-field.editor-ready .editor-source.is-open { display: block; }

.editor-source,
.editor-source.is-open {
  width: 100%; height: 420px; box-sizing: border-box;
  padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--bg-soft); color: var(--ink-900);
  font-family: Consolas, Menlo, "Malgun Gothic", monospace;
  font-size: 13px; line-height: 1.6; resize: vertical;
}

/* Quill 이 뜨지 않으면 HTML 토글 버튼도 쓸모가 없으므로 감춘다 */
.editor-field:not(.editor-ready) .editor-html-toggle { display: none; }

@media (max-width: 900px) {
  .ql-host.ql-container.ql-snow,
  .editor-source.is-open { height: 320px; }
  .ql-toolbar.ql-snow { padding: 8px; }
  .editor-html-toggle { min-height: 40px; }
}