@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
    
        .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; }
        }





        /* --- Core & Premium Shine (빛 효과) --- */
        .core-wrapper {
            position: relative; width: 140px; height: 140px; margin: 0 auto 1.5rem auto;
            display: flex; justify-content: center; align-items: center;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .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: 5; 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; }
        }

        .outer-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--brand-dark); border-left-color: rgba(30, 43, 88, 0.4); animation: spinCW 10s linear infinite; }
        .outer-ring-2 { position: absolute; width: 80%; height: 80%; border-radius: 50%; border: 2px solid transparent; border-bottom-color: var(--brand-dark); border-right-color: rgba(30, 43, 88, 0.3); animation: spinCCW 7s linear infinite; }
        .orbit-dot { position: absolute; width: 100%; height: 100%; border-radius: 50%; animation: spinCW 6s linear infinite; }
        .orbit-dot::after { content: ''; position: absolute; top: 0; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); }
        .dot-navy .orbit-dot::after { background: var(--brand-dark); box-shadow: 0 0 10px var(--brand-dark); }
        .dot-red .orbit-dot::after { background: var(--brand-sub-red); box-shadow: 0 0 10px var(--brand-sub-red); }
        .dot-green .orbit-dot::after { background: var(--brand-sub-green); box-shadow: 0 0 10px var(--brand-sub-green); }

        @keyframes spinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes spinCCW { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

        /* --- 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; }

        .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; }

        /* --- 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;
        }