/* 추천 교육 패키지 - 세련된 아이콘 */

.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.package-card {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    border: 2px solid #f0f0f0;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: #099F97;
}

.package-card.featured {
    border-color: #099F97;
    box-shadow: 0 10px 25px rgba(9, 159, 151, 0.15);
}

.package-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #099F97;
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* 세련된 아이콘 스타일 */
.package-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    position: relative;
    background: linear-gradient(135deg, #099F97 0%, #0bb8af 100%);
    box-shadow: 0 8px 20px rgba(9, 159, 151, 0.3);
}

.package-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(9, 159, 151, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* 청년 아이콘 - 성장 차트 */
.package-card:nth-child(1) .package-icon::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='20' x2='12' y2='10'/%3E%3Cline x1='18' y1='20' x2='18' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 직장인 아이콘 - 브리프케이스 */
.package-card:nth-child(2) .package-icon::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 은퇴준비자 아이콘 - 태양 */
.package-card:nth-child(3) .package-icon::before {
    content: '';
    display: block;
    width: 45px;
    height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.package-card h3 {
    margin: 1.5rem 0 1rem;
    color: #1B3559;
    font-size: 1.4rem;
    font-weight: 700;
}

.package-description {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.package-curriculum {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.package-curriculum li {
    padding: 0.7rem 0;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 1.5rem;
}

.package-curriculum li:last-child {
    border-bottom: none;
}

.package-curriculum li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #099F97;
    font-weight: bold;
}

@media (max-width: 968px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}