/* 드래그 도중 사이에 들어갈 때 나타나는 파란색 선 */
.insert-before {
    border-top: 3px solid #4a90e2 !important;
}
.insert-after {
    border-bottom: 3px solid #4a90e2 !important;
}

/* 드래그 도중 대상 '안(위)'에 놓일 때 나타나는 배경 하이라이트 */
.insert-inside {
    background-color: #e8f0fe !important;
    border: 2px dashed #4a90e2 !important;
}

/* 원본(드래그 중인 껍데기) 숨기기 (선택 사항) */
.sortable-ghost {
    opacity: 0.2;
}

/* 1. 휴지통 영역 안으로 들어온 미리보기(Ghost) 요소 완벽하게 숨기기 */
.delete .sortable-ghost,
.delete .sortable-drag,
.delete .sortable-chosen {
    display: none !important;
}

/* 2. (선택사항) 아이템이 위로 올라왔을 때 휴지통 버튼 색상 살짝 붉게 강조하기 */
.delete:has(.sortable-ghost) {
    background-color: #ffe6e6 !important;
    border: 2px dashed #ff4d4f !important;
    transform: scale(1.02); /* 살짝 커지는 애니메이션 */
    transition: all 0.2s;
}

/* Survey Editor Rich Text Support */
.sb-editor-content {
    width: 100%;
    min-height: 24px;
    padding: 4px 0;
    outline: none;
    font-size: inherit;
    color: inherit;
    cursor: text;
    white-space: pre-wrap;
    word-break: break-all;
    position: relative;
}

/* [핵심] 모든 자식 요소는 부모의 크기와 색상을 상속받음 (단, font 태그는 자신의 size 속성을 우선함) */
.sb-editor-content *:not(font) {
    font-size: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

/* 폰트 태그는 색상 등을 부모로부터 강제 상속받아야 함 */
.sb-editor-content font {
    color: inherit !important;
}

/* 폰트 사이즈(size 속성) 대응 - 에디터 영역 */
.sb-editor-content font[size="1"] { font-size: 10px !important; }
.sb-editor-content font[size="2"] { font-size: 13px !important; }
.sb-editor-content font[size="3"] { font-size: 16px !important; }
.sb-editor-content font[size="4"] { font-size: 18px !important; }
.sb-editor-content font[size="5"] { font-size: 24px !important; }
.sb-editor-content font[size="6"] { font-size: 32px !important; }
.sb-editor-content font[size="7"] { font-size: 48px !important; }

/* 서식 태그들의 고유 스타일은 유지 (!important로 우선순위 확보) */
/* 에디터 및 조회 화면 공통: b, strong 태그 내부의 모든 요소를 굵게 강제 (base.css * 스타일 무력화) */
.sb-editor-content b,
.sb-editor-content b *,
.sb-editor-content strong,
.sb-editor-content strong *,
.survey-view-box b,
.survey-view-box b *,
.survey-view-box strong,
.survey-view-box strong * {
    font-weight: 700 !important;
}

.sb-editor-content i, .sb-editor-content em { font-style: italic !important; }
.sb-editor-content u { text-decoration: underline !important; }

/* 에디터 및 조회 화면 링크 스타일 */
.sb-editor-content a,
.survey-view-box a {
    text-decoration: underline !important;
    color: #405FF4 !important; /* 링크 강조를 위한 파란색 계열 */
    cursor: pointer;
}

/* 에디터 내 리스트 스타일 복구 (기호가 보이도록 outside 설정 및 여백 조정) */
.sb-editor-content ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    padding-left: 25px !important;
    margin: 8px 0px !important;
}

.sb-editor-content ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    padding-left: 5px !important;
    margin: 8px 10px !important;
}

.sb-editor-content li {
    display: list-item !important;
    margin-bottom: 4px !important;
    list-style: inherit !important; /* 부모의 list-style-type 상속 보장 */
    line-height: 1.7 !important;
    vertical-align: middle !important;
}

/* 리스트 내의 텍스트가 기호와 너무 붙지 않도록 조정 */
.sb-editor-content li::marker {
    color: inherit;
    font-size: inherit;
}

/* 제목용 큰 폰트 스타일 유지 */
.sb-header-title.sb-editor-content {
    font-size: 32px;
    font-weight: normal; /* 기본은 400 */
}

.sb-section-title.sb-editor-content {
    font-size: 24px;
    font-weight: normal;
}

.sb-q-title.sb-editor-content {
    font-size: 16px;
    font-weight: normal;
}

/* 툴바 활성화 시 스타일 */
.sb-header-field:focus-within .sb-editor-toolbar {
    display: flex;
}

.sb-editor-toolbar {
    display: none;
    position: absolute;
    bottom: -35px;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 100;
    gap: 2px;
    height: 40px;
}

.sb-editor-btn.active {
    background-color: #e8f0fe !important;
    border-color: #4a90e2 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !important;
}

.sb-editor-btn:hover {
    background-color: #f5f5f5;
}

/* 폰트 사이즈 선택기 스타일 */
.sb-editor-select-wrap {
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.sb-editor-font-size {
    height: 24px;
    font-size: 13px;
    padding: 0 4px;
    border: 1px solid #D1D5DC;
    border-radius: 4px;
    background: #fff;
    outline: none;
    cursor: pointer;
}

.sb-editor-font-size:hover {
    border-color: #405FF4;
}

/* surveyViewer 리스트 및 서식 스타일 복구 */
.survey-view-box ul {
    list-style-type: disc !important;
    list-style-position: inside !important;
    padding-left: 10px !important;
    margin: 8px 0 !important;
}

.survey-view-box ol {
    list-style-type: decimal !important;
    list-style-position: inside !important;
    padding-left: 10px !important;
    margin: 8px 0 !important;
}

.survey-view-box li {
    display: list-item !important;
    margin-bottom: 4px !important;
    list-style: inherit !important;
}

.survey-view-box i,
.survey-view-box em {
    font-style: italic !important;
}

.survey-view-box u {
    text-decoration: underline !important;
}

/* surveyViewer 폰트 스타일 상속 및 초기화 */
.survey-view-box * {
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
}

/* 아이콘 버튼 텍스트 숨김 복구 (inherit !important 대응) */
.survey-view-box .delete,
.survey-view-box .search,
.survey-view-box .pw-toggle,
.survey-view-box .cell-delete {
    font-size: 0 !important;
}

.survey-view-box .view-inner .inner-content *,
.survey-view-box .view-items-area .view-items-area *{
    color: inherit !important;
}

.survey-view-box .view-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--color-active);
    color: #fff;
    border-radius: 10px;
    padding: 10px 24px;
    font-size: 18px !important;
    font-weight: 600;
}

/* 폰트 사이즈(size 속성) 대응 - inherit !important를 덮어쓰기 위해 더 구체적인 셀렉터 사용 */
.survey-view-box font[size="1"] { font-size: 10px !important; }
.survey-view-box font[size="2"] { font-size: 13px !important; }
.survey-view-box font[size="3"] { font-size: 16px !important; }
.survey-view-box font[size="4"] { font-size: 18px !important; }
.survey-view-box font[size="5"] { font-size: 24px !important; }
.survey-view-box font[size="6"] { font-size: 32px !important; }
.survey-view-box font[size="7"] { font-size: 48px !important; }

/* 제목 및 강조 요소들에 대한 예외 처리 (부모가 지정한 크기가 없을 경우 대비) */
.survey-view-box h4 {
    font-size: 1.125em !important; /* 부모 크기 대비 약간 크게 */
    font-weight: 600 !important;
}

.survey-view-box h3 {
    font-size: 20px !important; /* 부모 크기 대비 약간 크게 */
    font-weight: 600 !important;
}

.input-box:has(input[readonly]) {
    background-color: #f8f9fa; /* 아주 연한 회색 */
    border-color: #e9ecef;     /* 테두리도 살짝 연하게 해주면 예쁩니다 (선택사항) */
}

/* Milestone Layouts */
.body-info ul.milestone-list-3 li { width: calc(33.33% - 15px) !important; }
.body-info ul.milestone-list-4 li { width: calc(50% - 15px) !important; }
.body-info ul.milestone-list-5 li:nth-child(-n+2) { width: calc(50% - 15px) !important; }
.body-info ul.milestone-list-5 li:nth-child(n+3) { width: calc(33.33% - 15px) !important; }
.body-info ul.milestone-list-6 li { width: calc(33.33% - 15px) !important; }

.flex9 {
    flex: 9;
}