/* Solution Pages - Generated Images CSS */
/* 생성된 히어로 배경 이미지 및 카드 아이콘 적용 */

/* ============================================
   히어로 배경 이미지 설정
   ============================================ */

/* 솔루션1 (시내/시외버스) - 녹색 테마 */
.solution-hero.solution1-default-bg {
    background: url('/images/solutions/solution1-hero-bg.webp') center/cover no-repeat,
                linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

/* 솔루션2 (전세버스) - 오렌지 테마 */
.solution-hero.solution2-default-bg,
.charter-hero.solution2-default-bg {
    background: url('/images/solutions/solution2-hero-bg.webp') center/cover no-repeat,
                linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* 솔루션3 (장애인택시) - 파란색 테마 */
.solution-hero.solution3-default-bg {
    background: url('/images/solutions/solution3-hero-bg.webp') center/cover no-repeat,
                linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

/* ============================================
   카드 아이콘 이미지 스타일
   ============================================ */

/* 이미지 아이콘 컨테이너 */
.management-icon.img-icon,
.module-icon.img-icon {
    background: transparent !important;
    box-shadow: none !important;
}

.management-icon.img-icon img,
.module-icon.img-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

/* 아이콘 이미지 개별 클래스 */
.icon-img-building { background: url('/images/icons/solution/icon-building.png') center/contain no-repeat !important; }
.icon-img-route { background: url('/images/icons/solution/icon-route.png') center/contain no-repeat !important; }
.icon-img-bus { background: url('/images/icons/solution/icon-bus.png') center/contain no-repeat !important; }
.icon-img-dispatch { background: url('/images/icons/solution/icon-dispatch.png') center/contain no-repeat !important; }
.icon-img-attendance { background: url('/images/icons/solution/icon-attendance.png') center/contain no-repeat !important; }
.icon-img-stats { background: url('/images/icons/solution/icon-stats.png') center/contain no-repeat !important; }
.icon-img-calculator { background: url('/images/icons/solution/icon-calculator.png') center/contain no-repeat !important; }
.icon-img-bonus { background: url('/images/icons/solution/icon-bonus.png') center/contain no-repeat !important; }
.icon-img-invoice { background: url('/images/icons/solution/icon-invoice.png') center/contain no-repeat !important; }
.icon-img-money { background: url('/images/icons/solution/icon-money.png') center/contain no-repeat !important; }
.icon-img-warehouse { background: url('/images/icons/solution/icon-warehouse.png') center/contain no-repeat !important; }
.icon-img-fuel { background: url('/images/icons/solution/icon-fuel.png') center/contain no-repeat !important; }
.icon-img-ledger { background: url('/images/icons/solution/icon-ledger.png') center/contain no-repeat !important; }
.icon-img-receipt { background: url('/images/icons/solution/icon-receipt.png') center/contain no-repeat !important; }
.icon-img-wrench { background: url('/images/icons/solution/icon-wrench.png') center/contain no-repeat !important; }
.icon-img-shield { background: url('/images/icons/solution/icon-shield.png') center/contain no-repeat !important; }

/* 이미지 아이콘이 적용될 때 기존 FontAwesome 아이콘 숨기기 */
.management-icon.use-img-icon i,
.module-icon.use-img-icon i {
    display: none;
}

.management-icon.use-img-icon,
.module-icon.use-img-icon {
    background-size: 70% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #10b981 !important;
}

/* 솔루션2 (전세버스) 아이콘 색상 */
.charter-content .management-icon.use-img-icon,
.solution2-page .management-icon.use-img-icon {
    background-color: #f59e0b !important;
}

/* 솔루션3 (장애인택시) 아이콘 색상 */
.solution3-page .management-icon.use-img-icon,
.solution3-hero ~ .tab-content .management-icon.use-img-icon {
    background-color: #1e40af !important;
}

/* ============================================
   반응형 디자인
   ============================================ */

@media (max-width: 768px) {
    .management-icon.use-img-icon,
    .module-icon.use-img-icon {
        width: 48px;
        height: 48px;
    }
}