/* ==========================================
   INDEX PAGE STYLE
   (용도: 메인 페이지(index.html) 전용 디자인)
   ========================================== */

/* --- 히어로 섹션 (슬라이드 & 풀스크린) --- */
.hero {
    height: 100vh; /* 화면 높이 100% 꽉 채움 */
    width: 100%;
    position: relative; /* 자식 요소 절대 위치 기준점 */
    overflow: hidden; /* 튀어나가는 요소 숨김 */
    background-color: #000; /* 로딩 전 검은 배경 */
}

/* 슬라이드 개별 항목 */
.hero-slide {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; /* 이미지 꽉 채움 */
    background-position: center; /* 중앙 정렬 */
    background-repeat: no-repeat;
    opacity: 0; /* 기본 투명 (안 보임) */
    transition: opacity 1s ease-in-out; /* 1초 동안 부드럽게 전환 */
    z-index: 1;
    filter: brightness(1) contrast(1); 
    will-change: opacity; /* 브라우저에게 투명도 변화를 예고 */
    transform: translateZ(0); /* GPU 가속 강제 활성화 */

}

.hero-slide.active {
    opacity: 1; /* 활성화된 슬라이드만 보임 */
    z-index: 2; /* 안 보이는 슬라이드보다 위에 배치 */
}

/* 슬라이드 오버레이 */
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ▼▼▼ [수정] 상단 메뉴 가독성 확보 ▼▼▼ */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8) 0%,    /* 맨 위: 80% 진하기 (더 진하게) */
        rgba(0, 0, 0, 0.5) 10%,   /* 상단 10% 지점: 아직 50% 진하기 유지 (메뉴바 위치) */
        rgba(0, 0, 0, 0) 25%,     /* 25% 지점까지 가서야 완전히 투명해짐 */
        rgba(0, 0, 0, 0) 100%     /* 나머지는 투명 유지 */
    );
    
    /* [중요] overlay 모드 삭제 -> 검은색이 이미지 위에 확실히 얹혀짐 */
    /* background-blend-mode: overlay;  <-- 이 줄을 지우거나 주석 처리하세요 */
    
    z-index: 1; 
    transition: background 0.5s ease-in-out;
}

/* [기능] 스크롤 내리면 이미지가 밝아짐 (오버레이 제거) */
.hero.scrolled .hero-slide::before {
    background: rgba(0, 0, 0, 0); /* 투명하게 변경 */
}

/* 중앙 텍스트 컨테이너 */
.hero-content-bottom {
    position: absolute; 
    bottom: 40px; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align: center; 
    width: 100%;
    z-index: 10; 
    color: var(--white);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    opacity: 1;

    /* ▼▼▼ [핵심 수정] 텍스트 뒤에만 은은한 원형 그림자(Spotlight) 추가 ▼▼▼ */
    /* 글씨가 있는 중앙은 어둡게(0.6) 시작해서, 밖으로 갈수록 투명해짐(0) */
    background: radial-gradient(
        ellipse at center, 
        rgba(0, 0, 0, 0.5) 0%,   /* 중앙: 50% 검정 (글씨 잘 보임) */
        rgba(0, 0, 0, 0.2) 40%,  /* 중간: 20% 검정 (자연스러운 연결) */
        rgba(0, 0, 0, 0) 70%     /* 외곽: 투명 (이미지 원본 유지) */
    );
    
    /* 그림자가 너무 딱딱하지 않게 위아래로 여백을 좀 줌 */
    padding: 40px 0; 
    will-change: transform, opacity;
    backface-visibility: hidden; /* 뒷면 렌더링 방지 (성능 향상) */
}

/* [기능] 스크롤 내리면 텍스트 사라짐 */
.hero.scrolled .hero-content-bottom {
    opacity: 0; /* 투명도 0 */
    transform: translateX(-50%) translateY(20px); /* 아래로 내려가며 사라짐 */
}

/* 슬라이드 텍스트 (화면 하단 중앙) */
/* ... 기존 위치 설정 코드 유지 ... */

.hero-content-bottom h2 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    font-weight: 700;
    
    /* ▼▼▼ [수정] 그림자를 더 진하고 넓게 퍼지게 변경 ▼▼▼ */
    text-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.9),   /* 1단계: 글자 윤곽을 선명하게 잡는 진한 그림자 */
        0 5px 30px rgba(0, 0, 0, 0.8);  /* 2단계: 배경과 분리시키는 넓은 그림자 */
}

.hero-content-bottom p {
    font-family: 'NanumSquareNeo';
    font-size: 2rem;
    opacity: 1; /* [수정] 투명도 0.9 -> 1 (더 선명하게) */
    
    /* ▼▼▼ [수정] 그림자 강화 ▼▼▼ */
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.9), 
        0 4px 15px rgba(0, 0, 0, 0.7);
}
/* 슬라이드 컨트롤 (우측 하단 점) */
.hero-controls {
    position: absolute; bottom: 50px; right: 50px; /* 우측 하단 위치 */
    display: flex; flex-direction: column; /* 세로 나열 */
    gap: 15px; z-index: 20;
}

.dot {
    width: 12px; height: 12px; border-radius: 50%; /* 원형 */
    background: rgba(255, 255, 255, 0.3); /* 평소엔 반투명 */
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: pointer; transition: 0.3s;
}
.dot:hover { background: rgba(255, 255, 255, 0.8); }
.dot.active {
    background: var(--primary-color); border-color: var(--primary-color);
    transform: scale(1.3); /* 활성화 시 커짐 */
}

/* --- [추가] Scroll Down 인디케이터 (네온 효과) --- */
.scroll-indicator {
    position: fixed; top: 50%; right: 15px; /* 점들과 같은 수직선상 */
    transform: translateY(-50%); /* 세로 중앙 */
    z-index: 9999;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    opacity: 1; /* 항상 밝게 */
}

.scroll-indicator span {
    color: var(--white); font-size: 0.8rem; font-weight: 500; letter-spacing: 3px;
    writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); /* 세로 글씨 */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); /* 빛나는 효과 */
}

.scroll-indicator .line {
    width: 1px; height: 20px; /* 얇고 긴 선 */
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 선 빛남 */
    position: relative; overflow: hidden;
}

.scroll-indicator .line::after {
    content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, #fff, transparent); /* 흐르는 빛 */
    animation: scrollFlow 2s infinite; /* 무한 반복 */
}

.scroll-indicator .arrow-head {
    width: 10px; height: 10px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff; /* 화살표 모양 */
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)); /* 화살표 빛남 */
    transform: rotate(45deg); margin-top: -5px;
}
.scroll-indicator .arrow-head.up {
    transform: rotate(225deg); /* 180도 뒤집어서 위를 향하게 함 */
    margin-top: 0;
    margin-bottom: -5px; /* 텍스트와의 간격 조정 */
}

@keyframes scrollFlow {
    0% { top: -100%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ==========================================
   [수정] 솔루션 섹션 (Bento Grid Layout)
   ========================================== */
.features {
    position: relative; /* 배경 오버레이를 위한 기준점 */
    padding-top: 80px;
    padding-bottom: 80px;
    background-size: cover;
    background-position: center;
    background-attachment: scroll; 
    background-color: var(--light-bg); /* 이미지가 없을 때를 대비한 기본색 */
}

/* features 오버레이 */
.features::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255,255,255,0.92);
    z-index: 1;
    transform: translateZ(0); /* 오버레이를 별도 레이어로 처리 */
}

/* 내용물 위로 띄움 */
.features .container {
    position: relative;
    z-index: 2;
    transform: translateZ(0); /* 스크롤 시 텍스트만 부드럽게 이동 */
    will-change: transform;
}

/* 그리드 레이아웃 (3열 구조) */
.feature-grid {
    display: grid;
    /* 가로 3칸으로 나눔 */
    grid-template-columns: repeat(3, 1fr);
    /* 세로 행 높이 자동 (최소 240px) */
    grid-auto-rows: 250px;
    gap: 40px; /* 카드 사이 간격 */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 공통 카드 스타일 --- */
.feature-card {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background: var(--white);
    border-radius: 20px; /* 더 둥글게 */
    padding: 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    
    /* 내용 중앙 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* 왼쪽 정렬로 변경하여 세련미 더함 */
    text-align: left;
    will-change: transform, box-shadow; /* 호버 효과 미리 준비 */
    transform: translateZ(0);

    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.card-obj-img {
    position: absolute;
    bottom: -15px;      /* 아래쪽 여백 */
    right: -15px;       /* 오른쪽 여백 */
    width: 120px;       /* 이미지 크기 */
    height: auto;
    opacity: 0.15;      /* 평소엔 배경처럼 연하게 */
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 0;         /* 글씨보다 뒤로 */
}

/* 호버 효과 (살짝 위로 뜨면서 그림자 진하게) */
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 140, 149, 0.15);
    border-color: rgba(0, 140, 149, 0.3);
}

/* 호버 시 이미지가 선명해지고 움직임 */
.feature-card:hover .card-obj-img {
    opacity: 0.8;
    transform: scale(1.1) rotate(-5deg);
    bottom: -5px;
    right: -5px;
}

/* 아이콘 스타일 */
.feature-card .icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: #f0f7f8; /* 아이콘 뒤 연한 배경 */
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
}

.feature-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

.feature-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    word-break: keep-all;
}

.feature-card h3, 
.feature-card p,
.feature-card .icon {
    position: relative;
    z-index: 1;
}

/* --- [핵심] 메인 카드 (첫 번째 카드) 스타일 --- */
.feature-card.main-card {
    /* 가로 2칸, 세로 2칸 차지 -> 큰 정사각형 */
    grid-column: span 2;
    grid-row: span 2; 
    background: 
        linear-gradient(135deg, rgba(0, 140, 149, 0.9), rgba(0, 95, 107, 0.9)),
        url('../img/index/bg_main_card.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
        
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 70px;
    padding-bottom: 15px;
}

/* 메인 카드는 글씨색이 흰색이어야 함 */
.feature-card.main-card h3,
.feature-card.main-card p {
    color: var(--white);
}



.feature-card.main-card h3 {
    font-size: 2.5rem; /* 제목 더 크게 */
    margin-top: 10px;
}

.feature-card.main-card p {
    font-size: 1.5rem;
    opacity: 0.9;
}





/* 메인 카드 호버 시 나타나는 화살표 */
.hover-text {
    margin-top: 20px;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-10px);
    transition: 0.3s;
}
.feature-card.main-card:hover .hover-text {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================
   [최종 완성본] 기업 가치 (Stats) 아코디언 섹션
   - 높이 200px / 패딩 25px
   - 텍스트 Fade In-Up 효과 (꿀렁임 제거)
   - 접힌 상태: Glossy 숫자 효과
   ========================================== */
.stats {
    background-color: #0E2D3D; /* 로딩 전 기본색 (푸터와 동일) */
    
    background-image: 
        /* 1. [하단 마스크] 패턴이 푸터 앞에서 자연스럽게 사라지도록 덮어씌움 */
        linear-gradient(to bottom, transparent 60%, #0E2D3D 100%),

        /* 2. [기하학 패턴] 연결된 데이터 노드 느낌의 점 패턴 (은은하게) */
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 1.5px, transparent 1.5px),

        /* 3. [베이스] 기존의 고급스러운 청록색 그라데이션 */
        linear-gradient(to bottom, #005f6b 0%, #0E2D3D 100%);
     /* 배경 크기 설정 */
    background-size: 
        100% 100%,      /* 마스크: 전체 영역 */
        30px 30px,      /* 패턴: 30px 간격으로 촘촘하게 */
        100% 100%;      /* 베이스: 전체 영역 */ 
    padding: 100px 0; /* 사용자 설정: 80px */
    color: var(--white);
    overflow: hidden;
    position: relative;
}


.stats .section-header.center-style h2 {
     font-size: 3rem; 
     color: #fff;
     margin-bottom: 10px;
}

.stats .section-header.center-style p {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}



.stat-accordion {
    display: flex;
    gap: 15px;
    height: 280px; /* 사용자 설정: 200px */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- [1] 아이템 공통 스타일 --- */
.stat-item {
    flex: 1; /* 기본(접힌 상태) */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0 20px;
    
    display: flex;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    
    /* 박스 크기 변화 애니메이션 (부드럽게) */
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s;
}


/* --- [2] 접힌 상태 (Collapsed) --- */
.stat-item:not(.active) {
    /* 세로 배치 (위: 제목, 아래: 번호) */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 2-1. 접힌 제목 */
.collapsed-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ccc;
    margin-bottom: 5px;
    letter-spacing: 1px;
    order: 1; 
}

/* 2-2. 접힌 번호 (크고 화려하게) */
.stat-item:not(.active) .stat-num {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    order: 2;
    
    /* Glossy & Glow 효과 */
    color: #fff;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 20px rgba(255, 255, 255, 0.4);
}

/* 2-3. 접힌 상태에서는 본문 숨김 */
.stat-item:not(.active) .stat-content {
    display: none;
}


/* --- [3] 펼쳐진 상태 (Active) --- */
.stat-item.active {
    flex: 3; /* 확대 */
    /* background: var(--primary-color);    
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-color: var(--primary-color); */
    
    background: linear-gradient(135deg, #26a69a 0%, #008c95 100%);
    box-shadow: 0 15px 35px rgba(0, 140, 149, 0.4);
    border-color: rgba(255, 255, 255, 0.2);

    flex-direction: row;
    align-items: flex-start;
    
    /* 사용자 설정: 상하 여백 20px로 축소 */
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 펼쳐졌을 때는 '접힌 제목' 숨김 */
.stat-item.active .collapsed-title {
    display: none;
}

/* 3-1. 펼쳐진 번호 (왼쪽 배치) */
.stat-item.active .stat-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: #fff; /* Glossy 제거, 깔끔한 흰색 */
    margin-right: 25px;
    line-height: 1;
    order: 1;
    
    /* 번호 등장 애니메이션 */
    opacity: 0;
    animation: simpleFadeIn 0.6s ease forwards;
    animation-delay: 0.2s;
}

/* 3-2. 펼쳐진 텍스트 덩어리 (오른쪽 배치) */
.stat-item.active .stat-content {
    display: block;
    width: 100%;
    order: 2;
    
    /* [핵심] 처음엔 투명하게 숨김 -> 나중에 등장 */
    opacity: 0;
    animation: fadeInUpAll 0.6s ease-out forwards;
    animation-delay: 0.3s; /* 박스가 충분히 커진 뒤 텍스트 등장 */
}

/* 제목 스타일 */
.stat-item.active h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 15px 0;
    line-height: 1.3;
    white-space: nowrap;
    margin-top: 5px;
}

/* 설명글 스타일 */
.stat-item.active .stat-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-top: 40px;
    
    /* 사용자 설정: 말줄임표(...) 제거하고 전체 텍스트 표시 */
    display: block; 
    overflow: visible; 
}

/* 아이콘 추가 */
.stat-item .bg-icon {
    position: absolute;
    right: -20px;
    bottom: -30px; /* 박스 밖으로 살짝 나가게 배치 */
    
    font-size: 8rem; /* 아이콘 크기 (매우 크게) */
    color: rgba(255, 255, 255, 0.05); /* 평소: 아주 연하게 (5% 투명도) */
    
    transform: rotate(-15deg) scale(0.8); /* 살짝 회전 + 축소 상태 */
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    pointer-events: none; /* 마우스 클릭 방해 금지 */
    z-index: 0; /* 글자보다 뒤에 */
}

.stat-item.active .bg-icon {
    right: -10px;      /* 위치 이동 */
    bottom: -20px;
    
    transform: rotate(0deg) scale(1); /* 정방향 + 원래 크기로 */
    color: rgba(255, 255, 255, 0.15); /* 조금 더 진하게 (15% 투명도) */
}

.stat-item .stat-num,
.stat-item h3,
.stat-item .stat-desc,
.stat-item .collapsed-title {
    position: relative;
    z-index: 1; /* 아이콘(z-index: 0)보다 위에 배치 */
}

/* --- [4] 애니메이션 키프레임 --- */

/* 번호용 단순 페이드인 */
@keyframes simpleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 텍스트용 (아래에서 위로 올라오며 페이드인) */
@keyframes fadeInUpAll {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- [5] 하단 컨트롤러 (Dots) --- */
.stat-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.stat-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.stat-dot.active {
    background: #fff;
    transform: scale(1.3);
}

.stat-dot:hover {
    background: rgba(255, 255, 255, 0.8);
}


/* ==========================================
   [추가] 메인 페이지 전용 섹션 헤더 스타일
   ========================================== */
.section-header.center-style h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.section-header.center-style p {
    opacity: 0;
    transform: translateX(100px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: 0.1s;
}

.section-header.center-style.active h2 {
    opacity: 1;
    transform: translateX(0);
}

.section-header.center-style.active p {
    opacity: 1;
    transform: translateX(0);
}



/* 제목 아래 짧은 밑줄 장식 */
.section-header.center-style h2::after {
    content: '';
    display: block;
    width: 120px;
    height: 3px;
    background: var(--primary-color);
    margin: 15px auto 0 auto; /* 중앙 정렬 */
    border-radius: 2px;
}



/* [수정] assets/css/index_style.css : 맨 하단에 추가했던 코드 교체 */

/* ==========================================
   [수정] 카드 UI 디자인 (좌측 텍스트 / 우측 아이콘)
   ========================================== */

/* 메인 카드가 아닌 일반 카드들의 레이아웃 재정의 */
.feature-card:not(.main-card) {
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

/* 상단 이미지 영역 */
.feature-card:not(.main-card) .card-img {
    flex: 1;
    width: 100%;
    min-height: 120px; /* 높이 약간 축소 */
    overflow: hidden;
    position: relative;    
}

.feature-card:not(.main-card) .card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.7;
    transition: 0.3s;
}

/* 하단 텍스트+아이콘 영역 (가로 배치) */
.feature-card:not(.main-card) .card-body {
    width: 100%; /* ★ [핵심 수정] 부모의 flex-start 무시하고 가로 꽉 채움 */
    
    padding: 13px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    
    display: flex;
    justify-content: space-between; /* 양끝 배치 */
    align-items: center;
    gap: 15px;
}

/* 텍스트 래퍼 */
.feature-card:not(.main-card) .text-wrap {
    flex: 1; /* 남은 공간 차지 */
    min-width: 0;
    margin-right: 10px;
}

.feature-card:not(.main-card) h3 {
    font-size: 1.2rem; margin-bottom: 5px; line-height: 1.3;
}
.feature-card:not(.main-card) p {
    font-size: 0.9rem; margin: 0; line-height: 1.4; color: #888;
}

/* 우측 아이콘 스타일 */
.feature-card:not(.main-card) .icon {
    margin-left: auto;
    margin-bottom: 0; /* 기존 하단 여백 제거 */
    width: 45px; height: 45px; /* 크기 약간 축소 */
    font-size: 1.6rem;
    flex-shrink: 0; /* 아이콘 크기 고정 */
    background: #f0f7f8;
    color: var(--primary-color);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
   
}
.feature-card:not(.main-card) .icon img {
    width: 45px; height: 45px;
}

/* 호버 시 이미지 확대 */
.feature-card:not(.main-card):hover .card-img img {
    transform: scale(1.1);
    opacity: 1;
}

/* ==========================================
   [UPGRADE] 금융 보안 리더십 (Premium Design)
   ========================================== */
.security-leadership {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef2f5 100%); /* 은은한 그레이톤 */
    overflow: hidden;
}

/* 배경 도트 패턴 (Tech 느낌) */
.security-leadership .bg-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    opacity: 0.4;
    z-index: 0;
}

.leadership-wrapper {
    position: relative;
    z-index: 2; /* 배경보다 위 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

/* 1. 왼쪽 텍스트 디자인 */
.leadership-text {
    flex: 1;
    max-width: 550px;
}

/* [수정] Market Standard 라벨 스타일 강화 */
.sub-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;               /* 아이콘 간격 약간 넓힘 */
    font-size: 1.2rem;       /* [중요] 0.9rem -> 1.2rem으로 확대 */
    font-weight: 900;        /* 800 -> 900 (더 굵게) */
    color: var(--primary-color);
    letter-spacing: 3px;     /* 자간을 넓혀 고급스러움 강조 */
    margin-bottom: 25px;     /* 제목과의 간격 확보 */
    text-transform: uppercase;
    position: relative;
    padding-left: 5px;       /* 시각적 여백 보정 */
}

.leadership-text h2 {
    font-size: 3.2rem;
    line-height: 1.2;
    color: #1a1a1a;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

/* 텍스트 밑줄 형광펜 효과 */
.highlight-text {
    position: static;
    z-index: 1;
    background: linear-gradient(
    to top, 
    transparent 5px,              /* bottom: 5px 역할 */
    rgba(0, 140, 149, 0.15) 5px,  /* 색상 시작 지점 */
    rgba(0, 140, 149, 0.15) 20px, /* height: 15px 역할 (5+15=20) */
    transparent 20px              /* 나머지 윗부분 투명 */
    );
    /* [핵심 2] 줄바꿈 시 디자인 복제 (끊어진 줄마다 효과 적용) */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
        display: inline; /* 인라인 요소로 설정해야 줄바꿈 적용됨 */
}

.leadership-text .desc {
    font-size: 1.15rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 40px;
    word-break: keep-all;
}

/* 인증 뱃지 스타일 */
.cert-badges {
    display: flex;
    gap: 12px;
}
.c-badge {
    background: #fff;
    border: 1px solid #dcdcdc;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: 0.3s;
}
.c-badge:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-3px);
}

/* 2. 오른쪽 비주얼 (글래스모피즘 & 그라데이션 텍스트) */
.leadership-visual {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* 카드들을 오른쪽 정렬 */
    gap: 30px;
}

/* 공통 카드 스타일 (유리 질감) */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px); /* 뒤가 흐릿하게 비침 */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 
        0 20px 40px rgba(0, 140, 149, 0.1), 
        0 5px 15px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 140, 149, 0.2);
}

/* 메인 카드 (95%) */
.glass-card.main-stat {
    width: 100%;
    max-width: 500px;
}

.stat-title {
    display: block;
    font-size: 1.1rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 10px;
}

.stat-number-wrap {
    line-height: 1;
    margin-bottom: 10px;
}

/* [핵심] 숫자 그라데이션 처리 */
.gradient-num {
    font-size: 6rem; /* 아주 크게 */
    font-weight: 900;
    background: linear-gradient(135deg, #0E2D3D 0%, #008c95 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* 글자 안을 그라데이션으로 채움 */
    letter-spacing: -3px;
}
.gradient-num.unit {
    font-size: 3.5rem; /* 단위는 조금 작게 */
    letter-spacing: 0;
}

.stat-sub {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0E2D3D;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stat-sub::before {
    content: '';
    display: block;
    width: 40px; height: 2px;
    background: var(--primary-color);
}

/* 서브 카드 (100,000+) */
.glass-card.sub-stat {
    width: auto;
    align-self: flex-end; /* 오른쪽 끝에 붙임 */
    padding: 25px 35px;
    margin-top: -30px; /* 메인 카드와 살짝 겹치게 */
    margin-right: 20px;
    z-index: 3;
    background: #fff; /* 서브 카드는 흰색 불투명으로 강조 */
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-box {
    width: 50px; height: 50px;
    background: #f0fbfc;
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}

.stat-number-wrap.sm .counter {
    font-size: 2rem;
    font-weight: 800;
    color: #333;
}
.stat-number-wrap.sm .unit {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* 장식용 원 (Deco Circle) */
.deco-circle {
    position: absolute;
    top: -50px; right: -50px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(0, 140, 149, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}


/* ==========================================
   [수정됨] 범용 스크롤 등장 애니메이션 (Universal Slide In)
   ========================================== */

/* 1. 공통 동작: 투명도 0에서 시작, 0.8초간 부드럽게 변화 */
/* 기존에는 .feature-card.scroll-animate 였으나, .scroll-animate로 변경하여 모든 요소에 적용 */
.scroll-animate {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 부드러운 가속도 */
    will-change: transform, opacity; /* 브라우저 성능 최적화 */
}

/* 2. 방향별 초기 위치 (화면에 보이기 전) */
/* 왼쪽에서 등장 */
.slide-left {
    transform: translateX(-100px);
}

/* 오른쪽에서 등장 */
.slide-right {
    transform: translateX(100px);
}

/* 아래에서 등장 */
.slide-bottom {
    transform: translateY(100px);
}

/* 위에서 등장 */
.slide-top {
    transform: translateY(-50px);
}

/* 3. 활성화 상태 (JS가 active 클래스를 붙였을 때) */
/* 원래 위치(0,0)로 돌아오며 불투명도 1이 됨 */
.scroll-animate.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* 4. 순차적 등장 딜레이 (필요 시 사용) */
.scroll-animate.slide-bottom:nth-child(1) { transition-delay: 0.1s; }
.scroll-animate.slide-bottom:nth-child(2) { transition-delay: 0.2s; }
.scroll-animate.slide-bottom:nth-child(3) { transition-delay: 0.3s; }


/* ==========================================
   [신규] 미래 확장성 (Vision Section)
   컨셉: Deep Dark & Neon Tech
   ========================================== */
.future-vision {
    position: relative;
    /* 위 섹션(밝음) -> 아래 섹션(어두움)으로 이어지는 그라데이션 */
    background: linear-gradient(to bottom, #11262f 0%, #0a1921 100%);
    overflow: hidden;
    color: #fff;
    padding-bottom: 75px;
}

.future-vision .section-header.center-style h2 {
     font-size: 3rem; 
     color: #fff;
     margin-bottom: 20px;
}

.future-vision .section-header.center-style p {
    font-size: 1.25rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    max-width: 1000px;
    margin: 0 auto;
}

/* 배경 효과 (은은한 빛) */
.future-vision .vision-bg-effect {
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(0, 140, 149, 0.15) 0%, transparent 60%);
    animation: rotateBg 20s linear infinite;
    z-index: 1;
    pointer-events: none;
}

.vision-footer.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

@keyframes rotateBg {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* 비전 카드 스타일 */
.vision-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* 호버 효과 */
.vision-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 40px rgba(0, 140, 149, 0.2);
}

/* 아이콘 */
.vision-card .card-icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    box-shadow: 0 0 20px rgba(0, 140, 149, 0.2);
    transition: 0.4s;
}

.vision-card:hover .card-icon {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1) rotate(10deg);
}

/* 텍스트 영역 */
.vision-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.vision-card .summary {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 20px;
    opacity: 0.9;
}

.vision-card .detail {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    word-break: keep-all;
}

/* 배경 장식 (호버 시 나타나는 기하학 패턴) */
.vision-card .bg-shape {
    position: absolute;
    bottom: -50px; right: -50px;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(0, 140, 149, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transition: 0.5s;
    opacity: 0;
}

.vision-card:hover .bg-shape {
    opacity: 1;
    transform: scale(1.5);
}


/* =========================================================
   Responsive (move to bottom)
   Order: 991 -> 900 -> 768
   ========================================================= */

/* <=768 통합 블록 (중복 제거 버전) */
@media (max-width: 1024px) {

  /* 공통 컨테이너 */
  .container { padding: 0 20px; }


  /* =========================
     Hero (모바일)
     ========================= */
  .hero {
    height: auto;
    aspect-ratio: 16 / 10;
    margin-top: 80px;
  }
  @supports not (aspect-ratio: 1 / 1) {
    .hero { height: calc(100vw * 10 / 16); }
  }
  .hero-slide {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
.hero-content-bottom {
    top: auto;             /* 위쪽 기준 해제 */
    bottom: 20px;         /* 바닥에서 120px 정도 띄움 (원하는 높이로 숫자 조절 가능) */
    left: 50%;             /* 가로 위치 기준 */
    
    transform: translateX(-50%); /* [핵심] 가로만 중앙 정렬하고, 세로 정렬(-50%)은 제거 */
    
    width: 100%;           /* 너비를 꽉 채워서 줄바꿈 자연스럽게 */
    padding: 0 20px;       /* 좌우 여백 */
    box-sizing: border-box;
    text-align: center;    /* 텍스트 가운데 정렬 */
}
  .hero-content-bottom h2 {
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 15px;
    word-break: keep-all;
  }

  .hero.scrolled .hero-content-bottom {
    transform: translate(-50%, -50%) translateY(20px);
  }
  .hero-content-bottom p, .hero-controls, .scroll-indicator { display: none; }

  /* =========================
     Solutions (#solutions)
     ========================= */
  #solutions .section-header.center-style h2 {
    font-size: clamp(1.2rem, 5.8vw, 3rem) !important;
    white-space: nowrap;
    letter-spacing: -0.03em;
    line-height: 1.15;
  }
  #solutions .section-header.center-style p { display: none !important; }
  #solutions .section-header.center-style { margin-bottom: 30px !important; }

  #solutions .feature-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
    row-gap: 14px;
  }


  #solutions .feature-card.main-card { display: none !important; }

  #solutions .feature-card:not(.main-card) .card-img { display: none !important; }
  #solutions .feature-card:not(.main-card) .card-body {
    border-top: 0;
    padding: 16px 18px;
    justify-content: flex-start;
    gap: 0;
  }
  #solutions .feature-card:not(.main-card) .text-wrap { margin-right: 0; }

  /* solutions 영역 fade-in 제거 */
  #solutions .scroll-animate,
  #solutions .scroll-animate.active,
  #solutions .slide-left,
  #solutions .slide-right,
  #solutions .slide-bottom,
  #solutions .slide-top {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  /* =========================
     Security Leadership
     ========================= */
  .security-leadership.section-padding { padding: 70px 0 !important; }
  .security-leadership .leadership-wrapper { flex-direction: column; gap: 30px; text-align: center; }

  .security-leadership .sub-label { margin-bottom: 12px !important; font-size: 1rem; }
  .security-leadership .leadership-text { max-width: 100%; }
  .security-leadership .leadership-text h2 {
    font-size: 2.5rem;
    word-break: keep-all;
    margin-bottom: 0 !important;
  }

  /* 설명/해시태그 숨김 */
  .security-leadership .leadership-text .desc,
  .security-leadership .leadership-text .cert-badges {
    display: none !important;
  }

  .security-leadership .leadership-visual { width: 100%; align-items: center; }


  /* 유리 카드(숫자) 가독성 축소 */
  .glass-card { padding: 25px 20px; }
  .glass-card.main-stat { max-width: 100%; }
  .glass-card.sub-stat { align-self: center; margin-top: 20px; margin-right: 0; width: 100%; box-sizing: border-box; }
  .gradient-num { font-size: 4rem; }
  .gradient-num.unit { font-size: 2.5rem; }
  .stat-sub { font-size: 1rem; word-break: keep-all; }
  .stat-row { justify-content: center; }

  /* =========================
     Future Vision (.future-vision)
     ========================= */
  .future-vision .section-header.center-style h2 { font-size: 1.7rem; }
  .future-vision .section-header.center-style p { display: none !important; }
  .future-vision .vision-grid { grid-template-columns: 1fr; } /* 1열 배치 */
  .future-vision .vision-card .card-icon { display: none !important; }
  .future-vision .vision-card { padding: 22px 18px; }
  .future-vision .vision-card .summary { margin-bottom: 12px; }
  .future-vision .vision-footer { display: none !important; }

  /* =========================
     Core Values (Stats)
     ========================= */
  .stats { padding: 70px 0 !important; }
  .stats .section-header.center-style p { display: none !important; }
  .stats .section-header.center-style h2 { font-size: 1.7rem; }


  .stat-accordion {
    height: auto;
    flex-direction: column;
  }

  .stats .stat-item { min-height: 100px; padding: 18px !important; }
  .stats .stat-item.active {
    min-height: 120px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .stats .stat-item.active .stat-num {
    font-size: 2rem;
    margin-right: 12px !important;
  }

  .stats .stat-item.active h3 {
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    max-width: 100%;
    margin-bottom: 0 !important;
    line-height: 1.25;
    font-size: 1.7rem;
  }

  .stats .stat-item.active .stat-desc {
    display: none !important;
    margin-top: 0 !important;
  }
}