/* 블로그 버튼 디자인 - 이미지와 100% 동일한 스타일 */

/* 기본 버튼 컨테이너 */
.blog-type-container {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

/* 기본 버튼 스타일 */
.blog-type-btn {
    position: relative;
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    background: #f5f5f5;
    color: #9ca3af;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

/* 활성화된 버튼 스타일 */
.blog-type-btn.active {
    border: 2px solid rgba(105, 185, 223, 1);
    background: #ffffff;
    color: rgba(105, 185, 223, 1);
}

/* 비활성화된 버튼 스타일 */
.blog-type-btn:not(.active) {
    border: none;
    background: #f3f4f6;
    color: #9ca3af;
}

/* 호버 효과 */
.blog-type-btn:hover:not(.active) {
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
}

/* 물음표 아이콘 - 범용 스타일 (모든 help-icon에 적용) */
.help-icon {
    cursor: pointer !important;
    transition: all 0.2s ease;
}

.help-icon:hover {
    transform: scale(1.1);
}

/* 특정 위치의 물음표 아이콘 */
.blog-type-btn .help-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #374151;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blog-type-btn .help-icon:hover {
    background: #1f2937;
    transform: scale(1.1);
}

/* 모바일 버튼 스타일 */
.mobile-blog-type-container {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.mobile-blog-type-btn {
    position: relative;
    flex: 1;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    background: #f5f5f5;
    color: #9ca3af;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
}

.mobile-blog-type-btn.active {
    border: 2px solid rgba(105, 185, 223, 1);
    background: #ffffff;
    color: rgba(105, 185, 223, 1);
}

.mobile-blog-type-btn:not(.active) {
    border: none;
    background: #f3f4f6;
    color: #9ca3af;
}

.mobile-blog-type-btn:hover:not(.active) {
    border: 2px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
}

.mobile-blog-type-btn .help-icon {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: #374151;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-blog-type-btn .help-icon:hover {
    background: #1f2937;
    transform: scale(1.1);
}

/* 라벨 스타일 개선 */
.form-label {
    font-size: 22px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 0.3rem;
    display: block;
}

/* 보관함에서 가져오기 링크 스타일 */
.archive-link {
    color: rgba(105, 185, 223, 1);
    text-decoration: underline;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.archive-link:hover {
    color: rgba(105, 185, 223, 0.8);
}

/* 생성하기 버튼 그라이언트 */
.generate-btn {
    margin-top: 0 !important;
    background: linear-gradient(135deg, rgba(0, 153, 226, 1) 0%, rgba(0, 129, 198, 1) 100%);
    color: white;
    border: none;
    padding: 14px 22px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 153, 226, 0.3);
}

.generate-btn: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);
}

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

/* 입력 필드 포커스 색상 변경 */
.form-input:focus {
    border-color: rgba(105, 185, 223, 1) !important;
    box-shadow: 0 0 0 3px rgba(105, 185, 223, 0.1) !important;
}

/* 툴팁 스타일 */
.tooltip {
    position: absolute;
    background: #374151;
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 300px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.tooltip.show {
    opacity: 1;
    visibility: visible;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;
    border: 6px solid transparent;
    border-top-color: #374151;
}

.tooltip .tooltip-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    background: white;
    border: 1px solid rgba(209, 213, 219, 1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    transition: all 0.2s ease;
    font-size: 18px;
    font-weight: bold;
    color: rgba(75, 85, 99, 1);
    line-height: 1;
}

.tooltip .tooltip-close:hover {
    background: rgba(249, 250, 251, 1);
    border-color: rgba(156, 163, 175, 1);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
    .blog-type-container {
        gap: 8px;
    }
    
    .blog-type-btn {
        padding: 10px 12px;
        font-size: 15px;
        min-height: 40px;
    }
    
    .blog-type-btn .help-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
        top: -5px;
        right: -5px;
    }
    
    .form-label {
        font-size: 16px;
    }
    
    .generate-btn {
        font-size: 15px;
        padding: 12px 18px;
    }
    
    /* 모바일 툴팁 디자인 개선 */
    .tooltip {
        max-width: calc(100vw - 40px); /* 화면 넘어가지 않게 */
        min-width: 280px; /* 왼쪽으로 가로 확장 */
        font-size: 13px;
        white-space: normal; /* 줄바꿈 허용 */
    }
    
    /* 모바일 툴팁 화살표 위치 변경 (위에서 아래로) */
    .tooltip::after {
        top: auto;
        bottom: -12px; /* 툴팁 아래에 화살표 */
        left: auto;
        right: 20px; /* 오른쪽 정렬 */
        border: 6px solid transparent;
        border-top-color: #374151; /* 위쪽 화살표 */
        border-bottom-color: transparent;
    }
    
    /* 모바일 액션 버튼 가로 배치 */
    .blog-result-card .action-btn,
    .youtube-result-card .action-btn,
    .instagram-result-card .action-btn,
    #savedDetailModal .action-btn {
        flex-direction: row !important;
        padding: 0 !important;
        gap: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    .blog-result-card .action-btn .action-icon,
    .youtube-result-card .action-btn .action-icon,
    .instagram-result-card .action-btn .action-icon,
    #savedDetailModal .action-btn .action-icon {
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .blog-result-card .action-btn .action-icon i,
    .youtube-result-card .action-btn .action-icon i,
    .instagram-result-card .action-btn .action-icon i,
    #savedDetailModal .action-btn .action-icon i {
        font-size: 10px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .blog-result-card .action-btn .action-text,
    .youtube-result-card .action-btn .action-text,
    .instagram-result-card .action-btn .action-text,
    #savedDetailModal .action-btn .action-text {
        font-size: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 모바일 버튼 컨테이너 - 좌우 스크롤 */
    .blog-result-card .flex.space-x-4,
    .youtube-result-card .flex.space-x-4,
    .instagram-result-card .flex.space-x-4,
    #savedDetailModal .flex.space-x-1,
    #savedDetailModal .flex.space-x-4 {
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }
    
    /* 버튼 컨테이너 부모 요소도 overflow 처리 */
    .blog-result-card .flex.items-center.justify-between,
    .youtube-result-card .flex.items-center.justify-between,
    .instagram-result-card .flex.items-center.justify-between {
        overflow-x: hidden !important;
    }
}

/* 블로그 결과 카드 호버 효과 - autohtml-project (39) 참고 디자인 적용 */
.blog-result-card {
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 10px 0;
    background-color: #ffffff !important;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.blog-result-card:hover,
.blog-result-card.active {
    border-color: rgba(30, 161, 82, 1) !important;
    border-width: 2px !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 블로그 결과 카드 내 액션 버튼 기본 스타일 - 강력한 우선순위 적용 */
.blog-result-card .action-btn {
    background: transparent !important;
    border: none !important;
    padding: 9.6px 14.4px !important; /* 20% 증가 */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 9.6px !important; /* 20% 증가 */
    border-radius: 7.2px !important; /* 20% 증가 */
}

.blog-result-card .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 기본 상태 - 모든 아이콘과 텍스트를 회색으로 강제 설정 */
.blog-result-card .action-btn .action-icon {
    width: 28.8px !important; /* 20% 증가 */
    height: 28.8px !important; /* 20% 증가 */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    background-color: #B3B3B3 !important; /* 기본값: 연한 그레이 강제 적용 */
}

.blog-result-card .action-btn .action-icon i {
    font-size: 14.4px !important; /* 20% 증가 */
    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;
    color: white !important;
}

.blog-result-card .action-btn .action-text {
    font-size: 16.8px !important; /* 20% 증가 */
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    color: #B3B3B3 !important; /* 기본값: 연한 그레이 강제 적용 */
}

/* 각 버튼별 기본 상태 강제 설정 - 더 구체적인 선택자 */
.blog-result-card .action-btn.favorite-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.blog-result-card .action-btn.favorite-btn .action-text {
    color: #B3B3B3 !important;
}

.blog-result-card .action-btn.copy-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.blog-result-card .action-btn.copy-btn .action-text {
    color: #B3B3B3 !important;
}

.blog-result-card .action-btn.edit-request-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.blog-result-card .action-btn.edit-request-btn .action-text {
    color: #B3B3B3 !important;
}

/* 호버 및 활성화 시 액션 버튼 색상 변경 - autohtml-project (39) 참고 디자인 적용 */
.blog-result-card:hover .action-btn.save-btn .action-icon,
.blog-result-card.active .action-btn.save-btn .action-icon {
background-color: #c7016c !important; /* 마젠타/핑크 - 저장 */
}

.blog-result-card:hover .action-btn.save-btn .action-text,
.blog-result-card.active .action-btn.save-btn .action-text {
    color: #c7016c !important; /* 마젠타/핑크 */
}

.blog-result-card:hover .action-btn.favorite-btn .action-icon,
.blog-result-card.active .action-btn.favorite-btn .action-icon {
    background-color: #f59e0b !important; /* 노란색 - 찜 */
}

.blog-result-card:hover .action-btn.favorite-btn .action-text,
.blog-result-card.active .action-btn.favorite-btn .action-text {
    color: #f59e0b !important; /* 노란색 */
}

.blog-result-card:hover .action-btn.copy-btn .action-icon,
.blog-result-card.active .action-btn.copy-btn .action-icon {
    background-color: #686868 !important; /* 그레이 - 복사 */
}

.blog-result-card:hover .action-btn.copy-btn .action-text,
.blog-result-card.active .action-btn.copy-btn .action-text {
    color: #686868 !important; /* 그레이 */
}

.blog-result-card:hover .action-btn.edit-request-btn .action-icon,
.blog-result-card.active .action-btn.edit-request-btn .action-icon {
    background-color: #0099E2 !important; /* 블루 - 본문 작성/수정 요청 */
}

.blog-result-card:hover .action-btn.edit-request-btn .action-text,
.blog-result-card.active .action-btn.edit-request-btn .action-text {
    color: #0099E2 !important; /* 블루 */
}

/* 유튜브 결과 카드 호버 효과 */
.youtube-result-card {
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 10px 0;
}

.youtube-result-card:hover,
.youtube-result-card.active {
    border-color: rgba(176, 15, 15, 1) !important;
    border-width: 2px !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 유튜브 결과 카드 내 액션 버튼 기본 스타일 */
.youtube-result-card .action-btn {
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 6px !important;
}

.youtube-result-card .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.youtube-result-card .action-btn .action-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    background-color: #B3B3B3 !important;
}

.youtube-result-card .action-btn .action-icon i {
    font-size: 12px !important;
    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;
    color: white !important;
}

.youtube-result-card .action-btn .action-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    color: #B3B3B3 !important;
}

/* 유튜브 호버 및 활성화 시 액션 버튼 색상 변경 */
.youtube-result-card:hover .action-btn.favorite-btn .action-icon,
.youtube-result-card.active .action-btn.favorite-btn .action-icon {
    background-color: #f59e0b !important; /* 노란색 */
}

.youtube-result-card:hover .action-btn.favorite-btn .action-text,
.youtube-result-card.active .action-btn.favorite-btn .action-text {
    color: #f59e0b !important; /* 노란색 */
}

.youtube-result-card:hover .action-btn.copy-btn .action-icon,
.youtube-result-card.active .action-btn.copy-btn .action-icon {
    background-color: #6b7280 !important; /* 그레이 */
}

.youtube-result-card:hover .action-btn.copy-btn .action-text,
.youtube-result-card.active .action-btn.copy-btn .action-text {
    color: #6b7280 !important; /* 그레이 */
}

.youtube-result-card:hover .action-btn.edit-request-btn .action-icon,
.youtube-result-card.active .action-btn.edit-request-btn .action-icon {
    background-color: #0099E2 !important; /* 파란색 */
}

.youtube-result-card:hover .action-btn.edit-request-btn .action-text,
.youtube-result-card.active .action-btn.edit-request-btn .action-text {
    color: #0099E2 !important; /* 파란색 */
}

/* 인스타그램 결과 카드 호버 효과 */
.instagram-result-card {
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 10px 0;
    background-color: #ffffff !important;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.instagram-result-card:hover,
.instagram-result-card.active,
#detailModal .instagram-result-card:hover,
#detailModal .instagram-result-card.active,
#savedDetailModal .instagram-result-card:hover,
#savedDetailModal .instagram-result-card.active {
    border-color: rgba(185, 12, 198, 1) !important;
    border-width: 2px !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* 인스타그램 결과 카드 내 액션 버튼 기본 스타일 */
.instagram-result-card .action-btn,
#detailModal .instagram-result-card .action-btn,
#savedDetailModal .instagram-result-card .action-btn {
    background: transparent !important;
    border: none !important;
    padding: 9.6px 14.4px !important; /* 20% 증가 */
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 9.6px !important; /* 20% 증가 */
    border-radius: 7.2px !important; /* 20% 증가 */
}

.instagram-result-card .action-btn:hover,
#detailModal .instagram-result-card .action-btn:hover,
#savedDetailModal .instagram-result-card .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 기본 상태 - 모든 아이콘과 텍스트를 회색으로 강제 설정 */
.instagram-result-card .action-btn .action-icon,
#detailModal .instagram-result-card .action-btn .action-icon,
#savedDetailModal .instagram-result-card .action-btn .action-icon {
    width: 28.8px !important; /* 20% 증가 */
    height: 28.8px !important; /* 20% 증가 */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    background-color: #B3B3B3 !important; /* 기본값: 연한 그레이 강제 적용 */
}

.instagram-result-card .action-btn .action-icon i,
#detailModal .instagram-result-card .action-btn .action-icon i,
#savedDetailModal .instagram-result-card .action-btn .action-icon i {
    font-size: 14.4px !important; /* 20% 증가 */
    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;
    color: white !important;
}

.instagram-result-card .action-btn .action-text,
#detailModal .instagram-result-card .action-btn .action-text,
#savedDetailModal .instagram-result-card .action-btn .action-text {
    font-size: 16.8px !important; /* 20% 증가 */
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    color: #B3B3B3 !important; /* 기본값: 연한 그레이 강제 적용 */
}

/* 각 버튼별 기본 상태 강제 설정 (모달 내부 포함) */
.instagram-result-card .action-btn.favorite-btn .action-icon,
#detailModal .instagram-result-card .action-btn.favorite-btn .action-icon,
#savedDetailModal .instagram-result-card .action-btn.favorite-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.instagram-result-card .action-btn.favorite-btn .action-text,
#detailModal .instagram-result-card .action-btn.favorite-btn .action-text,
#savedDetailModal .instagram-result-card .action-btn.favorite-btn .action-text {
    color: #B3B3B3 !important;
}

.instagram-result-card .action-btn.copy-btn .action-icon,
#detailModal .instagram-result-card .action-btn.copy-btn .action-icon,
#savedDetailModal .instagram-result-card .action-btn.copy-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.instagram-result-card .action-btn.copy-btn .action-text,
#detailModal .instagram-result-card .action-btn.copy-btn .action-text,
#savedDetailModal .instagram-result-card .action-btn.copy-btn .action-text {
    color: #B3B3B3 !important;
}

.instagram-result-card .action-btn.edit-request-btn .action-icon,
#detailModal .instagram-result-card .action-btn.edit-request-btn .action-icon,
#savedDetailModal .instagram-result-card .action-btn.edit-request-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.instagram-result-card .action-btn.edit-request-btn .action-text,
#detailModal .instagram-result-card .action-btn.edit-request-btn .action-text,
#savedDetailModal .instagram-result-card .action-btn.edit-request-btn .action-text {
    color: #B3B3B3 !important;
}

/* 인스타그램 호버 및 활성화 시 액션 버튼 색상 변경 */
.instagram-result-card:hover .action-btn.favorite-btn .action-icon,
.instagram-result-card.active .action-btn.favorite-btn .action-icon,
#detailModal .instagram-result-card:hover .action-btn.favorite-btn .action-icon,
#detailModal .instagram-result-card.active .action-btn.favorite-btn .action-icon,
#savedDetailModal .instagram-result-card:hover .action-btn.favorite-btn .action-icon,
#savedDetailModal .instagram-result-card.active .action-btn.favorite-btn .action-icon {
    background-color: #f59e0b !important; /* 노란색 */
}

.instagram-result-card:hover .action-btn.favorite-btn .action-text,
.instagram-result-card.active .action-btn.favorite-btn .action-text,
#detailModal .instagram-result-card:hover .action-btn.favorite-btn .action-text,
#detailModal .instagram-result-card.active .action-btn.favorite-btn .action-text,
#savedDetailModal .instagram-result-card:hover .action-btn.favorite-btn .action-text,
#savedDetailModal .instagram-result-card.active .action-btn.favorite-btn .action-text {
    color: #f59e0b !important; /* 노란색 */
}

.instagram-result-card:hover .action-btn.copy-btn .action-icon,
.instagram-result-card.active .action-btn.copy-btn .action-icon,
#detailModal .instagram-result-card:hover .action-btn.copy-btn .action-icon,
#detailModal .instagram-result-card.active .action-btn.copy-btn .action-icon,
#savedDetailModal .instagram-result-card:hover .action-btn.copy-btn .action-icon,
#savedDetailModal .instagram-result-card.active .action-btn.copy-btn .action-icon {
    background-color: #6b7280 !important; /* 그레이 */
}

.instagram-result-card:hover .action-btn.copy-btn .action-text,
.instagram-result-card.active .action-btn.copy-btn .action-text,
#detailModal .instagram-result-card:hover .action-btn.copy-btn .action-text,
#detailModal .instagram-result-card.active .action-btn.copy-btn .action-text,
#savedDetailModal .instagram-result-card:hover .action-btn.copy-btn .action-text,
#savedDetailModal .instagram-result-card.active .action-btn.copy-btn .action-text {
    color: #6b7280 !important; /* 그레이 */
}

.instagram-result-card:hover .action-btn.edit-request-btn .action-icon,
.instagram-result-card.active .action-btn.edit-request-btn .action-icon,
#detailModal .instagram-result-card:hover .action-btn.edit-request-btn .action-icon,
#detailModal .instagram-result-card.active .action-btn.edit-request-btn .action-icon,
#savedDetailModal .instagram-result-card:hover .action-btn.edit-request-btn .action-icon,
#savedDetailModal .instagram-result-card.active .action-btn.edit-request-btn .action-icon {
    background-color: #0099E2 !important; /* 파란색 */
}

.instagram-result-card:hover .action-btn.edit-request-btn .action-text,
.instagram-result-card.active .action-btn.edit-request-btn .action-text,
#detailModal .instagram-result-card:hover .action-btn.edit-request-btn .action-text,
#detailModal .instagram-result-card.active .action-btn.edit-request-btn .action-text,
#savedDetailModal .instagram-result-card:hover .action-btn.edit-request-btn .action-text,
#savedDetailModal .instagram-result-card.active .action-btn.edit-request-btn .action-text {
    color: #0099E2 !important; /* 파란색 */
}

/* 인스타그램 카드뉴스 섹션 - 호버 효과 제거 (바깥 카드만 보더 표시) */
.instagram-result-card .bg-gray-50,
#detailModal .instagram-result-card .bg-gray-50,
#savedDetailModal .instagram-result-card .bg-gray-50 {
    transition: none !important;
    border-radius: 0.5rem;
    cursor: default !important;
    border: none !important;
    box-shadow: none !important;
}

/* 안쪽 섹션에는 호버 효과 적용 안 함 */
.instagram-result-card .bg-gray-50:hover,
.instagram-result-card .bg-gray-50.active,
#detailModal .instagram-result-card .bg-gray-50:hover,
#detailModal .instagram-result-card .bg-gray-50.active,
#savedDetailModal .instagram-result-card .bg-gray-50:hover,
#savedDetailModal .instagram-result-card .bg-gray-50.active {
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 다른 CSS 규칙을 덮어쓰는 강력한 선택자 */
.bg-white .copy-btn i,
.bg-white .favorite-btn i,
.bg-white .edit-request-btn i {
    background: transparent !important;
}

/* 블로그 결과 카드 내에서만 적용되는 강력한 규칙 */
.blog-result-card .action-btn .action-icon {
    background-color: #B3B3B3 !important;
}

.blog-result-card .action-btn .action-icon i {
    background: transparent !important;
    color: white !important;
}

.blog-result-card .action-btn .action-text {
    color: #B3B3B3 !important;
}

/* 호버 시 색상 변경 - 최고 우선순위 */
.blog-result-card:hover .action-btn.favorite-btn .action-icon {
    background-color: #f59e0b !important; /* 노란색 */
}

.blog-result-card:hover .action-btn.favorite-btn .action-text {
    color: #f59e0b !important; /* 노란색 */
}

.blog-result-card:hover .action-btn.copy-btn .action-icon {
    background-color: #6b7280 !important;
}

.blog-result-card:hover .action-btn.copy-btn .action-text {
    color: #6b7280 !important;
}

.blog-result-card:hover .action-btn.edit-request-btn .action-icon {
    background-color: #0099E2 !important;
}

.blog-result-card:hover .action-btn.edit-request-btn .action-text {
    color: #0099E2 !important;
}

/* ============================================
   결과 카드 헤더 스타일
   ============================================ */

/* 결과 번호 텍스트 줄바꿈 방지 */
.blog-result-card h3,
.youtube-result-card h3,
.instagram-result-card h3 {
    white-space: nowrap !important;
}

/* ============================================
   보관함 상세보기 모달 스타일
   ============================================ */

/* 모바일 상세보기 모달 내 모든 텍스트 크기 통일 */
@media (max-width: 768px) {
    #savedDetailModal p,
    #savedDetailModal span,
    #savedDetailModal div,
    #savedDetailModal h4,
    #savedDetailModal h5,
    #savedDetailModal label,
    #savedDetailModal input,
    #savedDetailModal textarea,
    #savedDetailModal .text-gray-700,
    #savedDetailModal .text-sm,
    #savedDetailModal [style*="font-size"] {
        font-size: 1rem !important;
    }
    
    /* 에디터 내용도 1rem */
    #savedDetailModal .blog-editor-content,
    #savedDetailModal #modalContent {
        font-size: 1rem !important;
    }
    
    /* 헤더 제목은 제외 (모달 타이틀) */
    #savedDetailModal #savedModalTitle {
        font-size: 1.125rem !important; /* 18px */
    }
}

/* 모달 기본 액션 버튼 스타일 */
#savedDetailModal .action-btn {
    background: transparent !important;
    border: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 6px !important;
}

#savedDetailModal .action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

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

#savedDetailModal .action-btn .action-icon i {
    font-size: 12px !important;
    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;
    color: white !important;
}

#savedDetailModal .action-btn .action-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    color: #B3B3B3 !important;
}

/* 모달 호버 시 액션 버튼 색상 변경 */
#savedDetailModal .action-btn.favorite-btn:hover .action-icon,
#savedDetailModal .action-btn.favorite-btn.active .action-icon {
    background-color: #f59e0b !important; /* 노란색 - 찜 */
}

#savedDetailModal .action-btn.favorite-btn:hover .action-text,
#savedDetailModal .action-btn.favorite-btn.active .action-text {
    color: #f59e0b !important;
}

#savedDetailModal .action-btn.copy-btn:hover .action-icon,
#savedDetailModal .action-btn.copy-btn.active .action-icon {
    background-color: #686868 !important; /* 그레이 - 복사 */
}

#savedDetailModal .action-btn.copy-btn:hover .action-text,
#savedDetailModal .action-btn.copy-btn.active .action-text {
    color: #686868 !important;
}

#savedDetailModal .action-btn.edit-request-btn:hover .action-icon,
#savedDetailModal .action-btn.edit-request-btn.active .action-icon {
    background-color: #0099E2 !important; /* 블루 - 수정 요청/대본 작성 */
}

#savedDetailModal .action-btn.edit-request-btn:hover .action-text,
#savedDetailModal .action-btn.edit-request-btn.active .action-text {
    color: #0099E2 !important;
}