blockquo/* NOTE: 기본형 */
.editor-container blockquote[data-variant="default"] {
  position: relative;
  background: #f9fafb;
  border-radius: 12px;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  color: #333;
  padding: 16px;
}

/* NOTE: 빈 paragraph 태그 최소 높이 설정 */
.editor-prose .ProseMirror p {
  min-height: 1.2em;
  margin: 0.5em 0;
}

/* NOTE: 빈 paragraph에서도 커서가 보이도록 */
.editor-prose .ProseMirror p:empty::before {
  content: "";
  display: inline-block;
  height: 1em;
  width: 0;
}
kquote ol,
blockquote .task-list {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
  display: inline-block;
}
/* NOTE: 기본형 */
.editor-container blockquote[data-variant="default"] {
  position: relative;
  background: #ffffff;
  border-left: none !important;
  text-align: center;
  font-size: 18px;
  font-style: italic;
  color: #333;
  padding: 16px;
  word-break: break-all;
  overflow-wrap: break-word;
}
.editor-container blockquote[data-variant="default"]::before {
  content: url("/static/img/up-double-quote-icon.svg");
  display: block;
  font-size: 24px;
  color: #bbb;
  line-height: 1;
  margin-top: 8px;
  word-break: break-all;
  overflow-wrap: break-word;
}
.editor-container blockquote[data-variant="default"]::after {
  content: url("/static/img/up-double-quote-icon.svg");
  transform: rotate(180deg);
  display: block;
  font-size: 24px;
  color: #bbb;
  line-height: 1;
  margin-bottom: 8px;
  word-break: break-all;
  overflow-wrap: break-word;
}
.editor-container blockquote[data-variant="default"] > p {
  text-align: center !important;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* NOTE: 라인형 */
.editor-container blockquote[data-variant="line"] {
  background: none;
  border-left: 4px solid #03ae20;
  border-radius: 0;
  padding-left: 8px;
  margin: 8px 0;
  text-align: left;
  font-style: normal;
  color: #111;
  word-break: break-all;
  overflow-wrap: break-word;
}
.editor-container blockquote[data-variant="line"]::before,
.editor-container blockquote[data-variant="line"]::after {
  content: none;
}

/* NOTE: TipTap EditorContent 포커스 시 남색 테두리 제거 */
.ProseMirror:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* NOTE: 라인브레이킹 자연스럽게 되도록. */
.editor-prose .ProseMirror {
  white-space: pre-wrap;
  word-break: break-word;
}

/* NOTE: CuriousEditor.css 또는 editor-prose 안에 추가 */
.editor-prose ol {
  list-style-type: decimal; /* 숫자 리스트 */
  padding-left: 1.5em; /* 들여쓰기 */
  margin: 0 0 1em 0; /* 간격 조절 */
}

.editor-prose ul {
  list-style-type: disc; /* 글머리 기호 리스트 */
  padding-left: 1.5em;
  margin: 0 0 1em 0;
}

.editor-prose li {
  margin: 0.25em 0; /* 항목 간격 */
}

/* NOTE: Divider */
.editor-prose hr {
  border: none; /* 기존 테두리 제거 */
  border-top: 1px solid #e5e5e5;
  margin: 16px 0; /* 위아래 간격 조절 */
}

/* NOTE: 링크 기본 색상 */
.editor-prose a {
  color: #03ae20; /* 기본 초록색 */
  text-decoration: none; /* 밑줄 제거 */
  transition: color 0.2s, border-bottom 0.2s;
}

/* NOTE: 링크 호버 시 */
.editor-prose a:hover {
  color: #028a17; /* 조금 더 진한 초록 */
  border-bottom: 1px solid #028a17; /* 밑줄 표시 */
}

/* NOTE: 이미지 리사이즈 관련 커스터마이징 */
.editor-container {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* 이미지 기본 반응형 처리 */
.ProseMirror img,
.ProseMirror .resizable-image img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

.ProseMirror .resizable-image {
  display: inline-block;
  position: relative;
  max-width: 100% !important;
}

/* 전역 이미지 반응형 - preview-details 대표이미지는 제외 */
/* img:not([alt="대표이미지"]) {
  width: 26rem !important;
  height: 26rem !important;
} */

/* preview-details 대표이미지는 원래 크기 유지 */
img[alt="대표이미지"] {
  max-width: none !important;
  width: 100% !important;
  height: 26rem !important;
  object-fit: contain !important;
}

.ProseMirror .resizable-image .resize-handle {
  position: absolute;
  background: #03ae20;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  z-index: 10;
  cursor: nw-resize;
}

.ProseMirror .resizable-image .resize-handle.top-left {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
}

.ProseMirror .resizable-image .resize-handle.top-right {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
}

.ProseMirror .resizable-image .resize-handle.bottom-left {
  bottom: -6px;
  left: -6px;
  cursor: sw-resize;
}

.ProseMirror .resizable-image .resize-handle.bottom-right {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
}

.ProseMirror .resizable-image:hover .resize-handle,
.ProseMirror .resizable-image.selected .resize-handle {
  opacity: 1;
  visibility: visible;
}

.image-component {
  --box-color: #03ae20 !important;
}
.image-component .image-resizer {
  border-radius: 0;
}

/* Youtube 동영상 크기 제한 및 스타일링 */
.node-youtube,
.ProseMirror [data-type="youtube"] {
  display: block;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* YouTube iframe과 컨테이너 크기 제한 */
.ProseMirror .resizable-youtube-iframe,
.ProseMirror [data-type="youtube"] iframe {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* YouTube 컴포넌트 전체 크기 제한 */
.ProseMirror [data-type="youtube"] > div {
  max-width: 100% !important;
  overflow: hidden;
}

/* Placeholder 스타일 */
.is-editor-empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
}

ul[data-type="taskList"] {
  list-style-type: none;
  padding-left: 0;
}

ul[data-type="taskList"] li {
  display: flex;
  align-items: center;
}

ul[data-type="taskList"] li > label {
  margin-right: 8px;
}

/* NOTE: Preview 페이지용 스타일 */
.editor-prose p {
  margin: 0.75em 0;
  line-height: 1.6;
}

.editor-prose p:empty {
  margin: 0.5em 0;
  min-height: 1.2em;
}

.editor-prose h1,
.editor-prose h2,
.editor-prose h3,
.editor-prose h4,
.editor-prose h5,
.editor-prose h6 {
  margin: 1em 0 0.5em 0;
  line-height: 1.4;
}

.editor-prose br {
  display: block;
  margin: 0.5em 0;
  content: "";
}

/* NOTE: 모든 텍스트 요소에 줄바꿈 처리 */
.editor-prose * {
  white-space: pre-wrap;
}

/* 유튜브 동영상 및 쇼츠 iframe 너비 제한 및 중앙 정렬 */
.editor-container iframe[src*="youtube.com"] {
  /* width: 100% !important; */
  max-width: 600px !important;
  height: auto !important;
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
}

/* Shorts 전용: youtube.com/embed/shorts/ 또는 youtube.com/shorts/ 경로도 포함 */
.editor-container iframe[src*="youtube.com/embed/shorts"],
.editor-container iframe[src*="youtube.com/shorts"] {
  /* width: 100% !important; */
  max-width: 600px !important;
  height: 100% !important;
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
}

#study-intro-content img {
  /* width: auto !important; */
  max-width: 100% !important;
  height: auto !important;
  display: inline-block;
  margin: 0;
  box-sizing: border-box;
}

#study-intro-content {
  max-width: 600px;
  margin: 0 auto;
}

/* CHECKLIST: 에디터에 보여지는 유튜브비디오 정렬에 대한 css. 글로벌하게 보여줄 가능성이 있기때문에 우선 여기서 세팅. */
[data-youtube-video] iframe[style*="text-align: center"] {
  display: block;
  margin: 0 auto;
}
[data-youtube-video] iframe[style*="text-align: right"] {
  display: block;
  margin-left: auto;
  margin-right: 0;
}
[data-youtube-video] iframe[style*="text-align: left"] {
  display: block;
  margin-left: 0;
  margin-right: auto;
}