/* 블로그 에디터 스타일 */

/* 경고 배너 - 여백 축소 */
.blog-warning-banner {
    background-color: #374151;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 14px; /* 16.8px / 1.2 = 14px */
    line-height: 1.5;
}

.blog-warning-banner .warning-icon {
    color: #ef4444;
    margin-right: 8px;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900;
}

/* 에디터 툴바 */
.blog-editor-toolbar {
    background: white;
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: none;
}

/* 아이콘 전용 스타일 */
.blog-editor-toolbar i,
.blog-editor-toolbar .fas,
.blog-editor-toolbar .far,
.blog-editor-toolbar .fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    display: inline-block !important;
}

.blog-editor-toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 12px;
    border-right: 1px solid #e5e7eb;
}

.blog-editor-toolbar .toolbar-group:last-child {
    border-right: none;
    margin-left: auto;
}

.blog-editor-toolbar .toolbar-btn {
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

.blog-editor-toolbar .toolbar-btn:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.blog-editor-toolbar .toolbar-btn.active {
    background-color: #3b82f6;
    color: white;
}

.blog-editor-toolbar .toolbar-btn i {
    font-size: 16px;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900;
}

/* 액션 버튼들 - 이미지와 동일한 디자인 */
.blog-editor-toolbar .action-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 0;
    border-right: none;
    flex-wrap: wrap;
}

.blog-editor-toolbar .action-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-btn .action-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.action-btn .action-icon i {
    font-size: 12px;
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Pro", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 900;
    color: white !important;
}

.action-btn .action-text {
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* 저장 버튼 - autohtml-project (39) 참고 디자인 적용 */
.save-btn .save-icon {
    background-color: #c7016c;
}

.save-btn .save-icon:hover {
    background-color: #a0015a;
    transform: scale(1.05);
}

.save-btn .save-icon i {
    color: white !important;
}

.save-btn .action-text {
    color: #c7016c !important;
}

.save-btn:hover .action-text {
    color: #a0015a !important;
}

/* 찜 버튼 - autohtml-project (39) 참고 디자인 적용 */
.favorite-btn .favorite-icon {
    background-color: #eaa018;
}

.favorite-btn .favorite-icon:hover {
    background-color: #d18d14;
    transform: scale(1.05);
}

.favorite-btn .favorite-icon i {
    color: white !important;
}

.favorite-btn .action-text {
    color: #eaa018 !important;
}

.favorite-btn:hover .action-text {
    color: #d18d14 !important;
}

/* 복사 버튼 - autohtml-project (39) 참고 디자인 적용 */
.copy-btn .copy-icon {
    background-color: #686868;
}

.copy-btn .copy-icon:hover {
    background-color: #555555;
    transform: scale(1.05);
}

.copy-btn .copy-icon i {
    color: white !important;
}

.copy-btn .action-text {
    color: #686868 !important;
}

.copy-btn:hover .action-text {
    color: #555555 !important;
}

/* 이미지 생성 버튼 - Freepik API 연동용 */
.image-gen-btn .image-gen-icon {
    background-color: #9333ea;
}

.image-gen-btn .image-gen-icon:hover {
    background-color: #7e22ce;
    transform: scale(1.05);
}

.image-gen-btn .image-gen-icon i {
    color: white !important;
}

.image-gen-btn .action-text {
    color: #9333ea !important;
}

.image-gen-btn:hover .action-text {
    color: #7e22ce !important;
}

.image-gen-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 수정 요청 버튼 - autohtml-project (39) 참고 디자인 적용 */
.edit-request-btn .edit-request-icon {
    background-color: #0099e2;
}

.edit-request-btn .edit-request-icon:hover {
    background-color: #0081c6;
    transform: scale(1.05);
}

.edit-request-btn .edit-request-icon i {
    color: white !important;
}

.edit-request-btn .action-text {
    color: #0099e2 !important;
    font-size: 14px;
    font-weight: 500;
}

.edit-request-btn:hover .action-text {
    color: #0081c6 !important;
}

/* 블로그 제목 페이지용 액션 버튼 스타일 */
.bg-white .action-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
}

.bg-white .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.bg-white .action-btn i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: white;
}

.bg-white .action-btn span {
    font-size: 14px;
    font-weight: 500;
}

/* 찜 버튼 */
.bg-white .favorite-btn i {
    background-color: #f59e0b;
    color: white;
}

.bg-white .favorite-btn span {
    color: #f59e0b;
}

/* 복사 버튼 */
.bg-white .copy-btn i {
    background-color: #6b7280;
    color: white;
}

.bg-white .copy-btn span {
    color: #6b7280;
}

/* 본문 작성 버튼 */
.bg-white .edit-request-btn i {
    background-color: transparent;
    color: white;
}

.bg-white .edit-request-btn span {
    color: #1976d2;
}

/* 에디터 컨테이너 */
.blog-editor-container {
    background: white;
    border: none;
    border-radius: 8px;
    min-height: 400px;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* 제목 섹션 - autohtml-project (39) 참고 디자인 적용 */
.blog-editor-title-section {
    padding: 20px;
    border-bottom: none;
    background-color: #f5f8f9;
}

.blog-editor-title-section .section-label {
    color: #1ea152;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 4px;
    display: block;
    line-height: 150%;
}

.blog-editor-title-section .title-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 21px;
    font-weight: 400;
    color: #293b48;
    background: transparent;
    padding: 0;
    resize: none;
    min-height: 32px;
    line-height: 150%;
    margin-bottom: 16px;
}

.blog-editor-title-section .title-input::placeholder {
    color: #8097a8;
    font-weight: 400;
}

/* 본문 섹션 - autohtml-project (39) 참고 디자인 적용 */
.blog-editor-content-section {
    padding: 20px;
    min-height: 300px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #F5F8F9;
    border-radius: 10px 10px 0 0;
}

.blog-editor-content-section .section-label {
    color: #1ea152;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
    line-height: 150%;
}

.blog-editor-content-section .content-editor {
    width: 100%;
    border: none;
    outline: none;
    font-size: 21px;
    color: #293b48;
    background: transparent;
    padding: 0;
    min-height: 400px;
    max-height: calc(100vh - 400px);
    line-height: 150%;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    overflow-y: auto;
    white-space: pre-wrap; /* 줄넘김과 공백 보존 */
}

.blog-editor-content-section .content-editor:empty:before {
    content: attr(placeholder);
    color: #9ca3af;
    pointer-events: none;
}

.blog-editor-content-section .content-editor:focus {
    outline: none;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    /* 모바일에서 상단 헤더 크기 조정 */
    .text-3xl,
    h1.text-3xl,
    h2.text-3xl {
        font-size: 1.5rem !important;
    }
    
    /* 모바일 입력 필드 폰트/플레이스홀더 통일 */
    input,
    textarea,
    select,
    .form-input,
    .form-input input,
    .form-input textarea {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    input::placeholder,
    textarea::placeholder,
    select::placeholder,
    .form-input::placeholder,
    .form-input input::placeholder,
    .form-input textarea::placeholder,
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder,
    .form-input::-webkit-input-placeholder,
    .form-input input::-webkit-input-placeholder,
    .form-input textarea::-webkit-input-placeholder,
    input::-moz-placeholder,
    textarea::-moz-placeholder,
    .form-input::-moz-placeholder,
    .form-input input::-moz-placeholder,
    .form-input textarea::-moz-placeholder,
    input:-ms-input-placeholder,
    textarea:-ms-input-placeholder,
    .form-input:-ms-input-placeholder,
    .form-input input:-ms-input-placeholder,
    .form-input textarea:-ms-input-placeholder {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .form-input:focus,
    .form-input:focus-within,
    .form-input input:focus,
    .form-input textarea:focus {
        outline: none !important;
        box-shadow: none !important;
        border-color: inherit !important;
    }
    
    .mb-8 {
        margin-bottom: 0.5rem !important;
    }
    
    .mt-6 {
        margin-top: 0.5rem !important;
    }
    
    .mx-6 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    
    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-8 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
    
    /* 그리드 간격 축소 */
    .gap-8 {
        gap: 1rem !important;
    }
    
    /* 모바일에서 입력 폼 사이즈 조정 */
    .lg\:col-span-3,
    .col-span-3 {
        grid-column: span 10 / span 10 !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        order: 1 !important;
    }
    
    .lg\:col-span-7,
    .col-span-7 {
        grid-column: span 10 / span 10 !important;
        width: 100% !important;
        order: 2 !important;
        position: relative !important;
    }
    
    .grid-cols-1.lg\:grid-cols-10,
    .grid-cols-10 {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* 모바일에서 패딩 조정 */
    main.px-6,
    .px-6 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        box-sizing: border-box !important;
    }
    
    .mx-6 {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
        box-sizing: border-box !important;
    }
    
    /* 모바일에서 메인 컨테이너 전체 width 제한 */
    .flex-1.with-sidebar,
    .min-h-screen.bg-gray-100 {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 모바일에서 결과 영역 width 제한 */
    #resultArea,
    #actualResults,
    .lg\:col-span-7,
    .col-span-7 {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    .p-8 {
        padding: 1rem !important;
    }
    
    .py-8 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    /* 모바일에서 폼 높이 제한 제거 */
    .lg\:col-span-3 > div,
    .col-span-3 > div {
        max-height: none !important;
        height: auto !important;
    }
    
    /* 모바일에서도 데스크탑과 동일한 에디터 레이아웃 유지 */
    .blog-editor-toolbar {
        padding: 0 !important;
        gap: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    
    /* 액션 버튼 그룹을 최상단에 배치 - 좌측 정렬, 갭 최소화 */
    .blog-editor-toolbar .action-buttons {
        order: -1;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        gap: 4px;
        padding: 8px;
        border: none;
        margin-bottom: 8px;
        border-bottom: 1px solid #e5e7eb;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    /* 모바일 액션 버튼 - 아이콘 좌측, 텍스트 우측, 1행 배치 */
    .blog-editor-toolbar .action-btn {
        flex-direction: row !important;
        padding: 6px 10px !important;
        font-size: 12px;
        flex-shrink: 0;
        gap: 4px !important;
        margin-right: 0;
        align-items: center !important;
        white-space: nowrap;
    }
    
    .blog-editor-toolbar .action-btn .action-icon {
        width: 20px !important;
        height: 20px !important;
    }
    
    .blog-editor-toolbar .action-btn .action-icon i {
        font-size: 10px !important;
    }
    
    .blog-editor-toolbar .action-btn .action-text {
        font-size: 12px !important;
    }
    
    /* 툴바를 2행 구조로 변경 */
    .blog-editor-toolbar {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* scriptEditor 컨테이너 max-width */
    #scriptEditor,
    #scriptEditor .blog-editor-container {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 1행: 액션 버튼 그룹 */
    .blog-editor-toolbar .action-buttons {
        display: flex !important;
        width: 100% !important;
        padding: 6px 8px !important;
        margin: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
        order: -1 !important;
    }
    
    /* 2행: 편집 도구 그룹들을 감싸는 wrapper */
    #toolbarGroupsWrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 8px !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* 편집 도구 그룹들을 1행에 수평 스크롤 */
    #toolbarGroupsWrapper .toolbar-group {
        display: inline-flex !important;
        gap: 1px !important;
        padding: 3px 4px !important;
        border: none !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
        margin-right: 4px !important;
    }
    
    #toolbarGroupsWrapper .toolbar-btn {
        min-width: 28px !important;
        height: 28px !important;
        padding: 4px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #toolbarGroupsWrapper .toolbar-btn i {
        font-size: 14px !important;
    }
    
    .blog-editor-title-section,
    .blog-editor-content-section {
        padding: 12px !important;
    }
    
    /* 스크립트 에디터 컨텐츠 섹션 패딩 제거 */
    #scriptEditorContent,
    #editorContent {
        padding: 12px !important;
    }
    
    /* 에디터 컨텐츠 영역 모바일 스타일 */
    .blog-editor-content-section {
        background-color: #F5F8F9 !important;
        border-radius: 10px 10px 0 0 !important;
        min-height: 300px !important;
    }
    
    .blog-editor-title-section .section-label,
    .blog-editor-content-section .section-label {
        font-size: 28px !important;
    }
    
    .blog-editor-title-section .title-input {
        font-size: 21px !important;
    }
    
    .blog-editor-content-section .content-editor {
        font-size: 0.96rem !important; /* 1.2rem * 0.8 = 0.96rem (20% 축소) */
        min-height: 400px;
        max-height: 60vh;
    }
    
    .blog-editor-container {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        overflow: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 모바일에서 컨텐츠 영역 스크롤 */
    .content-editor {
        max-height: 60vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* 불필요한 스크롤 제거 */
    .blog-editor-content-section {
        overflow: hidden !important;
    }
    
    #resultArea,
    #scriptResultArea {
        overflow: visible !important;
    }
    
    /* 모바일에서 로딩 영역과 기본 안내 영역 중앙 배치 */
    #loadingArea:not(.hidden),
    #defaultArea:not(.hidden) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 60vh !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2rem 1rem !important;
    }
    
    /* hidden 클래스가 있을 때는 숨김 */
    #loadingArea.hidden,
    #defaultArea.hidden {
        display: none !important;
    }
    
    /* 모바일에서 기본 안내 텍스트 크기 0.8배 축소 */
    #defaultArea:not(.hidden) p,
    #defaultArea:not(.hidden) .text-lg,
    #defaultArea:not(.hidden) .text-center p {
        font-size: 0.7rem !important; /* 1.125rem * 0.8 = 0.9rem */
        line-height: 1.6 !important;
        text-align: center !important;
    }
    
    /* 모바일에서 로딩 텍스트 크기 0.8배 축소 */
    #loadingArea:not(.hidden) p,
    #loadingArea:not(.hidden) .font-medium {
        font-size: 0.8rem !important;
    }
    
    /* 결과 영역 최소 높이 설정 */
    #resultArea,
    #scriptResultArea {
        min-height: 60vh !important;
    }
    
    /* 로딩 스피너 크기 유지 */
    #loadingArea:not(.hidden) .relative {
        width: 4rem !important;
        height: 4rem !important;
    }
    
    /* 하단 요청 섹션 모바일 스타일 - 툴바 자리에 표시 */
    #bottomRequestSection {
        width: 100% !important;
        padding: 8px !important;
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
        background: white !important;
        box-shadow: none !important;
        border-radius: 8px !important;
        margin: 0 !important;
        order: 1 !important;
    }
    
    /* 수정 요청이 활성화되면 toolbar의 편집 도구들 숨기기 (모바일만) */
    .blog-editor-toolbar.request-active .toolbar-group:not(.action-buttons) {
        display: none !important;
    }
    
    /* 수정 요청 활성화 시 인풋바를 툴바 내부에 표시 (모바일만) */
    .blog-editor-toolbar.request-active #bottomRequestSection {
        display: block !important;
    }
    
    .blog-editor-toolbar:not(.request-active) #bottomRequestSection {
        display: none !important;
    }
    
    /* 툴바가 인풋바를 포함할 수 있도록 */
    .blog-editor-toolbar {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    /* 모바일 인풋바 스타일 */
    #bottomRequestSection {
        border: 2px solid #0099e2 !important;
        border-radius: 8px !important;
        background: white !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 8px !important;
    }
    
    #bottomAdditionalRequest {
        font-size: 14px !important;
        left: 8px !important;
        width: calc(100% - 60px) !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        padding-left: 8px !important;
    }
    
    /* 모바일 플레이스홀더 수정 */
    #bottomAdditionalRequest::placeholder {
        color: #8097a8 !important;
    }
    
    .group-52632 .ai {
        display: none !important;
    }
    
    /* 모바일에서 + 아이콘 숨김 */
    .icons-devices-ic-devices-controller {
        display: none !important;
    }
    
    /* 모바일에서 우측 화살표 버튼 */
    .group-52628 {
        width: 30px !important;
        height: 30px !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .group-52632 .div2 {
        display: none !important;
    }
    
    /* 화살표 아이콘 추가 */
    .group-52628::after {
        content: '→' !important;
        color: white !important;
        font-size: 18px !important;
        font-weight: bold !important;
    }
    
    /* 모바일에서 배너 텍스트 크기 축소 (16.8px → 14px) */
    .blog-warning-banner {
        font-size: 14px;
    }
    
    /* 모바일에서 배너 아이콘 크기 1.5배 확대 */
    .blog-warning-banner .warning-icon {
        font-size: 21px;
    }
    
    /* 모바일에서 제목/본문 레이블 스타일 */
    .blog-editor-title-section .section-label,
    .blog-editor-content-section .section-label {
        color: #1EA152 !important;
        font-weight: 700 !important;
        font-size: 28px !important;
        margin-bottom: 4px !important;
    }
    
    /* 블로그 페이지 에디터 내 제목/본문 레이블 */
    #editorContent h4 {
        color: #1EA152 !important;
        font-weight: 700 !important;
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
    
    /* 유튜브 스크립트 페이지 에디터 내 레이블 - 빨간색 */
    #scriptEditorContent h4 {
        color: #CF1D1C !important;
        font-weight: 700 !important;
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
    
    /* 모바일에서 에디터 내 텍스트 스타일 */
    #editorContent div,
    #scriptEditorContent div {
        color: #293b48 !important;
        font-size: 0.96rem !important; /* 1.2rem * 0.8 = 0.96rem (20% 축소) */
        line-height: 1.6 !important;
    }
    
    /* 모바일에서 에디터 내 모든 텍스트 요소 */
    #editorContent,
    #editorContent p,
    #editorContent div,
    #scriptEditorContent,
    #scriptEditorContent p,
    #scriptEditorContent div {
        font-size: 0.96rem !important; /* 1.2rem * 0.8 = 0.96rem (20% 축소) */
    }
    
    /* 모바일에서 소제목 크기 축소 (1.875rem → 1.2rem) */
    #editorContent h2,
    #editorContent h4,
    #scriptEditorContent h2,
    #scriptEditorContent h4,
    .content-editor h2,
    .content-editor h4 {
        font-size: 1.2rem !important;
    }
}

/* 툴바 그룹 반응형 */
@media (max-width: 1024px) {
    .blog-editor-toolbar .toolbar-group {
        padding-right: 8px;
    }
    
    .blog-editor-toolbar .toolbar-group:last-child {
        margin-left: auto;
        border-right: none;
        padding-right: 0;
    }
}

/* 로딩 상태 */
.blog-editor-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6b7280;
}

.blog-editor-loading .loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e7eb;
    border-top: 2px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 성공/오류 메시지 */
.blog-editor-message {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

.blog-editor-message.success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.blog-editor-message.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.blog-editor-message.info {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* 하단 요청하기 섹션 */
#bottomRequestSection {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    background: transparent;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: #0099e2;
}

/* 데스크탑에서는 기존 방식 100% 유지 */
@media (min-width: 769px) {
    /* 툴바 내의 bottomRequestSection(모바일용)은 완전히 숨김 */
    .blog-editor-toolbar #bottomRequestSection {
        display: none !important;
    }
    
    /* request-active 클래스 무시 (데스크탑에서는 툴바 항상 표시) */
    .blog-editor-toolbar.request-active .toolbar-group:not(.action-buttons) {
        display: flex !important;
    }
    
    /* 데스크탑에서 액션 버튼 그룹 기존 위치 유지 (우측) */
    .blog-editor-toolbar .action-buttons {
        order: initial !important;
        justify-content: initial !important;
        gap: 20px !important;
        padding: 0 !important;
        border: none !important;
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
    
    /* 데스크탑에서 toolbar 기본 스타일 유지 */
    .blog-editor-toolbar {
        padding: 12px 16px !important;
        gap: 8px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    /* 데스크탑에서 toolbar-group 기본 스타일 유지 */
    .blog-editor-toolbar .toolbar-group {
        display: flex !important;
        gap: 4px !important;
        padding-right: 12px !important;
        border-right: 1px solid #e5e7eb !important;
    }
    
    .blog-editor-toolbar .toolbar-group:last-child,
    .blog-editor-toolbar .action-buttons {
        border-right: none !important;
        margin-left: auto !important;
    }
    
    /* 데스크탑에서 액션 버튼 기본 스타일 */
    .blog-editor-toolbar .action-btn {
        flex-direction: row !important;
        padding: 0 !important;
        gap: 8px !important;
    }
    
    .blog-editor-toolbar .action-btn .action-icon {
        width: 24px !important;
        height: 24px !important;
    }
    
    .blog-editor-toolbar .action-btn .action-text {
        font-size: 16px !important;
    }
    
    /* 데스크탑에서 액션 버튼 간격 2배 */
    .blog-editor-toolbar .action-buttons {
        gap: 40px !important;
    }
    
    /* 데스크탑에서 rectangle-3699 스타일 */
    .blog-editor-container .group-52632 {
        border-radius: 10px !important;
        background: white !important;
        border: 2px solid #0099E2 !important;
    }
    
    /* 데스크탑에서 에디터 컨텐츠 섹션 기본 스타일 유지 */
    .blog-editor-content-section {
        background-color: #F5F8F9 !important;
        border-radius: 10px 10px 0 0 !important;
    }
    
    #scriptEditorContent,
    #editorContent {
        padding: 0 !important;
    }
    
    /* 데스크탑에서 에디터 컨테이너 기본 디자인 */
    .blog-editor-container {
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        padding: 2rem !important;
        overflow: visible !important;
    }
    
    /* 데스크탑에서 toolbarGroupsWrapper는 투명하게 */
    #toolbarGroupsWrapper {
        display: contents !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    
    #toolbarGroupsWrapper .toolbar-group {
        display: flex !important;
    }
    
    /* 데스크탑 입력 폼 스크롤 처리 - 모든 AI 페이지 공통 */
    .col-span-3.flex.flex-col,
    .lg\\:col-span-3.flex.flex-col {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    /* 생성하기 버튼 하단 고정 */
    .generate-btn,
    button[id*="generateBtn"],
    button[id*="Generate"] {
        flex-shrink: 0 !important;
        margin-top: auto !important;
    }
    
    /* 추가 요청 사항 영역 스크롤 가능 */
    #additionalRequest,
    textarea[placeholder*="추가 요청"],
    textarea[placeholder*="반영되기 원하는"] {
        overflow-y: auto !important;
        max-height: 300px !important;
    }
    
    /* 헤더 여백 - 사이드바와 동일하게 (px-6 = 1.5rem, mt-6 = 1.5rem, mb-6 = 1.5rem) */
    .text-white.p-8.mx-6.mt-6.rounded-lg,
    div[style*="linear-gradient"].text-white.p-8.mx-6.mt-6,
    div[style*="background-color"].text-white.p-8.mx-6.mt-6 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
        padding: 2rem !important;
    }
    
    /* 메인 콘텐츠 여백 - 사이드바와 동일하게 */
    .max-w-none.mx-auto.px-6.py-8,
    div[class*="px-6 py-8"],
    main.px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 0 !important;
        padding-bottom: 1.5rem !important;
    }
    
    /* 그리드 간격 - 일관성 유지 */
    .grid.grid-cols-10.gap-8 {
        gap: 2rem !important;
    }
    
    /* 입력 카드 내부 간격 - 원래대로 */
    .col-span-3.bg-white.rounded-lg.shadow-md.p-6 {
        padding: 1.5rem !important;
    }
    
    /* 입력 폼 내부 요소 간격 - 원래대로 */
    div[style*="gap: 1.5rem"] {
        gap: 1.5rem !important;
    }
    
    /* 좌측 입력창 - 인라인 스타일 유지 (오버라이드 제거) */
    
    /* 메인 콘텐츠 컨테이너 - 전체 높이 채우기 */
    .hidden.lg\\:block.min-h-screen,
    div.hidden.lg\\:block,
    div[class*="hidden"][class*="lg:block"] {
        min-height: 100vh !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    /* 메인 콘텐츠 래퍼 - 인라인 스타일 유지 */
    
    /* 그리드 컨테이너 - 남은 공간 모두 채우기 */
    .grid.grid-cols-10.gap-8.h-full,
    .grid.grid-cols-10.h-full,
    div.grid.grid-cols-10,
    div[class*="grid"][class*="grid-cols-10"] {
        flex: 1 1 auto !important;
        display: grid !important;
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    
    /* 좌측 입력창 - display flex만 유지 */
    .grid.grid-cols-10 > .col-span-3,
    .col-span-3.bg-white {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 우측 결과 영역 - 그리드 높이에 맞춤 */
    .grid.grid-cols-10 > .col-span-7,
    .col-span-7,
    div[class*="col-span-7"] {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: auto !important;
    }
    
    /* 추가 요청 사항 영역 - 남은 공간 차지 */
    .col-span-3 > .flex-1,
    .col-span-3 > div.flex-1,
    div.flex-1[style*="min-height: 0"],
    div.flex-1[style*="display: flex"] {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 250px !important;
    }
    
    /* textarea가 부모의 남은 높이에 맞춰지도록 - 인라인 스타일 완전 오버라이드 */
    textarea#additionalRequest[style],
    textarea#additionalRequest,
    #additionalRequest,
    .col-span-3 textarea#additionalRequest,
    .col-span-3 .flex-1 textarea#additionalRequest,
    div.flex-1 textarea#additionalRequest,
    textarea.flex-1.w-full.form-input,
    .col-span-3 textarea.flex-1 {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        resize: none !important;
        overflow-y: auto !important;
    }
    
    /* 생성하기 버튼 - 하단 고정 */
    .col-span-3 > div:last-child {
        flex-shrink: 0 !important;
    }
}

/* 모바일에서는 데스크탑용 bottomRequestSection 숨김 */
@media (max-width: 768px) {
    #bottomRequestSectionDesktop,
    .desktop-only {
        display: none !important;
    }
}

/* 하단 요청하기 섹션 - 새로운 디자인 */
.group-52632,
.group-52632 * {
    box-sizing: border-box;
}

.group-52632 {
    position: relative;
    width: 100%;
    height: 60px;
    margin-top: 20px;
}

.rectangle-3699 {
    background: transparent;
    border: none;
    width: 100%;
    max-width: 1035px;
    height: 60px;
    position: absolute;
    box-shadow: none;
    left: 50%;
    transform: translateX(-50%);
    top: 0px;
}

.group-52632 .div {
    color: #0099e2;
    text-align: center;
    font-family: "Pretendard-Bold", sans-serif;
    font-size: 22px;
    line-height: 140%;
    letter-spacing: -0.01em;
    font-weight: 700;
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
}

.icons-devices-ic-devices-controller {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    aspect-ratio: 1;
}

.ic-devices-controller {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.group-52632 .ai {
    color: #8097a8;
    text-align: left;
    font-family: "Pretendard-Regular", sans-serif;
    font-size: 18px;
    line-height: 200%;
    font-weight: 400;
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 200px);
    pointer-events: none;
}

#bottomAdditionalRequest,
#bottomAdditionalRequestDesktop {
    position: absolute;
    left: 70px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 200px);
    border: none;
    background: transparent;
    outline: none;
    font-family: "Pretendard-Regular", sans-serif;
    font-size: 18px;
    color: #333;
    z-index: 2;
}

#bottomAdditionalRequest::placeholder,
#bottomAdditionalRequestDesktop::placeholder {
    color: transparent;
}

/* 입력 시 placeholder 텍스트(.ai) 숨기기 */
#bottomAdditionalRequest:focus ~ .ai,
#bottomAdditionalRequest:not(:placeholder-shown) ~ .ai,
#bottomAdditionalRequestDesktop:focus ~ .ai,
#bottomAdditionalRequestDesktop:not(:placeholder-shown) ~ .ai {
    display: none;
}

.group-52628 {
    background: linear-gradient(270deg, rgba(0, 153, 226, 1) 0%, rgba(0, 129, 198, 1) 100%);
    border-radius: 10px;
    width: 110px;
    height: 40px;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    cursor: pointer;
}

.rectangle-36992 {
    background: #f5f8f9;
    border-radius: 10px;
    width: 365px;
    height: 55px;
    position: absolute;
    left: 410px;
    top: 309px;
}

.group-52632 .div2 {
    color: #ffffff;
    text-align: center;
    font-family: "Pretendard-Bold", sans-serif;
    font-size: 18px;
    line-height: 140%;
    font-weight: 700;
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    pointer-events: none;
}

#bottomRequestSection input {
    font-size: 18px;
    height: 100%;
    border-radius: 8px;
    transition: none;
}

#bottomRequestSection input:focus {
    border-color: none;
    box-shadow: none;
    outline: none;
}

/* 요청하기 버튼 그라데이션 스타일 */
#bottomRequestBtn {
    background: linear-gradient(135deg, rgba(0, 153, 226, 1) 0%, rgba(0, 129, 198, 1) 100%);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 153, 226, 0.3);
}

#bottomRequestBtn:hover {
    background: linear-gradient(135deg, rgba(0, 153, 226, 0.9) 0%, rgba(0, 129, 198, 0.9) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 153, 226, 0.4);
}

#bottomRequestBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 153, 226, 0.3);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    #bottomRequestSection {
        padding: 12px;
    }
    
    #bottomRequestSection .flex {
        flex-direction: column;
        gap: 12px;
    }
    
    #bottomRequestSection input {
        font-size: 16px; /* iOS 줌 방지 */
    }
    
    #bottomRequestBtn {
        width: 100%;
        justify-content: center;
    }
    
    /* 모바일 추천 버튼 크기 축소 (1.2배 축소) */
    #mobileTopicRecommendBtn,
    #mobileAdProduct {
        padding: 12px 16px !important;
        font-size: 14px !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    #mobileTopicRecommendBtn img {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* 모바일에서 액션 버튼 스타일 조정 */
    .bg-white .action-btn {
        padding: 8px !important;
        gap: 2px !important;
    }
    
    /* 모바일에서 "n번째 결과" 텍스트 크기 */
    .blog-result-card h3,
    .youtube-result-card h3,
    .instagram-result-card h3 {
        font-size: 18px !important;
    }
}

/* 결과 페이지 스타일 - 데스크탑 전용 */
@media (min-width: 1024px) {
  
    
    /* 결과 텍스트 크기 20% 축소 (1.5rem → 1.2rem) */
    /* 블로그 제목 페이지 */
    p.text-gray-700[class*="result-keyword-"],
    p.text-gray-700[class*="result-title-"],
    p.text-gray-700[class*="result-subject-"],
    p.text-gray-700[class*="result-content-"],
    p.text-gray-700[class*="result-target-"],
    /* 유튜브 영상 기획 페이지 */
    .youtube-result-card p.text-gray-700,
    .youtube-result-card .text-gray-700,
    /* 유튜브 스크립트 페이지 */
    .bg-white.rounded-lg.border p.text-gray-700,
    /* 인스타그램 광고 페이지 */
    .bg-gray-50 p.text-sm.text-gray-700 {
        font-size: 1.2rem !important;
    }
}