/* 섹션 2 스타일 */
.section2-container {
    width: 100%;
    height: clamp(800px, 100vh, 1000px);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(60px, 8vh, 100px) clamp(40px, 8vw, 120px);
    overflow: hidden;
    position: relative;
}

.section2-content {
    width: 100%;
    max-width: 82vw;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(30px, 5vw, 120px);
}

/* 좌측 궤도 시스템 */
.section2-container .left-content {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: clamp(300px, 60vh, 700px);
}

/* 우측 텍스트 영역 */
.section2-container .right-content {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center !important;
    gap: clamp(30px, 3vw, 40px);
    flex: 0 0 auto;
    min-width: clamp(300px, 26vw, 500px);
}

.section2-container .right-content .title {
    text-align: center;
}

.section2-container .right-content .description {
    text-align: center;
}

.orbit-system {
    position: relative;
    width: clamp(400px, 32vw, 560px);
    height: clamp(400px, 32vw, 560px);
}

/* 궤도 원들 */
.orbit-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-ring-1 {
    width: clamp(320px, 25.6vw, 460.8px);
    height: clamp(320px, 25.6vw, 460.8px);
    border: clamp(64px, 6.4vw, 120px) solid #E2E8F0;
}

.orbit-ring-2 {
    width: clamp(208px, 16.8vw, 307.2px);
    height: clamp(208px, 16.8vw, 307.2px);
    border: 2px solid #9CA3AF;
    opacity: 0.5;
}

.orbit-ring-3 {
    width: clamp(384px, 30.4vw, 568px);
    height: clamp(384px, 30.4vw, 568px);
    border: 1px solid #9CA3AF;
    opacity: 0.3;
}

.orbit-ring-4 {
    width: clamp(176px, 14.4vw, 256px);
    height: clamp(176px, 14.4vw, 256px);
    border: 2px solid #9CA3AF;
}

/* 궤도 카드 wrapper (회전용) */
.orbit-card-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    animation: orbit-rotation 20s linear infinite;
}

/* 궤도 회전 애니메이션 */
@keyframes orbit-rotation {
    from {
        transform: translate(-50%, -50%) rotate(var(--start-angle, 0deg));
    }
    to {
        transform: translate(-50%, -50%) rotate(calc(var(--start-angle, 0deg) + 360deg));
    }
}

/* 각 카드별 시작 위치 (언밸런스 배치) */
.orbit-wrapper-greeks {
    --start-angle: 0deg;
}

.orbit-wrapper-iv {
    --start-angle: 85deg;
}

.orbit-wrapper-theo {
    --start-angle: 170deg;
}

.orbit-wrapper-oi {
    --start-angle: 275deg;
}

/* 궤도 카드 공통 스타일 */
.orbit-card {
    position: absolute;
    top: clamp(30px, 5vw, 70px);
    left: 50%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 10px 10px 20px 0px rgba(170, 181, 189, 0.5);
    animation: counter-rotation 20s linear infinite;
}

/* 카드 역회전 애니메이션 (각도 유지) */
@keyframes counter-rotation {
    from {
        transform: translate(-50%, -50%) rotate(calc(var(--start-angle, 0deg) * -1));
    }
    to {
        transform: translate(-50%, -50%) rotate(calc((var(--start-angle, 0deg) + 360deg) * -1));
    }
}

.orbit-card .card-text {
    text-align: center;
    font-family: 'Pretendard', sans-serif;
}

/* 그릭스 카드 (가장 큰 블루) */
.orbit-card-greeks {
    width: clamp(144px, 12vw, 230.4px);
    height: clamp(144px, 12vw, 230.4px);
    background: radial-gradient(ellipse 69.14% 69.14% at 41.14% 33.76%, #86ACFF 0%, #4932FE 100%);
    box-shadow: 10px 10px 20px 0px rgba(170, 181, 189, 0.5), inset 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
    opacity: 0.9;
}

.orbit-card-greeks .card-text {
    color: white;
    font-size: clamp(25.6px, 2.56vw, 48px);
    font-weight: 800;
    line-height: clamp(33.6px, 3.36vw, 62.4px);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.orbit-card-greeks:hover {
    box-shadow: 15px 15px 30px 0px rgba(170, 181, 189, 0.6), inset 0px 4px 40px 0px rgba(0, 0, 0, 0.3);
}

/* 내재변동성 카드 (작은 화이트) */
.orbit-card-iv {
    width: clamp(80px, 6.8vw, 128px);
    height: clamp(80px, 6.8vw, 128px);
    background: radial-gradient(ellipse 62.68% 62.68% at 41.14% 33.76%, white 24%, #EBEBEB 100%);
    box-shadow: 10px 10px 20px 0px rgba(170, 181, 189, 0.5), inset 0px 4px 20px 0px rgba(218, 224, 228, 1);
    opacity: 0.9;
}

.orbit-card-iv .card-text {
    color: #191F28;
    font-size: clamp(14.4px, 1.28vw, 24px);
    font-weight: 700;
    line-height: clamp(17.6px, 1.6vw, 28.8px);
}

.orbit-card-iv:hover {
    box-shadow: 15px 15px 30px 0px rgba(170, 181, 189, 0.6), inset 0px 4px 20px 0px rgba(218, 224, 228, 1);
}

/* 이론가 카드 (중간 블루) */
.orbit-card-theo {
    width: clamp(96px, 8vw, 153.6px);
    height: clamp(96px, 8vw, 153.6px);
    background: radial-gradient(ellipse 69.14% 69.14% at 41.14% 33.76%, #86ACFF 0%, #4932FE 100%);
    box-shadow: 10px 10px 20px 0px rgba(170, 181, 189, 0.5), inset 0px 4px 40px 0px rgba(0, 0, 0, 0.25);
    opacity: 0.9;
}

.orbit-card-theo .card-text {
    color: white;
    font-size: clamp(19.2px, 1.76vw, 32px);
    font-weight: 800;
    line-height: clamp(22.4px, 2vw, 38.4px);
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
}

.orbit-card-theo:hover {
    box-shadow: 15px 15px 30px 0px rgba(170, 181, 189, 0.6), inset 0px 4px 40px 0px rgba(0, 0, 0, 0.3);
}

/* 미결제약정 카드 (중간 화이트) */
.orbit-card-oi {
    width: clamp(112px, 9.6vw, 179.2px);
    height: clamp(112px, 9.6vw, 179.2px);
    background: radial-gradient(ellipse 62.68% 62.68% at 41.14% 33.76%, white 24%, #EBEBEB 100%);
    box-shadow: 10px 10px 20px 0px rgba(170, 181, 189, 0.5), inset 0px 4px 20px 0px rgba(218, 224, 228, 1);
    opacity: 0.9;
}

.orbit-card-oi .card-text {
    color: #191F28;
    font-size: clamp(17.6px, 1.6vw, 28.8px);
    font-weight: 700;
    line-height: clamp(22.4px, 2.08vw, 38.4px);
}

.orbit-card-oi:hover {
    box-shadow: 15px 15px 30px 0px rgba(170, 181, 189, 0.6), inset 0px 4px 20px 0px rgba(218, 224, 228, 1);
}

/* 모바일 반응형 */
@media (max-width: 1024px) {
    .section2-container {
        height: auto;
        min-height: 100vh;
        padding: 80px 40px;
    }
    
    .section2-content {
        flex-direction: column;
        gap: 80px;
    }
    
    .section2-container .left-content {
        order: 2;
        width: 100%;
        min-height: 350px;
    }
    
    .section2-container .right-content {
        max-width: 100%;
        width: 100%;
        align-items: center;
        order: 1;
    }
    
    .section2-container .right-content .title,
    .section2-container .right-content .description {
        text-align: center;
    }
    
    .orbit-system {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 768px) {
    .section2-container {
        padding: 80px 25px;
    }
    
    .section2-content {
        gap: 10px;
    }
    
    .section2-container .right-content {
        gap: 20px;
    }
    
    .orbit-system {
        width: 100%;
        max-width: 320px;
        height: 320px;
    }
    
    .orbit-ring-1 {
        width: 256px;
        height: 256px;
        border-width: 48px;
    }
    
    .orbit-ring-2 {
        width: 160px;
        height: 160px;
    }
    
    .orbit-ring-3 {
        width: 304px;
        height: 304px;
    }
    
    .orbit-ring-4 {
        width: 136px;
        height: 136px;
    }
    
    .orbit-card {
        top: 24px;
    }
    
    .orbit-card-greeks {
        width: 112px;
        height: 112px;
    }
    
    .orbit-card-greeks .card-text {
        font-size: 20.8px;
        line-height: 25.6px;
    }
    
    .orbit-card-iv {
        width: 64px;
        height: 64px;
    }
    
    .orbit-card-iv .card-text {
        font-size: 11.2px;
        line-height: 13.6px;
    }
    
    .orbit-card-theo {
        width: 80px;
        height: 80px;
    }
    
    .orbit-card-theo .card-text {
        font-size: 16px;
        line-height: 19.2px;
    }
    
    .orbit-card-oi {
        width: 88px;
        height: 88px;
    }
    
    .orbit-card-oi .card-text {
        font-size: 14.4px;
        line-height: 17.6px;
    }
}

@media (max-width: 480px) {
    .section2-container {
        padding: 60px 20px;
    }
    
    .orbit-system {
        max-width: 272px;
        height: 272px;
    }
    
    .orbit-ring-1 {
        width: 216px;
        height: 216px;
        border-width: 40px;
    }
    
    .orbit-ring-2 {
        width: 136px;
        height: 136px;
    }
    
    .orbit-ring-3 {
        width: 256px;
        height: 256px;
    }
    
    .orbit-ring-4 {
        width: 112px;
        height: 112px;
    }
    
    .orbit-card {
        top: 20px;
    }
    
    .orbit-card-greeks {
        width: 96px;
        height: 96px;
    }
    
    .orbit-card-greeks .card-text {
        font-size: 17.6px;
        line-height: 22.4px;
    }
    
    .orbit-card-iv {
        width: 56px;
        height: 56px;
    }
    
    .orbit-card-iv .card-text {
        font-size: 9.6px;
        line-height: 12px;
    }
    
    .orbit-card-theo {
        width: 68px;
        height: 68px;
    }
    
    .orbit-card-theo .card-text {
        font-size: 13.6px;
        line-height: 16.8px;
    }
    
    .orbit-card-oi {
        width: 76px;
        height: 76px;
    }
    
    .orbit-card-oi .card-text {
        font-size: 12.8px;
        line-height: 16px;
    }
}