/* ========================================
   SECTION 06: 왜 한국AI평생교육원인가
   ✦ 컴팩트 카드 + 호버 보라색 배경
======================================== */

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 20px;
    max-width: 90%;
    margin: 0 auto;
}

.why-card {
    position: relative;
    padding: 0;
    background: #fff;
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: all .35s ease;
    overflow: hidden;
    cursor: pointer;
}

.why-card-inner {
    padding: 34px 26px 30px;
    min-height: 210px;
}

.why-card::before {
    display: none;
}

.why-card:hover {
    background: var(--point);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
}
.why-card:hover h3,
.why-card:hover p {
    color: #fff;
}

.why-card-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--point-bg);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--point);
    margin-bottom: 20px;
    transition: all .35s ease;
}
.why-card:hover .why-card-icon {
    background: rgba(255,255,255,.2);
    color: #fff;
    box-shadow: none;
    transform: scale(1.05);
}

.why-card-num {
    position: absolute; top: 16px; right: 20px;
    font-size: 58px; font-weight: 900;
    color: #553AE7;
    opacity: 1;
    line-height: 1;
    transition: all .35s ease;
}
.why-card:hover .why-card-num {
    color: #fff;
    opacity: 1;
}

.why-card h3 { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; transition: color .35s ease; }
.why-card p { font-size: 18px; color: var(--text-3); line-height: 1.8; font-weight: 400; margin-bottom: 0; transition: color .35s ease; }