/* board-suneditor.css — Sun Editor on board write/edit forms */
/* 2026-06-10: Theme-aligned toolbar and editor area */

.board-form .sun-editor { border: 1px solid var(--site-border); border-radius: 8px; background: var(--site-bg); font-family: var(--site-font-family, inherit); --se-main-font-family: var(--site-font-family, inherit); --se-content-font-family: var(--site-font-family, inherit); }
.board-form .sun-editor .se-wrapper-inner,
.board-form .sun-editor-editable,
.board-form .sun-editor .se-wrapper .se-placeholder { font-family: var(--site-font-family, inherit); }
.board-form .sun-editor .se-toolbar { outline: none; background: var(--site-surface); border-bottom: 1px solid var(--site-border); }
.board-form .sun-editor .se-btn { color: var(--site-text); }
.board-form .sun-editor .se-btn:enabled:hover { background: rgba(37, 99, 235, 0.08); }
/* 2026-06-11: Editor canvas — white on light/color themes; keep dark bg on dark/charcoal */
.board-form .sun-editor .se-wrapper-inner,
.board-form .sun-editor-editable { background: #ffffff; --se-edit-background-color: #ffffff; }
[data-theme="dark"] .board-form .sun-editor,
[data-theme="dark"] .board-form .sun-editor .se-wrapper-inner,
[data-theme="dark"] .board-form .sun-editor-editable,
[data-theme="charcoal"] .board-form .sun-editor,
[data-theme="charcoal"] .board-form .sun-editor .se-wrapper-inner,
[data-theme="charcoal"] .board-form .sun-editor-editable {
  background: var(--site-bg);
  --se-edit-background-color: var(--site-bg);
  --se-caret-color: var(--site-text);
  --se-drag-caret-color: var(--site-accent);
  --se-edit-font-color: var(--site-text);
  --se-main-font-color: var(--site-text);
  --se-placeholder-color: var(--site-muted);
  caret-color: var(--site-text);
  color: var(--site-text);
}
[data-theme="dark"] .board-form .sun-editor-editable ::selection,
[data-theme="charcoal"] .board-form .sun-editor-editable ::selection {
  background: color-mix(in srgb, var(--site-accent) 38%, transparent);
  color: var(--site-text);
}
.board-form .sun-editor .se-wrapper .se-placeholder { color: var(--site-muted); }
.board-form .sun-editor-editable { color: var(--site-text); font-size: 0.95rem; line-height: var(--site-line-height, 1.8); }

/* Published HTML — SunEditor defaults use #333 text on #fff; align with site theme */
/* 2026-06-10: Fix unreadable post body on dark / charcoal themes */
.board-post-content.sun-editor-editable,
.board-faq-a.sun-editor-editable {
  --se-edit-font-color: var(--site-text);
  --se-edit-font-pre: var(--site-muted);
  --se-edit-font-quote: var(--site-muted);
  --se-edit-background-color: transparent;
  --se-edit-background-pre: color-mix(in srgb, var(--site-surface) 88%, var(--site-bg));
  --se-edit-border-light: var(--site-border);
  --se-edit-border-dark: var(--site-border);
  --se-edit-border-dark-n1: var(--site-border);
  --se-edit-border-dark-n2: var(--site-border);
  --se-edit-border-table: var(--site-border);
  --se-edit-anchor: var(--site-accent);
  --se-edit-anchor-on-font: var(--site-accent);
  --se-edit-anchor-on-back: color-mix(in srgb, var(--site-accent) 14%, transparent);
  --se-edit-hr-color: var(--site-border);
  color: var(--site-text);
  background-color: transparent;
  padding: 0;
}

.board-post-content.sun-editor-editable { white-space: normal; word-break: break-word; }
.board-post-content.sun-editor-editable img { max-width: 100%; height: auto; }

/* 2026-06-17: Float image — text wraps from top beside left/right aligned images */
.sun-editor-editable .se-image-container.__se__float-left,
.sun-editor-editable .se-image-container.__se__float-right,
.board-post-content.sun-editor-editable .se-image-container.__se__float-left,
.board-post-content.sun-editor-editable .se-image-container.__se__float-right,
.board-faq-a.sun-editor-editable .se-image-container.__se__float-left,
.board-faq-a.sun-editor-editable .se-image-container.__se__float-right,
.grid-widget-html.sun-editor-editable .se-image-container.__se__float-left,
.grid-widget-html.sun-editor-editable .se-image-container.__se__float-right {
  margin-top: 0;
  margin-bottom: 0.75em;
  vertical-align: top;
}
.sun-editor-editable .__se__float-left figure,
.sun-editor-editable .__se__float-right figure,
.board-post-content.sun-editor-editable .__se__float-left figure,
.board-post-content.sun-editor-editable .__se__float-right figure,
.board-faq-a.sun-editor-editable .__se__float-left figure,
.board-faq-a.sun-editor-editable .__se__float-right figure,
.grid-widget-html.sun-editor-editable .__se__float-left figure,
.grid-widget-html.sun-editor-editable .__se__float-right figure {
  margin: 0 !important;
}
.sun-editor-editable .__se__float-left,
.board-post-content.sun-editor-editable .__se__float-left,
.board-faq-a.sun-editor-editable .__se__float-left,
.grid-widget-html.sun-editor-editable .__se__float-left {
  float: left;
  margin-right: 1em;
}
.sun-editor-editable .__se__float-right,
.board-post-content.sun-editor-editable .__se__float-right,
.board-faq-a.sun-editor-editable .__se__float-right,
.grid-widget-html.sun-editor-editable .__se__float-right {
  float: right;
  margin-left: 1em;
}

/* 2026-06-17: Sun Editor image modal — uploaded file list */
.kweb-suneditor-upload-list { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; }
.kweb-suneditor-upload-title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; color: #0f766e; display: flex; align-items: center; gap: 6px; }
.kweb-suneditor-upload-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.kweb-suneditor-upload-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; background: #fff; border: 1px solid #e2e8f0; }
.kweb-suneditor-upload-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: #f1f5f9; }
.kweb-suneditor-upload-name { flex: 1; min-width: 0; font-size: 0.8rem; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kweb-suneditor-upload-remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #fecaca; border-radius: 6px; background: #fff; color: #dc2626; cursor: pointer; }
.kweb-suneditor-upload-remove:hover { background: #fef2f2; }
.sun-editor .se-modal-area .se-flex-input-wrapper > .se-input-form-abs > div .se-input-file-cnt { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 2026-06-11: Published video — keep Sun Editor saved width/height (suneditor-contents.min.css) */
.board-post-content.sun-editor-editable .se-video-container,
.board-faq-a.sun-editor-editable .se-video-container { margin: 16px 0; }
.board-post-content.sun-editor-editable .se-video-container iframe,
.board-post-content.sun-editor-editable .se-video-container video,
.board-faq-a.sun-editor-editable .se-video-container iframe,
.board-faq-a.sun-editor-editable .se-video-container video { border: 0; border-radius: 8px; background: #0f172a; }
/* Shorts default size only when the editor did not set an explicit width */
.board-post-content.sun-editor-editable .se-video-container:not([style*="width"]):has(> figure > iframe.is-youtube-short),
.board-faq-a.sun-editor-editable .se-video-container:not([style*="width"]):has(> figure > iframe.is-youtube-short) { width: min(100%, 420px); margin-left: auto; margin-right: auto; }
.board-post-content.sun-editor-editable .se-video-container:not([style*="width"]) > figure > iframe.is-youtube-short,
.board-faq-a.sun-editor-editable .se-video-container:not([style*="width"]) > figure > iframe.is-youtube-short { aspect-ratio: 9 / 16; min-height: 280px; }
.board-post-content.sun-editor-editable table { width: 100%; border-collapse: collapse; max-width: 100%; }
.board-post-content.sun-editor-editable table td,
.board-post-content.sun-editor-editable table th { border: 1px solid var(--site-border); padding: 8px 10px; min-width: 80px; }
.board-post-content.sun-editor-editable table th,
.board-faq-a.sun-editor-editable table th { background-color: color-mix(in srgb, var(--site-surface) 92%, var(--site-bg)); color: var(--site-text); }

@media (max-width: 768px) {
  .board-post-content.sun-editor-editable { font-size: 0.92rem; line-height: var(--site-line-height, 1.8); }
  .board-post-content.sun-editor-editable img { border-radius: 6px; }
  .board-faq-a.sun-editor-editable { font-size: 0.88rem; overflow-x: auto; }
}

.board-faq-a.sun-editor-editable { white-space: normal; word-break: break-word; }
.board-faq-a.sun-editor-editable img { max-width: 100%; height: auto; }