/* ========================================
1. ROOT 및 기본 공통 스타일
======================================== */

        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --primary-color: #667eea;
            --secondary-color: #764ba2;
        }

/* ========================================
2. 데스크톱 스타일 (1024px 이상) - 기본
======================================== */
        
        /* Navigation Bar Styles */
        .navbar {
            position: sticky;
            top: 0;
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            padding: 15px 0;
        }
        
        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.nav-logo {
    height: 30px;
    overflow: hidden;
    display: flex;
            align-items: center;
        }
        
        .nav-logo img {
    height: 80px;
            filter: brightness(0) invert(1);
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
            margin: 0;
            padding: 0;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            padding: 8px 16px;
            border-radius: 0;
            position: relative;
        }
        
        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 80%;
            height: 3px;
            background: var(--primary-gradient);
            border-radius: 3px 3px 0 0;
            transition: transform 0.3s ease;
        }
        
        .nav-menu a:hover::after,
        .nav-menu a.active::after {
            transform: translateX(-50%) scaleX(1);
        }
        
        .nav-menu a:hover {
            transform: translateY(-2px);
        }
        
        .nav-toggle {
            display: none;
            flex-direction: column;
            gap: 4px;
            cursor: pointer;
        }
        
        .nav-toggle span {
            width: 25px;
            height: 3px;
            background: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        /* Service Preview Styles */
        .services-preview {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 25%, #dee2e6 75%, #ced4da 100%);
        }
        
        .services-preview .container {
            width: 100%;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .service-card {
            background: white;
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .service-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .service-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #2d3748;
        }
        
        .service-card p {
            font-size: 14px;
            color: #4a5568;
            line-height: 1.6;
        }
        
        /* Service Alternating Layout */
        .service-alternating-layout {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .service-row {
            display: flex;
            align-items: center;
            gap: 60px;
            margin-bottom: 80px;
            padding: 40px;
            background: white;
            border-radius: 24px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
        }
        
        .service-row:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.12);
        }
        
        .service-row.reverse {
            flex-direction: row-reverse;
        }
        
        .service-visual {
            flex: 0 0 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .service-icon-large {
            width: 180px;
            height: 180px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
            box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
            transition: all 0.4s ease;
        }
        
        .service-row:hover .service-icon-large {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 20px 50px rgba(102, 126, 234, 0.4);
        }
        
        .service-content {
            flex: 1;
        }
        
        .service-content h3 {
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 20px;
            color: var(--primary-color);
            letter-spacing: -0.5px;
        }
        
        .service-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #4a5568;
            margin-bottom: 30px;
        }
        
        .btn-secondary {
            display: inline-block;
            background: transparent;
            color: var(--primary-color);
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s ease;
            border: 2px solid var(--primary-color);
        }
        
        .btn-secondary:hover {
            background: var(--primary-gradient);
            color: white;
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        
        /* Services Compact Grid Layout */
        .services-compact-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .service-compact-card {
            background: white;
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: all 0.4s ease;
            border: 2px solid transparent;
            text-align: center;
        }
        
        .service-compact-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 50px rgba(102, 126, 234, 0.15);
            border-color: rgba(102, 126, 234, 0.2);
        }
        
        .service-compact-icon {
            width: 100px;
            height: 100px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            margin: 0 auto 25px;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
            transition: all 0.4s ease;
        }
        
        .service-compact-card:hover .service-compact-icon {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
        }
        
        .service-compact-card h3 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 15px;
            color: var(--primary-color);
            letter-spacing: -0.3px;
        }
        
        .service-compact-card p {
            font-size: 15px;
            line-height: 1.7;
            color: #4a5568;
            margin-bottom: 25px;
        }
        
        .service-link {
            display: inline-block;
            color: var(--primary-color);
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .service-link:hover {
            color: #5a67d8;
            transform: translateX(5px);
        }
        
        /* Cases Preview Styles */
        .cases-preview {
            min-height: 100vh;
            padding: 100px 0;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .cases-preview .container {
            width: 100%;
        }
        
        .cases-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .case-card {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .case-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .case-icon {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .case-card h3 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--primary-color);
        }
        
        .case-card p {
            font-size: 14px;
            color: #4a5568;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .case-stats {
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        
        .case-stats .stat {
            text-align: center;
        }
        
        .case-stats .number {
            display: block;
            font-size: 24px;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .case-stats .label {
            display: block;
            font-size: 12px;
            color: #718096;
        }
        
        /* Case Highlight Layout */
        .cases-highlight-layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            margin: 0 auto 60px;
            max-width: 1200px;
            justify-items: center;
        }
        
        .case-highlight-card {
            max-width: 550px;
            width: 100%;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            padding: 50px;
            border-radius: 30px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }
        
        .case-highlight-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: var(--primary-gradient);
        }
        
        .case-highlight-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 60px rgba(102, 126, 234, 0.2);
            border-color: rgba(102, 126, 234, 0.3);
        }
        
        .case-badge {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }
        
        .case-main-icon {
            width: 100px;
            height: 100px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            margin: 0 auto 25px;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }
        
        .case-highlight-card h3 {
            font-size: 28px;
            font-weight: 800;
            margin-bottom: 20px;
            color: var(--primary-color);
            text-align: center;
        }
        
        .case-highlight-card p {
            font-size: 16px;
            line-height: 1.8;
            color: #4a5568;
            text-align: center;
            margin-bottom: 35px;
        }
        
        .case-highlight-stats {
            display: flex;
            gap: 20px;
            justify-content: center;
        }
        
        .highlight-stat {
            flex: 1;
            text-align: center;
            padding: 20px;
            background: rgba(102, 126, 234, 0.05);
            border-radius: 16px;
            transition: all 0.3s ease;
        }
        
        .highlight-stat.primary {
            background: var(--primary-gradient);
            color: white;
        }
        
        .highlight-stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
        }
        
        .stat-value {
            font-size: 36px;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 8px;
        }
        
        .highlight-stat.primary .stat-value {
            color: white;
        }
        
        .stat-unit {
            font-size: 20px;
            font-weight: 700;
        }
        
        .stat-desc {
            font-size: 14px;
            color: #718096;
            font-weight: 600;
        }
        
        .highlight-stat.primary .stat-desc {
            color: rgba(255,255,255,0.9);
        }
        
        .cases-cta {
            text-align: center;
            margin-top: 40px;
        }
        
        .btn-primary-large {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 20px 60px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 700;
            font-size: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        }
        
        .btn-primary-large:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
        }
        
        .learn-more {
            text-align: center;
            margin-top: 40px;
        }
        
        .btn-primary {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 16px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
        }
        
        /* Contact Page Section */
        .contact-page-section {
            min-height: 100vh;
            padding: 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 25%, #dee2e6 75%, #ced4da 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Contact Two Column Layout */
        .contact-two-column {
            display: flex;
            width: 100%;
            min-height: 100vh;
        }
        
        .contact-trust-column {
            flex: 0 0 45%;
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }
        
        .contact-trust-column::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 200px 200px, 300px 300px, 150px 150px;
        }
        
        .contact-trust-content {
            position: relative;
            z-index: 1;
            max-width: 500px;
        }
        
        .contact-badge {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }
        
        .contact-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 20px;
            line-height: 1.1;
            letter-spacing: -2px;
        }
        
        .contact-subtitle {
            font-size: 18px !important;
            margin-bottom: 50px;
            opacity: 0.9;
            line-height: 1.7;
        }
        
        .trust-features {
            margin-bottom: 50px;
        }
        
        .trust-feature {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            border-left: 4px solid var(--primary-color);
            transition: all 0.3s ease;
        }
        
        .trust-feature:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(10px);
        }
        
        .trust-icon {
            font-size: 36px;
            margin-right: 20px;
            min-width: 50px;
            text-align: center;
        }
        
        .trust-text h4 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .trust-text p {
            font-size: 14px;
            opacity: 0.8;
            line-height: 1.5;
        }
        
        .contact-info-box {
            background: rgba(102, 126, 234, 0.1);
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            border: 2px solid rgba(102, 126, 234, 0.3);
        }
        
        .contact-info-box h4 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
        }
        
        .contact-phone {
            font-size: 32px;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 10px;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .contact-hours {
            font-size: 14px;
            opacity: 0.8;
        }
        
        .contact-form-column {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px;
            background: white;
        }
        
        .contact-form-column .consultation-container {
            width: 100%;
            max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    transition: all 0.4s ease;
        }
        
        .contact-form-column .consultation-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 60px rgba(102, 126, 234, 0.2);
        }
        
        /* Responsive Design for PC Optimized Layouts */
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Roboto, sans-serif;
            line-height: 1.65;
            color: #2d3748;
            background-color: #fff;
            font-weight: 500;
            letter-spacing: -0.01em;
            overflow-x: hidden;
            width: 100%;
            /* Sticky Footer 레이아웃 */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        
        /* Page Transition Slide Animation */
        /* 페이지 전환 효과 비활성화 */
        .page-transition {
            display: none;
        }
        
        .page-transition.slide-in {
            display: none;
        }
        
        .page-transition.slide-out {
            display: none;
        }
        
        body.page-animating {
            overflow: visible;
        }
        
        .page-transition-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
        }
        
        .page-transition-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .page-transition-text {
            font-size: 18px;
            font-weight: 600;
            opacity: 0.9;
        }
        html { 
            scroll-behavior: smooth; 
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            width: 100%;
        }
        
        body { 
            position: relative;
        }
        
        /* 푸터 섹션 스타일 최적화 */
        #footer-section {
            margin-top: 0 !important;
            padding-bottom: 30px;
            position: relative;
            z-index: 1;
        }
        
        /* CTA가 푸터 내용을 가리지 않도록 */
        .cta-section {
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
            z-index: 999; /* 푸터보다 낮은 z-index */
        }
        
        /* 페이지 하단에 여백 추가 - CTA와 겨치지 않도록 */
        body {
            padding-bottom: 0;
        }
        
        .container {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        /* Disable long-press copy on logo */
        .logo-container, .logo-container img {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        /* Header */
        header {
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            color: white;
            padding: 40px 0 80px;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.01) 50%, transparent 60%);
            background-size: 200px 200px, 300px 300px, 150px 150px, 100% 100%;
        }
        
        header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.1) 100%);
        }
        
        .hero-content {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
            width: 100%;
        }
        
        .hero-subtitle {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 20px;
            opacity: 0.95;
            letter-spacing: 1px;
            text-transform: uppercase;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            text-align: center;
            color: #f9f9f9;
        }
        
        .hero-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: -0.3px;
            line-height: 1.2;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .hero-description {
            font-size: 16px;
            line-height: 1.4;
            opacity: 0.92;
            max-width: 280px;
            margin: 0 auto 6px;
            font-weight: 500;
            letter-spacing: -0.1px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        /* 미디어 쿼리 제거 - 기본 스타일로 통합 */
        
        /* 상단 헤더 로고 스타일 */
        .logo-container {
            width: 200px;
            height: 60px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .logo-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            filter: brightness(0) invert(1);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
        }
        
        /* Common Section Styles */
        .section-title {
            font-size: 48px !important;
            font-weight: 900;
            text-align: center;
        margin-bottom: 40px;
            color: #2d3748;
            letter-spacing: -2px;
            position: relative;
            line-height: 1.1;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
        bottom: -4px;
            left: 50%;
            margin-left: -30px;
            width: 60px;
            height: 4px;
            background: var(--primary-gradient);
            border-radius: 2px;
        }
        
        .section-subtitle {
            font-size: 18px !important;
            text-align: center;
            margin-bottom: 60px;
            color: #4a5568;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.7;
            font-weight: 500;
            letter-spacing: -0.3px;
        }
        
        .highlight-text-inline {
            color: var(--primary-color);
            font-weight: 800;
            text-shadow: 0 1px 2px rgba(102, 126, 234, 0.1);
        }
        
        /* 1. 인지 단계 - Problem Awareness Section */
        .problems {
            min-height: 100vh;
            padding: 80px 0;
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        
        /* 모바일 기본 스타일 - 403px 이상에서 점진적 향상 */
        
        .problems::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.01) 50%, transparent 60%);
            background-size: 200px 200px, 300px 300px, 150px 150px, 100% 100%;
        }
        
        .problem-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 70px;
        }
        
        .problem-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .problem-badge {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .problem-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 20px;
            letter-spacing: -2px;
            line-height: 1.1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .problem-subtitle {
            font-size: 18px !important;
            line-height: 1.7;
            opacity: 0.9;
            max-width: 550px;
            margin: 0 auto;
            font-weight: 500;
            letter-spacing: -0.2px;
        }
        
        .problem-layout {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            align-items: stretch;
            margin-top: 60px;
        }
        
        /* New Problem Card Styles */
        .problem-card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            padding: 40px 30px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .problem-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }
        
        .problem-card:hover::before {
            transform: scaleX(1);
        }
        
        .problem-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 107, 107, 0.3);
            box-shadow: 0 20px 50px rgba(255, 107, 107, 0.2);
        }
        
        .problem-card-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .problem-icon-wrapper {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
            transition: all 0.4s ease;
        }
        
        .problem-card:hover .problem-icon-wrapper {
            transform: scale(1.1) rotate(-5deg);
            box-shadow: 0 15px 40px rgba(255, 107, 107, 0.5);
        }
        
        .problem-icon-wrapper .problem-icon {
            width: 40px;
            height: 40px;
            color: white;
        }
        
        .problem-card-title {
            font-size: 24px;
            font-weight: 800;
            color: white;
            text-align: center;
            letter-spacing: -0.5px;
        }
        
        .problem-card-body {
            text-align: center;
        }
        
        .problem-main-stat {
            font-size: 36px;
            font-weight: 900;
            color: #ff6b6b;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .problem-stat-label {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 25px;
            font-weight: 600;
        }
        
        .problem-divider {
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
            margin: 25px auto;
            border-radius: 2px;
        }
        
        .problem-details-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .problem-details-list li {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.9);
            padding: 12px 20px;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            border-left: 3px solid #ff6b6b;
            text-align: left;
            transition: all 0.3s ease;
        }
        
        .problem-details-list li:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
            border-left-color: #ee5a6f;
        }
        
        .problem {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 20px 15px;
            border-radius: 15px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 107, 107, 0.05) 100%);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 107, 107, 0.2);
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            overflow: hidden;
            min-height: 180px;
        }
        
        .problem:hover {
            transform: translateY(-20px) scale(1.05);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 107, 107, 0.08) 100%);
            border-color: rgba(255, 107, 107, 0.4);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .problem {
            align-self: center;
            margin: 0;
        }
        
        .problem-illustration {
            width: 70px;
            height: 70px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            box-shadow: 
                0 10px 20px rgba(102, 126, 234, 0.3),
                0 4px 10px rgba(102, 126, 234, 0.2);
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }
        
        .problem-icon {
            width: 35px;
            height: 35px;
            color: white;
            stroke-width: 2;
        }
        
        .problem:hover .problem-illustration {
            transform: scale(1.2) rotate(10deg);
            box-shadow: 
                0 30px 60px rgba(102, 126, 234, 0.4),
                0 15px 30px rgba(102, 126, 234, 0.3);
        }
        
        .problem-title {
            font-size: 16px;
            font-weight: 800;
            margin-bottom: 8px;
            color: #ffffff;
            letter-spacing: -0.2px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            display: block;
            visibility: visible;
            opacity: 1;
            text-align: center;
            line-height: 1.2;
        }
        
        .problem-content {
            text-align: center;
            margin-top: 5px;
        }
        
        .problem-stat {
    font-size: 28px;
    font-weight: 900;
    color: #ff6b6b;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
    background: rgba(255, 107, 107, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 107, 107, 0.2);
    display: inline-block;
}
        
        /* 모바일 기본 스타일 (가장 일반적인 선택자) */
        .problem-label {
            font-size: 12px;
            font-weight: 700;
            color: white;
            margin-bottom: 5px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            white-space: nowrap;
        }
        
        .problem-detail {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.4;
            font-weight: 500;
        }
        
        .problem-highlight {
            color: #667eea;
            font-weight: 700;
            text-shadow: 0 1px 2px rgba(102, 126, 234, 0.3);
        }
        
        /* 2. 호기심 단계 - Stats Grid */
        .stats-section {
            min-height: 100vh;
            padding: 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 25%, #dee2e6 75%, #ced4da 100%);
            color: #2d3748;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .stats-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(102, 126, 234, 0.02) 1px, transparent 1px),
                linear-gradient(45deg, transparent 40%, rgba(102, 126, 234, 0.01) 50%, transparent 60%);
            background-size: 200px 200px, 300px 300px, 150px 150px, 100% 100%;
        }
        
        .stats-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .stats-header {
            text-align: center;
            margin-bottom: 25px;
            margin-top: 20px;
        }
        
        .stats-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 12px;
            letter-spacing: -2px;
            line-height: 1.1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stats-subtitle {
            font-size: 18px !important;
            line-height: 1.7;
            opacity: 0.9;
            max-width: 450px;
            margin: 0 auto 20px;
            font-weight: 500;
            letter-spacing: -0.2px;
            color: #4a5568;
        }
        
        .stats-layout {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            align-items: center;
            height: auto;
            margin-bottom: 20px;
        }
        
        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 15px 12px;
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(102, 126, 234, 0.1);
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            overflow: hidden;
            box-shadow: 
                0 6px 20px rgba(0,0,0,0.08),
                0 2px 8px rgba(0,0,0,0.06);
            min-height: 130px;
        }
        
        .stat-item:hover {
            transform: translateY(-20px) scale(1.05);
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(102, 126, 234, 0.3);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .stat-item {
            align-self: center;
            margin: 0;
        }
        
        .stat-illustration {
            width: 26px;
            height: 26px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            font-size: 11px;
            box-shadow: 
                0 3px 8px rgba(102, 126, 234, 0.3),
                0 1px 4px rgba(102, 126, 234, 0.2);
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }
        
        .stat-item:hover .stat-illustration {
            transform: scale(1.2) rotate(10deg);
            box-shadow: 
                0 14px 28px rgba(102, 126, 234, 0.4),
                0 6px 14px rgba(102, 126, 234, 0.3);
        }
        
        .stat-number {
            font-size: 22px;
            font-weight: 900;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 6px;
            display: block;
            letter-spacing: -0.5px;
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        .stat-item:hover .stat-number {
            transform: scale(1.1);
            filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
        }
        
        .stat-label {
            font-size: 9px;
            color: #4a5568;
            margin-bottom: 2px;
            font-weight: 700;
            letter-spacing: -0.1px;
        }
        
        .stat-description {
            font-size: 10px;
            color: #718096;
            line-height: 1.2;
            font-weight: 500;
            letter-spacing: -0.05px;
        }
        
        .comparison-container {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 
                0 8px 20px rgba(0,0,0,0.08),
                0 3px 12px rgba(0,0,0,0.06);
            border: 1px solid rgba(102, 126, 234, 0.1);
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            margin-top: 20px;
        }
        
        .comparison-container:hover {
            transform: translateY(-10px);
            box-shadow: 
                0 30px 80px rgba(0,0,0,0.12),
                0 15px 35px rgba(102, 126, 234, 0.15);
        }
        
        .table-header {
            background: var(--primary-gradient);
            color: white;
            padding: 16px 18px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 18px;
            text-align: center;
            font-weight: 800;
            letter-spacing: -0.2px;
            position: relative;
        }
        
        .table-header div:first-child {
            position: relative;
        }
        
        .table-header div:first-child::after {
            content: '';
            position: absolute;
            right: -9px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 60%;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 1px;
        }
        
        .table-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        }
        
        .table-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 18px;
            padding: 16px;
            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
            text-align: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.5);
            transition: background 0.3s ease;
        }
        
        .table-row div:first-child {
            position: relative;
        }
        
        .table-row div:first-child::after {
            content: '';
            position: absolute;
            right: -9px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 60%;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 1px;
        }
        
        .table-row:hover {
            background: rgba(255, 255, 255, 0.8);
        }
        
        .table-row:last-child {
            border-bottom: none;
        }
        
        .table-cell {
            padding: 10px;
            font-size: 15px;
            font-weight: 500;
        } */ /* 769px 미디어 쿼리 끝 */
        
        .testimonial-item {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            padding: 25px 20px;
            border-radius: 18px;
            box-shadow: 
                0 10px 25px rgba(0,0,0,0.08),
                0 4px 15px rgba(0,0,0,0.06);
            border: 1px solid rgba(102, 126, 234, 0.1);
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 180px;
            min-width: 320px;
            max-width: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-shrink: 0;
        }
        
        .testimonial-item:hover {
            transform: translateY(-6px) scale(1.01);
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(102, 126, 234, 0.3);
            box-shadow: 
                0 20px 50px rgba(0,0,0,0.12),
                0 10px 25px rgba(102, 126, 234, 0.15);
        }
        
        .testimonial-quote {
            font-size: 16px;
            line-height: 1.5;
            color: #2d3748;
            margin-bottom: 20px;
            font-style: italic;
            font-weight: 500;
            letter-spacing: -0.1px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-info {
            margin-left: 15px;
        }
        
        .author-name {
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 5px;
            letter-spacing: -0.2px;
        }
        
        .author-title {
            font-size: 14px;
            color: #4a5568;
            font-weight: 500;
            letter-spacing: -0.05px;
        }
        
        /* 5. 문의 단계 - Contact & CTA */
        .contact-section {
            padding: 60px 0 0 0;
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            color: white;
            position: relative;
            overflow: hidden;
        }
        
        .contact-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.05) 1px, transparent 1px),
                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.03) 1.5px, transparent 1.5px);
            background-size: 150px 150px, 200px 200px;
        }
        
        .contact-form {
            background: rgba(255,255,255,0.1);
            padding: 40px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
        }
        
        .submit-btn {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 16px 40px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            box-shadow: 
                0 8px 20px rgba(102, 126, 234, 0.3),
                0 4px 10px rgba(102, 126, 234, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.2);
            position: relative;
            overflow: hidden;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 
                0 12px 30px rgba(102, 126, 234, 0.4),
                0 6px 15px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        
        .cta-section {
            background: linear-gradient(135deg, rgba(15, 20, 25, 0.95) 0%, rgba(26, 35, 50, 0.95) 100%);
            backdrop-filter: blur(15px);
            color: white;
            padding: 18px 0;
            text-align: center;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            box-shadow: 
                0 -12px 30px rgba(0,0,0,0.3),
                0 -4px 15px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.1);
            border-top: 1px solid rgba(255,255,255,0.15);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
            will-change: transform;
        }
        
        .cta-section .container { 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            gap: 20px; 
        }
        
        .cta-section .cta-title { 
            margin: 0; 
            font-size: 22px; 
            line-height: 1.3; 
            font-weight: 700;
            white-space: nowrap;
        }
        
        .cta-section .cta-button { 
            padding: 16px 40px; 
            font-size: 18px; 
            white-space: nowrap;
            min-width: 180px;
        }
        
        .cta-button {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 20px 50px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 800;
            font-size: 20px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 8px 20px rgba(102, 126, 234, 0.3),
                0 4px 10px rgba(102, 126, 234, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.2);
            position: relative;
            overflow: hidden;
        }
        
        .cta-button:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 
                0 12px 30px rgba(102, 126, 234, 0.4),
                0 6px 15px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        
        /* 팝업 모달 스타일 */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
        }
        
        .popup-overlay.active {
            display: flex;
            opacity: 1;
        }
        
        .popup-content {
            background: white;
            border-radius: 20px;
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.3),
                0 10px 25px rgba(0, 0, 0, 0.2);
            width: calc(100% - 120px);
            max-width: 800px;
            max-height: 80vh;
            overflow: hidden;
            transform: scale(0.9);
            margin: 10px 60px;
            padding: 0;
        }
        
        .popup-overlay.active .popup-content {
            transform: scale(1);
        }
        
        .popup-header {
            background: var(--primary-gradient);
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 20px 20px 0 0;
            overflow: hidden;
            position: relative;
        }
        
        .popup-header h3 {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.2px;
        }
        
        .popup-close {
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .popup-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-50%) scale(1.1);
        }
        
        /* 상담 팝업 전용 스타일 */
        .consultation-popup {
            width: 98%;
            max-height: 95vh;
        }
        
        .consultation-container {
        padding: 40px;
            background: white;
        border-radius: 24px;
        position: relative;
        overflow: hidden;
    }

    .consultation-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--primary-gradient);
        }
        
        /* 상담 폼 스타일 */
        .tabs {
            display: flex;
            background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
            border-bottom: 1px solid rgba(102, 126, 234, 0.1);
        }
        
        .tab {
            flex: 1;
            padding: 18px 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: transparent;
            font-size: 16px;
            font-weight: 600;
            color: #4a5568;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
        }
        
        .tab.active {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            color: var(--primary-color);
            border-bottom: 3px solid #667eea;
            box-shadow: 
                0 4px 12px rgba(102, 126, 234, 0.15),
                inset 0 1px 0 rgba(255,255,255,0.8);
        }
        
        .tab:hover:not(.active) {
            background: rgba(102, 126, 234, 0.05);
            color: var(--primary-color);
        }
        
        .tab-content {
            display: none;
            padding: 20px 30px;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes fadeIn {
            from { 
                opacity: 0; 
                transform: translateY(8px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }

    /* Form Header */
    .form-header {
        text-align: center;
        margin-bottom: 35px;
        padding-bottom: 25px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .form-title {
        font-size: 28px;
        font-weight: 800;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 10px;
        letter-spacing: -0.5px;
    }

    .form-description {
        font-size: 15px;
        color: #4a5568;
        font-weight: 500;
        }
        
        /* 진행 단계 표시 */
        .progress-container {
        margin-bottom: 30px;
        padding: 20px 0;
    }

    .progress-steps {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        gap: 8px;
    }

    .progress-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        position: relative;
    }

    .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6b7280;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 8px;
        transition: all 0.3s ease;
        border: 2px solid #e9ecef;
    }

    .progress-step.active .step-circle {
        background: var(--primary-gradient);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        transform: scale(1.1);
    }

    .progress-step.completed .step-circle {
        background: rgba(102, 126, 234, 0.2);
        color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .step-label {
        font-size: 11px;
        color: #6b7280;
        font-weight: 600;
        text-align: center;
        line-height: 1.2;
    }

    .progress-step.active .step-label {
        color: var(--primary-color);
        font-weight: 700;
        }
        
        .progress-bar {
            width: 100%;
        height: 8px;
            background: #e2e8f0;
        border-radius: 4px;
            overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
        }
        
        .progress-fill {
            height: 100%;
        background: var(--primary-gradient);
        border-radius: 4px;
            width: 33.33%;
        transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    }

    /* Input with Icon */
    .input-with-icon {
        position: relative;
        display: flex;
        align-items: center;
    }

    .input-icon {
        position: absolute;
        left: 15px;
        font-size: 20px;
        z-index: 1;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .input-with-icon input,
    .input-with-icon select {
        padding-left: 50px !important;
    }

    .input-with-icon.textarea-wrapper {
        align-items: flex-start;
    }

    .input-with-icon.textarea-wrapper .input-icon {
        top: 15px;
    }

    .input-with-icon.textarea-wrapper textarea {
        padding-left: 50px !important;
    }

    .form-group:focus-within .input-icon {
        transform: scale(1.1);
        filter: grayscale(0);
    }

    /* Responsive Design for Contact Form */
        
        /* Step-by-step form */
        .form-step { 
            display: none; 
        }
        
        .form-step.active { 
            display: block; 
            animation: stepIn 300ms cubic-bezier(0.4, 0, 0.2, 1); 
        }
        
        @keyframes stepIn {
            from { 
                opacity: 0; 
                transform: translateY(12px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .step-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
        margin-top: 30px;
        padding: 20px 0 0 0;
        border-top: 2px solid rgba(102, 126, 234, 0.1);
        }
        
        .back-btn {
        background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
            color: #2d3748;
        padding: 14px 28px;
        border: 2px solid rgba(102, 126, 234, 0.2);
            border-radius: 12px;
        font-size: 15px;
        font-weight: 700;
            cursor: pointer;
        min-width: 140px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
        0 4px 12px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.8);
        }
        
        .back-btn:hover:not(:disabled) {
            transform: translateY(-2px);
        background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
        border-color: rgba(102, 126, 234, 0.4);
            box-shadow: 
        0 8px 20px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.9);
        }
        
        .back-btn:disabled {
        opacity: 0.4;
            cursor: not-allowed;
            transform: none;
            box-shadow: 
                0 2px 8px rgba(0,0,0,0.04),
                inset 0 1px 0 rgba(255,255,255,0.6);
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 6px;
            font-weight: 700;
            color: #2d3748;
            text-align: center;
            margin-left: 0;
            letter-spacing: -0.2px;
            font-size: 13px;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #2d3748;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: block;
            margin: 0 auto;
            box-shadow: 
                0 2px 8px rgba(0,0,0,0.04),
                inset 0 1px 0 rgba(255,255,255,0.8);
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 
                0 4px 12px rgba(102, 126, 234, 0.15),
                0 0 0 3px rgba(102, 126, 234, 0.1),
                inset 0 1px 0 rgba(255,255,255,0.9);
            transform: translateY(-1px);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
        .btn {
            background: var(--primary-gradient);
            color: white;
            padding: 16px 32px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        min-width: 180px;
            box-shadow: 
                0 8px 20px rgba(102, 126, 234, 0.3),
                0 4px 10px rgba(102, 126, 234, 0.2),
                inset 0 1px 0 rgba(255,255,255,0.2);
            position: relative;
            overflow: hidden;
        }
        
        .btn.next-btn {
            width: 100%;
            margin-top: 20px;
            display: block; 
            margin-left: auto;
            margin-right: auto;
        }
        
        .btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 
                0 12px 30px rgba(102, 126, 234, 0.4),
                0 6px 15px rgba(102, 126, 234, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }
        
        .reservation-item {
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            padding: 25px;
            margin-bottom: 20px;
            border-radius: 16px;
            border-left: 4px solid #667eea;
            box-shadow: 
                0 8px 25px rgba(0,0,0,0.06),
                0 3px 10px rgba(0,0,0,0.04),
                inset 0 1px 0 rgba(255,255,255,0.8);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .reservation-item:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 12px 35px rgba(0,0,0,0.08),
                0 5px 15px rgba(0,0,0,0.06),
                inset 0 1px 0 rgba(255,255,255,0.9);
            border-left-color: #764ba2;
        }
        
        .reservation-item h3 {
            color: #2d3748;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -0.3px;
        }
        
        .reservation-item p {
            margin-bottom: 6px;
            color: #4a5568;
            font-weight: 500;
            letter-spacing: -0.1px;
        }
        
        .reservation-item .date {
            color: #718096;
            font-size: 14px;
            font-style: italic;
            font-weight: 500;
            opacity: 0.8;
        }
        
        .delete-btn {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            float: right;
            margin-top: 10px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 2px 8px rgba(255, 107, 107, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.2);
        }
        
        .delete-btn:hover {
            background: linear-gradient(135deg, #ee5a52 0%, #ff6b6b 100%);
            transform: translateY(-1px);
            box-shadow: 
                0 4px 12px rgba(255, 107, 107, 0.4),
                inset 0 1px 0 rgba(255,255,255,0.3);
        }
        
        .empty-message {
            text-align: center;
            color: #718096;
            font-style: italic;
            font-weight: 500;
            padding: 50px 40px;
            background: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(248,249,250,0.5) 100%);
            border-radius: 16px;
            border: 2px dashed rgba(102, 126, 234, 0.2);
        }
        
        .stats {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stats .stat-item {
            text-align: center;
            background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
            padding: 25px 20px;
            border-radius: 16px;
            flex: 1;
            margin: 0 10px;
            box-shadow: 
                0 8px 25px rgba(0,0,0,0.06),
                0 3px 10px rgba(0,0,0,0.04),
                inset 0 1px 0 rgba(255,255,255,0.8);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .stats .stat-item:hover {
            transform: translateY(-3px);
            box-shadow: 
                0 12px 35px rgba(0,0,0,0.08),
                0 5px 15px rgba(0,0,255,0.06),
                inset 0 1px 0 rgba(255,255,255,0.9);
        }
        
        .stats .stat-number {
            font-size: 36px;
            font-weight: 900;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -1px;
            margin-bottom: 8px;
        }
        
        .admin-notice {
            background: linear-gradient(145deg, #fff3cd 0%, #ffeaa7 100%);
            border: 1px solid rgba(255, 234, 167, 0.8);
            border-radius: 12px;
            padding: 18px 20px;
            margin: 20px 30px;
            text-align: center;
            color: #856404;
            font-size: 14px;
            font-weight: 600;
            display: none;
            box-shadow: 
                0 4px 12px rgba(255, 234, 167, 0.3),
                inset 0 1px 0 rgba(255,255,255,0.5);
        }
        
        .admin-notice.show {
            display: block;
            animation: slideDown 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* PC 버전 기본 스타일 */
        .company-info-text {
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-align: center;
        }
        
        .info-line {
            display: block;
            margin: 0;
            font-size: 16px;
            line-height: 1.6;
        }
        
        .copy-text {
            color: inherit;
            font-weight: inherit;
        }
        
        /* 카피라이트 섹션 기본 스타일 */
        .copyright-section {
            text-align: center;
        }
        
        .copyright-line {
            display: inline;
            font-size: 14px;
            opacity: 0.8;
        }
        
        .copyright-line:not(:last-child)::after {
            content: " | ";
        }
        
        /* 스크롤 인디케이터 */
        /* 스크롤 인디케이터 및 애니메이션 효과 비활성화 */
        .scroll-indicator {
            display: none;
        }
        
        .scroll-indicator.fade-in {
            display: none;
        }
        
        .scroll-indicator::after {
            display: none;
        }
        
        .scroll-indicator.fade-in::after {
            display: none;
        }
        */ /* 431px 미디어 쿼리 끝 */
        /* @media (min-width: 481px) {
    /* 비교 테이블 481px 이상 최적화 */
    .comparison-container { 
        margin-top: 8px;
    }

    .table-header {
        padding: 7px 9px;
        gap: 9px;
        font-size: 10px;
        letter-spacing: -0.4px;
    }

    .table-row {
        padding: 7px 9px;
        gap: 9px;
    }

    .table-cell {
        padding: 4px;
        font-size: 9px;
        letter-spacing: -0.3px;
        word-break: keep-all;
    }

    .table-cell.highlight {
        font-size: 10px;
        padding: 5px 4px;
        letter-spacing: -0.3px;
    }

    .feature-label {
        font-size: 9px;
        letter-spacing: -0.3px;
    }

    /* 자격증 카드 481px 이상 최적화 */
    .qualifications-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .qualification-item {
        padding: 10px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .qualification-icon {
        display: none;
    }

    .qualification-name {
        font-size: 11px;
        margin-bottom: 3px;
        letter-spacing: -0.3px;
        word-break: keep-all;
        color: #2d3748;
    }

    .qualification-desc {
        font-size: 10px;
        line-height: 1.2;
        letter-spacing: -0.2px;
        color: #718096;
    }

    /* 인지단계 카드 481px 이상 최적화 */
    .problem {
        padding: 12px 8px;
        min-height: auto;
        max-height: none;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: visible;
    }

    .problems .problem-title {
        font-size: 13px;
        line-height: 1.3;
        margin-bottom: 8px;
        text-align: center;
        word-break: keep-all;
        letter-spacing: -0.2px;
        color: #ffffff;
        font-weight: 700;
        display: block;
        visibility: visible;
        opacity: 1;
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    header {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0 40px;
    }

    .logo-container {
        width: 320px;
        height: 96px;
        margin-bottom: 5px;
    }

    /* 480px 이하에서만 자세히보기 버튼 표시 */
    .show-more-btn {
        display: inline-block;
        margin-top: 8px;
        margin-bottom: 5px;
        align-self: center;
        flex-shrink: 0;
    }

    /* 모바일에서는 호버 효과 제거하고 기본 상태에서 텍스트 보이게 */
    .problem-card:hover .problem-description {
        opacity: 0;
        max-height: 0;
        margin-top: 0;
        transform: translateY(-10px);
    }

    /* 모바일에서 기본 상태에서는 설명 텍스트 완전히 숨김 */
    .problem-description {
        opacity: 0;
        max-height: 0;
        margin-top: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(-10px);
    }

    /* expanded 상태일 때만 보임 */
    .problem-card.expanded .problem-description {
        opacity: 1;
        max-height: 200px;
        margin-top: 10px;
        overflow: visible;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateY(0);
    }

    .container {
        padding: 0 15px;
    }

    header {
        padding: 30px 0 40px;
    }

    .hero-title {
        font-size: 26px;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .hero-description {
        margin-bottom: 8px;
        line-height: 1.5;
    }

    .hero-subtitle {
        font-size: 11px;
        margin-bottom: 36px;
    }

    .section-title {
        font-size: 22px;
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .section-subtitle {
        font-size: 15px;
        margin-bottom: 25px;
        line-height: 1.4;
        padding: 0 5px;
    }

    .problems {
        height: 90vh;
        min-height: 90vh;
        padding: 35px 0;
    }

        .stats-section,
        .services-section,
        .testimonials-section,
        .process-section,
    .expert-section {
        padding: 60px 0;
        min-height: auto;
    }

    .cta-section {
        padding: 12px 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    .stat-number {
        font-size: 18px;
    }

    .stat-label {
        font-size: 9px;
    }

    .stat-description {
        font-size: 8px;
    }

    .cta-section .container {
        gap: 8px;
        padding: 0 10px;
    }

    .cta-section .cta-title {
        font-size: 11px;
    }

    .cta-section .cta-button {
        font-size: 10px;
        padding: 8px 12px;
        min-width: 70px;
    }

    .step {
        padding: 18px 12px;
    }

    .step-number {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    /* 회사 정보 섹션 480px 최적화 */
    section[style*="Company Info Section"] {
        padding: 15px 0;
    }

    section[style*="Company Info Section"] .container {
        padding: 0 15px;
    }

    section[style*="Company Info Section"] img {
        width: 180px;
        height: 54px;
        margin-bottom: 12px;
    }

    .info-line {
        font-size: 11px;
        line-height: 1.3;
        margin: 1px 0;
    }

    .company-info-text {
        gap: 4px;
        padding: 0 10px;
    }

    section[style*="Company Info Section"] div[style*="margin-top: 30px"] {
        margin-top: 12px;
        padding-top: 10px;
    }

    section[style*="Company Info Section"] p[style*="font-size: 14px"] {
        font-size: 10px;
        line-height: 1.3;
    }

    /* ========================================
        태블릿 버전 (768px 이상)
        ======================================== */

    /* ========================================
        데스크톱 버전 (1024px 이상)
        ======================================== */

    /* ========================================
        대형 데스크톱 버전 (1440px 이상)
        ======================================== */

    /* ========================================
        Service Tabs Interface Styles
        ======================================== */

    /* Tab Navigation */
    .service-tabs {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin: 50px 0 40px;
        flex-wrap: wrap;
    }

    .tab-btn {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(102, 126, 234, 0.2);
        padding: 18px 30px;
        border-radius: 16px;
        font-size: 16px;
        font-weight: 600;
        color: #2d3748;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        position: relative;
        overflow: hidden;
    }

    .tab-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--primary-gradient);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    .tab-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
        border-color: rgba(102, 126, 234, 0.4);
    }

    .tab-btn.active {
        background: var(--primary-gradient);
        border-color: transparent;
        color: white;
        box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
        transform: translateY(-3px);
    }

    .tab-btn.active::before {
        opacity: 1;
    }

    .tab-icon {
        display: none;
    }

    .tab-text {
        letter-spacing: -0.3px;
    }

    /* Tab Content */
    .tab-contents {
        position: relative;
        min-height: 600px;
    }

    .tab-content {
        display: none;
        opacity: 0;
        animation: fadeOut 0.3s ease forwards;
    }

    .tab-content.active {
        display: block;
        animation: fadeIn 0.5s ease forwards;
    }

    @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
        }
    to {
        opacity: 1;
        transform: translateY(0);
        }
    }

    @keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
        }
    to {
        opacity: 0;
        transform: translateY(-20px);
        }
    }

    /* Content Layout */
    .content-layout {
        display: grid;
        grid-template-columns: 350px 1fr;
        gap: 50px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        padding: 50px;
        border-radius: 24px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.1);
        border: 1px solid rgba(102, 126, 234, 0.1);
    }

    /* Visual Section */
    .content-visual {
        display: flex;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        margin-top: 50px;
    }

    .visual-icon {
        width: 120px;
        height: 120px;
        background: var(--primary-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
    }

    .visual-icon::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: shimmer 3s infinite;
    }

    @keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    }

    .visual-icon svg {
        width: 60px;
        height: 60px;
        stroke: white;
        position: relative;
        z-index: 1;
    }

    .visual-stats {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .stat-item {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 25px;
        border-radius: 16px;
        text-align: center;
        border: 1px solid rgba(102, 126, 234, 0.1);
        transition: all 0.3s ease;
    }

    .stat-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }

    .stat-number {
        font-size: 32px;
        font-weight: 800;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 8px;
        display: block;
    }

    .stat-label {
        font-size: 14px;
        color: #4a5568;
        font-weight: 600;
    }

    /* Details Section */
    .content-details {
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .detail-section {
        padding-bottom: 35px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.1);
    }

    .detail-section:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .detail-title {
        font-size: 20px;
        font-weight: 700;
        color: #2d3748;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .detail-title::before {
        content: '';
        width: 4px;
        height: 20px;
        background: var(--primary-gradient);
        border-radius: 2px;
    }

    .detail-objective {
        font-size: 17px;
        line-height: 1.8;
        color: #2d3748;
        padding: 20px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-left: 4px solid var(--primary-color);
        border-radius: 8px;
    }

    .detail-objective strong {
        color: var(--primary-color);
        font-weight: 700;
    }

    /* Detail List */
    .detail-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .detail-list li {
        display: flex;
        gap: 15px;
        align-items: flex-start;
    }

    .list-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        background: var(--primary-gradient);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        margin-top: 2px;
    }

    .list-content {
        flex: 1;
    }

    .list-content strong {
        font-size: 16px;
        color: #2d3748;
        font-weight: 700;
        display: block;
        margin-bottom: 8px;
    }

    .list-content p {
        font-size: 15px;
        line-height: 1.7;
        color: #4a5568;
        margin: 0;
    }

    /* Outcome Grid */
    .outcome-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 15px;
    }

    .outcome-item {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
        padding: 25px 20px;
        border-radius: 16px;
        text-align: center;
        border: 1px solid rgba(102, 126, 234, 0.15);
        transition: all 0.3s ease;
    }

    .outcome-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(102, 126, 234, 0.15);
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    }

    .outcome-number {
        font-size: 28px;
        font-weight: 800;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 10px;
        display: block;
    }

    .outcome-desc {
        font-size: 14px;
        color: #4a5568;
        font-weight: 600;
        line-height: 1.4;
    }

    /* Responsive Design for Tabs */

    /* ========================================

/* 3. 신뢰 단계 - Services & Process */
        .services-section {
            min-height: 100vh;
            padding: 80px 0 0 0;
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        
        .services-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.01) 50%, transparent 70%);
            background-size: 200px 200px, 300px 300px, 150px 150px, 100% 100%;
        }
        
        .services-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }
        
        .services-header {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 0;
        }
        
        .services-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 12px;
            letter-spacing: -2px;
            line-height: 1.1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .services-subtitle {
            font-size: 18px !important;
            line-height: 1.7;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
            font-weight: 500;
            letter-spacing: -0.2px;
        }
        
        .services-badge {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .highlight-text {
            color: var(--primary-color);
            font-weight: 700;
        }
        
        .services-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 30px;
        }
        
        .services-stats .stat-item {
            text-align: center;
        }
        
        .services-stats .stat-number {
            font-size: 28px;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .services-stats .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
        }
        
        .services {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 30px;
            align-items: center;
            justify-items: center;
            max-width: 1300px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .service {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 30px 25px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            overflow: hidden;
            width: 100%;
            max-width: 280px;
            min-height: 220px;
        }
        
        

        
        
        .service {
            align-self: center;
            margin: 0;
        }
        
        .service-illustration {
            width: 90px;
            height: 90px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .icon-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .service-icon {
            width: 38px;
            height: 38px;
            color: white;
            stroke-width: 2;
        }
        
        

        
        .service:hover .service-illustration {
            transform: scale(1.2) rotate(10deg);
            box-shadow: 
                0 30px 60px rgba(102, 126, 234, 0.4),
                0 15px 30px rgba(102, 126, 234, 0.3);
        }
        
        /* 모바일 기본 스타일 (가장 일반적인 선택자) */
        .service-title {
            font-size: 12px;
            font-weight: 800;
            margin-bottom: 6px;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.3px;
            text-shadow: none;
        }
        
        .service-description {
            font-size: 9px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.3;
            font-weight: 500;
            letter-spacing: -0.1px;
        }
        
        .service-feature {
            display: block;
            color: rgba(255, 255, 255, 0.9);
            font-size: 11px;
            line-height: 1.3;
            font-weight: 500;
        }
        
        
        
        .service-metric {
            margin-top: 10px;
            padding: 10px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(102, 126, 234, 0.2);
        }
        
        
        .metric-number {
            display: block;
            font-size: 22px;
            font-weight: 900;
            color: var(--primary-color);
        }
        
        .metric-label {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
        }
        
        .services-guarantee {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 50px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .guarantee-icon {
            font-size: 40px;
        }
        
        
        .guarantee-content {
            text-align: center;
        }
        
        .guarantee-title {
            font-size: 20px;
            font-weight: 800;
            color: white;
            margin-bottom: 8px;
        }
        
        .guarantee-description {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.4;
        }
        
        .process-section {
            min-height: 100vh;
            padding: 80px 0 0 0;
            background: #0f1419;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .process-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03) 2px, transparent 2px),
                radial-gradient(circle at 70% 80%, rgba(255,255,255,0.02) 1.5px, transparent 1.5px);
            background-size: 200px 200px, 150px 150px;
            z-index: 0;
        }
        
        .process-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 70px;
        }
        
        .process-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .process-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 20px;
            margin-top: 60px;
            letter-spacing: -2px;
            line-height: 1.1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            color: #ffffff;
        }
        
        .process-subtitle {
            font-size: 18px !important;
            line-height: 1.7;
            opacity: 0.9;
            max-width: 550px;
            margin: 0 auto;
        }
        
        /* Process Cards Layout */
        .process-cards {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 25px;
            max-width: 1400px;
            margin: 50px auto;
            padding: 0 20px;
        }
        
        .process-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 35px 25px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            min-height: 350px;
            display: flex;
            flex-direction: column;
        }
        
        .process-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-gradient);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .process-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(102, 126, 234, 0.4);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.4),
                0 10px 30px rgba(102, 126, 234, 0.3);
        }
        
        .process-card:hover::before {
            opacity: 1;
        }
        
        .card-number {
            font-size: 48px;
            font-weight: 900;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 20px;
            line-height: 1;
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 700;
            color: white;
            margin-bottom: 20px;
            line-height: 1.3;
            letter-spacing: -0.5px;
        }
        
        .card-details {
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .card-details li {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.6;
            padding-left: 20px;
            position: relative;
        }
        
        .card-details li::before {
            content: '•';
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: 900;
            font-size: 18px;
        }
        
        .process-summary {
            text-align: center;
            margin-top: 60px;
            padding: 35px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .summary-text {
            font-size: 18px;
            color: #ffffff;
            font-weight: 600;
            letter-spacing: -0.3px;
            margin: 0;
            line-height: 1.6;
        }


/* 3.5. 전문가 소개 섹션 */
        .expert-section {
            min-height: 100vh;
            padding: 80px 0 0 0;
            background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .expert-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 200px 200px, 300px 300px, 150px 150px;
        }
        
        .expert-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 70px;
        }
        
        .expert-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
        }
        
        .expert-badge {
            display: inline-block;
            background: var(--primary-gradient);
            color: white;
            padding: 8px 16px;
            border-radius: 25px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        
        .expert-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 15px;
            letter-spacing: -2px;
            line-height: 1.1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            color: white;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: initial;
            background-clip: unset;
        }
        
        .expert-subtitle {
            font-size: 18px !important;
            line-height: 1.7;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto 40px;
            font-weight: 500;
            letter-spacing: -0.1px;
            color: rgba(255, 255, 255, 0.85);
            text-align: center;
        }
        
        .expert-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 30px;
            margin-bottom: 20px;
        }
        
        .expert-stats .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 30px 25px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(102, 126, 234, 0.1);
            min-width: 120px;
            min-height: 100px;
            cursor: pointer;
        }
        
        .expert-stats .stat-item:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(102, 126, 234, 0.3);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        
        .expert-stats .stat-item:hover .stat-number {
            transform: scale(1.05);
            color: #5a67d8;
        }
        
        .expert-stats .stat-number {
            font-size: 42px;
            font-weight: 900;
            color: var(--primary-color);
            line-height: 1;
            margin-bottom: 8px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        /* 숫자 카운트업 애니메이션 */
        @keyframes countUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .expert-stats .stat-number.animate {
            animation: countUp 0.8s ease-out forwards;
        }
        
        .expert-stats .stat-label {
            font-size: 14px;
            color: #4a5568;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-align: center;
            line-height: 1.3;
        }
        
        .expert-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start;
        }
        
        .expert-profile {
            text-align: center;
            padding: 50px 40px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .expert-profile::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--primary-gradient);
        }
        
        .expert-profile:hover {
            transform: translateY(-10px);
            box-shadow: 
                0 35px 70px rgba(0,0,0,0.15),
                0 15px 35px rgba(102, 126, 234, 0.2);
        }
        
        .expert-avatar-container {
            position: relative;
            margin-bottom: 25px;
        }
        
        .expert-avatar {
            width: 120px;
            height: 120px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-align: center;
            line-height: 1.2;
            padding: 0 10px;
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
            position: relative;
            z-index: 2;
        }
        
        .expert-avatar-image {
            width: 150px;
            height: 150px;
            margin: 0 auto;
            border-radius: 50%;
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
            transition: all 0.4s ease;
            position: relative;
            z-index: 2;
            object-fit: cover;
            display: block;
        }
        
        .expert-profile:hover .expert-avatar-image {
            transform: none;
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
        }
        
        /* Embedded Stats Style */
        .expert-stats-embedded {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 30px 0;
        }
        
        .stat-item-embedded {
            text-align: center;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            min-width: 100px;
            transition: all 0.3s ease;
        }
        
        .stat-item-embedded:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-3px);
        }
        
        .stat-number-embedded {
            font-size: 36px;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 8px;
            -webkit-text-fill-color: initial;
            background-clip: initial;
        }
        
        .stat-label-embedded {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 600;
        }
        
        /* Horizontal Achievement Items */
        .achievement-item-horizontal {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            text-align: left;
            margin-bottom: 12px;
            padding: 12px 18px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            border-left: 4px solid var(--primary-color);
            transition: all 0.3s ease;
        }
        
        .achievement-item-horizontal:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.15);
        }
        
        .achievement-icon-h {
            display: none !important;
        }
        
        .achievement-item-horizontal span {
            font-size: 15px;
            font-weight: 600;
            color: white;
            line-height: 1.5;
        }
        
        .expert-avatar-glow {
            position: absolute;
            top: 0;
            left: 0;
            width: 140px;
            height: 140px;
            background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            z-index: 1;
        }
        
        .expert-profile:hover .expert-avatar {
            transform: scale(1.15);
            box-shadow: 
                0 25px 50px rgba(102, 126, 234, 0.6),
                0 15px 35px rgba(102, 126, 234, 0.4);
        }
        
        .expert-name {
            font-size: 36px;
            font-weight: 900;
            margin-bottom: 15px;
            color: white;
            letter-spacing: -0.5px;
        }
        
        .expert-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 20px;
            color: #ddd;
            letter-spacing: -0.2px;
            line-height: 1.5;
        }
        
        .expert-achievements {
            margin-top: 25px;
            margin-bottom: 25px;
        }
        
        .achievement-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 15px;
            padding: 12px 16px;
            background: rgba(102, 126, 234, 0.05);
            border-radius: 12px;
            border: 2px solid #667eea;
        }
        
        .achievement-item:hover {
            background: rgba(102, 126, 234, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
        }
        
        .achievement-icon {
            font-size: 20px;
            margin-bottom: 8px;
            text-align: center;
        }
        
        .achievement-item span {
            font-size: 15px;
            font-weight: 600;
            color: #4a5568;
        }
        
        .expert-description {
            font-size: 15px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
            letter-spacing: -0.1px;
            text-align: center;
            margin-top: 20px;
            word-break: keep-all;
        }
        
        .expert-qualifications {
            padding: 40px 30px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .expert-qualifications:hover {
            transform: translateY(-8px);
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.12),
                0 15px 30px rgba(102, 126, 234, 0.15);
        }
        
        .qualifications-title {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 35px;
            color: white;
            letter-spacing: -0.3px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
        }
        
        .title-icon {
            display: none !important;
        }
        
        .qualifications-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        



.qualification-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: left;
}

.qualification-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.15);
    background: rgba(255, 255, 255, 0.1);
}

.qualification-icon {
    display: none !important;
}

.qualification-name {
    display: block;
    text-align: left;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.qualification-desc {
    text-align: left;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}


/* 4. 욕구 단계 - Success Cases (Testimonials) */
        .testimonials-section {
            min-height: 100vh;
            padding: 0;
            color: #2d3748;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .testimonials-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.03) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.04) 1.5px, transparent 1.5px),
                radial-gradient(circle at 40% 80%, rgba(102, 126, 234, 0.02) 1px, transparent 1px),
                linear-gradient(45deg, transparent 40%, rgba(102, 126, 234, 0.01) 50%, transparent 70%);
            background-size: 200px 200px, 300px 300px, 150px 150px, 100% 100%;
        }
        
        .testimonials-container {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 70px;
        }
        
        .testimonials-header {
            text-align: center;
            margin-bottom: 10px;
        }
        
        .testimonials-main-title {
            font-size: 48px !important;
            font-weight: 900;
            margin-bottom: 10px;
            letter-spacing: -2px;
            line-height: 1.1;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .testimonials-subtitle {
            font-size: 18px !important;
            line-height: 1.7;
            opacity: 0.9;
            max-width: 550px;
            margin: 0 auto;
            font-weight: 500;
            letter-spacing: -0.2px;
            color: #4a5568;
        }
        
        .cases {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            align-items: stretch;
            height: 40vh;
            margin-bottom: 5px;
            max-width: 100%;
            overflow: visible;
        }
        
        .case-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 20px 18px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(102, 126, 234, 0.1);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: pointer;
            overflow: visible;
            box-shadow: 
                0 8px 20px rgba(0,0,0,0.08),
                0 3px 12px rgba(0,0,0,0.06);
            min-height: 160px;
            justify-content: space-between;
        }
        
        
        

        
        .case-item:hover {
            transform: translateY(-8px) scale(1.02);
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(102, 126, 234, 0.3);
            box-shadow: 
                0 20px 50px rgba(0,0,0,0.12),
                0 10px 25px rgba(102, 126, 234, 0.15);
        }
        
        .case-item {
            align-self: center;
            margin: 0;
        }
        
        .success-case-illustration {
            width: 60px;
            height: 60px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            font-size: 24px;
            box-shadow: 
                0 6px 15px rgba(102, 126, 234, 0.3),
                0 3px 10px rgba(102, 126, 234, 0.2);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }
        

        
        .case-item:hover .success-case-illustration {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 
                0 15px 30px rgba(102, 126, 234, 0.3),
                0 8px 20px rgba(102, 126, 234, 0.2);
        }
        
        /* 모바일 기본 스타일 (가장 일반적인 선택자) */
        .case-title {
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--primary-color);
            text-shadow: 0 1px 2px rgba(102, 126, 234, 0.1);
            line-height: 1.2;
            letter-spacing: -0.3px;
        }
        
        
        .case-desc {
            font-size: 11px;
            color: #4a5568;
            line-height: 1.3;
            margin-bottom: 10px;
            word-break: keep-all;
        }
        
        .case-details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 10px;
        }
        
        .case-detail {
            text-align: center;
        }
        
        .case-number {
            font-size: 14px;
            font-weight: 700;
            display: block;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 2px;
        }
        
        .case-label {
            font-size: 6px;
            color: #718096;
            font-weight: 500;
            line-height: 1.2;
        }
        
        .testimonials-layout {
            display: flex;
            gap: 20px;
            align-items: stretch;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 20px;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            position: relative;
        }
        
        .testimonials-layout::-webkit-scrollbar {
            height: 8px;
        }
        
        .testimonials-layout::-webkit-scrollbar-track {
            background: rgba(102, 126, 234, 0.1);
            border-radius: 4px;
        }
        
        .testimonials-layout::-webkit-scrollbar-thumb {
            background: var(--primary-gradient);
            border-radius: 4px;
        }
        
        .testimonials-layout::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }
        
        .testimonials-scroll-hint {
            text-align: center;
            margin-bottom: 20px;
            opacity: 0.7;
        }
        
        .testimonials-scroll-hint p {
            font-size: 14px;
            color: #4a5568;
            font-weight: 500;
            letter-spacing: 0.5px;
        }
        
        /* Testimonials Carousel Layout */
        .testimonials-carousel-wrapper {
            overflow: hidden;
            width: 100%;
            margin: 40px 0;
            padding: 20px 0;
            position: relative;
        }
        
        .testimonials-carousel-track {
            display: flex;
            gap: 30px;
            animation: scroll-testimonials 40s linear infinite;
            width: fit-content;
        }
        
        .testimonials-carousel-wrapper:hover .testimonials-carousel-track {
            animation-play-state: paused;
        }
        
        @keyframes scroll-testimonials {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-25%);
            }
        }
        
        /* Old Grid Layout (commented out for reference) */
        /*
        .testimonials-grid-layout {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin: 40px 0;
            padding: 20px 0;
        }
        
        @media (max-width: 1200px) {
            .testimonials-grid-layout {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }
        
        @media (max-width: 768px) {
            .testimonials-grid-layout {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }
        
        .testimonials-grid-layout .testimonial-item {
            min-width: auto;
            max-width: none;
            width: 100%;
            flex-shrink: 1;
        }
        */
        
        .testimonial-item {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            padding: 25px 20px;
            border-radius: 18px;
            box-shadow: 
                0 10px 25px rgba(0,0,0,0.08),
                0 4px 15px rgba(0,0,0,0.06);
            border: 1px solid rgba(102, 126, 234, 0.1);
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            min-height: 180px;
            min-width: 320px;
            max-width: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-shrink: 0;
        }
        
        .testimonial-item:hover {
            transform: translateY(-6px) scale(1.01);
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(102, 126, 234, 0.3);
            box-shadow: 
                0 20px 50px rgba(0,0,0,0.12),
                0 10px 25px rgba(102, 126, 234, 0.15);
        }
        
        .testimonial-quote {
            font-size: 16px;
            line-height: 1.5;
            color: #2d3748;
            margin-bottom: 20px;
            font-style: italic;
            font-weight: 500;
            letter-spacing: -0.1px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-info {
            margin-left: 15px;
        }
        
        .author-name {
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 5px;
            letter-spacing: -0.2px;
        }
        
        .author-title {
            font-size: 14px;
            color: #4a5568;
            font-weight: 500;
            letter-spacing: -0.05px;
        }
        

/* cases.html의 .case-item PC/태블릿 최적화 (768px 이상) */

@media (min-width: 768px) {

    .cases {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 25px;

        align-items: stretch;

        height: auto;

        margin-bottom: 5px;

        max-width: 100%;

        overflow: visible;

        padding: 40px 0;

    }



    .case-item {

        padding: 30px 25px;

        min-height: 220px;

    }



    .success-case-illustration {

        width: 70px;

        height: 70px;

        font-size: 32px;

        margin-bottom: 15px;

    }



    .case-title {

        font-size: 24px;

        font-weight: 800;

        margin-bottom: 10px;

        letter-spacing: -0.5px;

    }



    .case-desc {

        font-size: 16px;

        line-height: 1.6;

        margin-bottom: 20px;

    }



    .case-details {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 15px;

        margin-top: 15px;

    }



    .case-number {

        font-size: 32px;

        font-weight: 900;

    }



    .case-label {

        font-size: 14px;

        font-weight: 600;

    }

    /* ===== Testimonial Item PC/태블릿 최적화 (768px 이상) ===== */
    .testimonial-item {
        max-width: 380px;
        height: auto; /* 높이 고정 해제 */
        min-height: 220px; /* 최소 높이는 유지 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    .testimonial-quote {
        white-space: normal !important;
        word-break: keep-all;
        line-height: 1.5em;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        max-height: 6em; /* 1.5em * 4줄 */
    }

}

/* ========================================
   3. 태블릿 스타일 (1023px 이하)
======================================== */

@media (max-width: 1023px) {
    /* 네비게이션 조정 */
    .nav-container {
        padding: 0 15px;
    }

    .nav-menu {
        gap: 20px;
    }

    .nav-menu a {
        font-size: 15px;
        padding: 6px 12px;
    }

    /* 서비스 그리드 */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* 서비스 행 레이아웃 */
    .service-row {
        gap: 40px;
        padding: 30px;
        margin-bottom: 60px;
    }

    .service-visual {
        flex: 0 0 150px;
    }

    .service-icon-large {
        width: 140px;
        height: 140px;
        font-size: 60px;
    }

    .service-content h3 {
        font-size: 26px;
    }

    .service-content p {
        font-size: 16px;
    }

    /* 서비스 컴팩트 그리드 */
    .services-compact-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* 케이스 하이라이트 레이아웃 */
    .cases-highlight-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .case-highlight-card {
        padding: 40px;
    }

    .case-highlight-card h3 {
        font-size: 24px;
    }

    /* 연락처 2열 레이아웃 */
    .contact-two-column {
        flex-direction: column;
    }

    .contact-trust-column {
        flex: 0 0 auto;
        padding: 40px;
    }

    .contact-form-column {
        padding: 40px;
    }

    .contact-main-title {
        font-size: 36px;
    }

    /* 콘텐츠 레이아웃 (탭용) */
    .content-layout {
        grid-template-columns: 280px 1fr;
        gap: 35px;
        padding: 40px;
    }

    .visual-icon {
        width: 100px;
        height: 100px;
    }

    .visual-icon svg {
        width: 50px;
        height: 50px;
    }
    
    /* Process Cards - 태블릿 */
    .process-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    
    .process-card {
        padding: 30px 20px;
        min-height: 320px;
    }
    
    .card-number {
        font-size: 40px;
    }
    
    .card-title {
        font-size: 16px;
    }
    
    .card-details li {
        font-size: 13px;
    }

    /* ===== CTA 섹션 태블릿 최적화 ===== */
    .cta-section .container {
        gap: 15px;
    }
    
    .cta-section .cta-title {
        font-size: 18px;
    }
    
    .cta-section .cta-button { 
        padding: 14px 30px;
        font-size: 16px;
        min-width: 160px;
    }
}

/* ========================================
   4. 모바일 스타일 (767px 이하, 402px 화면 최적화)
   ======================================== */

@media (max-width: 767px) {
    /* ===== 네비게이션 - 모바일 고정 ===== */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 100%;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        right: -100%;
        flex-direction: column;
        background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
        width: 250px;
        padding: 20px;
        transition: right 0.3s ease;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* ===== 402px 최적화 - 기본 레이아웃 ===== */
    .container {
        padding: 0 15px;
    }

    /* ===== 콘텐츠 여백 (navbar 고정으로 인한 조정) ===== */
    main {
        padding-top: 0 !important;
    }

    header {
        padding-top: 0 !important;
    }

    .page-section-top {
        margin-top: 0 !important;
    }

    /* ===== 문제점 섹션 - 모바일 최적화 (402px) ===== */
    .problems {
        padding: 50px 0;
        padding-top: 50px !important;
        height: auto;
        min-height: initial;
        max-height: none;
    }

    .problem-container {
        padding: 0 15px;
        height: auto;
        min-height: initial;
    }

    .problem-header {
        margin-bottom: 30px;
    }

    .problem-badge {
        font-size: 11px;
        padding: 6px 16px;
        margin-bottom: 15px;
    }

    .problem-main-title {
        font-size: 28px;
        margin-bottom: 15px;
        letter-spacing: -1px;
    }

    .problem-subtitle {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }

    .problem-layout {
        grid-template-columns: 1fr; /* 3열을 1열로 변경 */
        gap: 20px; /* 카드 사이의 간격 축소 */
        margin-top: 30px;
    }

    .problem-card {
        padding: 35px 25px; /* 카드 내부 패딩 증가 */
        height: auto; /* 고정 높이를 자동으로 변경 */
        min-height: initial; /* 최소 높이 제한 초기화 */
        overflow: visible; /* 콘텐츠가 잘리지 않도록 변경 */
    }

    .problem-card-header {
        margin-bottom: 20px;
    }

    .problem-icon-wrapper {
        width: 60px; /* 아이콘 크기 축소 */
        height: 60px;
        margin-bottom: 15px;
    }

    .problem-icon-wrapper .problem-icon {
        width: 30px; /* 아이콘 SVG 크기 축소 */
        height: 30px;
    }

    .problem-card-title {
        font-size: 20px; /* 제목 크기 축소 */
        letter-spacing: -0.3px;
    }

    .problem-main-stat {
        font-size: 28px; /* 통계 숫자 크기 축소 */
        margin-bottom: 8px;
    }

    .problem-stat-label {
        font-size: 14px; /* 라벨 크기 축소 */
        margin-bottom: 20px;
    }

    .problem-divider {
        width: 50px;
        margin: 20px auto;
    }

    .problem-details-list li {
        font-size: 13px; /* 목록 항목 크기 축소 */
        padding: 10px 15px;
        margin-bottom: 8px;
    }

    .problem {
        padding: 15px 12px; /* 기존 .problem 클래스도 최적화 */
        min-height: 150px;
    }

    .problem-illustration {
        width: 60px;
        height: 60px;
    }

    .problem-icon {
        font-size: 28px;
    }

    /* ===== 서비스 그리드 - 단일 열 ===== */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 25px 0;
    }

    .service-card {
        padding: 25px;
    }

    .service-icon {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .service-card h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .service-card p {
        font-size: 13px;
    }

    /* ===== 서비스 행 - 수직 레이아웃 ===== */
    .service-row {
        flex-direction: column;
        gap: 25px;
        padding: 25px 15px;
        margin-bottom: 30px;
    }

    .service-row.reverse {
        flex-direction: column;
    }

    .service-visual {
        flex: 0 0 auto;
    }

    .service-icon-large {
        width: 120px;
        height: 120px;
        font-size: 50px;
    }

    .service-content h3 {
        font-size: 22px;
        text-align: center;
    }

    .service-content p {
        font-size: 14px;
        text-align: center;
        margin-bottom: 25px;
    }

    .btn-secondary {
        display: block;
        text-align: center;
        margin: 0 auto;
        padding: 12px 28px;
        font-size: 14px;
    }

    /* ===== 서비스 컴팩트 카드 - 단일 열 ===== */
    .services-compact-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-compact-card {
        padding: 30px 15px;
    }

    .service-compact-icon {
        width: 80px;
        height: 80px;
        font-size: 40px;
        margin: 0 auto 20px;
    }

    .service-compact-card h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .service-compact-card p {
        font-size: 13px;
        margin-bottom: 20px;
    }
    
    /* ===== Expert Section - 모바일 최적화 (402px) ===== */
    .expert-section {
        padding: 50px 0;
    }
    
    .expert-container {
        padding: 0 15px;
    }
    
    .expert-header {
        margin-bottom: 40px;
    }
    
    .expert-badge {
        font-size: 11px;
        padding: 6px 16px;
        margin-bottom: 15px;
    }
    
    .expert-main-title {
        font-size: 28px;
        margin-bottom: 15px;
        letter-spacing: -1px;
    }
    
    .expert-subtitle {
        font-size: 15px;
        max-width: 100%;
        padding: 0 10px;
    }
    
    .expert-stats {
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    
    .expert-stats .stat-item {
        min-width: auto;
        width: 100%;
        padding: 20px;
    }
    
    .expert-stats .stat-number {
        font-size: 32px;
    }
    
    .expert-stats .stat-label {
        font-size: 13px;
    }
    
    .expert-content {
        grid-template-columns: 1fr; /* 2열을 1열로 변경 */
        gap: 25px;
    }
    
    .expert-profile {
        padding: 30px 15px;
    }
    
    .expert-avatar {
        width: 90px;
        height: 90px;
        font-size: 16px;
    }
    
    .expert-avatar-glow {
        width: 110px;
        height: 110px;
    }
    
    .expert-name {
        font-size: 24px;
        margin-bottom: 12px;
    }
    
    .expert-title {
        font-size: 14px;
        margin-bottom: 20px;
    }
    
    .expert-achievements {
        margin: 20px 0;
    }
    
    .achievement-item {
        padding: 10px 15px;
        margin-bottom: 10px;
    }
    
    .achievement-icon {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .achievement-item span {
        font-size: 14px;
    }
    
    .expert-description {
        font-size: 14px;
        margin-top: 15px;
    }
    
    .expert-qualifications {
        padding: 30px 15px;
    }
    
    .qualifications-title {
        font-size: 22px;
        margin-bottom: 25px;
    }
    
    .title-icon {
        display: none !important;
    }
    
    .qualifications-grid {
        grid-template-columns: 1fr; /* 2열을 1열로 변경 */
        gap: 15px;
    }
    
    .qualification-item {
        padding: 20px 15px;
    }
    
    .qualification-icon {
        display: none;
    }
    
    .qualification-name {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .qualification-desc {
        font-size: 13px;
    }
    
    /* ===== Process Cards - 모바일 최적화 ===== */
    .process-section {
        padding: 60px 0 0 0;
        margin-bottom: 0;
    }
    
    .process-cards {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 15px;
    }
    
    .process-card {
        padding: 25px 15px;
        min-height: 280px;
    }
    
    .card-number {
        font-size: 36px;
    }
    
    .card-title {
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    .card-details {
        gap: 12px;
    }
    
    .card-details li {
        font-size: 12px;
    }
    
    .process-summary {
        margin-top: 40px;
        padding: 25px;
    }
    
    .summary-text {
        font-size: 14px;
    }

    /* ===== Testimonials Section - 모바일 최적화 (402px) ===== */
    .testimonials-section {
        padding: 60px 0 0 0;
    }

    .testimonials-container {
        padding: 0 20px;
    }

    .testimonials-header {
        margin-bottom: 40px;
    }

    .testimonials-main-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .testimonials-subtitle {
        font-size: 15px;
        padding: 0 10px;
    }

    /* ===== 케이스 그리드 - 단일 열 ===== */
    .cases-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 25px 0;
    }

    .case-card {
        padding: 25px;
    }

    .case-item {
        padding: 25px 20px;
    }

    .case-icon {
        font-size: 40px;
        margin-bottom: 15px;
    }

    .case-card h3 {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .case-card p {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .case-stats {
        gap: 15px;
    }

    .case-stats .number {
        font-size: 20px;
    }

    .case-stats .label {
        font-size: 11px;
    }

    /* ===== 케이스 하이라이트 - 단일 열 ===== */
    .cases-highlight-layout {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-bottom: 40px;
    }

    .case-highlight-card {
        padding: 30px 15px;
    }

    .case-main-icon {
        width: 80px;
        height: 80px;
        font-size: 40px;
        margin: 0 auto 20px;
    }

    .case-badge {
        font-size: 11px;
        padding: 6px 16px;
        margin-bottom: 15px;
    }

    .case-highlight-card h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .case-highlight-card p {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .case-highlight-stats {
        flex-direction: row;
        gap: 10px;
    }

    .highlight-stat {
        padding: 15px 10px;
        flex: 1;
    }

    .stat-value {
        font-size: 22px;
        margin-bottom: 5px;
    }

    .stat-unit {
        font-size: 14px;
    }

    .stat-desc {
        font-size: 11px;
        line-height: 1.3;
    }

    /* ===== 버튼 최적화 (402px) ===== */
        .btn-primary,
    .btn-primary-large {
        width: 100%;
        padding: 15px 30px;
        font-size: 16px;
        text-align: center;
    }

    .btn-secondary {
        width: 100%;
    }

    /* ===== Testimonial Item 모바일 줄바꿈 및 너비 최적화 ===== */
    .testimonial-item {
        /* 너비를 모바일 화면 너비에 맞게 조정 */
        min-width: 90% !important;
        max-width: 90% !important;
        flex-shrink: 0 !important;
        
        padding: 20px 15px; /* 패딩 조정 */
        height: auto !important;
        box-sizing: border-box !important;

        /* 작성자 정보 수직 배치 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .testimonial-quote {
        /* 텍스트 줄바꿈 강제 및 4줄로 제한 */
        white-space: normal !important;
        word-break: keep-all !important;
        font-size: 14px;
        line-height: 1.6em !important;
        
        /* 4줄 초과 시 텍스트 생략 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4; /* 4줄로 제한 */
        -webkit-box-orient: vertical;
        line-clamp: 4;
        max-height: 6.4em !important; /* 4줄 높이 (1.6em * 4) */
    }

    .testimonial-author {
        flex-direction: column;
        align-items: flex-start;
    }

    .author-info {
        margin-left: 0;
        margin-top: 12px;
    }

    /* ===== Testimonials Carousel 모바일 최적화 ===== */
    .testimonials-carousel-track {
        animation: none !important; /* 무한 스크롤 애니메이션 비활성화 */
        width: 100%; /* 너비를 100%로 설정 (가로 스크롤을 부모 요소에서 제어) */
        padding-bottom: 20px; /* 스크롤바가 콘텐츠를 가리지 않도록 하단 여백 추가 */
        overflow-x: auto; /* 명시적으로 가로 스크롤 허용 */
        white-space: nowrap; /* 자식 요소는 nowrap 유지 (testimonial-item의 줄바꿈은 내부에서 처리) */
        justify-content: flex-start; /* 컨테이너 시작점에 정렬 */
        gap: 20px; /* 카드 간격 조정 */
    }

    .testimonials-carousel-wrapper {
        overflow: visible; /* 트랙의 오버플로우를 허용 */
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* ===== CTA 섹션 모바일 최적화 (버튼 크기 문제 해결) ===== */
    .cta-section .container {
        gap: 8px;
        padding: 0 10px;
    }
    
    .cta-section .cta-title {
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin-left: 5px;
    }

    .cta-section .cta-button {
        font-size: 13px !important;
        padding: 10px 18px !important;
        min-width: 100px;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3) !important;
    }

    /* ===== 연락처 섹션 ===== */
    .contact-two-column {
        flex-direction: column;
        min-height: auto;
    }

    .contact-trust-column {
        flex: 0 0 auto;
        padding: 30px 15px;
        min-height: auto;
    }

    .contact-trust-content {
        max-width: 100%;
    }

    .contact-badge {
        font-size: 11px;
        padding: 6px 16px;
        margin-bottom: 15px;
    }

    .contact-main-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .contact-subtitle {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .trust-features {
        margin-bottom: 30px;
    }

    .trust-feature {
        margin-bottom: 20px;
        padding: 15px;
    }

    .trust-icon {
        font-size: 28px;
        margin-right: 15px;
        min-width: 40px;
    }

    .trust-text h4 {
        font-size: 16px;
        margin-bottom: 6px;
    }

    .trust-text p {
        font-size: 13px;
    }

    .contact-info-box {
        padding: 20px;
    }

    .contact-info-box h4 {
        font-size: 16px;
    }

    .contact-phone {
        font-size: 24px;
    }

    .contact-hours {
        font-size: 13px;
    }

    .contact-form-column {
        padding: 30px 15px;
    }

    .consultation-container {
        padding: 25px 15px;
    }

    /* 모바일 폼 진행 표시기 간격 조정 */
    .consultation-container .progress-container {
        margin-bottom: 30px; /* 전체 하단 여백 증가 */
        padding: 25px 0; /* 상하 패딩 증가 */
    }

    .consultation-container .progress-steps {
        margin-bottom: 15px; /* 진행 단계와 Bar 사이의 간격 조정 */
        gap: 6px; /* 단계별 간격 미세 조정 */
    }

    /* 진행 단계 원형 비율 유지 (모바일/태블릿) */
    .progress-container .step-circle {
        width: 32px; /* 모바일에서 크기 축소 */
        height: 32px; /* 너비와 동일하게 설정하여 원형 유지 */
        min-width: 32px; /* 플렉스박스 수축 방지 */
        min-height: 32px;
        font-size: 13px; /* 폰트 크기 조정 */
    }

    /* ===== 폼 요소 최적화 ===== */
    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        font-size: 14px;
        margin-bottom: 8px;
    }

        .form-group input,
        .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    .step-nav {
        margin-top: 25px;
        padding: 15px 0 0 0;
    }

        .back-btn,
    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    /* ===== 진행 표시기 ===== */
    .progress-indicator {
        margin-bottom: 25px;
    }

    .progress-steps {
        gap: 8px;
    }

    .progress-step {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    /* ===== 서비스 탭 ===== */
    .service-tabs {
        flex-direction: column;
        gap: 10px;
        margin: 30px 15px;
    }

    .tab-btn {
        width: 100%;
        justify-content: center;
        padding: 16px 20px;
        font-size: 14px;
    }

    .tab-icon {
        display: none;
    }

    /* ===== 콘텐츠 레이아웃 ===== */
    .content-layout {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 25px 15px;
    }

    .content-visual {
        flex-direction: column;
        margin-top: 0;
    }

    .visual-stats {
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }

    .stat-item {
        flex: 1;
    }

    .visual-icon {
        width: 80px;
        height: 80px;
    }

    .visual-icon svg {
        width: 40px;
        height: 40px;
    }

    .stat-number {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
    }

    /* ===== 콘텐츠 디테일 ===== */
    .detail-title {
        font-size: 18px;
    }

    .detail-objective {
        font-size: 15px;
        padding: 15px;
    }

    .list-content strong {
        font-size: 15px;
    }

    .list-content p {
        font-size: 14px;
    }

    .outcome-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .outcome-number {
        font-size: 22px;
    }

    .outcome-desc {
        font-size: 12px;
    }

    /* ===== 탭 콘텐츠 ===== */
    .tab-contents {
        min-height: 500px;
    }

    /* ===== 섹션 패딩 조정 (402px 최적화) ===== */
        .services-preview,
        .cases-preview,
    .contact-page-section {
        padding: 50px 0;
    }

    /* ===== 제목 크기 조정 (402px 최적화) ===== */
    .section-title {
        font-size: 26px;
        margin-bottom: 15px;
        padding: 0 15px;
    }

    .section-subtitle {
        font-size: 14px;
        margin-bottom: 30px;
        padding: 0 15px;
    }

    /* ===== 기본 텍스트 크기 조정 (402px 최적화) ===== */
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; }

    p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* ===== 여백 최적화 ===== */
    body {
        padding: 0;
    }

    /* ===== Footer - 모바일 최적화 ===== */
    .footer-section {
        padding: 0;
        margin: 0;
    }

    .footer-logo-container {
        height: 70px;
        margin-bottom: 20px;
    }

    .footer-logo {
        width: 200px;
    }

    .company-info-text {
        font-size: 14px;
    }

    /* ===== 모바일 폰트 크기 최적화 ===== */
    
    /* 메인 타이틀 그룹 - 주요 섹션 제목들 */
    .services-main-title,
    .process-main-title,
    .expert-main-title,
    .testimonials-main-title,
    .terms-main-title,
    .contact-main-title,
    .cases-main-title {
        font-size: 24px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    /* 일반 섹션 타이틀 */
    .section-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    
    /* 헤딩 태그 최적화 */
    h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }
    
    /* 서브타이틀 최적화 */
    .services-subtitle,
    .process-subtitle,
    .expert-subtitle,
    .testimonials-subtitle,
    .contact-subtitle {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    /* ===== 모바일 레이아웃 최적화 ===== */
    
    /* 1. 서비스 프로세스 섹션 하단 여백 추가 */
    .process-section {
        padding-bottom: 80px !important;
    }
    
    /* 2. 서비스 소개 탭 콘텐츠 좌우 여백 제거 */
    .tab-content,
    .tab-content.active {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

/* ========================================
   Footer 스타일 (컴포넌트화)
======================================== */
.footer-section {
    padding: 30px 0 0 0;
    margin: 0;
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 25%, #2d4a6b 75%, #3b5998 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.footer-background-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03) 2px, transparent 2px), 
                radial-gradient(circle at 70% 80%, rgba(255,255,255,0.02) 1.5px, transparent 1.5px);
    background-size: 200px 200px, 150px 150px;
}

.footer-container {
    position: relative;
    z-index: 1;
}

.footer-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.footer-logo-container {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    height: 90px;
    overflow: hidden;
    margin-bottom: 25px;
}

.footer-logo {
    width: 260px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.company-info-text {
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.9;
    margin-top: 15px;
    font-style: normal;
}

.company-info-text a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.company-info-text a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.info-line {
    margin-bottom: 2px;
}

.info-line-bold {
    font-weight: 600;
}

.info-line-hours {
    font-weight: 500;
    opacity: 0.8;
}

.copy-text {
    color: inherit;
    font-weight: inherit;
}

.copyright-section {
    margin-top: 10px;
    margin-bottom: 15px;
    padding-top: 5px;
    padding-bottom: 0px;
    border-top: 1px solid rgba(255,255,255,0.15);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}

.copyright-line {
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    font-size: 10px;
}

/* ========================================
   공통 유틸리티 클래스
======================================== */
.page-section-top {
    margin-top: 0 !important;
}

/* ========================================
   Terms Page 스타일
======================================== */
.terms-section {
    padding: 100px 20px 80px;
    min-height: 80vh;
}

.terms-container {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 60px 50px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.terms-header {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 3px solid #667eea;
}

.terms-main-title {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.terms-subtitle {
    font-size: 16px;
    color: #666;
    margin-top: 15px;
    line-height: 1.6;
}

.terms-modified-date {
    font-size: 14px;
    color: #999;
    margin-top: 10px;
}

.terms-content {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

.terms-content h3 {
    font-size: 22px;
    margin-top: 40px;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    color: #2d3748;
    font-weight: 700;
}

.terms-content > p {
    margin-bottom: 20px;
    text-align: justify;
}

.terms-content ul,
.terms-content ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

.terms-content li {
    margin-bottom: 10px;
}

.terms-content ul ul,
.terms-content ol ul {
    margin-top: 10px;
}

.terms-content ul ul li,
.terms-content ol ul li {
    margin-bottom: 8px;
}

.terms-content li {
    text-align: justify;
}

.terms-content strong {
    color: #2d3748;
}

.terms-content span.display-block {
    margin-top: 8px;
    display: block;
}

.terms-info-box {
    margin-top: 50px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-left: 4px solid #667eea;
    border-radius: 8px;
}

.terms-info-box p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.8;
}

.terms-info-box strong {
    color: #667eea;
}

/* ========================================
   Contact Page 추가 스타일
======================================== */
.contact-phone a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-phone a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Contact Page - 긴급상담 이메일 링크 색상 흰색으로 변경 */

/* 이메일 링크의 색상을 흰색으로 강제 변경하고, 호버 시에도 흰색 계열을 유지하도록 수정합니다. */
.contact-info-box .contact-phone a {
    color: white !important; /* 긴급상담 이메일 텍스트를 흰색으로 강제 적용 */
    -webkit-text-fill-color: white !important; /* 상위 요소의 transparent 효과 제거 */
    background-clip: initial !important; /* 그라데이션 클립 효과 제거 */
    -webkit-background-clip: initial !important; /* 웹킷 브라우저 호환성 */
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-info-box .contact-phone a:hover {
    color: #f8f9fa !important; /* 호버 시에도 흰색 계열을 유지하여 사용성을 높입니다. */
    -webkit-text-fill-color: #f8f9fa !important; /* 호버 시에도 투명 효과 제거 */
    text-decoration: underline;
}

/* ========================================
   범용 푸터 여백 제거 규칙 (모든 페이지 적용)
======================================== */

/* 푸터 자체의 상단 여백 완전 제거 */
#footer-section,
.footer-section,
#footer-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 마지막 섹션의 하단 여백 완전 제거 */
main > section:last-child,
.contact-section,
.services-section,
.process-section,
.testimonials-section,
.cases-section {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 마지막 컨테이너의 하단 여백 완전 제거 */
.contact-container,
.services-container,
.process-container,
.testimonials-container,
.cases-container {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 모든 페이지의 마지막 요소 여백 제거 */
body > main:last-child,
body > section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ========================================
   Sticky Footer 레이아웃 - Main 콘텐츠 영역
======================================== */

/* 메인 콘텐츠가 남는 공간을 모두 채우도록 설정 */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding-top: 0 !important;
}

/* 메인 콘텐츠 내부 섹션들이 자연스럽게 배치되도록 */
main > section {
    flex-shrink: 0;
}

/* ========================================
   콘텐츠 섹션과 푸터 사이 여백 추가
======================================== */

/* 2. Footer Container 상단 여백 추가 */
.container.footer-container {
    padding-top: 60px;
}

/* 3. Tab Content 하단 여백 추가 */
.tab-content.active {
    margin-bottom: 80px;
}

/* ========================================
   특정 페이지 콘텐츠 하단 여백 추가 (깔끔한 CSS 우선순위)
======================================== */

/* 1. 전문가 소개 페이지 - Expert Section 하단 패딩 추가 */
.expert-section.page-section-top {
    padding-bottom: 80px;
}

/* 2. 이용약관 페이지 - Terms Section 하단 패딩 추가 */
.terms-section {
    padding-bottom: 100px;
}

/* ========================================
   5. 추가 모바일 최적화 (480px 이하)
   ======================================== */

@media (max-width: 480px) { /* 402px -> 480px으로 변경 */
    .step-label {
        font-size: 10px; /* 기존 11px에서 더 작게 조정. 필요시 9px 등으로 변경 가능 */
        word-break: keep-all; /* 레이블 텍스트가 깨지지 않도록 단어 단위로 줄바꿈 처리 */
    }
    
    /* 진행 표시기 레이블 텍스트 숨기기 */
    .progress-container .step-label {
        display: none !important;
    }
}