.outer-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .diagram-container {
            position: relative;
            width: 1400px;
            height: 500px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            border: 1px solid #e2e8f0;
            transform-origin: top left;
        }
        @media (max-width: 1400px) and (min-width: 1000px) {
            .diagram-container { transform: scale(calc(window.innerWidth / 1450)); }
        }

        /* 애니메이션 */
        .fade-in { opacity: 0; animation: fadeIn 0.6s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        
        /* 첫 섹션 깜빡임 애니메이션 */
        .blink-slow { animation: blinkAnim 3s ease-in-out infinite; }
        @keyframes blinkAnim {
            0%, 100% { opacity: 1; border-color: #cbd5e1; background-color: white; }
            50% { opacity: 0.7; border-color: #fecaca; background-color: #fff1f2; }
        }

        svg.arrows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
        .arrow-path { opacity: 0; animation: fadeIn 0.4s ease-out forwards; }

        /* 박스 공통 스타일 */
        .process-box {
            position: absolute; background: white; border: 1px solid #cbd5e1; border-radius: 6px;
            padding: 8px; width: 190px; height: 65px; display: flex; align-items: center;
            justify-content: center; text-align: center; font-size: 11px; font-weight: 600;
            color: #1e293b; z-index: 10; transition: all 0.3s ease;
        }
        .process-box:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); border-color: #94a3b8; transform: translateY(-2px); cursor: pointer; }
        
        .section-label { position: absolute; bottom: 15px; text-align: center; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; z-index: 20; }
        .section-bg { position: absolute; top: 0; bottom: 0; border-radius: 10px; z-index: 1; }

        /* --- 수정된 타이틀 스타일 --- */
        .box-title-small {
            font-size: 10px;
            font-weight: 600;
            color: #64748b; /* 흐릿한 회색 */
            margin-bottom: 4px;
        }
        .box-title-large {
            font-size: 18px; /* 크기 확대 */
            font-weight: 800; /* 매우 굵게 */
            line-height: 1.1;
            color: #000; /* 완전 검정 */
        }




		
        /* [도형화] 상단 핵심 정의 그래픽 */
        .hero-statement-shape {
            position: relative;
            
            margin: 0 auto 80px;
            padding: 30px;
            border-left: 8px solid var(--brand-sub-red);
            background: #f8fafc;
            clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 95% 100%, 0% 100%); /* 기하학적 컷팅 */
        }

        .hero-statement-shape::before {
            content: "DEFINITION";
            position: absolute;
            top: -20px;
            left: 20px;
            font-size: 12px;
            letter-spacing: 4px;
            font-weight: 900;
            color: var(--brand-dark);
            opacity: 0.3;
        }

        /* 벤토 그리드 & 4번 디자인 트랜지션 복원 */
        .definitions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .definition-item {
            position: relative;
            background: var(--white);
            border: 1px solid var(--glass-border);
            padding: 40px;
            display: flex;
            flex-direction: column;
            transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), 
                        box-shadow 1.2s cubic-bezier(0.19, 1, 0.22, 1), 
                        border-color 1.2s cubic-bezier(0.19, 1, 0.22, 1);
            height: 100%;
        }

        .definition-item:hover {
            transform: translateY(-15px) !important;
            box-shadow: 0 40px 80px -15px rgba(30, 43, 88, 0.12);
            border-color: var(--brand-dark);
            z-index: 10;
        }

        .icon-box {
            width: 52px;
            height: 52px;
            background: var(--icon-bg-default);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            color: var(--brand-dark);
            font-size: 24px;
            border-radius: 8px;
            transition: all 0.5s ease;
        }

        .definition-item:hover .icon-box {
            background: var(--brand-dark);
            color: var(--white);
            transform: rotate(-5deg);
        }

        .item-title {
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }

        .item-title::after {
            content: '';
            position: absolute;
            bottom: -8px; left: 0; width: 20px; height: 2px;
            background: var(--brand-dark);
            transition: width 0.5s ease;
        }

        .definition-item:hover .item-title::after {
            width: 40px;
        }

        /* 5번 파일의 red 클래스 처리 (고급스러운 강조) */
        .red {
            color: var(--brand-dark);
            font-weight: 700;
            box-shadow: inset 0 -4px 0 rgba(30, 43, 88, 0.08);
        }
        .red2 {
            color: var(--brand-dark));
            font-weight: 700;
        box-shadow: inset 0 -4px 0 rgba(30, 43, 88, 0.08);
        }
        /* Re-Qualification (Full Width & 아이콘 왼쪽) */
        .full-width {
            grid-column: span 3;
            flex-direction: row !important;
            align-items: center;
            gap: 50px;
            background: var( --bg-1);
           
            border: none;
            margin-top: 16px;
        }

        .full-width .icon-box {
            background: rgb(236 243 250);
            
            min-width: 80px;
            height: 80px;
            font-size: 36px;
            margin-bottom: 0;
        }

        .full-width .red {
            color: var(--white);
            box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.2);
        }

        .full-width:hover {
            background: var(--bg-2);
            transform: translateY(-5px) !important;
        }

        @media (max-width: 1024px) {
            .definitions-grid { grid-template-columns: repeat(2, 1fr); }
            .full-width { grid-column: span 2; }
        }
        @media (max-width: 768px) {
            .definitions-grid { grid-template-columns: 1fr; }
            .full-width { grid-column: span 1; flex-direction: column !important; align-items: flex-start; gap: 20px; }
            .hero-statement-shape { padding: 30px; }
        }





     {
        position: relative; width: 140px; height: 140px; margin: 0 auto 1.5rem auto;
        display: flex; justify-content: center; align-items: center;
        perspective: 800px; 
    }

    .inner-core {
        width: 90px; height: 90px;
        background: linear-gradient(135deg, #1e2b58 0%, #2c3e80 100%);
        border-radius: 50%; display: flex; flex-direction: column; 
        justify-content: center; align-items: center; color: white;
        box-shadow: 0 15px 35px rgba(30, 43, 88, 0.2);
        z-index: 10; position: relative; overflow: hidden;
    }

    .inner-core::before {
        content: ''; position: absolute; top: -100%; left: -150%; width: 120%; height: 300%;
        background: linear-gradient(110deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.4) 55%, rgba(255,255,255,0.05) 70%, rgba(255,255,255,0) 80%);
        transform: rotate(25deg); animation: premium-shine-sweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    @keyframes premium-shine-sweep {
        0% { left: -150%; opacity: 0; } 20% { opacity: 1; } 50% { left: 150%; opacity: 1; } 60% { left: 150%; opacity: 0; } 100% { left: 150%; opacity: 0; }
    }

    /* ★★★ [CSS 수정됨] 3D 자이로 애니메이션 & 중앙 정렬 보정 ★★★ */
    .gyro-ring {
        position: absolute;
        /* 중앙 정렬 강제 고정 */
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 2px solid transparent;
        transform-style: preserve-3d;
        z-index: 1;
        opacity: 0.8;
        box-sizing: border-box; /* 테두리 포함 크기 계산 */
    }

    .gyro-ring-1 {
        width: 100%; height: 100%; /* 부모 140px 기준 */
        border-top: 2px solid currentColor;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        /* rotate-3d-1 애니메이션 실행 */
        animation: rotate-3d-1 4s linear infinite;
    }

    .gyro-ring-2 {
        width: 80%; height: 80%;
        border-left: 2px solid currentColor;
        border-right: 1px solid rgba(0,0,0,0.1);
        animation: rotate-3d-2 5s linear infinite;
    }

    .gyro-ring-3 {
        width: 120%; height: 120%; /* 점선 원을 가장 크게 */
        border: 1px dashed currentColor;
        opacity: 0.3;
        animation: rotate-3d-3 15s linear infinite;
    }

    /* ★★★ [CSS 수정됨] 키프레임 내 translate(-50%, -50%) 포함하여 축 유지 ★★★ */
    @keyframes rotate-3d-1 {
        0% { transform: translate(-50%, -50%) rotateZ(0deg) rotateX(60deg) rotateY(0deg); }
        100% { transform: translate(-50%, -50%) rotateZ(360deg) rotateX(60deg) rotateY(0deg); }
    }
    @keyframes rotate-3d-2 {
        0% { transform: translate(-50%, -50%) rotateZ(45deg) rotateX(0deg) rotateY(0deg); }
        100% { transform: translate(-50%, -50%) rotateZ(45deg) rotateX(360deg) rotateY(0deg); }
    }
    @keyframes rotate-3d-3 {
        0% { transform: translate(-50%, -50%) rotateZ(0deg); }
        100% { transform: translate(-50%, -50%) rotateZ(360deg); }
    }

    .dot-navy .gyro-ring { color: var(--brand-dark); }
    .dot-red .gyro-ring { color: var(--brand-sub-red); }
    .dot-green .gyro-ring { color: var(--brand-sub-green); }


    /* --- Cards --- */
    .card-container {
        background: #ffffff !important; border-radius: 24px !important; position: relative; overflow: hidden;
        display: flex; flex-direction: column; height: 100%; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(-8px); box-shadow: 0 20px 50px -12px rgba(30, 43, 88, 0.1); border: 1px solid #f1f5f9;
    }
    
    .card-navy{ border-color: var(--brand-sub-navy) !important; }
    .card-elevated { transform: translateY(-32px); border-color: var(--brand-sub-red) !important; box-shadow: 0 30px 60px -12px rgba(30, 43, 88, 0.15); }
    
    .card-container:hover { transform: translateY(0) !important; box-shadow: 0 10px 40px -10px rgba(148, 163, 184, 0.15); border-color: #e2e8f0; }
    .card-container:hover .core-wrapper { transform: scale(0.92); }
    
    .card-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-dark); opacity: 1; transition: opacity 0.3s; }
    .card-elevated::before { background: var(--brand-sub-red); }
    .card-green { border-color: var(--brand-sub-green) !important; }
    .card-green::before { background: var(--brand-sub-green); }
    .card-container:hover::before { opacity: 0; }

    /* ★★★ [CSS 수정됨] 리스트 호버 시 딱딱 끊김(Jerk) 해결 ★★★ */
    .tech-list { flex-grow: 1; padding: 0 !important; margin: 0 !important; list-style: none !important; }
    .tech-list li { position: relative; padding-left: 24px; margin-bottom: 7px;  color: #64748b; font-weight: 500; transition: all 0.3s ease; }
    .tech-list li::before { content: ''; position: absolute; left: 6px; top: 8px; width: 6px; height: 6px; background: var(--brand-dark); border-radius: 50%; }
    
    .tech-list li:hover { 
        transform: translateX(8px); 
        color: var(--brand-dark); 
        /* font-weight: 600; -> 삭제함 (레이아웃 흔들림 원인) */
        /* 대신 text-shadow를 사용하여 두께감만 주고 흔들림 방지 */
        text-shadow: 0 0 1px var(--brand-dark); 
    }

    @media (max-width: 1024px) {
        .card-elevated { transform: translateY(-8px) !important; }
    }






        /* --- Bento Items --- */
        .bento-item {
            background: white !important; padding: 1.5rem !important; border-radius: 16px !important; border: 1px solid #f1f5f9 !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important; transition: all 0.5s ease; display: flex !important; flex-direction: column !important; width: 100% !important;
        }
        .theme-navy { border-left: 4px solid #e2e8f0 !important; } 
        .theme-green { border-left: 4px solid #f0fdf4 !important; } 
        .theme-red-soft { border-left: 4px solid #fff1f2 !important; } 
        .bento-item.active-step { box-shadow: 0 20px 40px -5px rgba(30, 43, 88, 0.2) !important; transform: scale(1.02) !important; z-index: 20 !important; }
        .theme-navy.active-step { border-left: 6px solid var(--brand-dark) !important; }
        .theme-green.active-step { border-left: 6px solid var(--brand-sub-green) !important; }
        .theme-red-soft.active-step { border-left: 6px solid var(--brand-sub-red) !important; }

        .mini-icon { width: 44px !important; height: 44px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.5rem !important; margin-bottom: 0.5rem !important;  color: #94a3b8 !important; transition: all 0.5s ease !important; }
        .active-step .mini-icon { color: white !important; }
        .theme-navy.active-step .mini-icon { background-color: var(--brand-dark) !important; }
        .theme-green.active-step .mini-icon { background-color: var(--brand-sub-green) !important; }
        .theme-red-soft.active-step .mini-icon { background-color: var(--brand-sub-red) !important; }
        
        .step-number { font-size: 0.85rem; font-weight: 800; color: #cbd5e1; transition: color 0.5s ease; }
        .active-step .step-number { color: #64748b !important; opacity: 1 !important; }
        .flow-arrow { display: flex !important; align-items: center !important; justify-content: center !important; color: #cbd5e1 !important; padding: 0 8px !important; }

        @media (max-width: 1024px) {
            .process-row { flex-direction: column !important; }
            .flow-arrow { transform: rotate(90deg) !important; padding: 15px 0 !important; }
            .card-elevated { transform: translateY(-8px) !important; }
        }

        /* [핵심] AOS 미동작 시 강제 가시성 확보 */
        .force-visible [data-aos] {
            opacity: 1 !important;
            transform: translate(0) scale(1) !important;
            visibility: visible !important;
        }
























/* 탭 콘텐츠 제어: 기본 숨김 및 활성화 시 표시 */
.tab-content { display: none !important; }
.tab-content.active { display: grid !important; } /* 기존 grid 레이아웃 유지 */

/* 일반 텍스트 형태의 탭 콘텐츠일 경우를 대비한 처리 */
div.tab-content.active:not(.grid) { display: block !important; }



/* 탭 UI */
  .lang-tabs{
    display:flex; max-width:1200px; margin:20px auto 10px; border-radius:6px; overflow:hidden;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
  }
  .lang-tabs .tab{
    flex:1; text-align:center; padding:14px 0; font-weight:700; font-size:14px;
    text-decoration:none; color:#222; background:#fff; transition:.25s;
  }
  .lang-tabs .tab.active{
    background:linear-gradient(90deg,#ee8425 0%,#f9488b 100%); color:#fff;
  }
  .lang-tabs .tab:not(.active):hover{ background:#f7f7f7; }

  /* 모바일: 탭 세로 정렬 */
@media (max-width: 991px){
  .lang-tabs{
    flex-direction: column;
    max-width: 80%;   /* 필요시 폭 줄임 */
  }
  .lang-tabs .tab{
    border-radius: 0;
    border-bottom: 1px solid #eee;
  }
  .lang-tabs .tab:last-child{
    border-bottom: none;
  }
}






    /* --- Core & Animation Base --- */
/* ★★★ [CSS 수정됨] core-wrapper에 부드러운 transition 및 최적화 추가 ★★★ */
.core-wrapper {
    position: relative; 
    width: 140px; 
    height: 140px; 
    margin: 0 auto 1.5rem auto;
    display: flex; 
    justify-content: center; 
    align-items: center;
    perspective: 800px;
    
    /* [중요] 호버 시 끊김 방지를 위해 부드러운 전환 효과 강제 지정 */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* [중요] 브라우저가 애니메이션을 미리 준비하도록 최적화 */
    will-change: transform;
    backface-visibility: hidden;
}

/* ★★★ [CSS 수정됨] 호버 시 크기 변화 값을 부드럽게 연결 ★★★ */
.card-container:hover .core-wrapper { 
    /* 0.92에서 0.95로 값을 살짝 완화하여 더 자연스러운 느낌 부여 */
    transform: scale(0.95); 
}
    }