/*! RichEditor v1.0.0 — 스타일
 * 1) .re-content  : 본문 스타일 (글 보기 화면에도 그대로 사용)
 * 2) .re-wrap 이하 : 에디터 UI
 */

/* =========================================================
 * 1. 본문 (보기 화면: <div class="re-content">저장된 HTML</div>)
 * ======================================================= */
.re-content { font-size: 15px; line-height: 1.7; color: #1f2328; word-break: break-word; overflow-wrap: anywhere; }
.re-content::after { content: ""; display: block; clear: both; }
.re-content p { margin: 0; }
.re-content h1, .re-content h2, .re-content h3, .re-content h4 { margin: .7em 0 .35em; line-height: 1.35; font-weight: 700; }
.re-content h1 { font-size: 1.9em; }
.re-content h2 { font-size: 1.55em; }
.re-content h3 { font-size: 1.28em; }
.re-content h4 { font-size: 1.1em; }
.re-content blockquote { margin: .6em 0; padding: .5em 1em; border-left: 4px solid #c7d0dc; background: #f6f8fa; color: #4b5563; }
.re-content ul, .re-content ol { margin: .3em 0; padding-left: 1.8em; }
.re-content li { margin: .1em 0; }
.re-content a { color: #1d63d6; text-decoration: underline; }
.re-content img { max-width: 100%; height: auto; vertical-align: bottom; }
.re-content hr { border: 0; border-top: 1px solid #d0d5dd; margin: 1.1em 0; }
.re-content code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "D2Coding", monospace; font-size: .9em; background: #f1f3f5; padding: .1em .35em; border-radius: 4px; }
.re-content pre { position: relative; margin: .7em 0; padding: 14px 16px; background: #1e2430; color: #e6edf3; border-radius: 8px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, "D2Coding", monospace; white-space: pre; overflow: auto; tab-size: 4; }
.re-content pre code { font: inherit; background: none; color: inherit; padding: 0; border-radius: 0; }
.re-content pre[data-lang]:not([data-lang="plaintext"])::before { content: attr(data-lang); position: absolute; top: 4px; right: 10px; font-size: 11px; letter-spacing: .04em; color: #8b949e; text-transform: uppercase; }
.re-content table { border-collapse: collapse; margin: .6em 0; max-width: 100%; }
.re-content th, .re-content td { border: 1px solid #000; padding: 6px 10px; vertical-align: top; min-width: 2em; word-break: break-word; }
.re-content th { background: #f2f4f7; font-weight: 600; text-align: center; }
.re-content .re-embed { position: relative; max-width: 100%; margin: .6em 0; background: #000; }
.re-content .re-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* =========================================================
 * 2. 에디터 UI
 * ======================================================= */
.re-wrap {
  --re-border: #d0d5dd; --re-line: #e6e9ee; --re-bg: #fff; --re-tool: #f7f8fa;
  --re-text: #1f2328; --re-muted: #6b7280; --re-accent: #2563eb; --re-accent-weak: #e7eeff; --re-hover: #eceff3;
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--re-border); border-radius: 8px; background: var(--re-bg); color: var(--re-text);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  text-align: left;
}
.re-wrap [hidden] { display: none !important; }
.re-toolbar, .re-ctxbar, .re-status, .re-pop, .re-dialog, .re-restore { box-sizing: border-box; }
.re-toolbar *, .re-ctxbar *, .re-pop *, .re-dialog *, .re-status *, .re-restore * { box-sizing: border-box; }

/* 도구막대 */
.re-toolbar { display: flex; flex-wrap: wrap; gap: 2px 0; padding: 5px 6px; background: var(--re-tool); border-bottom: 1px solid var(--re-line); border-radius: 8px 8px 0 0; position: sticky; top: 0; z-index: 6; }
.re-group { display: flex; align-items: center; gap: 1px; padding: 0 5px; border-right: 1px solid var(--re-line); }
.re-group:last-child { border-right: 0; }
.re-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 5px; border: 0; border-radius: 6px; background: transparent; color: #374151; cursor: pointer; font: inherit; }
.re-btn:hover:not(:disabled) { background: var(--re-hover); }
.re-btn.re-active, .re-btn.re-open { background: var(--re-accent-weak); color: var(--re-accent); }
.re-btn:disabled { opacity: .35; cursor: default; }
.re-btn:focus-visible, .re-select:focus-visible { outline: 2px solid var(--re-accent); outline-offset: 1px; }
.re-btn.re-txt { font-size: 12px; font-weight: 600; padding: 0 7px; }
.re-t { font: 700 15px/1 Georgia, "Times New Roman", serif; }
.re-ti { font-style: italic; font-weight: 500; }
.re-ts { font: 600 13px/1 Georgia, serif; }
.re-ts sup, .re-ts sub { font-size: 9px; }
.re-color-ico { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.re-color-bar { display: block; width: 16px; height: 3px; margin-top: 2px; border-radius: 1px; }
.re-bgc .re-t { background: #fff3bf; padding: 0 2px; border-radius: 2px; }
.re-wrap .re-select { height: 30px; width: auto; min-width: 0; max-width: none; margin: 0 1px; padding: 0 22px 0 8px; border: 1px solid var(--re-border); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 8px center; color: var(--re-text); font: inherit; font-size: 13px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.re-wrap .re-sel-block { width: 86px; }
.re-wrap .re-sel-fontFamily { width: 92px; }
.re-wrap .re-sel-fontSize { width: 62px; }
.re-wrap .re-select:disabled { opacity: .4; }

/* 문맥 도구막대 (표/이미지) */
.re-ctxbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 4px 6px; background: #f2f6ff; border-bottom: 1px solid #dbe5ff; }
.re-ctx-label { font-size: 12px; font-weight: 700; color: var(--re-accent); padding: 0 8px 0 4px; }
.re-ctx-info { font-size: 12px; color: var(--re-muted); padding: 0 8px; }

/* 임시저장 복원 */
.re-restore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; background: #fff8e1; border-bottom: 1px solid #f5e1a4; font-size: 13px; }
.re-restore span { flex: 1 1 auto; }

/* 본문 영역 */
.re-body { position: relative; overflow: hidden; flex: none; }
.re-editable { position: absolute; inset: 0; overflow: auto; padding: 16px 20px; outline: none; }
.re-editable.re-empty::before { content: attr(data-placeholder); position: absolute; left: 20px; top: 16px; color: #9aa1ab; pointer-events: none; }
.re-editable .re-embed { cursor: pointer; }
.re-editable .re-embed::after { content: ""; position: absolute; inset: 0; }
.re-editable td, .re-editable th { position: relative; }
.re-editable td.re-cell-sel, .re-editable th.re-cell-sel { background-image: linear-gradient(rgba(37, 99, 235, .2), rgba(37, 99, 235, .2)) !important; }
.re-editable.re-has-cellsel { caret-color: transparent; }
.re-editable.re-has-cellsel ::selection { background: transparent; }
.re-editable.re-col-resize, .re-editable.re-col-resize * { cursor: col-resize !important; }
.re-editable.re-row-resize, .re-editable.re-row-resize * { cursor: row-resize !important; }
.re-wrap .re-source { position: absolute; min-height: 0; max-height: none; max-width: none; inset: 0; width: 100%; height: 100%; margin: 0; padding: 14px 16px; border: 0; resize: none; outline: none; background: #0f172a; color: #e2e8f0; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; box-sizing: border-box; }
html.re-dragging, html.re-dragging * { user-select: none !important; -webkit-user-select: none !important; }

/* 미디어 선택 박스 */
.re-media-box { position: absolute; z-index: 5; border: 2px solid var(--re-accent); pointer-events: none; box-sizing: border-box; }
.re-handle { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid var(--re-accent); border-radius: 3px; pointer-events: auto; touch-action: none; }
.re-nw { left: -7px; top: -7px; cursor: nw-resize; }
.re-ne { right: -7px; top: -7px; cursor: ne-resize; }
.re-sw { left: -7px; bottom: -7px; cursor: sw-resize; }
.re-se { right: -7px; bottom: -7px; cursor: se-resize; }
.re-size-label { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 3px; background: rgba(17, 24, 39, .75); color: #fff; font-size: 11px; }

/* 상태 표시줄 */
.re-status { display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 0 4px 0 12px; background: var(--re-tool); border-top: 1px solid var(--re-line); border-radius: 0 0 8px 8px; font-size: 12px; color: var(--re-muted); }
.re-msg { flex: 1 1 auto; text-align: right; }
.re-over .re-count { color: #d92d20; font-weight: 600; }
.re-grip { width: 22px; height: 22px; cursor: ns-resize; touch-action: none; background: linear-gradient(135deg, transparent 45%, #b0b7c3 45%, #b0b7c3 52%, transparent 52%, transparent 64%, #b0b7c3 64%, #b0b7c3 71%, transparent 71%); }

/* 팝업 */
.re-pop { position: absolute; z-index: 20; padding: 8px; background: #fff; border: 1px solid var(--re-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }
.re-pop button { font: inherit; cursor: pointer; }
.re-palette { display: flex; flex-direction: column; gap: 8px; }
.re-none { padding: 5px 8px; border: 1px solid var(--re-border); border-radius: 6px; background: #fff; font-size: 12px; }
.re-none:hover { background: var(--re-hover); }
.re-swatches { display: grid; grid-template-columns: repeat(8, 22px); gap: 4px; }
.re-swatch { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(0, 0, 0, .14); border-radius: 4px; }
.re-swatch:hover { transform: scale(1.15); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--re-accent); }
.re-custom { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--re-muted); }
.re-wrap .re-custom input { width: 40px; height: 24px; padding: 0; border: 1px solid var(--re-border); border-radius: 4px; background: none; cursor: pointer; }
.re-list { display: flex; flex-direction: column; min-width: 90px; }
.re-list button { padding: 6px 12px; border: 0; border-radius: 6px; background: none; text-align: left; }
.re-list button:hover { background: var(--re-hover); }
.re-tgrid { display: grid; grid-template-columns: repeat(10, 18px); gap: 2px; }
.re-tgrid span { width: 18px; height: 18px; border: 1px solid #d0d5dd; border-radius: 2px; background: #fff; cursor: pointer; }
.re-tgrid span.on { background: var(--re-accent-weak); border-color: var(--re-accent); }
.re-tgrid-label { margin-top: 6px; text-align: center; font-size: 12px; color: var(--re-muted); }
.re-emoji-grid, .re-char-grid { display: grid; gap: 2px; max-height: 240px; overflow: auto; }
.re-emoji-grid { grid-template-columns: repeat(10, 30px); }
.re-char-grid { grid-template-columns: repeat(10, 28px); }
.re-emoji-grid button, .re-char-grid button { height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; }
.re-emoji-grid button { font-size: 19px; }
.re-char-grid button { font-size: 15px; }
.re-emoji-grid button:hover, .re-char-grid button:hover { background: var(--re-hover); }

/* 대화상자 */
.re-backdrop { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .38); }
.re-dialog { display: flex; flex-direction: column; width: min(480px, 100%); max-height: 90vh; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); color: var(--re-text); }
.re-dialog-title { padding: 16px 20px 6px; font-size: 16px; font-weight: 700; }
.re-dialog-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 20px; overflow: auto; }
.re-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }
.re-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--re-muted); }
.re-wrap .re-field input, .re-wrap .re-field select, .re-wrap .re-code-input { max-width: none; margin: 0; box-shadow: none; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--re-border); border-radius: 7px; font: inherit; font-size: 14px; color: var(--re-text); background: #fff; }
.re-wrap .re-code-input { height: auto; min-height: 180px; padding: 10px; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.re-wrap .re-field input:focus, .re-wrap .re-field select:focus, .re-wrap .re-code-input:focus { outline: 2px solid var(--re-accent-weak); border-color: var(--re-accent); }
.re-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.re-hint { margin: 0; font-size: 12px; color: var(--re-muted); }
.re-or { font-size: 12px; color: var(--re-muted); text-align: center; }
.re-upload { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 22px 12px; border: 2px dashed var(--re-border); border-radius: 10px; background: #fafbfc; color: var(--re-muted); font: inherit; font-size: 13px; cursor: pointer; }
.re-upload:hover, .re-upload.over { border-color: var(--re-accent); color: var(--re-accent); background: #f5f8ff; }
.re-upload svg { width: 28px; height: 28px; }
.re-dialog-foot button, .re-restore button { height: 34px; padding: 0 16px; border: 1px solid var(--re-border); border-radius: 7px; background: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.re-restore button { height: 28px; padding: 0 12px; font-size: 13px; }
.re-dialog-foot button:hover, .re-restore button:hover { background: var(--re-hover); }
.re-wrap .re-primary { background: var(--re-accent); border-color: var(--re-accent); color: #fff; }
.re-wrap .re-primary:hover { background: #1d4fd7; }

/* 토스트 */
.re-toast { position: absolute; left: 50%; bottom: 44px; z-index: 30; transform: translateX(-50%); max-width: 90%; padding: 8px 14px; border-radius: 8px; background: #111827; color: #fff; font-size: 13px; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }

/* 전체 화면 */
.re-wrap.re-full { position: fixed; inset: 0; z-index: 9999; border: 0; border-radius: 0; }
.re-wrap.re-full .re-toolbar, .re-wrap.re-full .re-status { border-radius: 0; }
.re-wrap.re-full .re-body { flex: 1 1 auto; height: auto !important; }
.re-wrap.re-full .re-grip { visibility: hidden; }
html.re-noscroll, html.re-noscroll body { overflow: hidden; }

/* 모바일 */
@media (max-width: 600px) {
  .re-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .re-toolbar::-webkit-scrollbar { display: none; }
  .re-ctxbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .re-group { flex: none; }
  .re-group { padding: 0 2px; }
  .re-btn { min-width: 34px; height: 34px; }
  .re-editable { padding: 12px 14px; }
  .re-editable.re-empty::before { left: 14px; top: 12px; }
  .re-swatches { grid-template-columns: repeat(8, 26px); }
  .re-swatch { width: 26px; height: 26px; }
}

/* =========================================================
 * 3. 호환: Bootstrap·게시판 공통 CSS가 에디터를 덮어쓰지 않도록
 * ======================================================= */
.re-wrap label { display: flex; max-width: none; margin: 0; font-weight: normal; }
.re-wrap .re-check input { width: auto; height: auto; margin: 0; }
.re-wrap button { text-transform: none; }
.re-content blockquote { font-size: inherit; }
.re-content blockquote p:last-child { margin-bottom: 0; }
.re-content pre { border: 0; word-break: normal; word-wrap: normal; }
.re-content pre code { white-space: inherit; }
.re-content table { background-color: transparent; }