/* PDF 컨테이너 */
/* PDF를 감싸는 컨테이너 */
.ql-media-pdf {
  display: block;      /* 인라인 스타일이 적용되기 좋게 블록으로 변경 */
  margin: 10px auto;   /* 중앙 정렬 */
  overflow: hidden;    /* 자식 요소가 삐져나오지 않게 */
  resize: horizontal;  /* (선택사항) 브라우저 자체 조절 기능 활성화 */
}

/* [중요] 컨테이너 안의 embed 태그를 부모 크기에 강제로 맞춤 */
.ql-media-pdf embed.pdf-viewer {
  width: 100% !important;  /* 부모 div의 width를 무조건 따라감 */
  height: 600px  !important;           /* 높이는 고정하거나 원하시는 값으로 설정 */
  display: block;
}
.ql-media-pdf .pdf-link {
  /* 리사이즈 모듈이 '클릭된 요소'를 찾을 때 PDF 링크는 무시하도록 설정 */
  pointer-events: all; 
}

/* 리사이즈 핸들이 PDF 위에 나타나지 않도록 강제 숨김 (필요시) */
.ql-media-pdf ~ .handler-container { 
  display: none !important; 
}
.ql-media {
  display: inline-block; /* 내용물 크기에 맞게 조절 */
  position: relative;
  max-width: 100%;
}

/* 리사이즈 중인 요소 강조 */
.ql-media .resizing {
  outline: 2px dashed #06c;
}
/* 비디오 컨테이너 */
.ql-media-video {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 10px auto;
}

.ql-media-video iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* 쇼츠 컨테이너 */
.ql-media-shorts {
  width: 350px;
  aspect-ratio: 9 / 16;
  margin: 10px auto;
}

.ql-media-shorts iframe {
  width: 100%;
  height: 100%;
}

.ql-media-instagram {
  min-height: 500px; /* 로딩 전에도 포스트 크기만큼 자리를 잡음 */
  display: flex;
  justify-content: center;
}
.ql-container {
  position: relative !important; 
  height: 400px; /* 에디터 본문의 최소 높이 지정 */
  overflow-y: auto;
}
/* 소스 모드일 때 에디터 스타일링 */
#editor.html-source-mode .ql-editor {
    background-color: #1e1e1e; /* 어두운 배경 */
    color: #dcdcdc;           /* 밝은 글자 */
    font-family: 'Consolas', 'Monaco', monospace; /* 코드 폰트 */
    white-space: pre-wrap;    /* 줄바꿈 유지 */
}

/* 소스 모드일 때 툴바의 다른 버튼들을 비활성화(선택 사항) */
#editor.html-source-mode .ql-toolbar button:not(#btn-html-toggle) {
    pointer-events: none;
    opacity: 0.3;
}

/* HTML 버튼 활성화 상태 */
#btn-html-toggle.active {
    font-weight: bold;
    color: #06c;
}
 
/* Quill 에디터의 기준점을 명확히 잡아줍니다 */
.ql-container {
    position: relative !important;
}

/* 리사이즈 모듈이 생성하는 오버레이 요소가 에디터 내부를 기준으로 움직이게 합니다 */
.ql-image-resize-module {
    position: absolute;
    /* 만약 이 요소가 body에 붙는다면 js 설정을 변경해야 합니다 */
}

/* 1. 에디터 컨테이너가 가이드라인과 툴바의 '진짜 기준점'이 되도록 완전 고정 */
.ql-container {
    position: relative !important;
    height: 400px;
    overflow-y: auto;
}

/* 2. 가이드라인 오버레이 박스가 에디터 내부 좌측 상단으로 튀는 현상 방지 */
.ql-image-resize-module {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* 마우스 클릭이 본문을 방해하지 않도록 설정 */
}

/* 3. [핵심] 상단에 길게 고정되던 컨트롤 패널을 이미지 정중앙 위로 강제 이동 */
.ql-image-resize-module .ql-image-resize-toolbar {
    position: absolute !important;
    
    /* 에디터 맨 위 고정 스타일을 해제하고 이미지 기준으로 재정렬 */
    top: 0 !important; 
    left: 50% !important;
    transform: translate(-50%, -110%) !important; /* 이미지 중앙 가로 정렬 및 위로 배치 */
    
    /* UI 디자인 다듬기 */
    display: flex !important;
    flex-direction: row !important;
    width: auto !important; /* 가로로 가득 차던 설정을 컨텐츠 크기로 고정 */
    max-width: max-content !important;
    background-color: #ffffff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    padding: 2px !important;
    z-index: 10005 !important;
}

/* 4. 컨트롤 패널 내부에 들어있는 조절 버튼 스타일링 */
.ql-image-resize-module .ql-image-resize-toolbar opacity,
.ql-image-resize-module .ql-image-resize-toolbar button,
.ql-image-resize-module .ql-image-resize-toolbar span {
    pointer-events: all !important; /* 버튼들은 정상적으로 클릭 가능하게 설정 */
}
/* Quill 에디터의 폰트 사이즈 스타일 정의 */
.ql-editor .ql-size-small { font-size: 0.75em; }
.ql-editor .ql-size-large { font-size: 1.5em; }
.ql-editor .ql-size-huge { font-size: 2.5em; }
.ql-editor .ql-size-normal { font-size: 1em; }

/* 본문 출력 영역(contentsList)에서도 적용되도록 설정 */