/*
 * 설계 원칙: ActionText 링크 다이얼로그 표시 문제 해결
 * - CSS 변수 의존성 제거하고 실제 Tailwind CSS 값 사용
 * - z-index 계층 구조 명확화
 * - 반응형 디자인 고려
 * 
 * 기술적 고려사항:
 * - Tailwind CSS와의 호환성 최대화
 * - 브라우저 간 일관성 보장
 * - 성능 최적화된 스타일링
 * 
 * 사용 고려사항:
 * - 기존 스타일과의 충돌 방지
 * - 접근성 기준 준수
 * - 모바일 환경 대응
 */

/* === Trix Editor와 Content 스타일 개선 === */

/* 메인 에디터 컨테이너 */
trix-editor {
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #d1d5db; /* gray-300 */
    padding: 0.75rem; /* p-3 */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #111827; /* gray-900 */
    background-color: #ffffff; /* white */
    min-height: 10rem;
    outline: none;
    overflow-y: auto;
    line-height: 1.5;
    width: 100%;
    transition-property: border-color, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

trix-editor:focus {
    border-color: #6366f1; /* indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1); /* indigo-100 */
}

/* 툴바 스타일링 */
trix-toolbar {
    background-color: #f9fafb; /* gray-50 */
    border: 1px solid #d1d5db; /* gray-300 */
    border-bottom: none;
    border-top-left-radius: 0.375rem; /* rounded-t-md */
    border-top-right-radius: 0.375rem;
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* gap-2 */
    position: relative; /* 다이얼로그 포지셔닝을 위한 기준점 */
}

/* 툴바 버튼 그룹 */
trix-toolbar .trix-button-row {
    display: flex;
    gap: 0.25rem;
}

trix-toolbar .trix-button-group {
    display: flex;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden;
}

/* 툴바 버튼 스타일 */
trix-toolbar .trix-button {
    background-color: #ffffff; /* white */
    border: none;
    border-right: 1px solid #e5e7eb; /* gray-200 */
    color: #374151; /* gray-700 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    font-size: 0.875rem; /* text-sm */
    cursor: pointer;
    transition-property: background-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
}

trix-toolbar .trix-button:last-child {
    border-right: none;
}

trix-toolbar .trix-button:hover {
    background-color: #f3f4f6; /* gray-100 */
    color: #111827; /* gray-900 */
}

trix-toolbar .trix-button.trix-active {
    background-color: #e0e7ff; /* indigo-100 */
    color: #3730a3; /* indigo-700 */
}

/* 아이콘 버튼 스타일 */
trix-toolbar .trix-button--icon {
    width: 2rem;
    height: 2rem;
    position: relative;
    text-indent: -9999px;
}

trix-toolbar .trix-button--icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.7;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

trix-toolbar .trix-button--icon:hover::before,
trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1;
}

/* 링크 버튼 아이콘 */
.trix-button--icon-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
}

/* 기타 버튼 아이콘들 */
.trix-button--icon-bold::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z'%3E%3C/path%3E%3Cpath d='M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z'%3E%3C/path%3E%3C/svg%3E");
}

.trix-button--icon-italic::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='4' x2='10' y2='4'%3E%3C/line%3E%3Cline x1='14' y1='20' x2='5' y2='20'%3E%3C/line%3E%3Cline x1='15' y1='4' x2='9' y2='20'%3E%3C/line%3E%3C/svg%3E");
}

.trix-button--icon-quote::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z'%3E%3C/path%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z'%3E%3C/path%3E%3C/svg%3E");
}

.trix-button--icon-code::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'%3E%3C/polyline%3E%3Cpolyline points='8 6 2 12 8 18'%3E%3C/polyline%3E%3C/svg%3E");
}

.trix-button--icon-strike::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4H9a3 3 0 0 0-2.83 4'%3E%3C/path%3E%3Cpath d='M14 12a4 4 0 0 1 0 8H6'%3E%3C/path%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.trix-button--icon-heading-1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h8'%3E%3C/path%3E%3Cpath d='M4 18V6'%3E%3C/path%3E%3Cpath d='M12 18V6'%3E%3C/path%3E%3Cpath d='M17 10v8'%3E%3C/path%3E%3Cpath d='M15 10h4'%3E%3C/path%3E%3C/svg%3E");
}

.trix-button--icon-decrease-nesting-level::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3Cline x1='21' y1='6' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

.trix-button--icon-increase-nesting-level::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3Cline x1='21' y1='6' x2='21' y2='18'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='3' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

.trix-button--icon-undo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v6h6'%3E%3C/path%3E%3Cpath d='M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13'%3E%3C/path%3E%3C/svg%3E");
}

.trix-button--icon-redo::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7v6h-6'%3E%3C/path%3E%3Cpath d='M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7'%3E%3C/path%3E%3C/svg%3E");
}

.trix-button--icon-attach::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'%3E%3C/path%3E%3C/svg%3E");
}

.trix-button--icon-bullet-list::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Ccircle cx='4' cy='6' r='1.5' fill='%23374151'%3E%3C/circle%3E%3Ccircle cx='4' cy='12' r='1.5' fill='%23374151'%3E%3C/circle%3E%3Ccircle cx='4' cy='18' r='1.5' fill='%23374151'%3E%3C/circle%3E%3C/svg%3E");
}

.trix-button--icon-number-list::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='10' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='10' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Ctext x='4' y='9' font-family='Arial' font-size='8' font-weight='bold' fill='%23374151'%3E1%3C/text%3E%3Ctext x='4' y='15' font-family='Arial' font-size='8' font-weight='bold' fill='%23374151'%3E2%3C/text%3E%3Ctext x='4' y='21' font-family='Arial' font-size='8' font-weight='bold' fill='%23374151'%3E3%3C/text%3E%3C/svg%3E");
}

/* === 핵심 수정: 다이얼로그 스타일 === */
trix-toolbar .trix-dialog {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    right: 0;
    z-index: 1000 !important; /* 높은 z-index로 다른 요소 위에 표시 */
    background-color: #ffffff !important; /* white */
    border: 1px solid #d1d5db !important; /* gray-300 */
    border-radius: 0.5rem !important; /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* shadow-lg */
    padding: 1rem !important; /* p-4 */
    margin-top: 0.25rem !important; /* mt-1 */
    min-width: 300px !important;
    display: none; /* 기본적으로 숨김 */
}

/* 다이얼로그가 활성화되었을 때만 표시 */
trix-toolbar .trix-dialog[data-trix-active],
trix-toolbar .trix-dialog.trix-active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Trix의 기본 클래스 상태별 처리 */
trix-toolbar .trix-dialog--link {
    display: none;
}

trix-toolbar .trix-dialog--link[data-trix-active],
trix-toolbar .trix-dialog--link.trix-active {
    display: block !important;
}

/* 다이얼로그 입력 필드 */
trix-toolbar .trix-dialog input[type=text],
trix-toolbar .trix-dialog input[type=url] {
    width: 100% !important;
    border: 1px solid #d1d5db !important; /* gray-300 */
    border-radius: 0.375rem !important; /* rounded-md */
    padding: 0.5rem !important; /* p-2 */
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.25rem !important;
    margin-bottom: 0.5rem !important; /* mb-2 */
    outline: none !important;
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

trix-toolbar .trix-dialog input[type=text]:focus,
trix-toolbar .trix-dialog input[type=url]:focus {
    border-color: #6366f1 !important; /* indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important; /* indigo-100 */
}

/* 다이얼로그 버튼 */
trix-toolbar .trix-dialog .trix-button--dialog {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: #ffffff !important; /* white */
    border: none !important;
    border-radius: 0.375rem !important; /* rounded-md */
    padding: 0.5rem 1rem !important; /* px-4 py-2 */
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 500 !important; /* font-medium */
    cursor: pointer !important;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-right: 0.5rem !important; /* mr-2 */
}

trix-toolbar .trix-dialog .trix-button--dialog:hover {
    background-color: #3730a3 !important; /* indigo-700 */
}

trix-toolbar .trix-dialog .trix-button-group {
    border: none;
}

/* 파일 도구와 히스토리 도구 숨김 */
trix-toolbar .trix-button-group--file-tools,
trix-toolbar .trix-button-group--history-tools {
    display: none;
}

/* === 에디터 내용 스타일링 === */
trix-editor h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
    color: #111827; /* gray-900 */
}

trix-editor h2 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.75rem; /* mb-3 */
    color: #111827; /* gray-900 */
}

trix-editor h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #111827; /* gray-900 */
}

trix-editor p {
    margin-bottom: 0.75rem; /* mb-3 */
}

trix-editor a {
    color: #4f46e5; /* indigo-600 */
    text-decoration: underline;
}

trix-editor a:hover {
    color: #3730a3; /* indigo-800 */
}

trix-editor ul, trix-editor ol {
    padding-left: 1.5rem; /* pl-6 */
    margin-bottom: 0.75rem; /* mb-3 */
}

trix-editor ul {
    list-style-type: disc;
}

trix-editor ol {
    list-style-type: decimal;
}

trix-editor li {
    margin-bottom: 0.25rem; /* mb-1 */
}

trix-editor blockquote {
    border-left: 4px solid #d1d5db; /* gray-300 */
    padding-left: 1rem; /* pl-4 */
    color: #374151; /* gray-700 */
    font-style: italic;
    margin: 0.75rem 0; /* my-3 */
}

trix-editor code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.125rem 0.25rem; /* px-1 py-0.5 */
    border-radius: 0.25rem; /* rounded */
    font-size: 0.875rem; /* text-sm */
}

trix-editor pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.375rem; /* rounded-md */
    margin: 0.75rem 0; /* my-3 */
    overflow-x: auto;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.5;
}

/* 플레이스홀더 텍스트 */
trix-editor:empty:not(:focus)::before {
    content: attr(placeholder);
    color: #9ca3af; /* gray-400 */
}

/* === 반응형 디자인 === */
@media (max-width: 640px) {
    trix-toolbar {
        flex-direction: column;
        gap: 0.25rem; /* gap-1 */
    }

    trix-toolbar .trix-button-group {
        width: 100%;
    }

    trix-toolbar .trix-button {
        flex: 1;
    }

    trix-toolbar .trix-dialog {
        left: 0.5rem;
        right: 0.5rem;
        min-width: auto !important;
    }
}

/* === 표시된 콘텐츠 스타일 (.trix-content) === */
.trix-content {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    color: #111827; /* gray-900 */
    line-height: 1.5;
    width: 100%;
    padding: 0.75rem; /* p-3 */
}

.trix-content h1 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 1rem; /* mb-4 */
    color: #111827; /* gray-900 */
}

.trix-content h2 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.75rem; /* mb-3 */
    color: #111827; /* gray-900 */
}

.trix-content h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #111827; /* gray-900 */
}

.trix-content p {
    margin-bottom: 0.75rem; /* mb-3 */
}

.trix-content a {
    color: #4f46e5; /* indigo-600 */
    text-decoration: underline;
}

.trix-content a:hover {
    color: #3730a3; /* indigo-800 */
}

.trix-content ul, .trix-content ol {
    padding-left: 1.5rem; /* pl-6 */
    margin-bottom: 0.75rem; /* mb-3 */
}

.trix-content ul {
    list-style-type: disc;
}

.trix-content ol {
    list-style-type: decimal;
}

.trix-content li {
    margin-bottom: 0.25rem; /* mb-1 */
}

.trix-content blockquote {
    border-left: 4px solid #d1d5db; /* gray-300 */
    padding-left: 1rem; /* pl-4 */
    color: #374151; /* gray-700 */
    font-style: italic;
    margin: 0.75rem 0; /* my-3 */
}

.trix-content code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.125rem 0.25rem; /* px-1 py-0.5 */
    border-radius: 0.25rem; /* rounded */
    font-size: 0.875rem; /* text-sm */
}

.trix-content pre {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace;
    background-color: #f3f4f6; /* gray-100 */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.375rem; /* rounded-md */
    margin: 0.75rem 0; /* my-3 */
    overflow-x: auto;
    font-size: 0.875rem; /* text-sm */
    line-height: 1.5;
}

/* === 아이콘 가시성 개선을 위한 대체 스타일 === */
/* 고대비 아이콘 옵션 - 더 진한 색상으로 가시성 향상 */
.high-contrast .trix-button--icon-strike::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4H9a3 3 0 0 0-2.83 4'%3E%3C/path%3E%3Cpath d='M14 12a4 4 0 0 1 0 8H6'%3E%3C/path%3E%3Cline x1='4' y1='12' x2='20' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
}

.high-contrast .trix-button--icon-heading-1::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h8'%3E%3C/path%3E%3Cpath d='M4 18V6'%3E%3C/path%3E%3Cpath d='M12 18V6'%3E%3C/path%3E%3Cpath d='M17 10v8'%3E%3C/path%3E%3Cpath d='M15 10h4'%3E%3C/path%3E%3C/svg%3E") !important;
}

.high-contrast .trix-button--icon-bullet-list::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='8' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Ccircle cx='4' cy='6' r='2' fill='%23000000'%3E%3C/circle%3E%3Ccircle cx='4' cy='12' r='2' fill='%23000000'%3E%3C/circle%3E%3Ccircle cx='4' cy='18' r='2' fill='%23000000'%3E%3C/circle%3E%3C/svg%3E") !important;
}

.high-contrast .trix-button--icon-number-list::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='10' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='10' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='10' y1='18' x2='21' y2='18'%3E%3C/line%3E%3Crect x='2' y='4' width='4' height='4' fill='%23000000'/%3E%3Ctext x='4' y='7.5' text-anchor='middle' font-family='Arial' font-size='3' fill='white'%3E1%3C/text%3E%3Crect x='2' y='10' width='4' height='4' fill='%23000000'/%3E%3Ctext x='4' y='13.5' text-anchor='middle' font-family='Arial' font-size='3' fill='white'%3E2%3C/text%3E%3Crect x='2' y='16' width='4' height='4' fill='%23000000'/%3E%3Ctext x='4' y='19.5' text-anchor='middle' font-family='Arial' font-size='3' fill='white'%3E3%3C/text%3E%3C/svg%3E") !important;
}

/* 텍스트 기반 대체 아이콘 - SVG가 로드되지 않을 경우 */
.text-fallback .trix-button--icon-strike::before {
    content: "S̶" !important;
    background-image: none !important;
    font-weight: bold !important;
    font-size: 14px !important;
    color: #374151 !important;
    text-decoration: line-through !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.text-fallback .trix-button--icon-heading-1::before {
    content: "H1" !important;
    background-image: none !important;
    font-weight: bold !important;
    font-size: 12px !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.text-fallback .trix-button--icon-bullet-list::before {
    content: "• • •" !important;
    background-image: none !important;
    font-weight: bold !important;
    font-size: 10px !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.text-fallback .trix-button--icon-number-list::before {
    content: "123" !important;
    background-image: none !important;
    font-weight: bold !important;
    font-size: 10px !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}