/* ========================================
   SECTION 08: 학습 프로세스 (4단계)
   ✦ 다크 배경 + 밝은 텍스트/요소
======================================== */

/* 섹션 다크 배경 + 오로라 (이벤트 배너와 동일) */
.process {
    background: linear-gradient(135deg, #553AE7 0%, #4028C4 50%, #3520A8 100%);
    position: relative;
    overflow: hidden;
}
.process::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    top: -100px; left: -150px;
    background: radial-gradient(ellipse at center, rgba(85,58,231,.35) 0%, rgba(85,58,231,.1) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.process::after {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    bottom: -150px; right: -150px;
    background: radial-gradient(ellipse at center, rgba(107,82,237,.3) 0%, rgba(107,82,237,.08) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.process .container { position: relative; z-index: 1; }
.process .section-label {
    color: var(--point-light);
    background: rgba(85,58,231,.15);
    border: none;
}
.process .section-title { color: #fff; }
.process .section-desc { color: rgba(255,255,255,.5); }

.process-timeline {
    position: relative;
    display: flex; justify-content: center;
    gap: 0;
    padding: 0 40px;
    max-width: 1000px;
    margin: 0 auto;
}

/* 점선 연결선 */
.process-line {
    position: absolute;
    top: 50px; left: 160px; right: 160px;
    height: 0;
    border-top: 2px solid rgba(255,255,255,.15);
}

.process-step {
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: 1; flex: 1;
    text-align: center;
}

/* 원형 (배경색으로 점선 가림) */
.step-dot {
    width: 100px; height: 100px;
    background: #4530b8;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 28px;
    border: 2px solid rgba(255,255,255,.3);
    transition: var(--transition);
    position: relative;
    z-index: 2;
}
.step-dot:hover {
    background: var(--point);
    border-color: var(--point);
    box-shadow: var(--shadow-primary);
}
.step-dot:hover .step-num {
    color: #fff;
}
.step-num {
    font-size: 28px; font-weight: 800; color: #fff;
    transition: var(--transition);
}

.step-card {
    text-align: center;
    padding: 0 16px;
}
.step-card h3 {
    font-size: 17px; font-weight: 700; color: #fff;
    margin-bottom: 10px;
}
.step-card p {
    font-size: 16px; color: rgba(255,255,255,.45); line-height: 1.65;
    font-weight: 400; max-width: 200px; margin: 0 auto;
}

/* step-icon은 이제 사용 안 함 */
.step-icon { display: none; }