/* ========================================
   DA REACTION - 다중 스타일 CSS
   각 스타일을 class로 구분하여 적용
======================================== */

/* ===========================================
   1. DISCORD 스타일 (.reaction-style-discord)
=========================================== */
.reaction-style-discord .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 8px 0 !important;
}

.reaction-style-discord .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    background: #313338 !important;
    border: 1px solid #41434a !important;
    color: #dbdee1 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.reaction-style-discord .da-reaction__badge:hover {
    background: #41434a !important;
    border-color: #6d6f78 !important;
}

.reaction-style-discord .da-reaction__badge--choose {
    background: #5865f2 !important;
    border-color: #5865f2 !important;
    color: white !important;
}

.reaction-style-discord .da-reaction__button {
    width: 24px !important;
    height: 24px !important;
    border-radius: 12px !important;
    background: #313338 !important;
    border: 1px solid #41434a !important;
    color: #b5bac1 !important;
    font-size: 14px !important;
}

/* ===========================================
   2. SLACK 스타일 (.reaction-style-slack)
=========================================== */
.reaction-style-slack .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 !important;
}

.reaction-style-slack .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    background: #f8f8f8 !important;
    border: 1px solid #e1e1e1 !important;
    color: #1d1c1d !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reaction-style-slack .da-reaction__badge:hover {
    background: #e8e8e8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.reaction-style-slack .da-reaction__badge--choose {
    background: #007a5a !important;
    border-color: #007a5a !important;
    color: white !important;
}

.reaction-style-slack .da-reaction__button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    background: #f8f8f8 !important;
    border: 1px solid #e1e1e1 !important;
    color: #696969 !important;
}

/* ===========================================
   3. GITHUB 스타일 (.reaction-style-github)
=========================================== */
.reaction-style-github .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

.reaction-style-github .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    background: #f6f8fa !important;
    border: 1px solid #d1d9e0 !important;
    color: #24292f !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.reaction-style-github .da-reaction__badge:hover {
    background: #f3f4f6 !important;
    border-color: #afb8c1 !important;
}

.reaction-style-github .da-reaction__badge--choose {
    background: #dbeafe !important;
    border-color: #1f6feb !important;
    color: #0969da !important;
}

.reaction-style-github .da-reaction__button {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    background: #f6f8fa !important;
    border: 1px solid #d1d9e0 !important;
    color: #656d76 !important;
}

/* ===========================================
   4. LINKEDIN 스타일 (.reaction-style-linkedin)
=========================================== */
.reaction-style-linkedin .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 !important;
}

.reaction-style-linkedin .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.reaction-style-linkedin .da-reaction__badge:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.reaction-style-linkedin .da-reaction__badge--choose {
    background: linear-gradient(135deg, #0a66c2 0%, #004182 100%) !important;
    border-color: #0a66c2 !important;
    color: white !important;
}

.reaction-style-linkedin .da-reaction__button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
}

/* ===========================================
   5. NOTION 스타일 (.reaction-style-notion)
=========================================== */
.reaction-style-notion .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 !important;
}

.reaction-style-notion .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    background: rgba(55, 53, 47, 0.06) !important;
    border: 1px solid rgba(55, 53, 47, 0.16) !important;
    color: rgb(55, 53, 47) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.reaction-style-notion .da-reaction__badge:hover {
    background: rgba(55, 53, 47, 0.12) !important;
    border-color: rgba(55, 53, 47, 0.24) !important;
}

.reaction-style-notion .da-reaction__badge--choose {
    background: rgba(46, 170, 220, 0.15) !important;
    border-color: rgba(46, 170, 220, 0.4) !important;
    color: rgb(46, 170, 220) !important;
}

.reaction-style-notion .da-reaction__button {
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    background: rgba(55, 53, 47, 0.06) !important;
    border: 1px solid rgba(55, 53, 47, 0.16) !important;
    color: rgba(55, 53, 47, 0.65) !important;
}

/* ===========================================
   6. KAKAO 스타일 (.reaction-style-kakao)
=========================================== */
.reaction-style-kakao .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 8px 0 !important;
}

.reaction-style-kakao .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    background: #fee500 !important;
    border: 1px solid #fee500 !important;
    color: #3c1e1e !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.reaction-style-kakao .da-reaction__badge:hover {
    background: #fdd835 !important;
    transform: scale(1.05) !important;
}

.reaction-style-kakao .da-reaction__badge--choose {
    background: #f57c00 !important;
    border-color: #f57c00 !important;
    color: white !important;
}

.reaction-style-kakao .da-reaction__button {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #fee500 !important;
    border: 1px solid #fee500 !important;
    color: #3c1e1e !important;
}

/* ===========================================
   7. INSTAGRAM 스타일 (.reaction-style-instagram)
=========================================== */
.reaction-style-instagram .da-reaction {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 !important;
}

.reaction-style-instagram .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border: none !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.reaction-style-instagram .da-reaction__badge:hover {
    transform: scale(1.1) translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(240, 148, 51, 0.4) !important;
}

.reaction-style-instagram .da-reaction__badge--choose {
    background: linear-gradient(45deg, #405de6 0%, #5851db 25%, #833ab4 50%, #c13584 75%, #e1306c 100%) !important;
    box-shadow: 0 2px 10px rgba(225, 48, 108, 0.3) !important;
}

.reaction-style-instagram .da-reaction__button {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    border: none !important;
    color: white !important;
}

/* ===========================================
   공통 스타일 (모든 테마에 적용)
=========================================== */
.da-reaction__emoji {
    font-size: 14px !important;
    line-height: 1 !important;
}

.da-reaction__count {
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .da-reaction {
        gap: 4px !important;
    }
    
    .da-reaction__badge {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }
    
    .da-reaction__button {
        width: 24px !important;
        height: 24px !important;
    }
    
    .da-reaction__emoji {
        font-size: 12px !important;
    }
}



/* ========================================
   리액션 팝업 스타일 - 5가지 버전
   popup-style-instagram-facebook
   popup-style-facebook, popup-style-instagram, 
   popup-style-kakao, popup-style-sms
======================================== */

/* ========================================
   팝업 스타일 - 인스타그램 + 페이스북 (기존 스타일)
   0. INSTASGRAM + FACEBOOK 스타일 (.popup-style-instagram-facebook)
======================================== */

/* 리액션 팝업 컨테이너 */
.popup-style-instagram-facebook .da-reaction-popover {
    position: absolute !important;
    background: #ffffff !important; /* 페이스북 스타일 흰색 배경 */
    border: 1px solid #e4e6ea !important; /* 페이스북 스타일 테두리 */
    border-radius: 50px !important; /* 인스타그램 스타일 매우 둥근 모서리 */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important; /* 부드러운 그림자 */
    padding: 8px 16px !important; /* 인스타그램 스타일 패딩 */
    margin: 8px 0 !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    z-index: 1000 !important;
}

/* 리액션 컨테이너 */
.popup-style-instagram-facebook .da-reaction-popover .da-reaction {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important; /* 인스타그램 스타일 간격 */
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* 개별 리액션 이모지 */
.popup-style-instagram-facebook .da-reaction-popover .da-reaction__badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; /* 인스타그램 크기 */
    height: 40px !important;
    border-radius: 50% !important; /* 완전한 원형 */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important; /* 부드러운 애니메이션 */
    position: relative !important;
}

/* 리액션 이모지 호버 효과 */
.popup-style-instagram-facebook .da-reaction-popover .da-reaction__badge:hover {
    transform: scale(1.3) !important; /* 인스타그램 스타일 확대 */
    background: rgba(0, 0, 0, 0.05) !important;
    z-index: 10 !important;
}

/* 이모지 크기 */
.popup-style-instagram-facebook .da-reaction-popover .da-reaction__emoji {
    font-size: 28px !important; /* 인스타그램 크기 */
    line-height: 1 !important;
}

/* 이미지 이모티콘 */
.popup-style-instagram-facebook .da-reaction-popover .da-reaction__badge img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 0 !important;
}

/* 팝업 상단 텍스트 (인스타그램 스타일) */
.popup-style-instagram-facebook .da-reaction-popover::before {
    content: "공감을 맞춤 설정하려면 + 를 누르세요" !important;
    position: absolute !important;
    top: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

/* 팝업 열릴 때 상단 텍스트 표시 */
.popup-style-instagram-facebook .da-reaction-popover[aria-modal="true"]::before {
    opacity: 1 !important;
}



/* ===========================================
   1. FACEBOOK 스타일 (.popup-style-facebook)
=========================================== */
.popup-style-facebook .da-reaction-popover {
    background: #ffffff !important;
    border: 1px solid #e4e6ea !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 16px !important;
    margin: 8px 0 !important;
}

.popup-style-facebook .da-reaction-popover .da-reaction {
    gap: 12px !important;
}

.popup-style-facebook .da-reaction-popover .da-reaction__badge {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: transform 0.15s ease !important;
}

.popup-style-facebook .da-reaction-popover .da-reaction__badge:hover {
    transform: scale(1.3) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

.popup-style-facebook .da-reaction-popover .da-reaction__emoji {
    font-size: 28px !important;
}

/* Facebook + 버튼 */
.popup-style-facebook .da-reaction-popover .da-reaction__badge.more-button {
    background: #f0f2f5 !important;
    color: #65676b !important;
    font-weight: bold !important;
    font-size: 20px !important;
}

.popup-style-facebook .da-reaction-popover .da-reaction__badge.more-button:hover {
    background: #e4e6ea !important;
}

/* ===========================================
   2. INSTAGRAM 스타일 (.popup-style-instagram)
=========================================== */
.popup-style-instagram .da-reaction-popover {
    background: rgba(38, 38, 38, 0.95) !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
    padding: 8px 16px !important;
    margin: 8px 0 !important;
    backdrop-filter: blur(10px) !important;
}

.popup-style-instagram .da-reaction-popover .da-reaction {
    gap: 8px !important;
}

.popup-style-instagram .da-reaction-popover .da-reaction__badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: transform 0.2s ease !important;
}

.popup-style-instagram .da-reaction-popover .da-reaction__badge:hover {
    transform: scale(1.4) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.popup-style-instagram .da-reaction-popover .da-reaction__emoji {
    font-size: 32px !important;
}

/* Instagram + 버튼 */
.popup-style-instagram .da-reaction-popover .da-reaction__badge.more-button {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 300 !important;
    font-size: 24px !important;
}

.popup-style-instagram .da-reaction-popover .da-reaction__badge.more-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Instagram 상단 텍스트 */
.popup-style-instagram .da-reaction-popover::before {
    content: "공감을 맞춤 설정하려면 + 를 누르세요" !important;
    position: absolute !important;
    top: -35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.popup-style-instagram .da-reaction-popover[aria-modal="true"]::before {
    opacity: 1 !important;
}

/* ===========================================
   3. KAKAO 스타일 (.popup-style-kakao)
=========================================== */
.popup-style-kakao .da-reaction-popover {
    background: rgba(50, 50, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    padding: 12px 16px !important;
    margin: 8px 0 !important;
    backdrop-filter: blur(15px) !important;
}

.popup-style-kakao .da-reaction-popover .da-reaction {
    gap: 10px !important;
}

.popup-style-kakao .da-reaction-popover .da-reaction__badge {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

.popup-style-kakao .da-reaction-popover .da-reaction__badge:hover {
    transform: scale(1.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.popup-style-kakao .da-reaction-popover .da-reaction__emoji {
    font-size: 30px !important;
}

/* Kakao + 버튼 */
.popup-style-kakao .da-reaction-popover .da-reaction__badge.more-button {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 300 !important;
    font-size: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.popup-style-kakao .da-reaction-popover .da-reaction__badge.more-button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ===========================================
   4. SMS 스타일 (.popup-style-sms)
=========================================== */
.popup-style-sms .da-reaction-popover {
    background: rgba(45, 45, 45, 0.98) !important;
    border: none !important;
    border-radius: 25px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
    padding: 10px 20px !important;
    margin: 8px 0 !important;
    backdrop-filter: blur(20px) !important;
}

.popup-style-sms .da-reaction-popover .da-reaction {
    gap: 14px !important;
}

.popup-style-sms .da-reaction-popover .da-reaction__badge {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

.popup-style-sms .da-reaction-popover .da-reaction__badge:hover {
    transform: scale(1.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.popup-style-sms .da-reaction-popover .da-reaction__emoji {
    font-size: 26px !important;
}

/* SMS + 버튼 */
.popup-style-sms .da-reaction-popover .da-reaction__badge.more-button {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.popup-style-sms .da-reaction-popover .da-reaction__badge.more-button:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.1) !important;
}

/* ===========================================
   공통 + 버튼 기본 설정
=========================================== */
.da-reaction-popover .da-reaction__badge.more-button::before {
    content: "+" !important;
    font-size: inherit !important;
    line-height: 1 !important;
}

/* ===========================================
   팝업 애니메이션 (모든 스타일 공통)
=========================================== */
.da-reaction-popover {
    animation: popoverFadeIn 0.2s ease-out !important;
}

@keyframes popoverFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ===========================================
   모바일 반응형 (모든 스타일 적용)
=========================================== */
@media (max-width: 768px) {
    .da-reaction-popover {
        padding: 6px 12px !important;
    }
    
    .da-reaction-popover .da-reaction {
        gap: 8px !important;
    }
    
    .da-reaction-popover .da-reaction__badge {
        width: 36px !important;
        height: 36px !important;
    }
    
    .da-reaction-popover .da-reaction__emoji {
        font-size: 24px !important;
    }
}