/* ==========================================================================
   Feature Icons Shape Fix - 호환성 좋은 선택자 사용
   각 아이콘에 고유한 형상 패턴 추가
   ========================================================================== */

/* 기본 아이콘 스타일 개선 */
.feature-icon {
    position: relative;
    overflow: hidden;
}

/* 공통 배경 패턴 */
.feature-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 20px 20px, 15px 15px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.feature-card:hover .feature-icon::before {
    opacity: 0.8;
}

/* 아이콘별 고유 형상 - 더 호환성 좋은 방법 */

/* 1. 생산능력 아이콘 (fa-industry) - 기어 형상 */
.feature-icon .fa-industry {
    position: relative;
    z-index: 3;
}

.feature-icon .fa-industry::before {
    content: '';
    position: absolute;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20 L60 30 L70 25 L75 35 L85 40 L80 50 L85 60 L75 65 L70 75 L60 70 L50 80 L40 70 L30 75 L25 65 L15 60 L20 50 L15 40 L25 35 L30 25 L40 30 Z' fill='white' opacity='0.15'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.15;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.feature-card:hover .feature-icon .fa-industry::before {
    opacity: 0.25;
}

/* 2. 품질관리 아이콘 (fa-certificate) - 방패 형상 */
.feature-icon .fa-certificate {
    position: relative;
    z-index: 3;
}

.feature-icon .fa-certificate::before {
    content: '';
    position: absolute;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L75 25 L75 50 C75 70 50 90 50 90 C50 90 25 70 25 50 L25 25 Z' fill='white' opacity='0.15'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.15;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.feature-card:hover .feature-icon .fa-certificate::before {
    opacity: 0.25;
}

/* 3. 유연성 아이콘 (fa-cogs) - 육각형 형상 */
.feature-icon .fa-cogs {
    position: relative;
    z-index: 3;
}

.feature-icon .fa-cogs::before {
    content: '';
    position: absolute;
    top: -25px;
    left: -25px;
    width: 50px;
    height: 50px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15 L73 30 L73 70 L50 85 L27 70 L27 30 Z' fill='white' opacity='0.15'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: 0.15;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.feature-card:hover .feature-icon .fa-cogs::before {
    opacity: 0.25;
}

/* 추가적인 시각적 효과 */
.feature-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(255, 255, 255, 0.1) 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.feature-card:hover .feature-icon::after {
    opacity: 1;
}

/* Featured card의 아이콘 스타일 */
.feature-card.featured .feature-icon .fa-certificate::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L75 25 L75 50 C75 70 50 90 50 90 C50 90 25 70 25 50 L25 25 Z' fill='%23EF695A' opacity='0.2'/%3E%3C/svg%3E") center/contain no-repeat;
}

.feature-card.featured:hover .feature-icon .fa-certificate::before {
    opacity: 0.3;
}

/* 아이콘 자체에 추가 효과 */
.feature-icon i {
    position: relative;
    z-index: 4;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 대체 방법: CSS border-radius로 형상 만들기 */
.feature-icon-industry::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.1);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transition: opacity 0.3s ease;
    z-index: 1;
}

.feature-icon-quality::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 25%;
    width: 50%;
    height: 70%;
    background: rgba(255, 255, 255, 0.1);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: opacity 0.3s ease;
    z-index: 1;
}

.feature-icon-flexibility::after {
    content: '';
    position: absolute;
    top: 20%;
    left: 20%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.1);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* hover 상태에서 형상 강조 */
.feature-card:hover .feature-icon-industry::after,
.feature-card:hover .feature-icon-quality::after,
.feature-card:hover .feature-icon-flexibility::after {
    opacity: 0.8;
}

/* 반응형 조정 */
@media (max-width: 768px) {
    .feature-icon .fa-industry::before,
    .feature-icon .fa-certificate::before,
    .feature-icon .fa-cogs::before {
        top: -20px;
        left: -20px;
        width: 40px;
        height: 40px;
    }
}

/* 아이콘 펄스 효과 */
@keyframes iconPulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.15; 
    }
    50% { 
        transform: scale(1.05); 
        opacity: 0.25; 
    }
}

.feature-card:hover .feature-icon .fa-industry::before,
.feature-card:hover .feature-icon .fa-certificate::before,
.feature-card:hover .feature-icon .fa-cogs::before {
    animation: iconPulse 2s ease-in-out infinite;
}