/* 보험 플랫폼 전용 스타일 */

/* 🎨 헤더 공간 확보 및 기본 폰트 설정 */
.insurance-platform-page {
    /* 폰트 설정 */
    font-family: 'Pretendard', sans-serif;
}

/* 성능 최적화 */
.insurance-platform-page {
    /* GPU 가속 활성화 */
    transform: translateZ(0);
    /* 레이어 분리로 리페인팅 최적화 */
    will-change: scroll-position;
}

/* 글래스모피즘 최적화 */
.insurance-platform-page .glass-card,
.insurance-platform-page .category-card,
.insurance-platform-page .service-item {
    /* 하드웨어 가속 */
    transform: translateZ(0);
    /* 백페이스 숨김으로 깜빡임 방지 */
    backface-visibility: hidden;
    /* 부드러운 렌더링 */
    -webkit-font-smoothing: antialiased;
}

/* 애니메이션 최적화 */
.insurance-platform-page .service-item {
    /* GPU 가속 속성만 사용 */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* 레이어 승격 */
    will-change: transform;
}

/* 카테고리별 아이콘 색상 */
.insurance-platform-page .category-card[data-category="fc"] .category-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.insurance-platform-page .category-card[data-category="ga"] .category-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* 카테고리별 배지 색상 */
.insurance-platform-page .category-card[data-category="fc"] .category-badge-count {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.insurance-platform-page .category-card[data-category="ga"] .category-badge-count {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* 서비스 아이템 좌측 보더 색상 */
.insurance-platform-page .service-item[data-service*="fc"] {
    border-left: 4px solid #f59e0b;
}

.insurance-platform-page .service-item[data-service*="ga"] {
    border-left: 4px solid #3b82f6;
}

/* 서비스 아이콘 배경색 */
.insurance-platform-page .service-item[data-service*="fc"] .service-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.insurance-platform-page .service-item[data-service*="ga"] .service-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* 개별 서비스 아이콘 색상 */
.insurance-platform-page .service-item[data-service="fc_longterm"] .service-icon,
.insurance-platform-page .service-item[data-service="fc_car"] .service-icon,
.insurance-platform-page .service-item[data-service="fc_code"] .service-icon,
.insurance-platform-page .service-item[data-service="fc_portal"] .service-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.insurance-platform-page .service-item[data-service="ga_integrated"] .service-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

/* 서비스 그룹 표시/숨김 제어 */
.insurance-platform-page .service-group {
    display: none !important;
    max-width: 1000px;
    margin: 0 auto;
}

.insurance-platform-page .service-group.active {
    display: block !important;
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 아이콘 텍스트 색상 확실히 */
.insurance-platform-page .service-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insurance-platform-page .service-icon i {
    color: #ffffff !important;
    font-size: 16px;
    display: block;
}

/* 서비스 그리드 레이아웃 - 고정 크기 */
.insurance-platform-page .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: center;
}

/* FC업무 서비스 그리드 (4개) */
.insurance-platform-page #services-fc .service-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    max-width: 900px;
}

/* GA업무 서비스 그리드 (1개) - 중앙 정렬 */
.insurance-platform-page #services-ga .service-grid {
    grid-template-columns: minmax(280px, 400px);
    max-width: 400px;
    justify-content: center;
}

/* 서비스 아이템 고정 크기 */
.insurance-platform-page .service-item {
    min-height: 80px;
    max-width: 400px;
    width: 100%;
    justify-self: center;
}

/* 호버 효과 개선 - GPU 가속 최적화 */
.insurance-platform-page .service-item:hover {
    transform: translateX(8px) translateZ(0);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 외부 링크 표시 */
.insurance-platform-page .service-item .service-arrow .fa-external-link-alt {
    color: #6b7280;
    font-size: 14px;
}

/* 성능 최적화 - 구형 브라우저 대응 */
@supports not (backdrop-filter: blur(10px)) {
    .insurance-platform-page .glass-card,
    .insurance-platform-page .category-card,
    .insurance-platform-page .service-item {
        /* 글래스모피즘 미지원시 대체 스타일 */
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* 카테고리 카드 레이아웃 - 2개 아이템 중앙 정렬 */
.insurance-platform-page .category-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* 반응형 개선 */
@media (max-width: 1024px) {
    .insurance-platform-page .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 14px;
    }
    
    .insurance-platform-page #services-fc .service-grid,
    .insurance-platform-page #services-ga .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        max-width: 100%;
    }
    
    .insurance-platform-page .service-item {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .insurance-platform-page {
        padding-top: 100px;
    }
    
    .insurance-platform-page .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 12px;
    }
    
    .insurance-platform-page #services-fc .service-grid,
    .insurance-platform-page #services-ga .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        max-width: 100%;
    }
    
    .insurance-platform-page .service-item {
        transition: transform 0.15s ease;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .insurance-platform-page {
        padding-top: 50px;
    }
    
    .insurance-platform-page .category-cards {
        gap: 12px;
        max-width: 100%;
    }
    
    .insurance-platform-page .service-grid,
    .insurance-platform-page #services-fc .service-grid,
    .insurance-platform-page #services-ga .service-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
    }
    
    .insurance-platform-page .service-item {
        max-width: 100%;
        min-height: 70px;
    }
    
    .insurance-platform-page .service-item:hover {
        transform: translateX(4px);
    }
}

/* 저전력 모드 감지 및 최적화 */
@media (prefers-reduced-motion: reduce) {
    .insurance-platform-page .service-item {
        transition: none;
    }
    
    .insurance-platform-page .service-item:hover {
        transform: none;
    }
}