/* overrides.css - For specific style adjustments */

/* Portfolio Client Name Styling */
.portfolio-client {
    margin-top: -5px !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* Portfolio Section Divider Styling */
.portfolio-section-divider {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #4f46e5 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 12px 0 8px 0 !important;
    padding: 4px 8px !important;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.1), rgba(79, 70, 229, 0.05)) !important;
    border-left: 3px solid #4f46e5 !important;
    border-radius: 0 4px 4px 0 !important;
    display: inline-block !important;
}

/* Modal Smooth Scrolling Performance */
.portfolio-modal-container {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-scrolling: touch !important;
}

.modal-content-wrapper {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-scrolling: touch !important;
    will-change: scroll-position !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

.modal-content-inner {
    will-change: transform !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* stage-7 & 9: 좌우 컬럼 간격 줄이기 */
.toss-style-solutions .content-wrapper {
    gap: 20px !important;
}

/* stage-7: 미션 섹션과 이미지 사이의 세로 간격 추가 */
.stage-7 .visual-content {
    gap: 20px !important;
}

/* stage-6, stage-8: 텍스트 배치를 위로 올리기 - margin과 position 사용 */
.stage-6 .hero-stage,
.stage-8 .hero-stage {
    margin-top: -30vh !important; /* 마진으로 위로 이동 */
    position: relative !important;
    top: -20vh !important; /* position으로 추가 이동 */
}

/* stage-6, stage-8: 텍스트 컨테이너를 가로로 30% 늘리기 및 왼쪽 정렬 */
.stage-6 .toss-style-solutions .solution-item .content-wrapper .text-content,
.stage-8 .toss-style-solutions .solution-item .content-wrapper .text-content {
    max-width: 95% !important; /* 기존 50%에서 65%로 변경 (30% 증가) */
    flex: 1.3 !important; /* flex 값도 함께 조정 */
    text-align: left !important; /* 왼쪽 정렬 추가 */
    justify-content: flex-start !important; /* 컨테이너 내 왼쪽 정렬 */
}

/* stage-6, stage-8: 제목과 설명 텍스트 왼쪽 정렬 */
.stage-6 .solution-title,
.stage-8 .solution-title,
.stage-6 .solution-description,
.stage-8 .solution-description,
.stage-6 .main-insight,
.stage-8 .main-insight,
.stage-6 .sub-insight,
.stage-8 .sub-insight {
    text-align: left !important;
}

/* Stage 7 & 9 UI/UX 개선 */

/* 1. 좌우 컬럼 간격 줄이기 */
.stage-7 .content-wrapper,
.stage-9 .content-wrapper {
    gap: 30px !important;
    justify-content: center !important;
}

.stage-7 .text-content,
.stage-7 .visual-content,
.stage-9 .text-content,
.stage-9 .visual-content {
    max-width: 48% !important;
    flex-basis: 48% !important;
}

/* 2. 핵심 요소(불릿포인트) '피처 카드' 디자인 */
.stage-7 .detailed-list,
.stage-9 .detailed-list {
    margin-top: 2rem !important;
}

.stage-7 .detailed-list-item,
.stage-9 .detailed-list-item {
    background-color: rgba(249, 250, 251, 0.7) !important;
    border: 1px solid rgba(229, 231, 235, 0.9) !important;
    border-radius: 16px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.25rem !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    backdrop-filter: blur(4px);
    display: flex !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
}

.stage-7 .detailed-list-item:hover,
.stage-9 .detailed-list-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.stage-7 .list-item-number,
.stage-9 .list-item-number {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    background-color: #2563eb !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.stage-7 .list-item-label,
.stage-9 .list-item-label {
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    color: #1f2937 !important;
    margin-bottom: 0.35rem !important;
}

.stage-7 .list-item-value,
.stage-9 .list-item-value {
    color: #4b5563 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

/* Stage 7: 미션 섹션 리디자인 및 이미지 숨기기 */

/* visual-content를 미션 섹션이 돋보이도록 중앙 정렬 컨테이너로 활용 */
.stage-7 .visual-content {
    justify-content: center !important;
    align-items: center !important;
}

/* 기존 이미지 숨기기 */
.stage-7 .revenue-image {
    display: none !important;
}

/* 미션 섹션을 세련된 카드로 디자인 */
.stage-7 .mission-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 245, 255, 0.85));
    border: 1px solid transparent;
    border-radius: 24px !important;
    padding: 2.5rem !important;
    max-width: 550px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 40px -15px rgba(37, 99, 235, 0.15);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transform: translateY(-10%) !important; /* 10% 위로 이동 */
}

/* 은은한 그래디언트 테두리 효과 */
.stage-7 .mission-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.5), rgba(167, 139, 250, 0.3));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* 카드 목록과 제목 사이 간격 줄이기 */
.stage-7 .detailed-list {
    margin-top: 1rem !important; /* 기존 2rem에서 1rem으로 수정 */
}

.stage-7 .mission-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1e3a8a !important; /* 어두운 파란색으로 깊이감 부여 */
    margin-bottom: 1rem !important;
}

.stage-7 .mission-text {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: #374151 !important; /* 다크 그레이로 가독성 확보 */
}

.stage-7 .mission-text .highlight-text {
    background: linear-gradient(180deg, transparent 65%, rgba(199, 210, 254, 0.9) 65%);
    padding: 0 2px;
}

/* Stage 9: 오른쪽 컬럼 카드 레이아웃 조정 */
.stage-9 .visual-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 0 1rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.logo-image {
    height: 60px;
    width: auto;
    object-fit: contain;
    margin-right: 10px;
}

.nav-logo h2 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
}

.footer-logo-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.footer .logo-image {
    height: 35px;
}

.footer-logo h3 {
    margin: 0;
}

/* 모바일에서만 섹션 간 gap 추가 - 데스크탑 뷰에 영향 없음 */
@media (max-width: 768px) {
    /* 모바일에서 가로 스크롤 방지 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    body {
        padding: 0 20px !important; /* 40px에서 20px로 줄임 */
    }
    
    /* 주요 섹션들 사이에 적절한 gap 추가 */
    section {
        margin-bottom: 40px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* glass-section 클래스가 있는 섹션들에 더 큰 gap */
    .glass-section {
        margin-bottom: 50px !important;
    }
    
    /* 특정 섹션들에 개별 gap 설정 */
    .hero-new-section + section,
    .hero-new-section + .glass-section {
        margin-top: 60px !important;
    }
    
    .portfolio {
        margin-bottom: 60px !important;
    }
    
    .services {
        margin-bottom: 60px !important;
    }
    
    .solution-process,
    .solution-process-new {
        margin-bottom: 60px !important;
    }
    
    .cta-section {
        margin-bottom: 60px !important;
    }
    
    /* ID가 있는 섹션들도 gap 추가 */
    #portfolio {
        margin-bottom: 60px !important;
    }
    
    #services {
        margin-bottom: 60px !important;
    }
    
    #process {
        margin-bottom: 60px !important;
    }
    
    #contact {
        margin-bottom: 40px !important;
    }
    
    /* 프로세스 관련 섹션들 간격 */
    .process-section {
        margin-bottom: 60px !important;
    }
    
    /* 포트폴리오 그리드와 다음 섹션 간 간격 */
    .portfolio-grid {
        margin-bottom: 40px !important;
    }
    
    /* 서비스 그리드와 다음 섹션 간 간격 */
    .services-grid {
        margin-bottom: 40px !important;
    }

    /* ===== 새로운 모바일 히어로 스크롤 스토리텔링 ===== */
    
    .hero-mobile-section {
        display: block !important;
        width: 100% !important;
        margin-top: 60px !important;
        padding: 0 !important;
    }

    .mobile-hero-scroll-story {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        scroll-snap-type: y mandatory !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mobile-story-section {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 80px 20px 100px 20px !important; /* 24px에서 20px로 줄임 */
        text-align: center !important;
        position: relative !important;
        scroll-snap-align: start !important;
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 섹션별 배경 - 모두 투명하게 변경 */
    .mobile-story-section.section-1 {
        background: transparent !important;
        color: #1f2937 !important;
    }

    .mobile-story-section.section-2 {
        background: transparent !important;
        color: #1f2937 !important;
    }

    .mobile-story-section.section-3 {
        background: transparent !important;
        color: #1f2937 !important;
    }

    .mobile-story-section.section-4 {
        background: transparent !important;
        color: #1f2937 !important;
    }

    .mobile-story-section.section-5 {
        background: transparent !important;
        color: #1f2937 !important;
    }

    .mobile-story-section.section-6 {
        background: transparent !important;
        color: #1f2937 !important;
    }

    /* 타이포그래피 - 텍스트 크기 증대 */
    .mobile-story-title {
        font-size: 2.2rem !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin-bottom: 4rem !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        letter-spacing: -0.02em !important;
        word-break: keep-all !important;
        max-width: 100% !important; /* 전체 폭 사용 */
        width: 100% !important; /* 전체 폭 강제 사용 */
        padding: 0 10px !important; /* 좌우 최소 여백만 추가 */
    }
    
    /* 특정 섹션의 제목만 더 넓게 설정 */
    .mobile-story-section.section-6 .mobile-story-title {
        max-width: 100% !important; /* "지금 바로 시작하세요" 전용 - 전체 폭 사용 */
        width: 100% !important; /* 전체 폭 강제 사용 */
        white-space: normal !important; /* 줄바꿈 허용으로 변경 */
        word-break: keep-all !important; /* 한국어 자연스러운 줄바꿈 */
        padding: 0 10px !important; /* 좌우 최소 여백만 추가 */
    }
    
    /* 매우 작은 화면에서는 폰트 크기 조정 */
    @media (max-width: 350px) {
        .mobile-story-section.section-6 .mobile-story-title {
            font-size: 2.1rem !important;
            max-width: 95vw !important;
            line-height: 1.3 !important;
        }
    }
    
    /* 섹션 헤더 텍스트 자연스러운 줄바꿈 처리 */
    .section-header p {
        word-break: keep-all !important; /* 한국어 자연스러운 줄바꿈 */
        line-height: 1.6 !important;
        max-width: 400px !important; /* 적절한 텍스트 길이 유지 */
        margin: 0 auto !important; /* 중앙 정렬 */
    }
    
    /* 핵심 서비스 섹션 특별 처리 */
    #services .section-header p {
        font-size: 1.05rem !important;
        max-width: 420px !important;
    }
    
    /* 프로세스 섹션 특별 처리 */
    #process .section-header p {
        font-size: 1.05rem !important;
        max-width: 380px !important;
    }
    
    /* 모바일 전용 줄바꿈 - 데스크톱에서는 숨김 */
    .mobile-br {
        display: none !important;
    }
    
    @media (max-width: 768px) {
        .mobile-br {
            display: inline !important;
        }
        
        /* 프로세스 카드 텍스트 최적화 */
        .step-card-content p {
            word-break: keep-all !important;
            line-height: 1.5 !important;
            font-size: 0.95rem !important;
        }
        
        /* CTA 섹션 모바일 최적화 - 강력한 우선순위 */
        #contact .cta-content h2 {
            max-width: none !important;
            width: auto !important;
            word-break: keep-all !important;
            line-height: 1.3 !important;
            font-size: 1.9rem !important;
            margin: 0 auto 1rem auto !important;
            padding: 0 5px !important;
            box-sizing: border-box !important;
            text-align: center !important;
        }
        
        #contact .cta-content > p {
            max-width: none !important;
            width: auto !important;
            word-break: keep-all !important;
            line-height: 1.6 !important;
            font-size: 1.15rem !important;
            margin: 0 auto 3rem auto !important;
            padding: 0 5px !important;
            box-sizing: border-box !important;
            text-align: center !important;
        }
        
        /* CTA 전체 컨테이너 최적화 */
        #contact .cta-content {
            text-align: center !important;
            padding: 0 5px !important;
            max-width: 100% !important;
        }
        
        /* 모바일에서 container 패딩 줄이기 */
        #contact .container {
            padding: 0 10px !important;
        }
        
        /* 프로세스 섹션 container 패딩 줄이기 */
        #process .container {
            padding: 0 10px !important;
        }
        
        /* 프로세스 섹션 헤더 최적화 */
        #process .section-header {
            padding: 0 5px !important;
        }
        
        #process .section-header h2 {
            padding: 0 5px !important;
            word-break: keep-all !important;
            margin: 0 auto 1rem auto !important;
        }
        
        /* 성공사례 카드 파란색 텍스트 폰트 줄이기 */
        .portfolio-performance .perf-value {
            font-size: 1.3rem !important;
        }
        
        /* 모바일에서 GSAP ScrollTrigger만 비활성화 */
        .hero-new-section {
            position: static !important;
            height: auto !important;
        }
        
        .hero-scroll-container {
            position: static !important;
            height: auto !important;
        }
        
        .hero-stage {
            position: static !important;
            opacity: 1 !important;
            transform: none !important;
            pointer-events: auto !important;
        }
        
        /* 성공사례 AOS 애니메이션 비활성화 */
        .portfolio-item[data-aos] {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
        
        /* 모든 AOS 애니메이션 요소 비활성화 */
        [data-aos] {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }
        
        /* 기존 복잡한 프로세스 스타일 제거됨 - 새로운 단순 디자인 사용 */
        
        .cta-form {
            max-width: 90vw !important;
            padding: 2rem 1.5rem !important;
        }
        
        .cta-form h3 {
            word-break: keep-all !important;
            font-size: 1.4rem !important;
        }
        
        .contact-form input,
        .contact-form textarea {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }
    }

    .mobile-story-subtitle {
        font-size: 1.3rem !important;
        line-height: 1.6 !important;
        opacity: 0.75 !important;
        margin-bottom: 5rem !important;
        max-width: 100% !important; /* 전체 폭 사용 */
        width: 100% !important; /* 전체 폭 강제 사용 */
        font-weight: 400 !important;
        word-break: keep-all !important;
        padding: 0 10px !important; /* 좌우 최소 여백만 추가 */
    }

    /* 모바일 스크롤 인디케이터 간격 조정 */
    .mobile-scroll-indicator {
        margin-bottom: 3rem !important;
    }

    .mobile-highlight {
        background: #2563eb !important;
        color: white !important;
        padding: 4px 12px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        display: inline-block !important;
        margin: 0 2px !important;
    }

    /* 문제점 카드 그리드 */
    .mobile-problems-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.2rem !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .mobile-problem-card {
        background: #f8fafc !important;
        padding: 1.5rem !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        text-align: left !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-problem-emoji {
        font-size: 1.8rem !important;
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border-radius: 12px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .mobile-problem-text {
        font-size: 1.1rem !important;
        color: #374151 !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
        word-break: keep-all !important;
        flex: 1 !important;
        text-align: left !important;
        margin: 0 !important;
    }

    /* 솔루션 프리뷰 카드 - 크기 통일 */
    .mobile-solution-preview {
        background: #f1f5f9 !important;
        padding: 1.8rem 1.5rem !important;
        border-radius: 20px !important;
        border: 2px solid #e2e8f0 !important;
        width: 100% !important;
        max-width: 320px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        box-sizing: border-box !important;
        min-height: 100px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .mobile-solution-preview h4 {
        font-size: 1.3rem !important;
        margin-bottom: 0.6rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
    }

    .mobile-solution-preview p {
        font-size: 1.1rem !important;
        opacity: 0.8 !important;
        line-height: 1.5 !important;
        color: #4b5563 !important;
        word-break: keep-all !important;
        margin: 0 !important;
    }

    /* CTA 버튼 */
    .mobile-cta-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.2rem !important;
        width: 100% !important;
        max-width: 300px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        margin-top: 1rem !important;
    }

    .mobile-cta-primary {
        background: #2563eb !important;
        color: white !important;
        padding: 22px 32px !important;
        border: none !important;
        border-radius: 16px !important;
        font-size: 1.2rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-cta-primary:active {
        transform: scale(0.98) !important;
        background: #1d4ed8 !important;
    }

    .mobile-cta-secondary {
        background: white !important;
        color: #2563eb !important;
        padding: 20px 32px !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 16px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-cta-secondary:active {
        transform: scale(0.98) !important;
        background: #f8fafc !important;
        border-color: #cbd5e1 !important;
    }

    /* 스크롤 힌트 */
    .mobile-scroll-hint {
        position: absolute !important;
        bottom: 40px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        opacity: 0.4 !important;
        color: #9ca3af !important;
        background: rgba(255, 255, 255, 0.8) !important;
        padding: 8px !important;
        border-radius: 50% !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .mobile-scroll-hint svg {
        width: 20px !important;
        height: 20px !important;
        fill: currentColor !important;
        display: block !important;
    }

    /* 데스크탑 히어로 섹션 완전히 숨기기 */
    .hero-new-section {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* 모바일에서 확실한 가시성 보장 */
    .mobile-story-section * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    .revenue-chart-placeholder,
    .automation-placeholder {
        min-height: 150px;
        font-size: 3rem;
    }
}

/* Image placeholder styles for missing images */
.revenue-chart-placeholder,
.automation-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    font-size: 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.revenue-chart-placeholder::before,
.automation-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.revenue-chart-placeholder {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.automation-placeholder {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* Red emphasis style for highlighted text */
.red-emphasis {
    color: #e74c3c !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(231, 76, 60, 0.2);
    position: relative;
}

.red-emphasis::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    border-radius: 1px;
    opacity: 0.7;
}

/* 새로운 프로세스 섹션 디자인 */

/* 프로세스 컨테이너 */
.process-steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 !important;
}

/* 각 프로세스 스텝 */
.process-step {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(229, 231, 235, 0.3);
    border-radius: 20px;
    padding: 2rem 0.2rem;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.process-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(37, 99, 235, 0.3);
}

/* 데스크탑에서 기존 연결선 숨기기 */
@media (min-width: 769px) {
    .process-step::after {
        display: none !important;
    }
}

/* 스텝 번호 */
.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

/* 스텝 콘텐츠 */
.step-content {
    margin-top: 1rem;
    width: 100%;
}

/* 스텝 아이콘 */
.step-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

/* 스텝 제목 */
.step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* 스텝 설명 */
.step-description {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

/* 데스크탑에서 4개 컬럼으로 표시 */
@media (min-width: 1200px) {
    .process-steps-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

/* 태블릿에서 2개 컬럼으로 표시 */
@media (max-width: 1199px) and (min-width: 769px) {
    .process-steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* 모바일에서 1개 컬럼으로 표시 */
@media (max-width: 768px) {
    #process.glass-section {
        padding: 40px 20px 20px 20px !important; /* 모바일 상단 패딩도 60px에서 40px로 감소 */
    }
    
    .process-steps-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 !important;
    }
    
    .process-step {
        padding: 1.5rem 0.8rem;
        margin: 0;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        top: -12px;
    }
    
    .step-icon {
        font-size: 2.5rem;
        margin-bottom: 0.8rem;
    }
    
    .step-title {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    
    .step-description {
        font-size: 0.95rem;
        max-width: 260px;
    }
}