.ql-editor { /*여러개의 editor라도 모두 적용되게 id 를 붙이지 않았다.*/
    /*detail page와 동일하게 맞춤 (글씨 크기, 줄간격, 단락 간격(margin-top, margin-bottom))*/
    font-size: 16px;
    line-height: 1.75;
    padding-bottom: 20px !important;
}


/* Quill 편집기 안의 코드 블록 */
.ql-editor .ql-code-block-container {
    background-color: #1e272e !important;}

#editor-container {
    position: relative;
}

#editor-container {
    height: auto;
    min-height: 300px;
    /*overflow: auto; !*이것이 있으면 position: sticky가 먹지 않는다. 스크롤 상단고정하려면 없애라*!*/
}

/*#drop-area {*/ /*왜 있었는지 모르겠다.*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    border: 2px dashed #aaa;*/
/*    display: none;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    background: rgba(255, 255, 255, 0.8);*/
/*    font-size: 18px;*/
/*    color: #555;*/
/*    z-index: 10;*/
/*}*/

/*///////// buton customizing start ////////*/
/*아이콘 간격 조정*/
.ql-toolbar.ql-snow > span.group-block > button.ql-blockquote,
.ql-toolbar.ql-snow > span.group-insert > button.ql-link,
.ql-toolbar.ql-snow > span.group-insert > button.ql-image,
.ql-toolbar.ql-snow > span.group-header > button:nth-child(1),
.ql-toolbar.ql-snow > span.group-header > button:nth-child(2),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(1),
.ql-toolbar.ql-snow > span.group-list-indent > button.ql-list.ql-active,
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(2),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(3),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(4),
.ql-toolbar.ql-snow > span.group-script > button.ql-list.ql-active,
.ql-toolbar.ql-snow > span.group-script > button:nth-child(1),
.ql-toolbar.ql-snow > span.group-extra > button.ql-list.ql-active,
.ql-toolbar.ql-snow > span.group-extra > button:nth-child(1) {
    margin-right: 3px
}

.ql-toolbar.ql-snow > span.group-block > button.ql-code-block,
.ql-toolbar.ql-snow > span.group-insert > button.ql-image,
.ql-toolbar.ql-snow > span.group-insert > button.ql-video,
.ql-toolbar.ql-snow > span.group-header > button:nth-child(3),
.ql-toolbar.ql-snow > span.group-header > button:nth-child(2),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(2),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(3),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(4),
.ql-toolbar.ql-snow > span.group-list-indent > button:nth-child(5),
.ql-toolbar.ql-snow > span.group-script > button:nth-child(2),
.ql-toolbar.ql-snow > span.group-extra > button:nth-child(2) {
    margin-left: 3px
}

.ql-toolbar.ql-snow button.ql-strike {
    margin-bottom: 5px
}

.ql-toolbar.ql-snow button {
    width: 30px !important;
    height: 30px !important;
}

#ql-picker-options-2 > span.ql-picker-item {
    width: 35px !important;
    height: 35px !important;
}

.ql-toolbar.ql-snow .ql-picker {
    height: 35px !important;
    width: 37px !important;
}

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    margin-top: -1px;
}

.ql-toolbar.ql-snow .ql-stroke {
    stroke-width: 1.3
}

.ql-toolbar.ql-snow > span.group-block > button.ql-blockquote > svg > rect:nth-child(1),
.ql-toolbar.ql-snow > span.group-block > button.ql-blockquote > svg > rect:nth-child(2) {
    fill: none
}

.ql-toolbar.ql-snow > span.group-text > button.ql-strike > svg > path:nth-child(2),
.ql-toolbar.ql-snow > span.group-text > button.ql-strike > svg > path:nth-child(3),
.ql-toolbar.ql-snow > span.group-header > button:nth-child(1) > svg,
.ql-toolbar.ql-snow > span.group-header > button:nth-child(2) > svg,
.ql-toolbar.ql-snow > span.group-header > button:nth-child(3) > svg,
.ql-toolbar.ql-snow > span.group-script > button:nth-child(1) > svg > path:nth-child(2),
.ql-toolbar.ql-snow > span.group-script > button:nth-child(2) > svg > path:nth-child(2),
.ql-toolbar.ql-snow > span.group-script > button.ql-formula > svg {
    stroke: white;
    stroke-width: 0.7
}

/*반응형 dropdown 에서 아이콘 굵기 조정*/
.ql-toolbar.ql-snow > div > div.dropdown-menu > span.ql-formats.group-header > button:nth-child(1) > svg,
.ql-toolbar.ql-snow > div > div.dropdown-menu > span.ql-formats.group-header > button:nth-child(2) > svg,
.ql-toolbar.ql-snow > div > div.dropdown-menu > span.ql-formats.group-header > button:nth-child(3) > svg {
    stroke: white;
    stroke-width: 0.55
}

.ql-toolbar.ql-snow > div > div.dropdown-menu > span.ql-formats.group-script > button:nth-child(1) > svg > path:nth-child(2),
.ql-toolbar.ql-snow > div > div.dropdown-menu > span.ql-formats.group-script > button:nth-child(2) > svg > path:nth-child(2),
.ql-toolbar.ql-snow > div > div.dropdown-menu > span.ql-formats.group-script > button.ql-formula > svg {
    stroke: white;
    stroke-width: 0.55
}

/*
#editor-container > div.ql-toolbar.ql-snow > div > div.dropdown-toggle.display {display: none;}*/
.ql-toolbar.ql-snow > div > div.dropdown-toggle > svg {
    width: 16px;
    height: 16px;
    /*
    margin: auto; fill: currentColor;#}{#display: block;#}{#text-align: center;#}{#float: none;*/
}


/* 드롭다운 버튼 시작 */
.ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.ql-toolbar.ql-snow .ql-formats {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dropdown-wrapper {
    position: relative;
    margin-left: auto;
}

.dropdown-toggle {
    cursor: pointer;
    padding: 4px 8px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    border-radius: 4px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px;
    z-index: 1000;
    min-width: 190px;
}

.dropdown-menu .ql-formats {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.dropdown-menu .ql-formats:last-child {
    margin-bottom: 0;
}

.dropdown-wrapper.open .dropdown-menu {
    display: flex;
}
.dropdown-menu button.ql-blockquote > svg > rect:nth-child(1),
.dropdown-menu button.ql-blockquote > svg > rect:nth-child(2) {
    fill: none
}

/* 화면 resize시에 한칸 밑으로 임시 줄바꿈(두 번째 줄 생성) 자체를 막기
툴바 컨테이너(클래스명은 실제 것에 맞게 변경) */
.toolbar {
  display: flex;
  flex-wrap: nowrap;     /* 줄바꿈 금지 */
  white-space: nowrap;   /* 텍스트 줄바꿈 방지 */
  overflow: hidden;      /* 넘치는 항목은 숨김 */
  align-items: center;
}

/* 아이템 영역은 줄어들 수 있게 */
.toolbar__items {
  min-width: 0;          /* flex 컨텍스트에서 컨텐츠 축소 허용 */
}

/* 토글 아이콘 영역은 여유 공간과 무관하게 자리 확보 */
.toolbar__toggle {
  flex: 0 0 auto;        /* 고정 폭/자동 폭 */
}


/* end */


#editor-container > div.ql-toolbar.ql-snow {
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-radius: 7px 7px 0 0;
    position: sticky;
    top: -2px;
    z-index: 1;
    background-color: white;
}

.ql-tooltip.ql-editing { /*링크 등 입력 창*/
    left: 10px !important;
}

.ql-toolbar.ql-snow button {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    float: left;
    padding: 3px 3px;
    width: 28px;
    height: 28px;
}

/*#editor-container > div.ql-toolbar.ql-snow.ql-toolbar button svg,*/
/*.ql-snow .ql-toolbar button svg {*/
/*    width: 100%;*/
/*    float: left;*/
/*    height: 100%;*/
/*}*/



/*///////// buton customizing end ////////*/

/* Quill Editor 안의 img 보정 */
.ql-editor img.selected {
    outline: 2px solid mediumspringgreen;
}

/* ////////큰 이미지로 인한 급격한 점프 완화: JS는 AI Chat 방법 안된다. /////////////*/
.ql-editor img {
    max-width: 100%;
    height: auto;
    /* max-height: 60vh;  /* 필요 시 제한 */
    display: block;
    scroll-margin-top: 70px; /* 상단 툴바가 고정이면 그 높이만큼 여백 */
    margin-top: 25px;
    margin-bottom: 25px; /* 이미지 간의 간격, detail 페이지에서 간격이 존재한다. */
}

/* Quill Editor 안의 동영상(iframe/video)을 반응형 16:9로 */
.ql-editor .ql-video,
.ql-editor video.ql-video {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000; /* 로딩 전 블랙 레터박스 */
}

/* aspect-ratio를 지원하지 않는 브라우저 대비 래퍼 방식 (선택) */
.ql-editor .video-16x9 {
    position: relative;
    width: 100%;
}

.ql-editor .video-16x9::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
}

.ql-editor .video-16x9 > .ql-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
}

iframe.ql-video {
    margin: 25px 0;
}




/*사용 유무 모르겠슴*/
.ql-editor img.selected {
    outline: 2px solid #007bff; /* 선택 표시 */
}

img[data-float="left"] {
    float: left;
    margin: 0 8px 8px 0;
}

img[data-float="right"] {
    float: right;
    margin: 0 0 8px 8px;
}

img[data-float="none"] {
    float: none;
    display: inline-block;
    margin: 0 4px;
}