/* ==========================================================================
   Homepage UI Improvements - Comprehensive Enhancement
   FAQ, Product Section, Features Section Improvements
   ========================================================================== */

/* ==========================================================================
   1. FAQ Section Improvements - 답변창 크기 문제 해결
   ========================================================================== */

.faq-section {
    padding: var(--space-16) 0;
}

.faq-accordion {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 12px;
    margin-bottom: var(--space-4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    overflow: hidden;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: rgba(239, 105, 90, 0.3);
}

.faq-question {
    padding: var(--space-5) var(--space-6);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    transition: all 0.3s ease;
    border-radius: 12px;
}

.faq-question:hover {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
}

.faq-question h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: #1a202c;
    line-height: 1.4;
    flex: 1;
    padding-right: var(--space-4);
}

.faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #EF695A 0%, #D54A3B 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(239, 105, 90, 0.3);
}

.faq-toggle i {
    color: white;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
    background: linear-gradient(135deg, #D54A3B 0%, #B91C1C 100%);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.faq-answer p {
    padding: 0 var(--space-6) var(--space-6);
    margin: 0;
    color: #374151;
    line-height: 1.7;
    font-size: var(--text-base);
}

.faq-answer p strong {
    color: #EF695A;
    font-weight: 600;
}

/* Improved height calculation for FAQ answers */
.faq-item.active .faq-answer {
    max-height: 300px; /* 충분한 높이 제공 */
    min-height: auto;
}

/* ==========================================================================
   2. Product Categories Section - 컴팩트화
   ========================================================================== */

.products.section {
    padding: var(--space-12) 0; /* 기존 var(--space-16)에서 축소 */
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 기존 320px에서 축소 */
    gap: var(--space-4); /* 기존 var(--space-6)에서 축소 */
    margin: var(--space-8) 0; /* 기존 var(--space-12)에서 축소 */
}

.product-category-card {
    padding: var(--space-5); /* 기존 var(--space-6)에서 축소 */
    min-height: 350px; /* 카드 높이 제한 */
}

.category-icon {
    width: 60px; /* 기존 70px에서 축소 */
    height: 60px;
    margin-bottom: var(--space-3); /* 기존 var(--space-4)에서 축소 */
}

.category-icon i {
    font-size: 24px; /* 기존 28px에서 축소 */
}

.product-category-card h3 {
    font-size: var(--text-lg); /* 기존 var(--text-xl)에서 축소 */
    margin-bottom: var(--space-3); /* 기존 var(--space-4)에서 축소 */
}

.product-list {
    margin: 0 0 var(--space-3) 0; /* 기존 var(--space-5)에서 축소 */
    padding: var(--space-3); /* 기존 var(--space-4)에서 축소 */
    max-height: 180px; /* 목록 높이 제한 */
    overflow-y: auto;
}

.product-list li {
    padding: var(--space-1) 0; /* 줄 간격 축소 */
    font-size: var(--text-sm);
}

.category-specs {
    padding-top: var(--space-3); /* 기존 var(--space-4)에서 축소 */
    margin-top: var(--space-2);
}

.product-highlights {
    margin-top: var(--space-8); /* 기존 var(--space-12)에서 축소 */
    padding: var(--space-6); /* 기존 var(--space-10)에서 축소 */
}

/* ==========================================================================
   3. Features Section (選ばれる3つの理由) - 배경 일관성 및 아이콘 개선
   ========================================================================== */

.features.section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    position: relative;
    overflow: hidden;
}

.features.section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(239, 105, 90, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(44, 82, 130, 0.05) 0%, transparent 50%);
    animation: floating 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floating {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-20px, -20px) rotate(1deg); }
}

.features-grid {
    position: relative;
    z-index: 1;
}

.feature-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: var(--space-8);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #EF695A 0%, #D54A3B 100%);
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.08);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
}

/* Featured card (추천) 특별 스타일 */
.feature-card.featured {
    background: linear-gradient(145deg, 
        rgba(239, 105, 90, 0.95) 0%, 
        rgba(213, 74, 59, 0.9) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.9);
    transform: scale(1.05);
    z-index: 2;
}

.feature-card.featured::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    opacity: 1;
}

.feature-card.featured:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 
        0 25px 50px rgba(239, 105, 90, 0.3),
        0 10px 20px rgba(213, 74, 59, 0.2);
}

.feature-card.featured .feature-title,
.feature-card.featured .feature-list li {
    color: white;
}

.feature-card.featured .feature-detail {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.3);
}

.feature-card.featured .feature-detail:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Enhanced Feature Icons with Shapes */
.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #EF695A 0%, #D54A3B 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-6);
    position: relative;
    box-shadow: 
        0 8px 24px rgba(239, 105, 90, 0.3),
        0 4px 8px rgba(213, 74, 59, 0.2);
    transition: all 0.4s ease;
    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;
}

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

/* 아이콘별 고유 형상 추가 */
.feature-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

/* 생산능력 아이콘 - 기어 형상 */
.feature-icon:has(.fa-industry)::after {
    background-image: 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.3'/%3E%3C/svg%3E");
}

/* 품질관리 아이콘 - 방패 형상 */
.feature-icon:has(.fa-certificate)::after {
    background-image: 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.3'/%3E%3C/svg%3E");
}

/* 유연성 아이콘 - 육각형 형상 */
.feature-icon:has(.fa-cogs)::after {
    background-image: 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.3'/%3E%3C/svg%3E");
}

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

.feature-icon i {
    font-size: 32px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 2;
    position: relative;
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 
        0 12px 32px rgba(239, 105, 90, 0.4),
        0 6px 12px rgba(213, 74, 59, 0.3);
}

.feature-card:hover .feature-icon i {
    transform: scale(1.1);
}

/* Featured card icon styling */
.feature-card.featured .feature-icon {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
    box-shadow: 
        0 8px 24px rgba(255, 255, 255, 0.3),
        0 4px 8px rgba(255, 255, 255, 0.2);
}

.feature-card.featured .feature-icon i {
    color: #EF695A;
}

.feature-card.featured .feature-icon::before {
    background: 
        radial-gradient(circle at 30% 30%, rgba(239, 105, 90, 0.3) 2px, transparent 2px),
        radial-gradient(circle at 70% 70%, rgba(213, 74, 59, 0.2) 1px, transparent 1px);
}

/* Ribbon for featured card */
.feature-ribbon {
    position: absolute;
    top: 20px;
    right: -35px;
    background: linear-gradient(45deg, #F59E0B 0%, #D97706 100%);
    color: white;
    padding: var(--space-2) var(--space-12);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

/* ==========================================================================
   4. Responsive Improvements
   ========================================================================== */

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .product-category-card {
        padding: var(--space-4);
        min-height: auto;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .feature-card.featured {
        transform: none;
        order: -1;
    }
    
    .feature-icon {
        width: 70px;
        height: 70px;
        margin-bottom: var(--space-4);
    }
    
    .feature-icon i {
        font-size: 28px;
    }
    
    .faq-question {
        padding: var(--space-4);
    }
    
    .faq-question h3 {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
    
    .product-category-card {
        padding: var(--space-3);
    }
    
    .feature-card {
        padding: var(--space-6);
    }
}