/* ==========================================================================
   모바일 환경 당겨서 새로고침(Pull-to-Refresh) 및 바운스 스크롤 방지
   ========================================================================== */
html, body {
  overscroll-behavior-y: none !important;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   Rich Text Editor CSS - Modern & Responsive
   ========================================================================== */

:root {
  --rte-primary: #2563eb;
  --rte-primary-hover: #1d4ed8;
  --rte-primary-light: #eff6ff;
  --rte-bg: #ffffff;
  --rte-toolbar-bg: #f8fafc;
  --rte-border: #e2e8f0;
  --rte-border-focus: #3b82f6;
  --rte-text: #1e293b;
  --rte-text-muted: #64748b;
  --rte-radius: 10px;
  --rte-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  --rte-transition: all 0.2s ease-in-out;
}

/* 에디터 메인 래퍼 */
.rich-editor {
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: contain !important;
  width: 100%;
  margin-top: 0 !important;
  margin-right: 0 !important;
  border: 1px solid var(--rte-border);
  border-radius: var(--rte-radius);
  background: var(--rte-bg);
  box-shadow: var(--rte-shadow);
  overflow: visible;
  transition: var(--rte-transition);
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--rte-text);
  box-sizing: border-box;
}

/* 외부 컨테이너 우측/윗쪽 여백 완전 제거 가드 */
.editor-wrapper-container {
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
}

.rich-editor *, .rich-editor *::before, .rich-editor *::after {
  box-sizing: border-box;
}

.rich-editor:focus-within {
  border-color: var(--rte-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* 툴바 스타일 (미니멀 SVG 벡터 아이콘 기반 & 세로 구분선 컴팩트 레이아웃) */
.rich-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow: visible !important; /* 데스크탑에서 드롭다운 팝오버가 절대 잘리지 않도록 visible */
  gap: 2px;
  padding: 3px 6px;
  background-color: var(--rte-toolbar-bg, #ffffff);
  border-bottom: 1px solid var(--rte-border, #e2e8f0);
  border-top-left-radius: var(--rte-radius);
  border-top-right-radius: var(--rte-radius);
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  width: 100%;
}

/* 툴바 가로 스크롤바 커스텀 */
.rich-editor-toolbar::-webkit-scrollbar {
  height: 4px;
}

.rich-editor-toolbar::-webkit-scrollbar-track {
  background: transparent;
}

.rich-editor-toolbar::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.rich-editor-toolbar::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* 모바일 및 브라우저 sticky 풀림 방지용 강제 상단 고정(is-fixed) 클래스 */
.rich-editor-toolbar.is-fixed {
  position: fixed !important;
  top: 0;
  z-index: 100 !important;
  border-radius: 0 0 var(--rte-radius) var(--rte-radius) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, top, left, width;
  transition: none !important;
}

/* 툴바 고정 시 본문 덜컥거림을 완벽 방지하는 스페이서 */
.rich-editor-toolbar-spacer {
  display: none;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: none !important;
}

.rich-editor-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

/* 기능 그룹 사이 얇은 세로선 */
.rich-editor-separator {
  width: 1px;
  height: 16px;
  background-color: #d1d5db;
  margin: 0 3px;
  flex-shrink: 0;
}

/* 툴바 버튼: 배경색 제거(background: none), 마우스 오버 시 은은한 하이라이트 */
.rich-editor-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: none !important;
  color: #4b5563;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.rich-editor-btn:hover {
  background-color: #f3f4f6 !important;
  color: #111827;
}

.rich-editor-btn:active {
  background-color: #e5e7eb !important;
  transform: scale(0.96);
}

.rich-editor-btn.active {
  background-color: #eff6ff !important;
  color: var(--rte-primary, #2563eb);
}

.rich-editor-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* 셀렉트 드롭다운 및 아이콘 결합 래퍼 */
.rich-editor-select-wrapper {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 26px;
  background-color: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 1px 3px;
  gap: 1px;
  transition: all 0.15s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.rich-editor-select-wrapper:hover {
  background-color: #f9fafb;
  border-color: #cbd5e1;
}

.rich-editor-select-wrapper:focus-within {
  border-color: var(--rte-primary, #2563eb);
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.rich-editor-select-icon {
  width: 13px;
  height: 13px;
  color: #64748b;
  flex-shrink: 0;
  pointer-events: none;
  display: block;
}

.rich-editor-select-wrapper .rich-editor-select {
  height: 100%;
  border: none !important;
  background: transparent !important;
  padding: 0 1px;
  font-size: 11.5px;
  color: #374151;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}

.rich-editor-select-wrapper .rich-editor-select:focus {
  border: none !important;
  outline: none;
}

.rich-editor-select-font {
  width: 72px;
  max-width: 86px;
}

.rich-editor-select-size {
  width: 72px;
  max-width: 86px;
}

/* 툴바 카테고리별 드롭다운 ([글자 크기], [✏️ 서식], [📋 목록/블록], [📁 첨부]) */
.rich-editor-toolbar .rich-editor-select-category {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: 34px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rte-text);
  background-color: #ffffff;
  border: 1px solid var(--rte-border);
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  text-align: center;
  text-align-last: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: var(--rte-transition);
  box-sizing: border-box;
}

.rich-editor-toolbar .rich-editor-select-category:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

.rich-editor-toolbar .rich-editor-select-category:focus {
  border-color: var(--rte-border-focus);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.rich-editor-toolbar .rich-editor-select-category option {
  font-weight: normal;
  color: var(--rte-text);
  background-color: #ffffff;
  padding: 6px 10px;
  text-align: left;
  text-align-last: left;
}

/* 에디터 본문 입력 영역 (기본 폰트 크기 16px, 내부 스크롤바 보장, 상단/우측 여백 최소화) */
.rich-editor-content {
  position: relative;
  min-height: 200px;
  height: 480px; /* 기본 에디터 창 높이: 내용이 창보다 길어지면 내부 스크롤 바 생성 */
  padding: 8px 8px 16px 14px; /* 우측 및 윗쪽 여백 제거/최소화 (스크롤바 밀착) */
  outline: none;
  font-size: 16px;
  line-height: 1.75;
  color: var(--rte-text);
  overflow-y: auto !important; /* 에디터 내용이 창보다 크면 스크롤 바 즉시 생성 */
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  resize: vertical; /* 브라우저 네이티브 상하 리사이징 활성화 */
  box-sizing: border-box;
}

.rich-editor-content::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.rich-editor-content::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.rich-editor-content::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

.rich-editor-content[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
  display: block;
}

/* 본문 및 미리보기 내부 타이포그래피 (H1 ~ H7 단계별 폰트 사이즈 정의 - 기준 16px) */
/* 본문 (p) - 16px (1.00em, <h4>와 동일) */
.rich-editor-content p,
.preview-box p {
  font-size: 16px !important;
  line-height: 1.75;
  margin: 0.8em 0;
}

/* H1: 2.00em / 32px 가장 큰 제목 (페이지당 1개 권장) */
.rich-editor-content h1,
.rich-editor-content .rte-h1,
.preview-box h1,
.preview-box .rte-h1,
.reader-article-content h1,
.reader-article-content .rte-h1,
.rte-content-view h1,
.rte-content-view .rte-h1 {
  font-size: 2.00em !important;
  font-size: 32px !important;
  font-weight: 700;
  margin: 1.2em 0 0.5em;
  line-height: 1.3;
  color: #0f172a;
}

/* H2: 1.50em / 24px 주요 섹션의 제목 */
.rich-editor-content h2,
.rich-editor-content .rte-h2,
.preview-box h2,
.preview-box .rte-h2,
.reader-article-content h2,
.reader-article-content .rte-h2,
.rte-content-view h2,
.rte-content-view .rte-h2 {
  font-size: 1.50em !important;
  font-size: 24px !important;
  font-weight: 700;
  margin: 1.1em 0 0.5em;
  line-height: 1.35;
  color: #1e293b;
}

/* H3: 1.17em / 18.72px 서브 섹션의 제목 */
.rich-editor-content h3,
.rich-editor-content .rte-h3,
.preview-box h3,
.preview-box .rte-h3,
.reader-article-content h3,
.reader-article-content .rte-h3,
.rte-content-view h3,
.rte-content-view .rte-h3 {
  font-size: 1.17em !important;
  font-size: 18.72px !important;
  font-weight: 700;
  margin: 1em 0 0.45em;
  line-height: 1.4;
  color: #1e293b;
}

/* H4: 1.00em / 16px (굵게) 일반 글자와 크기가 같으나 두껍게 표시 */
.rich-editor-content h4,
.rich-editor-content .rte-h4,
.preview-box h4,
.preview-box .rte-h4,
.reader-article-content h4,
.reader-article-content .rte-h4,
.rte-content-view h4,
.rte-content-view .rte-h4 {
  font-size: 1.00em !important;
  font-size: 16px !important;
  font-weight: 700;
  margin: 0.9em 0 0.4em;
  line-height: 1.5;
  color: #334155;
}

/* H5: 0.83em / 13.28px 일반 글자보다 작고 두껍게 표시 */
.rich-editor-content h5,
.rich-editor-content .rte-h5,
.preview-box h5,
.preview-box .rte-h5,
.reader-article-content h5,
.reader-article-content .rte-h5,
.rte-content-view h5,
.rte-content-view .rte-h5 {
  font-size: 0.83em !important;
  font-size: 13.28px !important;
  font-weight: 700;
  margin: 0.85em 0 0.35em;
  line-height: 1.5;
  color: #334155;
}

/* H6: 0.67em / 10.72px 가장 작은 제목 */
.rich-editor-content h6,
.rich-editor-content .rte-h6,
.preview-box h6,
.preview-box .rte-h6,
.reader-article-content h6,
.reader-article-content .rte-h6,
.rte-content-view h6,
.rte-content-view .rte-h6 {
  font-size: 0.67em !important;
  font-size: 10.72px !important;
  font-weight: 700;
  color: #475569;
  margin: 0.8em 0 0.35em;
  line-height: 1.5;
}

/* H7: 0.5em / 8px 초소형 제목 */
.rich-editor-content h7,
.rich-editor-content .rte-h7,
.rich-editor-content h6.rte-h7,
.preview-box h7,
.preview-box .rte-h7,
.preview-box h6.rte-h7,
.reader-article-content h7,
.reader-article-content .rte-h7,
.reader-article-content h6.rte-h7,
.rte-content-view h7,
.rte-content-view .rte-h7,
.rte-content-view h6.rte-h7 {
  display: block;
  font-size: 0.50em !important;
  font-size: 8px !important;
  font-weight: 700;
  color: #64748b;
  margin: 0.75em 0 0.3em;
  line-height: 1.4;
  letter-spacing: 0.3px;
}

/* 제목 내부의 인라인 span, font, b 등이 제목의 고유 크기를 방해하지 않도록 상속 강제 */
.rich-editor-content h1 *,
.rich-editor-content h2 *,
.rich-editor-content h3 *,
.rich-editor-content h4 *,
.rich-editor-content h5 *,
.rich-editor-content h6 *,
.rich-editor-content h7 *,
.rich-editor-content .rte-h1 *,
.rich-editor-content .rte-h2 *,
.rich-editor-content .rte-h3 *,
.rich-editor-content .rte-h4 *,
.rich-editor-content .rte-h5 *,
.rich-editor-content .rte-h6 *,
.rich-editor-content .rte-h7 *,
.preview-box h1 *,
.preview-box h2 *,
.preview-box h3 *,
.preview-box h4 *,
.preview-box h5 *,
.preview-box h6 *,
.preview-box h7 *,
.preview-box .rte-h1 *,
.preview-box .rte-h2 *,
.preview-box .rte-h3 *,
.preview-box .rte-h4 *,
.preview-box .rte-h5 *,
.preview-box .rte-h6 *,
.preview-box .rte-h7 *,
.reader-article-content h1 *,
.reader-article-content h2 *,
.reader-article-content h3 *,
.reader-article-content h4 *,
.reader-article-content h5 *,
.reader-article-content h6 *,
.reader-article-content h7 *,
.reader-article-content .rte-h1 *,
.reader-article-content .rte-h2 *,
.reader-article-content .rte-h3 *,
.reader-article-content .rte-h4 *,
.reader-article-content .rte-h5 *,
.reader-article-content .rte-h6 *,
.reader-article-content .rte-h7 *,
.rte-content-view h1 *,
.rte-content-view h2 *,
.rte-content-view h3 *,
.rte-content-view h4 *,
.rte-content-view h5 *,
.rte-content-view h6 *,
.rte-content-view h7 *,
.rte-content-view .rte-h1 *,
.rte-content-view .rte-h2 *,
.rte-content-view .rte-h3 *,
.rte-content-view .rte-h4 *,
.rte-content-view .rte-h5 *,
.rte-content-view .rte-h6 *,
.rte-content-view .rte-h7 * {
  font-size: inherit !important;
}

.rich-editor-content p {
  margin: 0.5em 0;
}

.rich-editor-content blockquote {
  margin: 1em 0;
  padding: 10px 18px;
  border-left: 4px solid var(--rte-primary, #2563eb);
  background-color: #f8fafc;
  border-radius: 0 6px 6px 0;
  /* 기존 글자 크기, 글꼴(폰트), 글자색을 그대로 상속/유지 */
}

/* blockquote 내부의 문단 및 헤딩 요소의 서식(폰트, 크기) 온전히 유지 */
.rich-editor-content blockquote p {
  margin: 0.4em 0;
}

.rich-editor-content blockquote h1,
.rich-editor-content blockquote h2,
.rich-editor-content blockquote h3,
.rich-editor-content blockquote h4,
.rich-editor-content blockquote h5,
.rich-editor-content blockquote h6 {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

/* 목록 및 블록 서식 스타일 (CSS Reset 방어 및 중첩 목록 완벽 지원) */
.rich-editor-content ul,
.preview-box ul {
  list-style-type: disc !important;
  margin: 0.6em 0 !important;
  padding-left: 28px !important;
}

.rich-editor-content ul ul,
.preview-box ul ul {
  list-style-type: circle !important;
  margin: 0.3em 0 !important;
  padding-left: 24px !important;
}

.rich-editor-content ul ul ul,
.preview-box ul ul ul {
  list-style-type: square !important;
  margin: 0.2em 0 !important;
  padding-left: 24px !important;
}

.rich-editor-content ol,
.preview-box ol {
  list-style-type: decimal !important;
  margin: 0.6em 0 !important;
  padding-left: 28px !important;
}

.rich-editor-content ol ol,
.preview-box ol ol {
  list-style-type: lower-alpha !important;
  margin: 0.3em 0 !important;
  padding-left: 24px !important;
}

.rich-editor-content ol ol ol,
.preview-box ol ol ol {
  list-style-type: lower-roman !important;
  margin: 0.2em 0 !important;
  padding-left: 24px !important;
}

.rich-editor-content li,
.preview-box li {
  display: list-item !important;
  margin: 4px 0 !important;
  line-height: 1.6 !important;
  color: inherit;
}

.rich-editor-content li > p,
.preview-box li > p {
  margin: 0 !important;
  display: inline !important;
}

.rich-editor-content hr {
  border: none;
  border-top: 1px solid var(--rte-border);
  margin: 24px 0;
}

.rich-editor-content a {
  color: var(--rte-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 미디어 임베드 요소 스타일 */

/* 1. 이미지 */
.rich-editor-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 2. 유튜브/쇼츠 반응형 컨테이너 */
.rich-editor-content .video-container {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 18px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  background-color: #000;
  aspect-ratio: 16 / 9;
}

/* aspect-ratio 미지원 구형 브라우저 대비 폴백 */
@supports not (aspect-ratio: 16 / 9) {
  .rich-editor-content .video-container {
    padding-bottom: 56.25%;
    height: 0;
  }
}

.rich-editor-content .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 3. 인스타그램 피드/릴스 동영상 중심 콤팩트 컨테이너 (캡션 제거로 깔끔한 동영상 뷰) */
.rich-editor-content .instagram-container {
  display: block;
  margin: 16px auto;
  width: 100%;
  max-width: 540px;
  min-width: 200px;
  min-height: 200px;
  overflow: visible;
  box-sizing: border-box;
}

.rich-editor-content .instagram-container .instagram-media,
.rich-editor-content .instagram-container iframe.instagram-media,
.rich-editor-content .instagram-container iframe {
  display: block !important;
  width: 100% !important;
  max-width: 540px !important;
  min-width: 200px;
  min-height: 200px;
  height: auto;
  margin: 0 auto !important;
  border-radius: 8px !important;
  border: 1px solid #dbdbdb !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
}

/* 4. 틱톡 9:16 반응형 컨테이너 */
.rich-editor-content .tiktok-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 20px auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background-color: #000;
  aspect-ratio: 9 / 16;
  min-height: 560px;
}

@supports not (aspect-ratio: 9 / 16) {
  .rich-editor-content .tiktok-container {
    padding-bottom: 177.77%;
    height: 0;
  }
}

.rich-editor-content .tiktok-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* 5. PDF 첨부파일 및 인터랙티브 미리보기 카드 */
.rich-editor-content .pdf-attachment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin: 14px 0;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: var(--rte-transition);
}

.rich-editor-content .pdf-attachment-card:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

.rich-editor-content .pdf-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.rich-editor-content .pdf-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.rich-editor-content .pdf-name {
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}

.rich-editor-content .pdf-size {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* 5-1. PDF 첫 페이지 썸네일 & 인터랙티브 카드 구조 */
.rich-editor-content .pdf-preview-card,
.pdf-preview-card {
  display: flex !important;
  flex-direction: column !important;
  margin: 18px auto;
  max-width: 580px;
  min-width: 280px;
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  user-select: none;
  box-sizing: border-box !important;
  transition: width 0.2s ease, outline 0.15s ease, box-shadow 0.2s ease;
}

.rich-editor-content .pdf-preview-card:hover,
.pdf-preview-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
}

.rich-editor-content .pdf-card-header,
.pdf-preview-card .pdf-card-header {
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
  box-sizing: border-box !important;
}

.rich-editor-content .pdf-header-info,
.pdf-preview-card .pdf-header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.rich-editor-content .pdf-badge,
.pdf-preview-card .pdf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.rich-editor-content .pdf-card-name,
.pdf-preview-card .pdf-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rich-editor-content .pdf-card-size,
.pdf-preview-card .pdf-card-size {
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
}

.rich-editor-content .pdf-page-indicator,
.pdf-preview-card .pdf-page-indicator {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background-color: #e2e8f0;
  padding: 3px 9px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* 썸네일 미리보기 무대 (다크 백드롭으로 가독성 극대화 및 유연한 높이 반응) */
.rich-editor-content .pdf-preview-stage,
.pdf-preview-card .pdf-preview-stage {
  position: relative;
  width: 100%;
  flex: 1 1 auto !important;
  height: 480px;
  min-height: 120px;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.rich-editor-content .pdf-preview-img,
.pdf-preview-card .pdf-preview-img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background-color: #ffffff;
  display: block;
  transition: opacity 0.2s ease;
}

.rich-editor-content .pdf-loading-overlay,
.pdf-preview-card .pdf-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(2px);
  display: none !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  z-index: 5;
}

.rich-editor-content .pdf-loading-overlay.is-loading,
.pdf-preview-card .pdf-loading-overlay.is-loading,
.rich-editor-content .pdf-preview-card.is-loading .pdf-loading-overlay,
.pdf-preview-card.is-loading .pdf-loading-overlay {
  display: flex !important;
}

.rich-editor-content .pdf-spinner,
.pdf-preview-card .pdf-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: pdfSpin 0.7s linear infinite;
}

@keyframes pdfSpin {
  to { transform: rotate(360deg); }
}

/* 하단 인터랙티브 컨트롤 푸터 (flex-shrink: 0으로 어떤 리사이즈에서도 절대 가려지거나 잘리지 않음) */
.rich-editor-content .pdf-card-footer,
.pdf-preview-card .pdf-card-footer {
  flex-shrink: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  gap: 8px;
  flex-wrap: wrap;
  box-sizing: border-box !important;
}

.rich-editor-content .pdf-nav-controls,
.pdf-preview-card .pdf-nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rich-editor-content .pdf-nav-btn,
.pdf-preview-card .pdf-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.rich-editor-content .pdf-nav-btn:hover:not(:disabled),
.pdf-preview-card .pdf-nav-btn:hover:not(:disabled) {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.rich-editor-content .pdf-nav-btn:disabled,
.pdf-preview-card .pdf-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: #e2e8f0;
  background-color: #f8fafc;
}

.rich-editor-content .pdf-download-btn,
.pdf-preview-card .pdf-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff !important;
  background-color: var(--rte-primary, #2563eb);
  border: none;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.rich-editor-content .pdf-download-btn:hover,
.pdf-preview-card .pdf-download-btn:hover {
  background-color: #1d4ed8;
  color: #ffffff !important;
}

/* 모바일 반응형 최적화 */
@media (max-width: 600px) {
  .rich-editor-content .pdf-card-footer,
  .pdf-preview-card .pdf-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .rich-editor-content .pdf-nav-controls,
  .pdf-preview-card .pdf-nav-controls {
    width: 100%;
  }

  .rich-editor-content .pdf-nav-btn,
  .pdf-preview-card .pdf-nav-btn {
    flex: 1;
    justify-content: center;
  }

  .rich-editor-content .pdf-download-btn,
  .pdf-preview-card .pdf-download-btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* 6. 미디어 캡션(설명란 <figcaption>) 스타일 */
.rich-editor-content .rich-editor-caption {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  margin: 8px auto 18px;
  min-height: 24px;
  line-height: 1.6;
  outline: none;
  padding: 4px 10px;
  border-radius: 6px;
  max-width: 100%;
  border-bottom: 1px dashed transparent;
  transition: all 0.2s ease;
  user-select: text;
  cursor: text;
}

.rich-editor-content .rich-editor-caption:hover {
  background-color: #f8fafc;
  border-bottom-color: #cbd5e1;
}

.rich-editor-content .rich-editor-caption:focus {
  background-color: #f1f5f9;
  border-bottom-color: var(--rte-primary);
  color: #1e293b;
}

.rich-editor-content .rich-editor-caption:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-style: italic;
  pointer-events: none;
  display: block;
}

/* 미디어 선택 및 리사이즈 스타일 */
.rich-editor-content figure,
figure.rich-editor-figure {
  margin: 16px auto;
  display: block;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
  transition: width 0.2s ease, outline 0.15s ease;
}

.rich-editor-content figure img,
.rich-editor-content figure video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.rich-editor-content figure iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}

.rich-editor-content figure,
.rich-editor-content img,
.rich-editor-content .video-container,
.rich-editor-content .instagram-container,
.rich-editor-content .tiktok-container,
.rich-editor-content .pdf-attachment-card,
.rich-editor-content .pdf-preview-card {
  transition: width 0.2s ease, outline 0.15s ease;
}

/* 모든 임베드 영상(유튜브, 쇼츠, 틱톡, 인스타) iframe이 정상 클릭 및 재생되도록 보장 */
.rich-editor-content iframe {
  pointer-events: auto !important;
}

.rte-media-selected {
  outline: 2px solid var(--rte-primary) !important;
  outline-offset: 3px !important;
}

/* 100% 초과 확대 미디어 레이아웃 보호 스타일 */
.rich-editor-content .rte-media-expanded {
  max-width: none !important;
  box-sizing: border-box;
}

.rich-editor-content img.rte-media-expanded,
.rich-editor-content .video-container.rte-media-expanded,
.rich-editor-content .instagram-container.rte-media-expanded,
.rich-editor-content .tiktok-container.rte-media-expanded,
.rich-editor-content figure.rte-media-expanded .pdf-preview-card,
.rich-editor-content figure:has(.pdf-preview-card).rte-media-expanded .pdf-preview-card,
.rich-editor-content .pdf-preview-card.rte-media-expanded,
.rich-editor-content .pdf-attachment-card.rte-media-expanded {
  max-width: none !important;
}

.rich-editor-content .instagram-container.rte-media-expanded .instagram-media {
  max-width: 100% !important;
  width: 100% !important;
}

/* 플로팅 미디어 조절 툴바 (초소형 미니멀 아이콘 결합형 다크 테마) */
.rich-editor-resize-bar {
  position: absolute;
  display: none;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #475569;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  z-index: 45;
  user-select: none;
  animation: rteFadeIn 0.12s ease-out forwards; opacity: 1 !important;
  overflow: visible !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.rich-editor-resize-bar::-webkit-scrollbar {
  display: none;
}

/* 툴바 항목 래퍼: 독립된 아이콘 + 슬림 셀렉트 박스 세트 */
.rich-editor-resize-item {
  display: inline-flex;
  align-items: center;
  height: 24px;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 0 3px 0 5px;
  gap: 2px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.rich-editor-resize-item:hover {
  background-color: #263345;
  border-color: #475569;
}

.rich-editor-resize-item:focus-within {
  border-color: var(--rte-primary, #3b82f6);
  background-color: #1e293b;
  box-shadow: 0 0 0 1.5px rgba(59, 130, 246, 0.35);
}

.rich-editor-resize-icon {
  width: 12px;
  height: 12px;
  color: #94a3b8;
  flex-shrink: 0;
  pointer-events: none;
  display: block;
}

/* 슬림 셀렉트 박스 */
.rich-editor-resize-item .rich-editor-resize-select {
  height: 100%;
  border: none !important;
  background: transparent !important;
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 24px;
}

.rich-editor-resize-item .rich-editor-resize-select:focus {
  outline: none;
}

.rich-editor-resize-item .rich-editor-resize-select option {
  background-color: #0f172a;
  color: #f1f5f9;
  padding: 4px 6px;
}

.rich-editor-resize-select-size {
  width: 44px;
}

.rich-editor-resize-select-align {
  width: 42px;
}

/* 위치 이동 버튼 그룹 및 버튼 (독립된 위로 / 아래로 SVG 버튼) */
.rich-editor-resize-move-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.rich-editor-resize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.rich-editor-resize-btn:hover {
  background-color: #334155;
  border-color: #64748b;
  color: #ffffff;
}

.rich-editor-resize-btn:active {
  background-color: #0ea5e9;
  border-color: #0284c7;
  color: #ffffff;
  transform: scale(0.96);
}

.rich-editor-resize-btn svg {
  display: block;
  stroke: currentColor;
  pointer-events: none;
}

/* 툴바 삭제 버튼 슬림화 (다크 레드 계열 포인트 컬러) */
.rich-editor-resize-delete-btn {
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(185, 28, 28, 0.25);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  line-height: 1;
  box-sizing: border-box;
}

.rich-editor-resize-delete-btn:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}

.rich-editor-resize-delete-btn svg {
  width: 11px;
  height: 11px;
  display: block;
  stroke: currentColor;
  pointer-events: none;
}

/* 툴바 닫기 버튼 */
.rich-editor-resize-bar .rich-editor-resize-close {
  height: 24px;
  width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.15s ease;
  padding: 0;
}

.rich-editor-resize-bar .rich-editor-resize-close:hover {
  background: #334155;
  color: #ffffff;
}

/* 모달 대화상자 (유튜브/링크 입력) */
.rich-editor-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: rteFadeIn 0.15s ease-out;
}

.rich-editor-modal {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 24px;
  width: 90%;
  max-width: 440px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  animation: rteSlideUp 0.15s ease-out;
}

.rich-editor-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #0f172a;
}

.rich-editor-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rte-border);
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  margin-bottom: 16px;
  transition: var(--rte-transition);
}

.rich-editor-modal-input:focus {
  border-color: var(--rte-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.rich-editor-modal-help {
  font-size: 12px;
  color: #64748b;
  margin-top: -10px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.rich-editor-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.rich-editor-modal-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: var(--rte-transition);
}

.rich-editor-modal-btn-cancel {
  background-color: #f1f5f9;
  color: #475569;
}

.rich-editor-modal-btn-cancel:hover {
  background-color: #e2e8f0;
}

.rich-editor-modal-btn-submit {
  background-color: var(--rte-primary);
  color: #ffffff;
}

.rich-editor-modal-btn-submit:hover {
  background-color: var(--rte-primary-hover);
}

/* 애니메이션 */
@keyframes rteFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rteSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 모바일 반응형 대응 */
@media (max-width: 640px) {
  .rich-editor-toolbar {
    padding: 3px 4px;
    gap: 2px 1px;
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .rich-editor-group {
    gap: 1px;
  }

  .rich-editor-toolbar .rich-editor-select-category {
    height: 30px;
    font-size: 11px;
    padding: 0 2px;
  }

  .rich-editor-select-wrapper {
    height: 24px;
    padding: 0 2px;
    gap: 1px;
    border-radius: 3px;
  }

  .rich-editor-select-wrapper .rich-editor-select {
    font-size: 11px;
    padding: 0;
  }

  .rich-editor-select-font {
    width: 66px;
    max-width: 78px;
  }

  .rich-editor-select-size {
    width: 62px;
    max-width: 74px;
  }

  .rich-editor-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 3px;
  }

  .rich-editor-btn svg {
    width: 14px;
    height: 14px;
  }

  .rich-editor-separator {
    margin: 0 2px;
    height: 14px;
  }

  .rich-editor-content {
  position: relative;
    padding: 16px;
    font-size: 14px;
    min-height: 280px;
  }

  .rich-editor-content .pdf-attachment-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .rich-editor-content .pdf-download-btn {
    align-self: flex-end;
  }

  .rich-editor-resize-bar {
    padding: 2px 4px;
    gap: 2px;
  }

  .rich-editor-resize-item {
    height: 22px;
    padding: 0 2px 0 4px;
    gap: 1px;
  }

  .rich-editor-resize-item .rich-editor-resize-select {
    font-size: 10px;
    line-height: 22px;
  }

  .rich-editor-resize-select-size {
    width: 38px;
  }

  .rich-editor-resize-select-align {
    width: 36px;
  }

  .rich-editor-resize-select-move {
    width: 40px;
  }

  .rich-editor-resize-delete-btn {
    height: 22px;
    padding: 0 5px;
    font-size: 10px;
  }

  .rich-editor-resize-bar .rich-editor-resize-close {
    height: 22px;
    width: 20px;
    font-size: 11px;
  }
}


/* ==========================================================================
   미디어 마우스 드래그 앤 드롭 이동 스타일
   ========================================================================== */

/* 플로팅 툴바 드래그 핸들 */
.rich-editor-resize-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 7px;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 500;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.rich-editor-resize-drag-handle:hover {
  background-color: #334155;
  border-color: #64748b;
  color: #ffffff;
}

.rich-editor-resize-drag-handle:active {
  cursor: grabbing;
  background-color: var(--rte-primary, #2563eb);
  border-color: #3b82f6;
  color: #ffffff;
}

.rich-editor-resize-drag-handle svg {
  display: block;
  stroke: currentColor;
  pointer-events: none;
}

/* 드래그 이동 중 iframe 및 동영상 오버레이 마우스 이벤트 투과 방어 (포인터 튐 및 드래그 멈춤 원천 차단) */
body.rte-dragging iframe,
body.rte-dragging video,
body.rte-dragging .video-container,
body.rte-dragging .video-overlay,
body.rte-dragging .instagram-overlay,
body.rte-dragging .instagram-viewport,
body.rte-dragging .tiktok-container,
body.rte-dragging embed,
body.rte-dragging object {
  pointer-events: none !important;
  user-select: none !important;
}

/* 드래그 중인 미디어 요소 시각 효과 */
.rich-editor-figure.rte-dragging,
.video-container.rte-dragging,
.pdf-preview-card.rte-dragging {
  opacity: 0.45 !important;
  outline: 2px dashed var(--rte-primary, #2563eb) !important;
  outline-offset: 4px !important;
  transition: opacity 0.2s ease;
}

/* 드래그 앤 드롭 가이드라인 */
.rich-editor-drop-line {
  position: absolute;
  height: 3px;
  background-color: var(--rte-primary, #2563eb);
  border-radius: 2px;
  pointer-events: none;
  z-index: 99;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
  transition: top 0.06s ease, left 0.06s ease;
}

.rich-editor-drop-line::before,
.rich-editor-drop-line::after {
  content: '';
  position: absolute;
  top: -3.5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--rte-primary, #2563eb);
}

.rich-editor-drop-line::before { left: -5px; }
.rich-editor-drop-line::after { right: -5px; }

/* 미디어 요소 기본 커서 및 드래그 반응 */
.rich-editor-figure {
  cursor: default;
}
.rich-editor-figure img,
.rich-editor-figure .pdf-preview-card {
  cursor: grab;
}
.rich-editor-figure img:active,
.rich-editor-figure .pdf-preview-card:active {
  cursor: grabbing;
}


/* ==========================================================================
   Vimage (9:16 세로형 고정 뷰포트 내 좌우 가로 스크롤 이미지)
   ========================================================================== */
.rich-editor-vimage-figure {
  width: 360px;          /* 기본 360px 너비로 외곽 선택 테두리가 카드에 밀착 */
  max-width: 100%;
  margin: 16px auto;
  display: block;
  box-sizing: border-box;
}

.vimage-container {
  position: relative;
  width: 100%;
  max-width: 100%;       /* figure 너비에 100% 밀착 */
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rte-border, #e2e8f0);
  background-color: #0b1120;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  user-select: none;
}

.vimage-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16; /* 9:16 세로형 고정 화면 비율 */
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.vimage-viewport:active,
.vimage-viewport.is-panning {
  cursor: grabbing !important;
}

/* 9:16 화면 내부 이미지: 높이를 100% 꽉 채우고 가로 길이는 원본 유지하여 좌우 스크롤 */
.vimage-img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  pointer-events: auto;
  margin: 0;
}

/* Vimage 가로 슬림 스크롤바 */
.vimage-viewport::-webkit-scrollbar {
  height: 6px;
}
.vimage-viewport::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
}
.vimage-viewport::-webkit-scrollbar-thumb {
  background: var(--rte-primary, #2563eb);
  border-radius: 4px;
}
.vimage-viewport::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* 9:16 H-SCROLL 안내 배지 */
.vimage-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #93c5fd;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  z-index: 5;
  border: 1px solid rgba(59, 130, 246, 0.4);
}


/* ==========================================================================
   Himage (16:9 고정 윈도우 프레임 내 100% 넓이 수직 스크롤 이미지)
   ========================================================================== */
.himage-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 16px auto;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rte-border, #e2e8f0);
  background-color: #0b1120;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  user-select: none;
}

.himage-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9 !important; /* 16:9 고정 윈도우 비율 강제 */
  overflow-x: hidden !important;   /* 가로 스크롤 방지 */
  overflow-y: auto !important;     /* 수직(상하) 스크롤 */
  display: block !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  box-sizing: border-box;
}

.himage-viewport:active,
.himage-viewport.is-panning {
  cursor: grabbing !important;
}

/* 16:9 윈도우 안에 100% 너비로 꽉 채워지고 수직으로 스크롤되는 이미지 */
.himage-img {
  width: 100% !important;        /* 16:9 윈도우 너비에 100% 꽉 채움 */
  height: auto !important;       /* 세로 길이는 원본 비율 유지 */
  min-height: 100% !important;   /* 16:9 창 높이 이상 확보 */
  max-width: 100% !important;
  display: block !important;
  pointer-events: auto;
  margin: 0 !important;
}

/* 16:9 뷰포트 수직 슬림 스크롤바 */
.himage-viewport::-webkit-scrollbar {
  width: 6px;
}
.himage-viewport::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.7);
}
.himage-viewport::-webkit-scrollbar-thumb {
  background: var(--rte-primary, #2563eb);
  border-radius: 4px;
}
.himage-viewport::-webkit-scrollbar-thumb:hover {
  background: #3b82f6;
}

/* 16:9 V-SCROLL 안내 배지 */
.himage-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(15, 23, 42, 0.85);
  color: #93c5fd;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  z-index: 5;
  border: 1px solid rgba(59, 130, 246, 0.4);
}


/* ==========================================================================
   미디어 4방향 모서리 드래그 크기 조절 (Corner Resize Handles & Box)
   ========================================================================== */
.rich-editor-resize-box {
  position: absolute;
  display: none;
  border: 2px solid var(--rte-primary, #2563eb);
  pointer-events: none; /* 내부는 클릭 투과 */
  z-index: 40;
  box-sizing: border-box;
  border-radius: 4px;
}

.rte-corner-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border: 2px solid var(--rte-primary, #2563eb);
  border-radius: 3px;
  pointer-events: auto !important; /* 모서리 핸들만 마우스 이벤트 수신 */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  z-index: 50;
  transition: transform 0.1s ease, background-color 0.1s ease;
  box-sizing: border-box;
  touch-action: none;
}

.rte-corner-handle:hover {
  background-color: var(--rte-primary, #2563eb);
  transform: scale(1.35);
}

.rte-corner-handle.handle-nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}

.rte-corner-handle.handle-ne {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}

.rte-corner-handle.handle-se {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

.rte-corner-handle.handle-sw {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

/* 실시간 가로x세로 픽셀 크기 배지 */
.rte-resize-dimension-badge {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 43;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


/* ==========================================================================
   텍스트 감싸기 (Text Wrap) 및 클리어픽스 보호
   ========================================================================== */
/* 에디터 본문 컨테이너만 float 해제 (단락 p는 float을 유지하여 엔터 입력 시 한 줄씩 내려가도록 보장) */
.rich-editor-content::after {
  content: "";
  display: table;
  clear: both;
}

.rich-editor-content p {
  margin: 0.4em 0;
  clear: none !important;
}

/* 글감싸기 미디어 및 코드 블록 기본 여백 및 부유 스타일 */
.rich-editor-figure[data-align="wrap-left"],
.rich-editor-code-figure[data-align="wrap-left"],
figure[data-align="wrap-left"] {
  float: left !important;
  display: inline-block !important;
  margin: 4px 20px 12px 0 !important;
  max-width: 100% !important;
}

.rich-editor-figure[data-align="wrap-right"],
.rich-editor-code-figure[data-align="wrap-right"],
figure[data-align="wrap-right"] {
  float: right !important;
  display: inline-block !important;
  margin: 4px 0 12px 20px !important;
  max-width: 100% !important;
}

.rich-editor-figure[data-align="inline"],
.rich-editor-code-figure[data-align="inline"],
figure[data-align="inline"] {
  float: none !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin: 8px 12px 8px 0 !important;
  max-width: 48% !important;
}

.rich-editor-table-wrapper {
  clear: both !important;
}

/* ==========================================================================
   좌우 분할 멀티 컬럼 그리드 (2열 레이아웃)
   ========================================================================== */
.rich-editor-columns {
  display: flex;
  gap: 16px;
  margin: 16px 0;
  width: 100%;
  box-sizing: border-box;
}

.rich-editor-columns .rich-editor-col {
  flex: 1 1 0;
  min-width: 0;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 12px;
  background-color: #f8fafc;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rich-editor-columns .rich-editor-col:focus-within {
  border-color: #3b82f6;
  background-color: #ffffff;
}

@media (max-width: 640px) {
  .rich-editor-columns {
    flex-direction: column;
  }
}


/* ==========================================================================
   캡션(Caption) 간격 슬림화 및 텍스트 문단 조화 최적화
   ========================================================================== */
.rich-editor-caption {
  display: block;
  text-align: center;
  font-size: 12px !important;
  color: #64748b;
  margin: 4px auto 2px !important; /* 기존 8px auto 18px 에서 상하 여백 대폭 축소 */
  min-height: 18px !important;
  line-height: 1.4 !important;
  outline: none;
  padding: 2px 6px !important;
  border-radius: 4px;
  max-width: 100%;
  border-bottom: 1px dashed transparent;
  transition: all 0.15s ease;
  user-select: text;
  cursor: text;
}

.rich-editor-content .rich-editor-caption:empty:not(:focus) {
  min-height: 16px !important;
  margin: 2px auto 0 !important;
  padding: 0 4px !important;
}

.rich-editor-content .rich-editor-caption:empty::before {
  content: attr(data-placeholder);
  color: #94a3b8;
  font-style: italic;
  pointer-events: none;
  display: block;
  font-size: 11px;
}

.rich-editor-content figure,
figure.rich-editor-figure {
  margin: 10px auto; /* 16px -> 10px 최적화 */
}

/* 글감싸기 시 캡션 및 피규어 여백 슬림화 */
.rich-editor-figure[data-align="wrap-left"] .rich-editor-caption,
.rich-editor-figure[data-align="wrap-right"] .rich-editor-caption,
.rich-editor-figure[data-align^="inline"] .rich-editor-caption {
  margin: 3px 0 0 0 !important;
  padding: 1px 4px !important;
  font-size: 11px !important;
}

/* ==========================================================================
   동영상(유튜브) 오버레이 및 리사이징 마우스 보호
   ========================================================================== */
.video-container {
  position: relative;
}

.video-container .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s ease, opacity 0.2s ease;
}

.video-container:hover .video-overlay,
.rte-media-selected .video-overlay {
  background: rgba(37, 99, 235, 0.04);
}

/* 드래그 크기 조절 중 iframe의 마우스 이벤트 가로채기 차단 */
body.rte-resizing iframe,
body.rte-resizing .video-container iframe,
body.rte-resizing .video-overlay {
  pointer-events: none !important;
}

/* ==========================================================================
   다중 미디어/코드 블록 좌우 정렬 및 나란히(2열) 배치 최적화
   ========================================================================== */
/* 1. 나란히 (왼쪽 정렬): 좌측 50% 부유 배치 */
.rich-editor-figure[data-align="inline-left"],
.rich-editor-code-figure[data-align="inline-left"],
figure[data-align="inline-left"] {
  float: left !important;
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  box-sizing: border-box !important;
  margin: 6px 10px 6px 0 !important;
}

/* 2. 나란히 (오른쪽 정렬): 우측 50% 부유 배치 */
.rich-editor-figure[data-align="inline-right"],
.rich-editor-code-figure[data-align="inline-right"],
figure[data-align="inline-right"] {
  float: right !important;
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  box-sizing: border-box !important;
  margin: 6px 0 6px 10px !important;
}

/* 3. 나란히 (가운데 정렬 / 기본): 2열 대칭 중앙 배치 */
.rich-editor-figure[data-align="inline-center"],
.rich-editor-code-figure[data-align="inline-center"],
figure[data-align="inline-center"],
.rich-editor-figure[data-align="inline"],
.rich-editor-code-figure[data-align="inline"],
figure[data-align="inline"] {
  float: left !important;
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  box-sizing: border-box !important;
  margin: 6px 5px !important;
}

/* 단독으로 나란히 가운데 정렬인 경우 auto 마진 중앙 배치 */
/* 단독으로 나란히 정렬이 적용된 경우에도 50% 인라인 그리드 형태를 온전히 유지하도록 보장 */
.rich-editor-content > figure[data-align="inline-center"]:only-of-type,
.rich-editor-content > figure[data-align="inline"]:only-of-type {
  float: left !important;
  display: inline-block !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
}

/* 나란히 배치된 미디어 사이의 빈 문단(<p><br></p>)이 줄바꿈을 유발하지 않도록 완전 숨김 처리 */
.rich-editor-content figure[data-align^="inline"] + p:empty,
.rich-editor-content figure[data-align^="inline"] + p:has(> br:only-child) {
  display: none !important;
}


/* ==========================================================================
   플로팅 툴바 숫자 직접 입력 인풋 및 단위 배지 스타일
   ========================================================================== */
.rich-editor-resize-input {
  width: 38px;
  height: 19px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 3px;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  padding: 0 3px;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rich-editor-resize-input::-webkit-outer-spin-button,
.rich-editor-resize-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rich-editor-resize-input:focus {
  border-color: #3b82f6;
  background: #1e293b;
  box-shadow: 0 0 0 1px #3b82f6;
}

.rich-editor-resize-unit {
  font-size: 10px;
  color: #94a3b8;
  padding: 0 2px 0 1px;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}


/* ==========================================================================
   도표 (표 / Table) 및 인터랙티브 툴바 스타일
   ========================================================================== */
.rich-editor-table-wrapper {
  margin: 16px 0;
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.rich-editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.rich-editor-table th,
.rich-editor-table td {
  border: 1px solid #e2e8f0;
  padding: 8px 12px;
  min-width: 60px;
  outline: none;
  vertical-align: middle;
}

.rich-editor-table th {
  background-color: #f8fafc;
  color: #1e293b;
  font-weight: 600;
  border-bottom: 2px solid #cbd5e1;
}

.rich-editor-table tr:nth-child(even) td {
  background-color: #fcfcfd;
}

.rich-editor-table td:focus,
.rich-editor-table th:focus {
  background-color: #eff6ff !important;
  box-shadow: inset 0 0 0 1.5px #3b82f6;
}

/* 표 하단 편집 툴바 */
.rich-editor-table-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 8px 8px;
  user-select: none;
}

.rte-table-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rte-table-tool-btn:hover {
  background-color: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.rte-table-tool-btn.danger {
  color: #dc2626;
  margin-left: auto;
}

.rte-table-tool-btn.danger:hover {
  background-color: #fef2f2;
  border-color: #f87171;
}


/* ==========================================================================
   도표 플로팅 팝업 툴바 및 열 너비(폭) 드래그 리사이저 스타일
   - 버튼 및 셀렉트 박스 크기 최적화 (22px 슬림 레이아웃)
   ========================================================================== */
.rich-editor-table-toolbar {
  position: absolute;
  display: none;
  align-items: center;
  gap: 3px;
  background: #0f172a;
  padding: 3px 5px;
  border-radius: 6px;
  border: 1px solid #475569;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  z-index: 46;
  user-select: none;
  animation: rteFadeIn 0.12s ease-out forwards; opacity: 1 !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.rich-editor-table-toolbar .rich-editor-resize-item {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 4px;
  gap: 2px;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  box-sizing: border-box;
}

.rich-editor-table-toolbar .rich-editor-resize-select {
  height: 20px;
  font-size: 11px;
  padding: 0 14px 0 2px;
  background: transparent;
  color: #f1f5f9;
  border: none;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
}

.rich-editor-table-toolbar .rte-table-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: #f1f5f9;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.rich-editor-table-toolbar .rte-table-tool-btn:hover {
  background-color: #263345;
  border-color: #475569;
  color: #ffffff;
}

.rich-editor-table-toolbar .rte-table-tool-btn.danger {
  color: #fca5a5;
  border-color: #7f1d1d;
  background-color: #450a0a;
}

.rich-editor-table-toolbar .rte-table-tool-btn.danger:hover {
  background-color: #7f1d1d;
  color: #ffffff;
}

/* 열 너비(폭) 드래그 리사이저 핸들 (마우스 클릭 영역 확대 및 시각 반응 개선) */
.rich-editor-table th,
.rich-editor-table td {
  position: relative;
}

.rte-col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.rte-col-resizer:hover,
.rte-col-resizing {
  background-color: #2563eb !important;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.4);
}

/* 열 너비 조절 시 표 전체를 관통하는 수직 기준선 */
.rte-col-guide-line {
  position: absolute;
  display: none;
  width: 2px;
  background-color: #2563eb;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.5);
}

/* 열 너비 실시간 픽셀 배지 (말풍선) */
.rte-col-width-badge {
  position: absolute;
  display: none;
  background-color: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
}


/* ==========================================================================
   툴바 커스텀 아이콘 드롭다운 메뉴 (가로 아이콘 팝오버 바)
   ========================================================================== */
.rich-editor-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 대표 메뉴 드롭다운 트리거 버튼 (아이콘 + 케럿 화살표 선명하게 표시) */
.rich-editor-dropdown-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  height: 26px !important;
  min-width: 36px !important;
  width: auto !important;
  padding: 0 6px 0 7px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.rich-editor-dropdown-btn:hover {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

.rich-editor-dropdown.is-open .rich-editor-dropdown-btn,
.rich-editor-dropdown-btn.has-active {
  background-color: #eff6ff !important;
  border-color: #3b82f6 !important;
  color: var(--rte-primary, #2563eb) !important;
}

.rich-editor-dropdown-btn svg:not(.rich-editor-dropdown-caret) {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.rich-editor-dropdown-caret {
  width: 8px !important;
  height: 8px !important;
  color: #6b7280 !important;
  flex-shrink: 0 !important;
  transition: transform 0.15s ease !important;
  pointer-events: none !important;
}

.rich-editor-dropdown.is-open .rich-editor-dropdown-caret {
  transform: rotate(180deg) !important;
}

/* 드롭다운 팝오버: 세로(수직) 아이콘 전용 슬림 팝오버 바 (화면 밖 잘림 원천 차단) */
.rich-editor-dropdown-menu {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  display: none;
  flex-direction: column !important;
  align-items: center;
  gap: 3px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 4px;
  z-index: 100;
  animation: rteFadeIn 0.12s ease-out forwards; opacity: 1 !important;
  min-width: 36px;
  width: max-content;
  box-sizing: border-box;
}

.rich-editor-dropdown.is-open .rich-editor-dropdown-menu {
  display: flex !important;
  flex-direction: column !important;
}

/* 우측 끝 드롭다운(첨부 및 링크)은 오른쪽 기준 정렬 */
.rich-editor-dropdown[data-dropdown="attach"] .rich-editor-dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

/* 드롭다운 내부 아이콘 버튼 스타일 */
.rich-editor-dropdown-menu .rich-editor-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  color: #374151 !important;
  transition: all 0.12s ease !important;
}

.rich-editor-dropdown-menu .rich-editor-btn:hover {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

.rich-editor-dropdown-menu .rich-editor-btn.active {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: var(--rte-primary, #2563eb) !important;
}

/* ==========================================================================
   코드 블록 (Code Block) & 줄 번호 (Line Numbers) 스타일
   지원 언어: PHP, JavaScript, HTML, CSS, Python
   ========================================================================== */
.rich-editor-code-figure {
  margin: 18px 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.rich-editor-code-wrapper {
  position: relative !important;
  background-color: #1d1f21;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #334155;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

/* 코드 블록 상단 헤더 */
.rte-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background-color: #0f172a;
  border-bottom: 1px solid #273549;
  user-select: none;
}

.rte-code-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 원모양 도트 완전 제거 */
.rte-code-dot {
  display: none !important;
}

.rte-code-lang-badge {
  margin-left: 0;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  background-color: #1e293b;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid #334155;
}

.rte-code-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rte-code-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rte-code-action-btn:hover {
  background-color: #334155;
  color: #ffffff;
}

.rte-code-action-btn.danger {
  color: #fca5a5;
  border-color: #7f1d1d;
  background-color: #450a0a;
}

.rte-code-action-btn.danger:hover {
  background-color: #7f1d1d;
  color: #ffffff;
}

/* ==========================================================================
   Prism 코드 영역 및 줄 번호 (Line Numbers) 통합 동기화 레이아웃
   ========================================================================== */
.rich-editor-code-wrapper {
  --rte-code-font-size: 13px;
  --rte-code-line-height: 22px;
  position: relative !important;
}

/* 분리형 플렉스박스 코드 바디 - 통합 스크롤러 및 고정 줄 번호(Sticky Gutter) */
.rte-code-body {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  max-height: calc(20 * var(--rte-code-line-height, 22px) + 28px) !important; /* 기본 20줄 표시 높이 */
  overflow: auto !important; /* 상하/좌우 통합 스크롤러: 가로 스크롤바가 항상 최하단에 안정적으로 위치 */
  box-sizing: border-box !important;
  border-radius: 0 0 8px 8px !important;
}

/* 코드 에디터 전용 세련된 스크롤바 */
.rte-code-body::-webkit-scrollbar,
.rte-code-pre::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.rte-code-body::-webkit-scrollbar-track,
.rte-code-pre::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
}

.rte-code-body::-webkit-scrollbar-thumb,
.rte-code-pre::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

.rte-code-body::-webkit-scrollbar-thumb:hover,
.rte-code-pre::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* 라이트 모드 스크롤바 */
.rich-editor-code-wrapper.theme-light .rte-code-body::-webkit-scrollbar-track,
.rich-editor-code-wrapper.theme-light .rte-code-pre::-webkit-scrollbar-track,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-body::-webkit-scrollbar-track,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-pre::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.rich-editor-code-wrapper.theme-light .rte-code-body::-webkit-scrollbar-thumb,
.rich-editor-code-wrapper.theme-light .rte-code-pre::-webkit-scrollbar-thumb,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-body::-webkit-scrollbar-thumb,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-pre::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

.rich-editor-code-wrapper.theme-light .rte-code-body::-webkit-scrollbar-thumb:hover,
.rich-editor-code-wrapper.theme-light .rte-code-pre::-webkit-scrollbar-thumb:hover,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-body::-webkit-scrollbar-thumb:hover,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-pre::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 우측 하단 귀퉁이 크기 및 높이 조절 사각형 핸들 */
.rte-code-corner-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  cursor: se-resize;
  z-index: 30;
  user-select: none;
  -webkit-user-select: none;
  display: flex !important;
  align-items: flex-end;
  justify-content: flex-end;
  box-sizing: border-box;
}

.rte-code-corner-handle::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #64748b;
  border-bottom: 2.5px solid #64748b;
  transition: all 0.15s ease;
}

.rte-code-corner-handle:hover::after {
  border-color: #3b82f6;
  width: 12px;
  height: 12px;
}

/* 좌측 분리형 줄 번호(Gutter) - 코드 가로 스크롤 시에도 좌측에 고정 유지되는 Sticky 구조 */
.rte-code-gutter {
  position: sticky !important;
  left: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  width: 48px !important;
  min-width: 48px !important;
  padding: 14px 10px 14px 0 !important;
  margin: 0 !important;
  text-align: right !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  border-right: 1px solid #334155 !important;
  background-color: #16181d !important;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
  font-size: var(--rte-code-font-size, 13px) !important;
  line-height: var(--rte-code-line-height, 22px) !important;
  box-sizing: border-box !important;
}

/* 라이트 모드 줄 번호 배경 */
.rich-editor-code-wrapper.theme-light .rte-code-gutter,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-gutter {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.rte-code-gutter span {
  display: block !important;
  height: var(--rte-code-line-height, 22px) !important;
  min-height: var(--rte-code-line-height, 22px) !important;
  max-height: var(--rte-code-line-height, 22px) !important;
  line-height: var(--rte-code-line-height, 22px) !important;
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 우측 독립 코드 영역 - pre 자체 클리핑 제거 및 줄 번호와 100% 동일한 라인 박스 모델 */
.rte-code-pre,
.rich-editor-code-wrapper pre,
.rich-editor-code-wrapper pre[class*="language-"] {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: transparent !important;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
  font-size: var(--rte-code-font-size, 13px) !important;
  line-height: var(--rte-code-line-height, 22px) !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  box-sizing: border-box !important;
  border: none !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
}

/* 코드 블록 하단 캡션 placeholder 완전 숨김 */
.rich-editor-code-figure figcaption {
  display: none !important;
}

.rte-code-pre code,
.rich-editor-code-wrapper pre code,
.rich-editor-code-wrapper pre code[class*="language-"] {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
  font-size: inherit !important;
  line-height: var(--rte-code-line-height, 22px) !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  background: none !important;
  text-shadow: none !important;
  box-sizing: border-box !important;
}

/* 코드 라인별 블록 요소 - 줄 번호와 1:1 완벽 정렬 매칭 */
.rte-code-line {
  display: block !important;
  height: var(--rte-code-line-height, 22px) !important;
  min-height: var(--rte-code-line-height, 22px) !important;
  max-height: var(--rte-code-line-height, 22px) !important;
  line-height: var(--rte-code-line-height, 22px) !important;
  white-space: pre !important;
  word-break: normal !important;
  word-wrap: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

/* 잔류 line-numbers-rows 숨김 처리 */
.line-numbers-rows {
  display: none !important;
}

/* 데이터 속성(data-code-fontsize) 기반 실시간 글자 크기 및 줄 높이 완전 일치화 */
.rich-editor-code-wrapper[data-code-fontsize="11px"],
.rich-editor-code-wrapper[data-code-fontsize="11px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="11px"] code,
.rich-editor-code-wrapper[data-code-fontsize="11px"] .rte-code-gutter {
  font-size: 11px !important;
  --rte-code-line-height: 18px;
  line-height: 18px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="11px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="11px"] .rte-code-line {
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 18px !important;
}

.rich-editor-code-wrapper[data-code-fontsize="12px"],
.rich-editor-code-wrapper[data-code-fontsize="12px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="12px"] code,
.rich-editor-code-wrapper[data-code-fontsize="12px"] .rte-code-gutter {
  font-size: 12px !important;
  --rte-code-line-height: 20px;
  line-height: 20px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="12px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="12px"] .rte-code-line {
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  line-height: 20px !important;
}

.rich-editor-code-wrapper[data-code-fontsize="13px"],
.rich-editor-code-wrapper[data-code-fontsize="13px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="13px"] code,
.rich-editor-code-wrapper[data-code-fontsize="13px"] .rte-code-gutter {
  font-size: 13px !important;
  --rte-code-line-height: 22px;
  line-height: 22px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="13px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="13px"] .rte-code-line {
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  line-height: 22px !important;
}

.rich-editor-code-wrapper[data-code-fontsize="14px"],
.rich-editor-code-wrapper[data-code-fontsize="14px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="14px"] code,
.rich-editor-code-wrapper[data-code-fontsize="14px"] .rte-code-gutter {
  font-size: 14px !important;
  --rte-code-line-height: 24px;
  line-height: 24px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="14px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="14px"] .rte-code-line {
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 24px !important;
}

.rich-editor-code-wrapper[data-code-fontsize="16px"],
.rich-editor-code-wrapper[data-code-fontsize="16px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="16px"] code,
.rich-editor-code-wrapper[data-code-fontsize="16px"] .rte-code-gutter {
  font-size: 16px !important;
  --rte-code-line-height: 26px;
  line-height: 26px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="16px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="16px"] .rte-code-line {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  line-height: 26px !important;
}

.rich-editor-code-wrapper[data-code-fontsize="18px"],
.rich-editor-code-wrapper[data-code-fontsize="18px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="18px"] code,
.rich-editor-code-wrapper[data-code-fontsize="18px"] .rte-code-gutter {
  font-size: 18px !important;
  --rte-code-line-height: 28px;
  line-height: 28px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="18px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="18px"] .rte-code-line {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  line-height: 28px !important;
}

.rich-editor-code-wrapper[data-code-fontsize="20px"],
.rich-editor-code-wrapper[data-code-fontsize="20px"] pre,
.rich-editor-code-wrapper[data-code-fontsize="20px"] code,
.rich-editor-code-wrapper[data-code-fontsize="20px"] .rte-code-gutter {
  font-size: 20px !important;
  --rte-code-line-height: 32px;
  line-height: 32px !important;
}
.rich-editor-code-wrapper[data-code-fontsize="20px"] .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-fontsize="20px"] .rte-code-line {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 32px !important;
}

/* ==========================================================================
   주간/야간 모드 (Light & Dark Themes) - 코드 블록 및 에디터 전체
   ========================================================================== */

/* 1. 코드 블록 기본 및 라이트 모드 (주간 모드 - 밝은 화면) */
.rich-editor-code-wrapper.theme-light,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-header,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) .rte-code-header {
  background-color: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-lang-badge,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) .rte-code-lang-badge {
  background-color: #e2e8f0 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-action-btn,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) .rte-code-action-btn {
  background-color: #ffffff !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-action-btn:hover,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) .rte-code-action-btn:hover {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}

.rich-editor-code-wrapper.theme-light pre[class*="language-"],
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) pre[class*="language-"] {
  background-color: #f8fafc !important;
  color: #24292e !important;
}

.rich-editor-code-wrapper.theme-light pre[class*="language-"] code,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) pre[class*="language-"] code {
  background: none !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-gutter,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-gutter {
  background-color: #f1f5f9 !important;
  border-right: 1px solid #e2e8f0 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-gutter span,
.rich-editor-code-wrapper:not(.theme-dark) .rte-code-gutter span {
  color: #94a3b8 !important;
}

/* 1. 코드 블록 기본 및 라이트 모드 문법 토큰 색상 (모든 테마 상태에서 100% 기본 색상 보장) */
.rich-editor-code-wrapper .token.comment,
.rich-editor-code-wrapper .token.prolog,
.rich-editor-code-wrapper .token.doctype,
.rich-editor-code-wrapper .token.cdata {
  color: #6a737d !important;
  font-style: italic !important;
}

.rich-editor-code-wrapper .token.punctuation {
  color: #57606a !important;
}

.rich-editor-code-wrapper .token.keyword,
.rich-editor-code-wrapper .token.atrule,
.rich-editor-code-wrapper .token.selector {
  color: #cf222e !important; /* 선명한 레드/핑크 키워드 */
  font-weight: 600 !important;
}

.rich-editor-code-wrapper .token.string,
.rich-editor-code-wrapper .token.char,
.rich-editor-code-wrapper .token.attr-value {
  color: #0a3069 !important; /* 깊은 네이비/그린 문자열 */
}

.rich-editor-code-wrapper .token.function,
.rich-editor-code-wrapper .token.class-name {
  color: #8250df !important; /* 선명한 퍼플 함수 */
}

.rich-editor-code-wrapper .token.number,
.rich-editor-code-wrapper .token.boolean,
.rich-editor-code-wrapper .token.constant {
  color: #0550ae !important; /* 블루 숫자/불리언 */
  font-weight: 500 !important;
}

.rich-editor-code-wrapper .token.operator,
.rich-editor-code-wrapper .token.entity,
.rich-editor-code-wrapper .token.url {
  color: #cf222e !important;
}

.rich-editor-code-wrapper .token.variable,
.rich-editor-code-wrapper .token.property,
.rich-editor-code-wrapper .token.tag {
  color: #953800 !important; /* 오렌지 변수/태그 */
}


/* 2. 코드 블록 다크 모드 (야간 모드 - 어두운 화면) */
.rich-editor-code-wrapper.theme-dark {
  background-color: #1d1f21 !important;
  border-color: #334155 !important;
}

.rich-editor-code-wrapper.theme-dark .rte-code-header {
  background-color: #0f172a !important;
  border-bottom: 1px solid #273549 !important;
}

.rich-editor-code-wrapper.theme-dark .rte-code-lang-badge {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

.rich-editor-code-wrapper.theme-dark .rte-code-action-btn {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

.rich-editor-code-wrapper.theme-dark .rte-code-action-btn:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

.rich-editor-code-wrapper.theme-dark pre[class*="language-"] {
  background-color: #1d1f21 !important;
  color: #f8fafc !important;
}

.rich-editor-code-wrapper.theme-dark pre[class*="language-"] code {
  color: #f8fafc !important;
  background: none !important;
}

.rich-editor-code-wrapper.theme-dark .rte-code-gutter,
.rich-editor-code-wrapper[data-code-theme="dark"] .rte-code-gutter {
  background-color: #16181d !important;
  border-right: 1px solid #334155 !important;
}

.rich-editor-code-wrapper.theme-dark .rte-code-gutter span,
.rich-editor-code-wrapper[data-code-theme="dark"] .rte-code-gutter span {
  color: #64748b !important;
}

/* 다크 모드 문법 토큰 색상 (Tomorrow Night / VS Code Dark Style) */
.rich-editor-code-wrapper.theme-dark .token.comment,
.rich-editor-code-wrapper.theme-dark .token.prolog,
.rich-editor-code-wrapper.theme-dark .token.doctype,
.rich-editor-code-wrapper.theme-dark .token.cdata {
  color: #7f848e !important;
  font-style: italic !important;
}

.rich-editor-code-wrapper.theme-dark .token.punctuation {
  color: #abb2bf !important;
}

.rich-editor-code-wrapper.theme-dark .token.keyword,
.rich-editor-code-wrapper.theme-dark .token.atrule,
.rich-editor-code-wrapper.theme-dark .token.selector {
  color: #cc99cd !important;
  font-weight: 600 !important;
}

.rich-editor-code-wrapper.theme-dark .token.string,
.rich-editor-code-wrapper.theme-dark .token.char,
.rich-editor-code-wrapper.theme-dark .token.attr-value {
  color: #7ec699 !important;
}

.rich-editor-code-wrapper.theme-dark .token.function,
.rich-editor-code-wrapper.theme-dark .token.class-name {
  color: #61afef !important;
}

.rich-editor-code-wrapper.theme-dark .token.number,
.rich-editor-code-wrapper.theme-dark .token.boolean,
.rich-editor-code-wrapper.theme-dark .token.constant {
  color: #f08d49 !important;
}

.rich-editor-code-wrapper.theme-dark .token.operator,
.rich-editor-code-wrapper.theme-dark .token.entity,
.rich-editor-code-wrapper.theme-dark .token.url {
  color: #67cdcc !important;
}

.rich-editor-code-wrapper.theme-dark .token.variable,
.rich-editor-code-wrapper.theme-dark .token.property,
.rich-editor-code-wrapper.theme-dark .token.tag {
  color: #e2777a !important;
}


/* 3. 브라우저 시스템 다크 모드(야간 모드) 감지 시 자동 전환 */
@media (prefers-color-scheme: dark) {
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark),
  .rich-editor-code-wrapper.theme-auto {
    background-color: #1d1f21 !important;
    border-color: #334155 !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .rte-code-header,
  .rich-editor-code-wrapper.theme-auto .rte-code-header {
    background-color: #0f172a !important;
    border-bottom: 1px solid #273549 !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .rte-code-lang-badge,
  .rich-editor-code-wrapper.theme-auto .rte-code-lang-badge {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .rte-code-action-btn,
  .rich-editor-code-wrapper.theme-auto .rte-code-action-btn {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .rte-code-action-btn:hover,
  .rich-editor-code-wrapper.theme-auto .rte-code-action-btn:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) pre[class*="language-"],
  .rich-editor-code-wrapper.theme-auto pre[class*="language-"] {
    background-color: #1d1f21 !important;
    color: #f8fafc !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) pre[class*="language-"] code,
  .rich-editor-code-wrapper.theme-auto pre[class*="language-"] code {
    color: #f8fafc !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .rte-code-gutter,
  .rich-editor-code-wrapper.theme-auto .rte-code-gutter {
    background-color: #16181d !important;
    border-right: 1px solid #334155 !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .rte-code-gutter span,
  .rich-editor-code-wrapper.theme-auto .rte-code-gutter span {
    color: #64748b !important;
  }

  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.comment,
  .rich-editor-code-wrapper.theme-auto .token.comment { color: #7f848e !important; }
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.punctuation,
  .rich-editor-code-wrapper.theme-auto .token.punctuation { color: #abb2bf !important; }
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.keyword,
  .rich-editor-code-wrapper.theme-auto .token.keyword { color: #cc99cd !important; }
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.string,
  .rich-editor-code-wrapper.theme-auto .token.string { color: #7ec699 !important; }
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.function,
  .rich-editor-code-wrapper.theme-auto .token.function { color: #61afef !important; }
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.number,
  .rich-editor-code-wrapper.theme-auto .token.number { color: #f08d49 !important; }
  .rich-editor-code-wrapper:not(.theme-light):not(.theme-dark) .token.variable,
  .rich-editor-code-wrapper.theme-auto .token.variable { color: #e2777a !important; }
}


/* 4. 에디터 전체 다크 테마(야간 모드) 토글 스타일 */
.rich-editor.is-dark {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.rich-editor.is-dark .rich-editor-toolbar {
  background-color: #1e293b !important;
  border-bottom-color: #334155 !important;
  color: #f8fafc !important;
}

.rich-editor.is-dark .rich-editor-content {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

.rich-editor.is-dark .rich-editor-btn {
  color: #cbd5e1 !important;
}

.rich-editor.is-dark .rich-editor-btn:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

.rich-editor.is-dark .rich-editor-btn.active {
  background-color: #1e3a8a !important;
  color: #60a5fa !important;
}

.rich-editor.is-dark .rich-editor-select-wrapper {
  border-color: #334155 !important;
  background-color: #1e293b !important;
}

.rich-editor.is-dark .rich-editor-select {
  color: #f8fafc !important;
  background-color: #1e293b !important;
}

.rich-editor.is-dark .rich-editor-separator {
  background-color: #334155 !important;
}

/* 코드 블록 헤더 글자 크기 조절 셀렉트박스 */
.rte-code-fontsize-wrapper {
  display: inline-flex;
  align-items: center;
}

.rte-code-fontsize-select {
  height: 24px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  background-color: #1e293b;
  border: 1px solid #334155;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: all 0.15s ease;
}

.rte-code-fontsize-select:hover {
  background-color: #334155;
  color: #ffffff;
}

/* 라이트 모드 (주간 모드) 글자 크기 셀렉트박스 */
.rich-editor-code-wrapper.theme-light .rte-code-fontsize-select,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) .rte-code-fontsize-select {
  background-color: #ffffff !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-fontsize-select:hover,
.rich-editor-code-wrapper:not(.theme-dark):not(.theme-light) .rte-code-fontsize-select:hover {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}


/* ==========================================================================
   뷰어(조회 모드) div.rich-editor-content 전용 최적화 규칙
   - contenteditable="true"가 없는 일반 조회 화면에서 편집용 핸들 완전 격리
   - innerHTML 주입 시 에디터와 100% 동일한 외형 유지 및 텍스트 선택/복사 보장
   ========================================================================== */
.rich-editor-content:not([contenteditable="true"]) {
  user-select: text;
  cursor: auto;
}

.rich-editor-content:not([contenteditable="true"]) .rte-col-resizer,
.rich-editor-content:not([contenteditable="true"]) .video-overlay,
.rich-editor-content:not([contenteditable="true"]) .rich-editor-drop-line,
.rich-editor-content:not([contenteditable="true"]) .rte-code-corner-handle {
  display: none !important;
}

.rich-editor-content:not([contenteditable="true"]) [data-code-action="edit"],
.rich-editor-content:not([contenteditable="true"]) [data-code-action="delete"] {
  display: none !important;
}

/* ==========================================================================
   에디터 하단 크기 조절 바 및 우측 하단 귀퉁이 드래그 핸들
   ========================================================================== */
.rich-editor-bottom-resizer {
  position: relative;
  width: 100%;
  height: 14px;
  background-color: var(--rte-toolbar-bg, #f8fafc);
  border-top: 1px solid var(--rte-border, #e2e8f0);
  border-radius: 0 0 var(--rte-radius, 10px) var(--rte-radius, 10px);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  transition: background-color 0.2s ease;
  z-index: 10;
}

.rich-editor-bottom-resizer:hover {
  background-color: #f1f5f9;
}

.rich-editor-resizer-line {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background-color: #cbd5e1;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.rich-editor-bottom-resizer:hover .rich-editor-resizer-line {
  background-color: var(--rte-primary, #2563eb);
  width: 48px;
}

/* 우측 하단 대각선 드래그 핸들 (너비 및 높이 동시 조절) */
.rich-editor-corner-resizer {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 12px;
  cursor: se-resize;
  background-image: radial-gradient(circle, #94a3b8 1.2px, transparent 1.2px);
  background-size: 4px 4px;
  background-position: right 2px bottom 2px;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease;
}

.rich-editor-corner-resizer:hover {
  background-image: radial-gradient(circle, #2563eb 1.5px, transparent 1.5px);
}

/* 야간(다크) 모드 리사이저 바 */
.rich-editor.is-dark .rich-editor-bottom-resizer {
  background-color: #0f172a !important;
  border-top-color: #334155 !important;
}

.rich-editor.is-dark .rich-editor-resizer-line {
  background-color: #475569 !important;
}

.rich-editor.is-dark .rich-editor-bottom-resizer:hover .rich-editor-resizer-line {
  background-color: #38bdf8 !important;
}

/* 코드 블록 헤더 드래그 이동 핸들 */
.rte-code-drag-handle {
  cursor: grab !important;
  user-select: none !important;
  transition: all 0.2s ease !important;
}

.rte-code-drag-handle:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-drag-handle {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.rich-editor-code-wrapper.theme-light .rte-code-drag-handle:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* ==========================================================================
   파일 업로드 실시간 진행바 (Progress Bar) 모달 스타일
   ========================================================================== */
.rte-upload-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.rte-upload-progress-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.rte-upload-progress-modal {
  width: 90%;
  max-width: 440px;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0f172a;
}

.rte-upload-progress-overlay.is-active .rte-upload-progress-modal {
  transform: translateY(0) scale(1);
}

.rte-upload-progress-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.rte-upload-progress-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.rte-upload-progress-icon.is-success {
  background: #ecfdf5;
  color: #10b981;
}

.rte-upload-progress-icon.is-error {
  background: #fef2f2;
  color: #ef4444;
}

.rte-upload-progress-info {
  flex: 1;
  min-width: 0;
}

.rte-upload-progress-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.rte-upload-progress-status {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rte-upload-progress-percent {
  font-size: 18px;
  font-weight: 700;
  color: #2563eb;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.rte-upload-progress-track {
  width: 100%;
  height: 8px;
  background: #f1f5f9;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
}

.rte-upload-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 9999px;
  transition: width 0.2s ease-out;
  position: relative;
}

.rte-upload-progress-bar.is-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 24px 24px;
  animation: rte-progress-stripes 1s linear infinite;
}

@keyframes rte-progress-stripes {
  from {
    background-position: 24px 0;
  }
  to {
    background-position: 0 0;
  }
}

.rte-upload-progress-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
}

/* 야간(다크) 모드 지원 */
.rich-editor.is-dark ~ .rte-upload-progress-overlay .rte-upload-progress-modal,
body.is-dark .rte-upload-progress-modal {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

.rich-editor.is-dark ~ .rte-upload-progress-overlay .rte-upload-progress-title,
body.is-dark .rte-upload-progress-title {
  color: #f8fafc !important;
}

.rich-editor.is-dark ~ .rte-upload-progress-overlay .rte-upload-progress-status,
body.is-dark .rte-upload-progress-status {
  color: #94a3b8 !important;
}

.rich-editor.is-dark ~ .rte-upload-progress-overlay .rte-upload-progress-track,
body.is-dark .rte-upload-progress-track {
  background: #1e293b !important;
}


/* ==========================================================================
   크기 조절 드래그 중 지연 애니메이션 완전 제거 (마우스 포인터와 100% 동기화)
   ========================================================================== */
body.rte-resizing *,
body.rte-resizing figure.rich-editor-figure,
body.rte-resizing .video-container,
body.rte-resizing .instagram-container,
body.rte-resizing img,
body.rte-resizing iframe,
body.rte-resizing video {
  transition: none !important;
  animation: none !important;
}

/* ==========================================================================
   인스타그램 / 릴스 뷰어 3대 버튼 모던 글래스모피즘 디자인 (에디터 & 뷰어 표준 일치)
   ========================================================================== */
.rich-editor-instagram-figure {
  width: 100% !important;
  max-width: 400px !important;
  margin: 16px auto !important;
  display: table !important;
  box-sizing: border-box !important;
}

.instagram-container {
  position: relative !important;
  width: 100% !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  min-height: 480px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
  box-sizing: border-box !important;
}

.instagram-viewport {
  width: 100% !important;
  min-height: 480px !important;
  background: #000000 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.instagram-container iframe.instagram-embed-iframe,
.instagram-container iframe {
  width: 100% !important;
  min-height: 480px !important;
  height: 520px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  display: block !important;
}

.instagram-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.instagram-overlay-header {
  width: 100% !important;
  height: 50px !important;
  min-height: 46px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 75%, transparent 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 5 !important;
}

.instagram-play-mode-btn,
.instagram-toggle-type-btn,
.instagram-view-btn {
  height: 28px !important;
  line-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: #ffffff !important;
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.instagram-play-mode-btn svg,
.instagram-toggle-type-btn svg,
.instagram-view-btn svg {
  flex-shrink: 0 !important;
  display: block !important;
}

.instagram-play-mode-btn {
  background: rgba(15, 23, 42, 0.68) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.instagram-play-mode-btn svg {
  fill: #f43f5e !important;
}

.instagram-play-mode-btn:hover {
  background: rgba(225, 48, 108, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.35) !important;
}

.instagram-play-mode-btn:hover svg {
  fill: #ffffff !important;
}

.instagram-play-mode-btn:active {
  transform: scale(0.96) !important;
}

.instagram-play-mode-btn.is-active {
  background: rgba(22, 163, 74, 0.88) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

.instagram-play-mode-btn.is-active svg {
  stroke: #ffffff !important;
  fill: none !important;
}

.instagram-play-mode-btn.is-active:hover {
  background: rgba(21, 128, 61, 0.95) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
}

.instagram-toggle-type-btn {
  background: rgba(15, 23, 42, 0.65) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.instagram-toggle-type-btn svg {
  stroke: #94a3b8 !important;
}

.instagram-toggle-type-btn:hover {
  background: rgba(30, 41, 59, 0.88) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.instagram-toggle-type-btn:hover svg {
  stroke: #ffffff !important;
}

.instagram-toggle-type-btn:active {
  transform: scale(0.96) !important;
}

.instagram-view-btn {
  background: rgba(15, 23, 42, 0.65) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin-left: auto !important;
}

.instagram-view-btn svg:first-child {
  stroke: #f43f5e !important;
}

.instagram-view-btn svg:last-child {
  stroke: #94a3b8 !important;
}

.instagram-view-btn:hover {
  background: linear-gradient(135deg, rgba(240, 148, 51, 0.9) 0%, rgba(225, 48, 108, 0.9) 50%, rgba(188, 24, 136, 0.9) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(225, 48, 108, 0.4) !important;
}

.instagram-view-btn:hover svg:first-child,
.instagram-view-btn:hover svg:last-child {
  stroke: #ffffff !important;
}

.instagram-view-btn:active {
  transform: scale(0.96) !important;
}

.instagram-play-toggle-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: auto !important;
  z-index: 10 !important;
}

.instagram-play-toggle-btn:hover {
  background: rgba(225, 48, 108, 0.92) !important;
  border-color: #ffffff !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.instagram-container.is-playing .instagram-play-toggle-btn,
.rich-editor-instagram-figure.is-playing .instagram-play-toggle-btn {
  display: none !important;
}

.instagram-container.is-playing .instagram-overlay,
.rich-editor-instagram-figure.is-playing .instagram-overlay {
  pointer-events: none !important;
  background: transparent !important;
}

.instagram-container.is-playing .instagram-overlay-header,
.rich-editor-instagram-figure.is-playing .instagram-overlay-header {
  pointer-events: auto !important;
}

.instagram-container.is-playing iframe,
.rich-editor-instagram-figure.is-playing iframe {
  pointer-events: auto !important;
}

/* 동영상 모달 드래그 앤 드롭 드롭존 스타일 */
.rich-editor-modal-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 12px;
  margin: 10px 0 16px 0;
  background: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.rich-editor-modal-dropzone:hover,
.rich-editor-modal-dropzone.is-dragover {
  background: #eff6ff;
  border-color: var(--rte-primary, #2563eb);
  color: var(--rte-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.rich-editor-modal-dropzone svg {
  color: var(--rte-primary, #2563eb);
}

.rich-editor-modal-dropzone-text {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  text-align: center;
}

.rich-editor-modal-dropzone-sub {
  font-size: 11px;
  color: #64748b;
  text-align: center;
}

/* ==========================================================================
   HTML5 네이티브 비디오(<video>) 오버레이 완전 제거 (재생 및 컨트롤 100% 보장)
   ========================================================================== */
.video-container > video + .video-overlay,
.video-container:has(video) .video-overlay,
video ~ .video-overlay {
  display: none !important;
  pointer-events: none !important;
}

/* ==========================================================================
   인스타그램 동영상 영역 전용 뷰포트 (Video-Only Viewport)
   - 상단 프로필/헤더(-54px) 및 하단 캡션/댓글/좋아요 영역을 정밀 클리핑
   - 릴스(Reels) 및 세로 동영상 비율(9:16)로 오직 비디오 영상만 깔끔하게 노출
   ========================================================================== */
.instagram-container,
/* (모던 규격으로 통합 이전됨) */

/* ==========================================================================
   동영상 및 미디어 컨테이너 경계선 일치화 (파란 외곽선 오차 0px 보장)
   ========================================================================== */
.video-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: block;
}

.video-container video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 75vh;
  border-radius: 6px;
  object-fit: contain;
  background: #000000;
}

.rich-editor-content .tiktok-container {
  margin: 12px auto !important;
}

/* ==========================================================================
   인스타그램, 틱톡, 동영상, 이미지, PDF 반응 영역(Hitbox & 선택 영역) 및 실시간 크기조절 최적화
   - 기본 상태에서는 100% 폭 확장을 차단하고 동영상 및 미디어 너비에만 반응영역 한정
   - 인라인 style="width:..." 지정 시에는 지정된 픽셀 너비로 드래그 크기 조절이 즉시 반응하도록 보장
   ========================================================================== */

/* 1. 기본 상태 (인라인 style="width"가 없을 때) 피규어의 반응영역 */
.rich-editor-content figure.rich-editor-instagram-figure:not([style*="width"]),
.rich-editor-content figure.rich-editor-tiktok-figure:not([style*="width"]),
.rich-editor-content figure:has(.instagram-container):not([style*="width"]),
.rich-editor-content figure:has(.tiktok-container):not([style*="width"]) {
  display: table !important;
  width: fit-content !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 유튜브 일반 동영상 기본 크기: 16:9 쾌적한 100% (최대 720px) 뷰 */
.rich-editor-content figure.rich-editor-youtube-figure:not([style*="width"]),
.rich-editor-content figure:has(.video-container:not(.video-shorts-container)):not([style*="width"]),
.rich-editor-content figure:has(video):not([style*="width"]) {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 18px auto !important;
  box-sizing: border-box !important;
}

/* 유튜브 쇼츠(Shorts) 전용 9:16 세로형 기본 360px 너비 */
.rich-editor-content figure.rich-editor-shorts-figure:not([style*="width"]),
.rich-editor-content figure:has(.video-shorts-container):not([style*="width"]) {
  display: block !important;
  width: 360px !important;
  max-width: 100% !important;
  margin: 18px auto !important;
  box-sizing: border-box !important;
}

.video-shorts-container {
  aspect-ratio: 9 / 16 !important;
  max-width: 360px !important;
}

/* 2. 인라인 style="width"가 부여되었을 때 (크기조절 드래그 및 툴바 선택 시) table 유지 - 단, 나란히(inline) 및 글감싸기(wrap) 정렬은 엄격 제외 */
.rich-editor-content figure.rich-editor-instagram-figure:not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure.rich-editor-tiktok-figure:not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure.rich-editor-video-figure:not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure.rich-editor-figure:not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure:has(.instagram-container):not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure:has(.tiktok-container):not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure:has(.video-container):not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure:has(video):not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure:has(img):not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"],
.rich-editor-content figure:has(.pdf-preview-card):not([data-align^="inline"]):not([data-align^="wrap"])[style*="width"] {
  display: table !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   미디어 블록(이미지, himage, vimage, 인스타그램, 릴스, 틱톡, 동영상, PDF)
   좌측 정렬 / 가운데 정렬 / 우측 정렬 전용 규칙 (100% 최우선 적용)
   ========================================================================== */

/* 1) 왼쪽 정렬 (left) */
.rich-editor-content figure[data-align="left"],
.rich-editor-content figure.rich-editor-figure[data-align="left"],
.rich-editor-content .rich-editor-figure[data-align="left"],
.rich-editor-content .rich-editor-vimage-figure[data-align="left"],
.rich-editor-content .rich-editor-himage-figure[data-align="left"] {
  display: table !important;
  float: none !important;
  clear: both !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

/* 2) 가운데 정렬 (center - 기본값) */
.rich-editor-content figure[data-align="center"],
.rich-editor-content figure.rich-editor-figure[data-align="center"],
.rich-editor-content .rich-editor-figure[data-align="center"],
.rich-editor-content .rich-editor-vimage-figure[data-align="center"],
.rich-editor-content .rich-editor-himage-figure[data-align="center"],
.rich-editor-content figure.rich-editor-figure:not([data-align]) {
  display: table !important;
  float: none !important;
  clear: both !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

/* 3) 오른쪽 정렬 (right) */
.rich-editor-content figure[data-align="right"],
.rich-editor-content figure.rich-editor-figure[data-align="right"],
.rich-editor-content .rich-editor-figure[data-align="right"],
.rich-editor-content .rich-editor-vimage-figure[data-align="right"],
.rich-editor-content .rich-editor-himage-figure[data-align="right"] {
  display: table !important;
  float: none !important;
  clear: both !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

/* figure에 rte-media-selected가 붙었을 때, figure 자체의 아웃라인은 끄고 시각 미디어 요소만 강조 */
.rich-editor-content figure.rich-editor-figure.rte-media-selected {
  outline: none !important;
}

/* 시각 미디어 요소가 선택되었을 때 동영상/이미지/PDF 영역에만 파란 외곽선 적용 */
.rich-editor-content .instagram-container.rte-media-selected,
.rich-editor-content .tiktok-container.rte-media-selected,
.rich-editor-content .video-container.rte-media-selected,
.rich-editor-content video.rte-media-selected,
.rich-editor-content img.rte-media-selected,
.rich-editor-content .pdf-preview-card.rte-media-selected {
  outline: 2px solid var(--rte-primary, #2563eb) !important;
  outline-offset: 2px !important;
  border-radius: 8px !important;
}

/* 인스타그램 기본 뷰포트 너비 */
.rich-editor-content .instagram-container {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

/* 틱톡 기본 뷰포트 너비 */
.rich-editor-content .tiktok-container {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}

/* 동영상 컨테이너 및 비디오 요소 */
.rich-editor-content .video-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.rich-editor-content .video-container video,
.rich-editor-content figure video {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* PDF 프리뷰 카드: 피규어 너비에 맞춰 부드럽게 채워짐 */
.rich-editor-content .pdf-preview-card {
  width: 100%;
  margin: 0 auto;
}

/* 리사이즈 드래그 중일 때 모든 미디어의 트랜지션 해제 및 크기 즉각 반응 보장 */
body.rte-resizing figure.rich-editor-figure,
body.rte-resizing .video-container,
body.rte-resizing .instagram-container,
body.rte-resizing .tiktok-container,
body.rte-resizing .pdf-preview-card,
body.rte-resizing video,
body.rte-resizing img {
  transition: none !important;
  max-width: none !important;
}

/* ==========================================================================
   도표 우측 하단 크기(너비) 조절 사각 핸들
   ========================================================================== */
.rich-editor-table-wrapper {
  position: relative !important;
}

.rte-table-corner-handle {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background-color: #ffffff;
  border: 2px solid var(--rte-primary, #2563eb);
  border-radius: 3px 0 6px 0;
  cursor: nwse-resize;
  z-index: 30;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  user-select: none;
  touch-action: none;
  display: block;
}

.rte-table-corner-handle:hover {
  background-color: var(--rte-primary, #2563eb);
  transform: scale(1.15);
}

.rich-editor-content:not([contenteditable="true"]) .rte-table-corner-handle {
  display: none !important;
}

/* 도표 툴바 드롭다운 초소형 너비 최적화 */
.rich-editor-table-toolbar .rich-editor-table-select-rowcol {
  width: 52px !important;
}

.rich-editor-table-toolbar .rich-editor-table-select-width {
  width: 44px !important;
}

/* ==========================================================================
   플로팅 알림 토스트 메시지 (키보드 삭제 방어 안내 등)
   ========================================================================== */
.rte-floating-toast {
  position: absolute;
  top: 55px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background-color: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
  padding: 8px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  white-space: nowrap;
}

.rte-floating-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.rte-floating-toast.is-hiding {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
}

.rte-floating-toast .rte-toast-icon {
  color: #38bdf8;
  flex-shrink: 0;
}

.rte-floating-toast .rte-toast-msg {
  letter-spacing: -0.2px;
}

/* ==========================================================================
   ★ [v3.3 회귀 방지 영구 가드] 이미지/동영상 나란히(2열) 정렬 최우선 보장 규칙
   (inline-left, inline-right, inline-center 전 미디어 객체 100% 2열 안착)
   ========================================================================== */

/* 1) 나란히 왼쪽 정렬 */
.rich-editor-content figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-video-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-youtube-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-shorts-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-vimage-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-himage-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-tiktok-figure[data-align="inline-left"],
.rich-editor-content figure.rich-editor-instagram-figure[data-align="inline-left"],
.rich-editor-content .rich-editor-code-figure[data-align="inline-left"] {
  display: inline-block !important;
  float: left !important;
  clear: none !important;
  vertical-align: top !important;
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  box-sizing: border-box !important;
  margin: 6px 10px 6px 0 !important;
}

/* 2) 나란히 오른쪽 정렬 */
.rich-editor-content figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-video-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-youtube-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-shorts-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-vimage-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-himage-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-tiktok-figure[data-align="inline-right"],
.rich-editor-content figure.rich-editor-instagram-figure[data-align="inline-right"],
.rich-editor-content .rich-editor-code-figure[data-align="inline-right"] {
  display: inline-block !important;
  float: right !important;
  clear: none !important;
  vertical-align: top !important;
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  box-sizing: border-box !important;
  margin: 6px 0 6px 10px !important;
}

/* 3) 나란히 가운데 정렬 (2열 대칭 중앙 인라인) */
.rich-editor-content figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-video-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-youtube-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-shorts-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-vimage-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-himage-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-tiktok-figure[data-align="inline-center"],
.rich-editor-content figure.rich-editor-instagram-figure[data-align="inline-center"],
.rich-editor-content .rich-editor-code-figure[data-align="inline-center"],
.rich-editor-content figure[data-align="inline"],
.rich-editor-content figure.rich-editor-figure[data-align="inline"] {
  display: inline-block !important;
  float: left !important;
  clear: none !important;
  vertical-align: top !important;
  width: calc(50% - 10px) !important;
  max-width: calc(50% - 10px) !important;
  box-sizing: border-box !important;
  margin: 6px 5px !important;
}

/* 4) 나란히 정렬된 모든 미디어의 내부 컨테이너 폭 자동 맞춤 */
.rich-editor-content figure[data-align^="inline"] .video-container,
.rich-editor-content figure[data-align^="inline"] .instagram-container,
.rich-editor-content figure[data-align^="inline"] .tiktok-container,
.rich-editor-content figure[data-align^="inline"] .vimage-container,
.rich-editor-content figure[data-align^="inline"] .himage-container,
.rich-editor-content figure[data-align^="inline"] .pdf-preview-card,
.rich-editor-content figure[data-align^="inline"] img,
.rich-editor-content figure[data-align^="inline"] video,
.rich-editor-content figure[data-align^="inline"] iframe {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* 5) 나란히 정렬된 미디어 사이의 빈 단락 무조건 은닉 */
.rich-editor-content figure[data-align^="inline"] + p:empty,
.rich-editor-content figure[data-align^="inline"] + p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================================
   텍스트 색상 및 바탕색(형광펜) 컬러 팔레트 팝오버 스타일
   ========================================================================== */
.rich-editor-color-popover {
  position: absolute;
  z-index: 150;
  width: 172px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
  animation: rteFadeIn 0.12s ease-out forwards;
}

.rte-color-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

.rte-color-popover-title {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

.rte-color-popover-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.1s ease;
}

.rte-color-popover-close:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

/* 색상 팔레트 그리드 (5열) */
.rte-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 8px;
}

.rte-color-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  outline: none;
  box-sizing: border-box;
}

.rte-color-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.rte-color-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

.rte-color-custom-btn,
.rte-color-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 6px;
  height: 22px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
}

.rte-color-custom-btn input[type="color"],
.rte-color-custom-btn .rte-hidden-color-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: none;
  pointer-events: auto !important;
}

.rte-color-custom-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.rte-color-reset-btn {
  color: #ef4444;
}

.rte-color-reset-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}


/* 팝오버 헤더 탭 스위처 */
.rte-color-tabs {
  display: inline-flex;
  background: #f1f5f9;
  border-radius: 5px;
  padding: 2px;
  gap: 2px;
}

.rte-color-tab {
  border: none;
  background: transparent;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  line-height: 1.2;
}

.rte-color-tab:hover {
  color: #0f172a;
}

.rte-color-tab.active {
  background: #ffffff;
  color: var(--rte-primary, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 활성화된 색상 스와치 인디케이터 */
.rte-color-swatch.active {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--rte-primary, #2563eb) !important;
  z-index: 3;
}

/* 인스타그램 피드/릴스 전환 버튼 */
/* (구형 토글 스타일 제거됨) */

.instagram-toggle-type-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}
.instagram-toggle-type-btn:active {
  transform: scale(0.96);
}

/* ==========================================================================
   인터넷 신문 추천 구글 웹폰트 14종 (한글 7종, 영문 5종, 영문 필기체 2종)
   ========================================================================== */
/* [한글 7종] */
.font-noto-sans, [data-font="Noto Sans KR"] { font-family: 'Noto Sans KR\, -apple-system, sans-serif !important; }
.font-noto-serif, [data-font="Noto Serif KR"] { font-family: 'Noto Serif KR\, serif !important; }
.font-nanum-gothic, [data-font="Nanum Gothic"] { font-family: 'Nanum Gothic\, sans-serif !important; }
.font-nanum-myeongjo, [data-font="Nanum Myeongjo"] { font-family: 'Nanum Myeongjo\, serif !important; }
.font-gowun-batang, [data-font="Gowun Batang"] { font-family: 'Gowun Batang\, serif !important; }
.font-gowun-dodum, [data-font="Gowun Dodum"] { font-family: 'Gowun Dodum\, sans-serif !important; }
.font-song-myung, [data-font="Song Myung"] { font-family: 'Song Myung\, serif !important; }

/* [영문 5종] */
.font-roboto, [data-font="Roboto"] { font-family: 'Roboto\, sans-serif !important; }
.font-merriweather, [data-font="Merriweather"] { font-family: 'Merriweather\, serif !important; }
.font-playfair, [data-font="Playfair Display"] { font-family: 'Playfair Display\, serif !important; }
.font-lora, [data-font="Lora"] { font-family: 'Lora\, serif !important; }
.font-montserrat, [data-font="Montserrat"] { font-family: 'Montserrat\, sans-serif !important; }

/* [영문 필기체 2종] */
.font-dancing-script, [data-font="Dancing Script"] { font-family: 'Dancing Script\, cursive !important; }
.font-great-vibes, [data-font="Great Vibes"] { font-family: 'Great Vibes\, cursive !important; }

/* font[face] 브라우저 호환성 매핑 */
font[face="Noto Sans KR"], font[face="Noto Sans"] { font-family: 'Noto Sans KR\, sans-serif; }
font[face="Noto Serif KR"], font[face="Noto Serif"] { font-family: 'Noto Serif KR\, serif; }
font[face="Nanum Gothic"] { font-family: 'Nanum Gothic\, sans-serif; }
font[face="Nanum Myeongjo"] { font-family: 'Nanum Myeongjo\, serif; }
font[face="Gowun Batang"] { font-family: 'Gowun Batang\, serif; }
font[face="Gowun Dodum"] { font-family: 'Gowun Dodum\, sans-serif; }
font[face="Song Myung"] { font-family: 'Song Myung\, serif; }
font[face="Roboto"] { font-family: 'Roboto\, sans-serif; }
font[face="Merriweather"] { font-family: 'Merriweather\, serif; }
font[face="Playfair Display"] { font-family: 'Playfair Display\, serif; }
font[face="Lora"] { font-family: 'Lora\, serif; }
font[face="Montserrat"] { font-family: 'Montserrat\, sans-serif; }
font[face="Dancing Script"] { font-family: 'Dancing Script\, cursive; }
font[face="Great Vibes"] { font-family: 'Great Vibes\, cursive; }