/* ==========================================
   성장 모듈 전역 UI 스타일 (v2.1.17 - 토탈 프리미엄)
   ========================================== */

/* 1. 토스트 알림 */
.growth-toast-container {
    position: fixed; bottom: 30px; right: 30px; z-index: 2147483647;
    display: flex; flex-direction: column; gap: 15px; pointer-events: none;
}
.growth-toast {
    background: rgba(15, 23, 42, 0.98); color: #fff; padding: 16px 24px; border-radius: 12px;
    font-size: 14px; line-height: 1.6; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transform: translateX(130%); opacity: 0; transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: flex; align-items: center; gap: 14px; backdrop-filter: blur(10px);
    pointer-events: auto; max-width: 340px; border: 1px solid rgba(255,255,255,0.1);
}
.growth-toast.growth-toast-show { transform: translateX(0); opacity: 1; }

/* 2. 가이드 투어 스포트라이트 조명 */
.growth-tour-focus {
    position: relative !important;
    z-index: 999991 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35), 0 0 30px rgba(59, 130, 246, 0.45) !important;
}

/* 3. 캐주얼 캐릭터 툴팁 가이드 */
#growth-tour-tooltip {
    position: absolute; z-index: 2147483647; 
    display: flex; align-items: center;
    pointer-events: auto;
    max-width: 550px;
}
.growth-tour-char {
    flex-shrink: 0; width: 190px; margin-right: -45px; z-index: 2;
    animation: growthCharFloat 2.5s ease-in-out infinite;
}
.growth-tour-char img { width: 100%; height: auto; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.25)); }

.growth-tour-content {
    background: #fff; padding: 28px 34px 28px 45px; border-radius: 28px;
    box-shadow: 0 22px 70px rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.06);
    position: relative; z-index: 1; min-width: 280px; max-width: 400px;
}
.growth-tour-content::before {
    content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 0; height: 0; border-style: solid; border-width: 12px 14px 12px 0;
    border-color: transparent #ffffff transparent transparent;
}
.growth-tour-text { font-size: 16px; color: #0f172a; line-height: 1.8; margin-bottom: 24px; font-weight: 600; }
.growth-tour-nav { display: flex; gap: 10px; }
.growth-tour-btn-skip { background: #eeeeee; color: #686868; border: none; padding: 12px 20px; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; }
.growth-tour-btn-next { flex: 1; background: #3b82f6; color: #fff; border: none; padding: 12px 0; border-radius: 12px; cursor: pointer; font-weight: bold; font-size: 15px; box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4); }

@keyframes growthCharFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 4. 프리미엄 뱃지 축하 팝업 (v2.1.17 보강) */
.growth-badge-popup {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    z-index: 2147483647 !important; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
.growth-badge-popup.active { opacity: 1 !important; pointer-events: auto !important; }

.growth-badge-card {
    background: #fff; width: 340px; border-radius: 28px; padding: 45px 35px;
    text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,0.4);
    transform: translateY(60px) scale(0.9); transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 4px solid #fbd38d; position: relative; overflow: visible;
}
.growth-badge-popup.active .growth-badge-card { transform: translateY(0) scale(1); }

.growth-badge-celebration {
    color: #ed8936; font-weight: 900; font-size: 13px; text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 25px;
}

.growth-badge-img-box {
    width: 140px; height: 140px; margin: 0 auto 30px;
    background: radial-gradient(circle, #fffaf0 0%, #fff 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 15px 30px rgba(237, 137, 54, 0.2);
    position: relative;
}
.growth-badge-img-box::after {
    content: '★'; position: absolute; top: -5px; right: -5px; background: #ed8936; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 32px; font-weight: bold;
}
.growth-badge-img-box img { max-width: 100px; max-height: 100px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15)); }

.growth-badge-title { font-size: 26px; font-weight: 800; color: #1a202c; margin: 0 0 12px; }
.growth-badge-desc { font-size: 15px; color: #4a5568; line-height: 1.6; margin-bottom: 35px; word-break: keep-all; font-weight: 500; }

.growth-badge-reward-box {
    background: #fdf6e3; padding: 14px; border-radius: 16px; border: 1px dashed #d97706;
    margin-bottom: 30px; display: flex; align-items: center; justify-content: center; gap: 10px;
    animation: rewardPulse 1.5s infinite;
}
@keyframes rewardPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

.growth-badge-reward-box .reward-icon { font-size: 20px; }
.growth-badge-reward-box .reward-text { font-size: 14px; color: #92400e; font-weight: 800; }

.growth-badge-close {
    background: #2d3748; color: #fff; border: none; padding: 16px;
    border-radius: 14px; font-weight: 800; cursor: pointer; font-size: 16px;
    width: 100%; transition: all 0.2s ease;
}
.growth-badge-close.has-reward {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4);
}
.growth-badge-close:hover { transform: translateY(-3px); box-shadow: 0 5px 20px rgba(0,0,0,0.3); }