.ql-clean {
    position: relative;
    width: 28px !important;
    height: 24px !important;
    cursor: pointer;
    border: none;
    background: transparent;
}
.ql-clean::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #ff6b6b 25%, #4ecdc4 25%, #4ecdc4 50%, #ffe66d 50%, #ffe66d 75%, #95e1d3 75%);
    border-radius: 2px;
}
.ql-clean::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 2px;
    height: 18px;
    background: #e74c3c;
}
.ql-clean:hover {
    background-color: #f0f0f0;
    border-radius: 3px;
}
.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}
.quill-editor-wrap .ql-editor {
    min-height: 100px;
}

/* 목록 스타일 */ 
.ql-editor ol {
    padding-left: 0;
    margin: 8px 0;
}
.ql-editor li {
    padding-left: 20px;
    margin-bottom: 8px;
}
.ql-editor li > .ql-ui:before {
    width: 16px;
    margin-left: -20px;
    margin-right: 0;
    text-align: left;
    padding-left: 5px;
}

.ql-container {
    font-family: 'Pretendard Variable';
}



/* 툴바 버튼 */
.ql-infoBox::after {
    content: '▣';
    font-size: 14px;
    color: #999;
}
.ql-toolbar .ql-infoBox { width: auto; padding: 0 5px; }

/* ── info-box: 직접 자식 블록 (p, h1~h6 등) ── */
.ql-editor > .ql-info-box-true {
    background: #F3F3F3;
    /* color: #555; */
    /* font-size: 14px; */
    padding: 0 16px;
    margin: 0;
    border-radius: 0;
}
.ql-editor > .ql-info-box-true:not(.ql-info-box-true + .ql-info-box-true) {
    margin-top: 8px;
    padding-top: 14px;
    border-radius: 10px 10px 0 0;
}
.ql-editor > .ql-info-box-true:not(:has(+ .ql-info-box-true)) {
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-radius: 0 0 10px 10px;
}
.ql-editor > .ql-info-box-true:not(.ql-info-box-true + .ql-info-box-true):not(:has(+ .ql-info-box-true)) {
    border-radius: 10px;
}

/* ── info-box: 리스트 내부 (li) ── */
.ql-editor > ol > .ql-info-box-true,
.ql-editor > ul > .ql-info-box-true {
    background: #F3F3F3;
    color: #222;
    font-size: 14px;
    padding-left: 36px;
    margin-bottom: 0;
    padding: 4px 0 4px 36px;
}
/* 리스트 자체를 박스로 감싸기 (li가 하나라도 info-box면) */
.ql-editor > ol:has(> .ql-info-box-true),
.ql-editor > ul:has(> .ql-info-box-true) {
    background: #F3F3F3;
    border-radius: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    margin: 8px 0;
}

/* ── 블록과 리스트가 연속될 때 하나로 연결 ── */
.ql-editor > .ql-info-box-true + ol:has(> .ql-info-box-true),
.ql-editor > .ql-info-box-true + ul:has(> .ql-info-box-true) {
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    padding-top: 0;
}
.ql-editor > .ql-info-box-true:has(+ ol > .ql-info-box-true),
.ql-editor > .ql-info-box-true:has(+ ul > .ql-info-box-true) {
    margin-bottom: 0;
    padding-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.ql-editor > .ql-info-box-true:not(.ql-info-box-true + .ql-info-box-true):has(+ ol > .ql-info-box-true),
.ql-editor > .ql-info-box-true:not(.ql-info-box-true + .ql-info-box-true):has(+ ul > .ql-info-box-true) {
    border-radius: 10px 10px 0 0;
}