/* 공지사항·이벤트 게시글 본문 편집기(Friends news.js / SJ editable.js news.*) 공통 모양.
   기준 표시: CKEditor 바깥 요소(.ck.ck-editor)에 붙는 .sjpost-editor. DOM·콜백은 그대로 두고 CSS로만 같은 리듬을 맞춘다.
   HTML 삽입 위젯(raw-html-embed)·편집기 실패 미리보기 등 복구 흐름은 건드리지 않는다. */

/* ── 편집기 틀 ─────────────────────────────────────────────── */
.ck.ck-editor.sjpost-editor {
  --ck-color-focus-border: var(--brand, #315de5);
  --ck-color-button-on-color: var(--brand, #315de5);
  --ck-color-button-on-background: color-mix(in srgb, var(--brand, #315de5), #fff 88%);
  --ck-color-button-on-hover-background: color-mix(in srgb, var(--brand, #315de5), #fff 80%);
  --ck-color-button-default-hover-background: #eef2f8;
  --ck-color-toolbar-background: #f8fafc;
  --ck-color-toolbar-border: var(--line, #dfe4ec);
  --ck-color-base-border: var(--line, #dfe4ec);
  --ck-focus-ring: 1px solid var(--brand, #315de5);
  --ck-inner-shadow: none;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.ck.ck-editor.sjpost-editor > .ck-editor__top .ck-sticky-panel .ck-toolbar { border-radius: 10px 10px 0 0; }
/* 그룹 접기(…)를 쓰지 않는 도구줄은 좁은 화면에서 줄바꿈해 가로로 넘치지 않는다. */
.ck.ck-editor.sjpost-editor .ck-toolbar:not(.ck-toolbar_grouping) > .ck-toolbar__items { flex-wrap: wrap; }
.ck.ck-editor.sjpost-editor .ck-toolbar .ck-button.ck-on { color: var(--brand, #315de5); }

/* ── 본문 영역: 기본 높이 PC 280px, 길면 편집기 안에서 스크롤 ── */
.ck.ck-editor.sjpost-editor .ck-editor__main > .ck-editor__editable.ck-editor__editable_inline {
  min-height: 280px; height: auto; max-height: min(64vh, 560px); overflow-y: auto;
  padding: 4px 18px; border-radius: 0 0 10px 10px;
  font-size: 15px; line-height: 1.75; color: var(--ink-1, var(--ink, #273248));
}
.ck.ck-editor.sjpost-editor .ck-editor__main > .ck-editor__editable.ck-focused { border-color: var(--brand, #315de5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #315de5), transparent 86%); }
.ck.ck-editor.sjpost-editor .ck-editor__editable :is(figure.image, img) { max-width: 100%; height: auto; }

/* ── 이미지 추가·저장 버튼: 두 업체가 같은 크기·색 규칙 ─────────────── */
/* 공통: 높이 36px, 반경 8px, 13px 굵게. 이미지 추가는 보조(흰 바탕·테마색), 저장은 주(테마색), 삭제는 위험(빨강 테두리). */
.news-body-tools:has(~ .ck-editor.sjpost-editor) { gap: 8px; margin: 0 0 8px; }
.news-body-tools:has(~ .ck-editor.sjpost-editor) > button,
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; height: auto; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--line, #dfe4ec); border-radius: 8px; background: #fff; color: var(--ink-1, var(--ink, #273248));
  box-shadow: none; font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.news-body-tools:has(~ .ck-editor.sjpost-editor) > .news-body-image,
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update[data-article-image-upload] { border-color: color-mix(in srgb, var(--brand, #315de5), #fff 55%); background: #fff; color: var(--brand, #315de5); }
.news-body-tools:has(~ .ck-editor.sjpost-editor) > .news-body-image::before,
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update[data-article-image-upload]::before { content: "+"; font-size: 15px; font-weight: 600; line-height: 1; }
.news-body-tools:has(~ .ck-editor.sjpost-editor) > button:hover:not(:disabled),
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update:hover:not(:disabled) { border-color: var(--brand, #315de5); background: color-mix(in srgb, var(--brand, #315de5), #fff 92%); }
/* SJ 본문 아래 줄: [+ 이미지 추가] ……… [삭제] [저장] */
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; margin: 12px 0 0; }
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update[data-article-image-upload] { order: 0; margin-right: auto; }
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update.sjadmin-btn-delete { order: 1; border-color: #f1c4c0; background: #fff; color: #b42318; }
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update.sjadmin-btn-delete:hover:not(:disabled) { border-color: #b42318; background: #fef3f2; color: #912018; }
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update:not([data-article-image-upload]):not(.sjadmin-btn-delete) { order: 2; min-width: 88px; border-color: var(--brand, #315de5); background: var(--brand, #315de5); color: #fff; }
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update:not([data-article-image-upload]):not(.sjadmin-btn-delete):hover:not(:disabled) { background: color-mix(in srgb, var(--brand, #315de5), #000 12%); }
.news-body-tools:has(~ .ck-editor.sjpost-editor) > button:disabled,
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update:disabled { opacity: .5; cursor: default; transform: none; }
.news-body-tools:has(~ .ck-editor.sjpost-editor) > button:focus-visible,
.ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update:focus-visible { outline: 2px solid var(--brand, #315de5); outline-offset: 2px; }

/* ── 작은 화면: 본문 220px, 버튼 44px, 가로 넘침 없음 ───────────────── */
@media (max-width: 640px) {
  .ck.ck-editor.sjpost-editor .ck-editor__main > .ck-editor__editable.ck-editor__editable_inline { min-height: 220px; max-height: 60vh; padding: 2px 12px; font-size: 15px; }
}
@media (max-width: 640px), (pointer: coarse) {
  .ck.ck-editor.sjpost-editor .ck-toolbar .ck-button { min-width: 36px; min-height: 36px; }
  .news-body-tools:has(~ .ck-editor.sjpost-editor) > button,
  .ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-body-tools:has(~ .ck-editor.sjpost-editor) > button,
  .ck-editor.sjpost-editor + .sjadmin-btn-update-wrap > .sjadmin-btn-update { transition: none; }
}