/* =========================================
   공통 섹션 헤더 스타일 (AI 페이지 통합)
   ========================================= */

/* 소제목: OUR SERVICE, AI Creative Solution 등 */
h4.subTitle {
    color: #F73C13 !important; /* 강제 오렌지색 적용 */
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px; /* 자간을 넓혀 전문적인 느낌 부여 */
    margin-bottom: 20px;
    text-transform: uppercase; /* 대문자 고정 */
}


/* 섹션 메인 타이틀 (h2) */
.service-header h2,
.aicontents strong:first-of-type,
.WhyUs strong:first-of-type {
    color: #FFF;
    text-align: center;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -1.5px;
    margin-bottom: 40px;
}

/* 타이틀 내 강조색 (span) */
.service-header h2 span,
.aicontents strong span,
.WhyUs strong span {
    color: #F73C13;
}



/* 1. 태블릿 (1024px 이하): 시원하게 1차 다이어트 */
@media screen and (max-width: 1024px) {
    .service-header h2,
    .aicontents strong:first-of-type,
    .WhyUs strong:first-of-type {
        font-size: 38px !important; /* 52px -> 38px */
        letter-spacing: -1px;
        margin-bottom: 30px;
    }
    
    h4.subTitle {
        font-size: 16px;
        letter-spacing: 2.5px;
    }
}

/* 2. 일반 모바일 (768px 이하): 야무지고 아기자기하게 */
@media screen and (max-width: 768px) {
    h4.subTitle {
        font-size: 13px !important; /* 18px -> 13px */
        letter-spacing: 2px;
        margin-bottom: 12px;
    }

    .service-header h2,
    .aicontents strong:first-of-type,
    .WhyUs strong:first-of-type {
        font-size: 24px !important; /* 52px -> 24px */
        line-height: 1.35 !important;
        letter-spacing: -0.8px;
        margin-bottom: 25px;
        padding: 0 10px; /* 텍스트가 양 끝에 붙지 않게 */
        word-break: keep-all; /* 단어 단위 줄바꿈 */
    }
}

/* 3. 초소형 모바일 (360px 이하): 극강의 슬림 최적화 */
@media screen and (max-width: 360px) {
    h4.subTitle {
        font-size: 11px !important;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }

    .service-header h2,
    .aicontents strong:first-of-type,
    .WhyUs strong:first-of-type {
        font-size: 20px !important; /* 24px -> 20px 극강의 오목조목 */
        line-height: 1.3 !important;
        letter-spacing: -0.5px;
        margin-bottom: 20px;
    }
}





/* =========================================
   AI Model Hero Section
   ========================================= */
.sub-hero {
    position: relative;
    width: 100%;
    height: 70vh; /* 히로 섹션 높이 */
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sub-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}


.sub-hero-text {
    position: relative;
    z-index: 10;
    /* 텍스트 주변에만 깊은 그림자 생성 */
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 
                 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 40px;
    /* 글자 뒷배경에만 아주 연한 그라데이션 박스 부여 */
    background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%);
    text-align: center;
}

.sub-hero-text h2 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    /* 글자 획을 더 뚜렷하게 (Stroke 효과) */
    -webkit-text-stroke: 0.5px rgba(0,0,0,0.3);
}

.sub-hero-text p {
    color: #fff;
    font-weight: 400;
    /* 가독성을 위해 p태그에도 그림자 추가 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}


.sub-hero h2 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

.sub-hero h2 span {
    color: #F73C13;
}

.sub-hero p {
    font-size: 22px;
    font-weight: 300;
    color: #E5E8EB;
    line-height: 1.6;
}


/* 배경 티커 컨테이너 */
.hero-bg-ticker {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    /* opacity: 0.99;  */
    /* 텍스트 가독성을 위해 투명도 조절 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

/* 흐르는 트랙 */
.ticker-row {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: ticker-move 40s linear infinite;
}

/* 두 번째 줄은 반대 방향으로 */
.ticker-row.reverse .ticker-track {
    animation: ticker-move-reverse 45s linear infinite;
}

/* 이미지 박스: 사이즈가 달라도 높이를 고정하여 정렬 */
.ticker-item {
    width: 220px; /* 가로폭 고정 */
    height: 320px; /* 세로높이 고정 */
    flex-shrink: 0;
    border-radius: 15px;
    overflow: hidden;
    background: #111;
}

.ticker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 박스에 꽉 차게 보정 */
    filter: grayscale(20%); /* 약간의 채도를 낮춰 고급스럽게 */
}

/* 가독성을 위한 상하단 그라데이션 오버레이 */
.sub-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.2) 50%, 
        rgba(0,0,0,0.9) 100%);
    z-index: 2;
}

/* 애니메이션 정의 */
@keyframes ticker-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes ticker-move-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
/* =========================================
   AI Model Hero 반응형 최적화
   ========================================= */

/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .sub-hero {
        height: 60vh; /* 높이 약간 축소 */
    }
    .sub-hero-text h2 {
        font-size: 42px !important;
    }
    .sub-hero p {
        font-size: 18px;
    }
    .ticker-item {
        width: 180px; /* 이미지 크기 1차 축소 */
        height: 260px;
    }
}

/* 2. 일반 모바일 (768px 이하): 야무진 아기자기 스타일 */
@media screen and (max-width: 768px) {
    .sub-hero {
        height: 500px; /* 고정 높이로 안정감 부여 */
    }

    .sub-hero-text {
        padding: 20px;
        width: 100%;
    }

    /* 타이틀 초슬림 스케일링 */
    .sub-hero-text h2, 
    .sub-hero h2 {
        font-size: 26px !important; /* 56px -> 26px */
        line-height: 1.3;
        margin-bottom: 15px;
        letter-spacing: -1px;
    }

    /* 설명글 슬림화 */
    .sub-hero p {
        font-size: 14px !important; /* 22px -> 14px */
        line-height: 1.5;
        padding: 0 15px;
        word-break: keep-all;
    }

    /* ★ 핵심: 티커 이미지 아기자기하게 줄이기 */
    .hero-bg-ticker {
        gap: 10px; /* 줄 간격 축소 */
    }

    .ticker-item {
        width: 100px; /* 220px -> 100px (미니 카드화) */
        height: 150px; /* 320px -> 150px */
        border-radius: 10px;
    }

    /* 모바일 가독성을 위해 배경 투명도 살짝 낮춤 */
    .ticker-item img {
        opacity: 0.5; 
    }
}

/* 3. 초소형 모바일 (360px 이하): 극강의 슬림 최적화 */
@media screen and (max-width: 360px) {
    .sub-hero {
        height: 420px;
    }

    .sub-hero-text h2, 
    .sub-hero h2 {
        font-size: 22px !important; /* 더 오목조목하게 */
    }

    .sub-hero p {
        font-size: 13px !important;
    }

    .ticker-item {
        width: 80px; /* 더 작게 */
        height: 120px;
    }
}



/* =========================================
   VS Section (Comparison: Human vs AI)
   ========================================= */

   .vs-section {
    padding: 140px 0;
    background: #0b0e12;
    color: #fff;
    overflow: hidden;
}

.vs-section h2 {
    font-size: 48px;
    font-weight: 800;
    margin-top: 15px;
    line-height: 1.3;
}

.vs-section h2 span { 
    color: #F73C13; 
}

/* 비교 컨테이너: 중앙 VS 뱃지를 위한 설정 */
.vs-container {
    display: flex;
    max-width: 1300px;
    margin: 100px auto 0;
    gap: 0; /* 중앙에서 박스가 만나도록 간격 제거 */
    padding: 0 20px;
    position: relative;
    align-items: center;
}

/* 중앙 VS 뱃지 디자인 */
.vs-container::after {
    content: 'VS';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 86px;
    height: 86px;
    background: #F73C13;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 26px;
    z-index: 20; /* 가장 위로 */
    border: 8px solid #0b0e12;
    box-shadow: 0 0 30px rgba(247, 60, 19, 0.4);
}

/* 공통 박스 스타일 */
.vs-box {
    flex: 1;
    padding: 80px 60px;
    border-radius: 40px;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

/* [왼쪽] 기존 모델 박스: 상대적으로 흐리고 어둡게 처리 */
.vs-human {
    background: #1c212a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0.5; /* 비활성 느낌 */
    transform: scale(0.95);
    margin-right: -10px; /* 중앙 뱃지쪽으로 밀착 */
    filter: grayscale(40%) blur(0.5px);
}

/* [오른쪽] AI 모델 박스: 강조 및 화려한 효과 */
.vs-ai {
    background: linear-gradient(145deg, #1c212a 0%, #000 100%);
    border: 2px solid #F73C13;
    position: relative;
    z-index: 10;
    transform: scale(1.1); /* 더 크게 부각 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    filter: none;
    opacity: 1;
}

/* AI 박스 상단 라벨 */
.vs-ai::before {
    content: 'OUR SOLUTION';
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: #F73C13;
    color: #fff;
    padding: 7px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(247, 60, 19, 0.3);
}

.vs-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 45px;
    display: block;
    color: #fff;
    letter-spacing: -0.5px;
}

.vs-human .vs-title { color: #9CA3AF; }

/* 리스트 스타일 */
.vs-list { 
    padding: 0; 
    margin: 0; 
    display: inline-block; /* 내용물 중앙 정렬 유지하며 왼쪽 정렬 느낌 */
    text-align: left;
}

.vs-list li {
    margin-bottom: 22px;
    font-size: 19px;
    color: #9CA3AF;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.4;
}

.vs-ai .vs-list li { 
    color: #fff; 
    font-weight: 500; 
}

.vs-ai .vs-list li b {
    color: #F73C13;
}

/* 아이콘 색상 구분 */
.vs-ai .vs-list li i { 
    color: #F73C13; 
    font-size: 24px; 
}

.vs-human .vs-list li i { 
    color: #4b5563; 
    font-size: 22px; 
}
/* =========================================
   VS Section - 모바일 가로 나열(1줄) 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .vs-section {
        padding: 60px 0;
    }

    /* 타이틀 아기자기 스케일링 */
    .vs-section h2 {
        font-size: 20px !important;
        letter-spacing: -0.5px;
        padding: 0 15px;
    }

    /* 컨테이너: 가로 정렬 유지 (1줄 나열 핵심) */
    .vs-container {
        display: flex !important; 
        flex-direction: row !important; /* 가로 유지 */
        gap: 4px; /* 박스 사이 최소 간격 */
        margin-top: 50px;
        padding: 0 10px;
        align-items: stretch;
    }

    /* 중앙 VS 뱃지 초소형화 */
    .vs-container::after {
        width: 15px; /* 86px -> 40px */
        height: 15px;
        font-size: 9px;
        border-width: 1px;
        box-shadow: 0 0 15px rgba(247, 60, 19, 0.3);
    }

    /* 공통 박스 다이어트 */
    .vs-box {
        padding: 30px 10px 20px !important; /* 내부 패딩 최소화 */
        border-radius: 15px;
    }

    /* 제목 다이어트 */
    .vs-title {
        font-size: 13px !important; /* 30px -> 13px */
        margin-bottom: 20px;
        white-space: nowrap; /* 제목 줄바꿈 방지 */
    }

    /* 리스트 초소형화 (아기자기의 핵심) */
    .vs-list {
        display: block;
        text-align: left;
    }

    .vs-list li {
        font-size: 10px !important; /* 19px -> 10px 극강 다이어트 */
        margin-bottom: 8px;
        gap: 4px;
        line-height: 1.2;
        letter-spacing: -0.8px;
    }

    /* 아이콘 사이즈 조절 */
    .vs-ai .vs-list li i { font-size: 11px; }
    .vs-human .vs-list li i { font-size: 10px; }

    /* OUR SOLUTION 라벨 미니멀화 */
    .vs-ai::before {
        padding: 3px 10px;
        font-size: 8px;
        top: -10px;
        letter-spacing: 0;
    }

    /* 박스 그림자 및 변형 효과 절제 */
    .vs-ai { transform: scale(1.02); }
    .vs-human { transform: scale(0.98); margin-right: -2px; }
}

/* 초소형 기기 (360px 이하) 추가 대응 */
@media screen and (max-width: 360px) {
    .vs-container { padding: 0 5px; }
    .vs-list li { font-size: 9px !important; letter-spacing: -1px; }
    .vs-title { font-size: 11px !important; }
}


/* =========================================
   Multi-Section (이미지 노드 버전)
   ========================================= */

.multi-section {
    padding: 140px 0;
    background: #000;
    text-align: center;
}

.multi-section h2 {
    font-size: 48px;
    font-weight: 800;
    margin-top: 15px;
    line-height: 1.3;
    color: #fff;
}

.multi-section h2 span { color: #F73C13; }

.concept-visual {
    position: relative;
    max-width: 1200px;
    margin: 100px auto 0;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 중앙 모델 */
.main-model {
    position: relative;
    width: 320px;
    z-index: 10;
}
.main-model img {
    width: 100%;
    border-radius: 40px;
    border: 2px solid #F73C13;
    box-shadow: 0 0 50px rgba(247, 60, 19, 0.4);
}

/* 이미지 노드 스타일 */
.concept-node {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    animation: floatAnim 4s ease-in-out infinite;
}

/* 노드 내 이미지 박스 */
.node-img {
    width: 160px; /* PC 기준 이미지 크기 */
    height: 160px;
    border-radius: 50%; /* 원형 유지 */
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: 0.4s;
}

.node-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

.concept-node span {
    background: rgba(247, 60, 19, 0.1);
    border: 1px solid rgba(247, 60, 19, 0.4);
    padding: 8px 18px;
    border-radius: 100px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* 호버 효과: 이미지가 커지며 테두리가 밝아짐 */
.concept-node:hover .node-img {
    border-color: #F73C13;
    transform: scale(1.1);
}

/* 노드별 개별 위치 재조정 (이미지가 커졌으므로 간격 확보) */
.node1 { top: 0%; left: 10%; animation-delay: 0s; }
.node2 { top: 10%; right: 5%; animation-delay: 1s; }
.node3 { bottom: 10%; left: 0%; animation-delay: 2s; }
.node4 { bottom: 0%; right: 10%; animation-delay: 1.5s; }

@keyframes floatAnim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}


/* =========================================
   Multi-Section (이미지 노드) 반응형 최적화
   ========================================= */

/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .multi-section { padding: 100px 0; }
    .concept-visual { height: 600px; margin-top: 60px; }
    .main-model { width: 260px; }
    .node-img { width: 130px; height: 130px; }
    
    /* 태블릿 위치 미세 조정 */
    .node1 { left: 5%; }
    .node2 { right: 0%; }
}

/* 2. 일반 모바일 (768px 이하): 옹기종기 아기자기 스타일 */
@media screen and (max-width: 768px) {
    .multi-section { padding: 60px 0; }
    
    .multi-section h2 {
        font-size: 24px !important; /* 48px -> 24px */
        letter-spacing: -0.8px;
    }

    .concept-visual {
        height: 480px; /* 높이 슬림화 */
        margin-top: 40px;
        position: relative;
    }

    /* 중앙 모델 다이어트 */
    .main-model {
        width: 160px; /* 320px -> 160px 반토막 */
    }
    .main-model img {
        border-radius: 25px;
        box-shadow: 0 0 30px rgba(247, 60, 19, 0.3);
    }

    /* 이미지 노드 아기자기 위젯화 */
    .node-img {
        width: 85px !important; /* 160px -> 85px 극강의 다이어트 */
        height: 85px !important;
        border-width: 2px;
    }

    .concept-node span {
        font-size: 11px !important; /* 14px -> 11px */
        padding: 4px 12px !important;
        white-space: nowrap;
    }

    /* ★ 핵심: 모바일 전용 옹기종기 배치 (가운데 모델 주변으로 밀착) */
    .node1 { top: 0; left: 10%; }      /* 왼쪽 위 */
    .node2 { top: 15%; right: 10%; }   /* 오른쪽 위 */
    .node3 { bottom: 15%; left: 5%; }  /* 왼쪽 아래 */
    .node4 { bottom: 0; right: 5%; }   /* 오른쪽 아래 */

    @keyframes floatAnim {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); } /* 움직임도 아기자기하게 절제 */
    }
}

/* 3. 초소형 모바일 (360px 이하): 겹침 방지 극슬림 튜닝 */
@media screen and (max-width: 360px) {
    .concept-visual { height: 400px; }
    .main-model { width: 130px; }
    
    .node-img {
        width: 70px !important;
        height: 70px !important;
    }

    .concept-node span { font-size: 10px !important; }

    /* 더 좁은 화면을 위한 밀착 배치 */
    .node1 { left: 2%; }
    .node2 { right: 2%; }
    .node3 { left: -2%; }
    .node4 { right: -2%; }
}







/* =========================================
   Multi-Section 추가 클래스 정의
   ========================================= */

/* 1. 섹션 설명문 스타일 (section-desc) */
.multi-section .section-desc {
    color: #8B95A1; /* 차분한 그레이 톤 */
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 30px;
    text-align: center;
    word-break: keep-all; /* 단어 단위 줄바꿈으로 깔끔하게 */
}

/* 2. 중앙 모델 하단 라벨 스타일 (base-label) */
.main-model .base-label {
    margin-top: 25px;
    color: #F73C13; /* 포인트 오렌지 컬러 */
    font-weight: 800;
    letter-spacing: 2.5px; /* 자간을 넓혀 전문적인 느낌 */
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
}

/* =========================================
   Multi-Section 추가 요소 반응형 최적화
   ========================================= */

/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .multi-section .section-desc {
        font-size: 18px;
        margin-top: 25px;
        padding: 0 30px;
    }
    .main-model .base-label {
        font-size: 13px;
        letter-spacing: 2px;
    }
}

/* 2. 일반 모바일 (768px 이하): 야무진 아기자기 스타일 */
@media screen and (max-width: 768px) {
    /* 섹션 설명문 다이어트 */
    .multi-section .section-desc {
        font-size: 14px !important; /* 20px -> 14px */
        line-height: 1.5;
        margin-top: 20px;
        padding: 0 15px;
        color: #9CA3AF; /* 모바일 가독성을 위해 살짝 밝게 조정 */
    }

    /* 중앙 모델 하단 라벨 스케일링 */
    .main-model .base-label {
        font-size: 11px !important; /* 14px -> 11px */
        letter-spacing: 1.5px; /* 자간을 모바일 폭에 맞춰 최적화 */
        margin-top: 15px;
        opacity: 0.9;
    }

    .main-model {
        /* 주변 노드들이 잘 보이도록 130px~140px 정도로 더 줄입니다 */
        width: 100px !important; 
    }
}

/* 3. 초소형 모바일 (360px 이하): 극강의 슬림 최적화 */
@media screen and (max-width: 360px) {
    .multi-section .section-desc {
        font-size: 13px !important;
        line-height: 1.4;
        margin-top: 15px;
    }

    .main-model .base-label {
        font-size: 10px !important;
        letter-spacing: 1px;
        margin-top: 12px;
    }

    .main-model {
        /* 주변 노드들이 잘 보이도록 130px~140px 정도로 더 줄입니다 */
        width: 80px !important; 
    }
}


/* =========================================
   Process Section (엔지니어링 프로세스)
   ========================================= */

/* 1. 섹션 전체 컨테이너 */
.process-section {
    padding: 140px 0;
    background: #000;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* 2. 섹션 내부 정렬 컨테이너 */
.process-section .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 3. 섹션 메인 타이틀 */
.process-section h2 {
    font-size: 48px;
    font-weight: 800;
    margin-top: 15px;
    line-height: 1.3;
    letter-spacing: -1.5px;
}

/* 4. 타이틀 내 강조색 */
.process-section h2 span { 
    color: #F73C13; 
}

/* 5. 스텝 카드 그룹 컨테이너 */
.process-steps {
    display: flex;
    justify-content: center;
    gap: 25px;
    max-width: 1520px;
    margin: 80px auto 0;
    padding: 0 20px;
}

/* 6. 개별 스텝 카드 */
.p-step {
    flex: 1;
    background: #111418;
    padding: 60px 40px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left; /* 텍스트는 좌측 정렬로 가독성 확보 */
}

/* 카드 호버 효과 */
.p-step:hover {
    border-color: #F73C13;
    transform: translateY(-15px);
    background: #050505;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* 7. 스텝 번호 (STEP 01) */
.p-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #F73C13;
    font-weight: 800;
    display: block;
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 8. 스텝 제목 */
.p-title {
    font-size: 26px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* 9. 스텝 상세 설명 */
.p-desc {
    font-size: 17px;
    color: #8B95A1;
    line-height: 1.7;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
    margin-bottom: 0;
}

/* =========================================
   Process Section 반응형 (Responsive)
   ========================================= */
/* =========================================
   작업 프로세스 - 768px 이하 2*2 그리드 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .process-section {
        padding: 60px 0;
    }

    /* 섹션 타이틀 슬림화 */
    .process-section h2 {
        font-size: 22px !important;
        letter-spacing: -0.8px;
        margin-bottom: 30px;
    }

    /* ★ 수정 핵심: grid를 flex로 변경하여 중앙 정렬 구현 */
    .process-steps {
        display: flex !important;           /* flex로 변경 */
        flex-wrap: wrap !important;        /* 줄바꿈 허용 */
        justify-content: center !important; /* 자식이 홀수일 때 중앙 정렬 */
        gap: 12px !important;              /* 카드 간격 */
        margin-top: 40px;
        padding: 0 15px;
    }

    /* 개별 스텝 카드 다이어트 */
    .p-step {
        /* 한 줄에 2개씩 나오게 너비 설정 (gap 12px 고려) */
        width: calc(50% - 6px) !important; 
        flex: none !important;             /* 너비 고정 */
        
        padding: 25px 15px !important;
        border-radius: 18px;
        text-align: center; 
        box-sizing: border-box;            /* 패딩 포함 너비 계산 */
        background: #111418;               /* 배경색 유실 방지 */
    }

    /* 스텝 번호 (STEP 01) */
    .p-num {
        font-size: 10px !important;
        margin-bottom: 12px;
        letter-spacing: 1px;
    }

    /* 스텝 제목 */
    .p-title {
        font-size: 16px !important;
        margin-bottom: 10px;
        letter-spacing: -0.5px;
    }

    /* 스텝 설명 (초슬림 텍스트) */
    .p-desc {
        font-size: 11px !important;
        line-height: 1.4;
        color: #6B7280;
    }

    /* 호버 효과 절제 */
    .p-step:hover {
        transform: translateY(-5px);
    }
}



/* 초소형 모바일 (360px 이하) 정밀 튜닝 */
@media screen and (max-width: 360px) {
    .process-steps {
        gap: 8px !important;
    }
    .p-step {
        padding: 20px 10px !important;
    }
    .p-title { font-size: 14px !important; }
    .p-desc { font-size: 10px !important; }
}




/* =========================================
   Total Solution Section (강조 버전)
   ========================================= */
   .total-solution {
    padding: 160px 0;
    /* [강조] 완전 블랙에서 살짝 빠진 세련된 다크 네이비 블랙 */
    background: #0b0e12; 
    text-align: center;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.total-solution .inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.total-solution h2 {
    font-size: 52px; /* 살짝 키워서 임팩트 부여 */
    font-weight: 800;
    margin-top: 20px;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -2px;
}

.total-solution h2 span { color: #F73C13; }

.total-solution .section-desc {
    color: #9CA3AF;
    font-size: 20px;
    margin-top: 35px;
    line-height: 1.7;
    word-break: keep-all;
}

.total-solution .section-desc b { color: #fff; }

/* 솔루션 그리드 레이아웃 */
.solution-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 90px;
}

/* 개별 카드 아이템 */
.sol-item {
    flex: 1;
    /* 배경보다 살짝 더 밝은 색으로 입체감 부여 */
    background: #161b22; 
    padding: 70px 45px;
    border-radius: 35px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

/* 중앙 하이라이트 카드 (광고 소재 제작 강조) */
.sol-highlight {
    border: 2px solid #F73C13;
    background: #000; /* 하이라이트 카드는 다시 블랙으로 대조 효과 */
    transform: translateY(-20px); /* 위로 띄워서 강조 */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.sol-item:hover {
    transform: translateY(-10px);
    border-color: rgba(247, 60, 19, 0.5);
}

.sol-highlight:hover {
    transform: translateY(-25px); /* 하이라이트 카드는 더 역동적으로 */
}

/* 뱃지 및 텍스트 */
.sol-tag {
    color: #F73C13;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.sol-item h3 {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    line-height: 1.4;
}

.sol-item p {
    font-size: 17px;
    color: #8B95A1;
    line-height: 1.8;
    margin-bottom: 35px;
}

/* 하단 태그 스타일 */
.platform-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.platform-icons span {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    padding: 7px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

/* 하이라이트 카드 내 태그 강조 */
.sol-highlight .platform-icons span {
    background: rgba(247, 60, 19, 0.15);
    color: #F73C13;
    border: 1px solid rgba(247, 60, 19, 0.2);
}


/* =========================================
   Total Solution - 모바일 1열 세로 나열
   ========================================= */
   @media screen and (max-width: 768px) {
    .total-solution {
        padding: 60px 0;
    }

    .total-solution h2 {
        font-size: 24px !important;
        letter-spacing: -1px;
        line-height: 1.3;
    }

    .total-solution .section-desc {
        font-size: 14px !important;
        margin-top: 20px;
        padding: 0 10px;
    }

    /* ★ 수정 핵심: 1열 세로 나열 */
    .solution-grid {
        display: flex !important;
        flex-direction: column !important; /* 세로로 차곡차곡 */
        align-items: center !important;
        gap: 25px !important;            /* 카드 사이 시원한 간격 */
        margin-top: 45px;
        padding: 0 20px;
    }

    /* 개별 카드: 쪼그라들지 않게 너비 100% */
    .sol-item {
        width: 100% !important; 
        max-width: 450px;       /* 너무 퍼지지 않게 최대폭 제한 */
        flex: none !important;
        padding: 40px 25px !important;
        border-radius: 25px;
        text-align: center;      /* 내용은 여전히 중앙이 아기자기함 */
    }

    /* 하이라이트 카드 (OUR SOLUTION) */
    .sol-highlight {
        transform: scale(1.02) !important; /* 살짝만 키워서 강조 */
        border-width: 2px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        z-index: 2;
    }

    /* 텍스트 요소 최적화 */
    .sol-tag {
        font-size: 11px !important;
        margin-bottom: 15px;
    }

    .sol-item h3 {
        font-size: 20px !important;
        margin-bottom: 15px;
    }

    .sol-item p {
        font-size: 14px !important;
        line-height: 1.6;
        margin-bottom: 30px;
        color: #9CA3AF;
    }

    /* 플랫폼 태그들 옹기종기 */
    .platform-icons {
        justify-content: center;
        gap: 8px;
    }

    .platform-icons span {
        padding: 5px 12px;
        font-size: 12px;
        border-radius: 8px;
    }
}

/* 초소형 모바일 (360px 이하) 정밀 튜닝 */
@media screen and (max-width: 360px) {
    .total-solution h2 { font-size: 20px !important; }
    .sol-item h3 { font-size: 16px !important; }
    .sol-item { padding: 30px 15px !important; }
}






/* =========================================
   Design Service Section (인하우스 디자인 강조)
   ========================================= */
   .design-service {
    padding: 140px 0;
    background: #000; /* 다시 블랙으로 돌아와서 대조 효과 */
}

.design-service h2 {
    font-size: 48px;
    font-weight: 800;
    margin-top: 15px;
    line-height: 1.3;
    color: #fff;
    text-align: center;
}

.design-service h2 span { color: #F73C13; }

.design-content {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-top: 80px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

/* 텍스트 영역 */
.design-text {
    flex: 1;
    text-align: left;
}

.design-text .section-desc {
    color: #8B95A1;
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 40px;
}

.design-text .section-desc b { color: #fff; }

.design-list { padding: 0; list-style: none; }
.design-list li {
    font-size: 18px;
    color: #fff;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.design-list li i {
    color: #F73C13;
    font-size: 22px;
}

.design-list li b {
    color: #F73C13;
    font-weight: 700;
}

/* 디자인 비주얼 그리드 (우측) */
.design-visual-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.v-box {
    aspect-ratio: 4 / 3;
    background: #111418;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    transition: 0.4s;
}

/* 실제 작업 이미지가 있다면 여기 background-image로 교체 */
.v-box.v1 { background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.8)), url('../images/design_sample_01.jpg') center/cover; }
.v-box.v2 { background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.8)), url('../images/design_sample_02.jpg') center/cover; }
.v-box.v3 { background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.8)), url('../images/design_sample_03.jpg') center/cover; }
.v-box.v4 { background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.8)), url('../images/design_sample_04.jpg') center/cover; }

.v-box span {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.v-box:hover {
    border-color: #F73C13;
    transform: translateY(-5px);
}
/* =========================================
   Design Service - 반응형 최적화
   ========================================= */

/* 1. 태블릿 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .design-service { padding: 100px 0; }
    .design-content { 
        gap: 40px; 
        flex-direction: column; /* 세로 나열 시작 */
    }
    .design-text { text-align: center; width: 100%; }
    .design-list { 
        display: inline-block; 
        text-align: left; 
    }
    .design-visual-grid { width: 100%; margin-top: 40px; }
}

/* 2. 일반 모바일 (768px 이하): 텍스트 중앙 & 이미지 2*2 유지 */
@media screen and (max-width: 768px) {
    .design-service { padding: 60px 0; }

    /* 타이틀 다이어트 */
    .design-service h2 {
        font-size: 24px !important;
        letter-spacing: -1px;
    }

    .design-content {
        margin-top: 40px;
        gap: 30px;
    }

    /* 텍스트 영역 슬림화 */
    .design-text .section-desc {
        font-size: 14px !important;
        margin-bottom: 25px;
        line-height: 1.6;
        padding: 0 10px;
    }

    /* 리스트 아기자기하게 */
    .design-list li {
        font-size: 13px !important;
        margin-bottom: 12px;
        gap: 10px;
    }

    .design-list li i { font-size: 16px; }

    /* ★ 이미지 그리드: 2*2 유지하되 아기자기하게 */
    .design-visual-grid {
        gap: 10px;
        margin-top: 20px;
    }

    .v-box {
        border-radius: 12px; /* 곡률 다이어트 */
        padding: 12px;
    }

    .v-box span {
        font-size: 11px !important;
        letter-spacing: 0.5px;
    }
}

/* 3. 초소형 모바일 (360px 이하): 극강의 슬림 최적화 */
@media screen and (max-width: 360px) {
    .design-service h2 { font-size: 21px !important; }
    .design-text .section-desc { font-size: 13px !important; }
    
    /* 초소형에서는 이미지가 너무 작으면 답답하므로 2*2 대신 1열도 고려하나, 
       아기자기함을 위해 2*2를 유지하며 패딩만 더 줄임 */
    .design-visual-grid { gap: 8px; }
    .v-box { padding: 8px; }
    .v-box span { font-size: 10px !important; }
}



/* =========================================
   Model Gallery (AI 페르소나 라인업)
   ========================================= */

/* 갤러리 섹션 전체 */
.model-gallery {
    padding: 140px 0;
    background: #0b0e12;
}

/* 상단 설명 문구 */
.gallery-desc {
    color: #8B95A1; 
    margin-top: 15px; 
    font-size: 18px;
    font-weight: 400;
}

/* 그리드 레이아웃 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1520px;
    margin: 80px auto 0;
    padding: 0 20px;
}

/* 개별 모델 카드 */
.m-card {
    aspect-ratio: 3 / 4;
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background: #1c212a;
    cursor: pointer;
}

/* 이미지 박스 및 이미지 */
.m-img-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.m-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 카드 호버 시 이미지 효과 */
.m-card:hover img {
    transform: scale(1.1);
    filter: brightness(0.6); /* 글자가 더 잘 보이도록 어둡게 */
}

/* 정보 텍스트 레이어 */
.m-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    /* 하단에서 위로 올라오는 그라데이션 오버레이 */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #fff;
    transform: translateY(30px); /* 살짝 아래 대기 */
    opacity: 0;
    transition: 0.4s ease-out;
    text-align: left;
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 카드 호버 시 텍스트 노출 */
.m-card:hover .m-info {
    transform: translateY(0);
    opacity: 1;
}

/* 페르소나 이름 */
.m-info h5 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

/* 페르소나 상세 설명 */
.m-info p {
    font-size: 16px;
    color: #F73C13; /* 포인트 오렌지 컬러 */
    font-weight: 600;
    margin-bottom: 0;
}

/* 하단 CTA 버튼 영역 */
.gallery-cta {
    text-align: center;
    margin-top: 80px;
}

.gallery-cta .btn-orange {
    padding: 22px 65px;
    font-size: 20px;
    font-weight: 800;
    border-radius: 100px;
    display: inline-block;
    background: #F73C13;
    color: #fff;
    transition: 0.3s;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(247, 60, 19, 0.3);
}

.gallery-cta .btn-orange:hover {
    background: #ff4d26;
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(247, 60, 19, 0.5);
}



/* 갤러리 메인 제목 */
.model-gallery h2 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-top: 15px;
    line-height: 1.3;
    letter-spacing: -1.5px;
    text-align: center;
}

/* 갤러리 하단 보조 설명문 */
.model-gallery .gallery-desc {
    color: #8B95A1; /* 차분한 그레이 톤 */
    font-size: 19px;
    font-weight: 400;
    margin-top: 15px;
    text-align: center;
    line-height: 1.6;
    word-break: keep-all; /* 모바일 줄바꿈 최적화 */
}


/* =========================================
   Model Gallery - 반응형 최적화 (통합본)
   ========================================= */

/* 1. 태블릿 (1024px 이하): 3열로 1차 다이어트 */
@media screen and (max-width: 1024px) {
    .model-gallery { padding: 100px 0; }
    
    .model-gallery h2 { font-size: 38px !important; }
    
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 4열 -> 3열 */
        gap: 20px;
        margin-top: 60px;
    }
}

/* 2. 일반 모바일 (768px 이하): 아기자기한 2*2 그리드 */
@media screen and (max-width: 768px) {
    .model-gallery { padding: 60px 0; }

    /* 메인 제목 슬림화 */
    .model-gallery h2 {
        font-size: 24px !important;
        letter-spacing: -1px;
        margin-bottom: 10px;
    }

    /* 보조 설명문 아기자기하게 */
    .model-gallery .gallery-desc {
        font-size: 14px !important; /* 19px -> 14px */
        line-height: 1.5;
        padding: 0 20px;
        margin-top: 10px;
    }

    /* ★ 핵심: 2*2 그리드 배치 */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px;
        margin-top: 40px;
        padding: 0 15px;
    }

    .m-card {
        border-radius: 18px; /* 곡률 다이어트 */
    }

    /* 모바일 가독성: 호버가 없으므로 정보 상시 노출 */
    .m-info {
        opacity: 1 !important; 
        transform: translateY(0) !important;
        padding: 20px 15px !important;
        /* 그라데이션을 좀 더 진하게 하여 글자 가독성 확보 */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 70%, transparent 100%) !important;
    }

    .m-info h5 {
        font-size: 16px !important; /* 24px -> 16px */
        margin-bottom: 4px;
    }

    .m-info p {
        font-size: 11px !important; /* 16px -> 11px */
    }

    /* 하단 CTA 버튼 다이어트 */
    .gallery-cta { margin-top: 50px; }
    .gallery-cta .btn-orange {
        padding: 16px 45px !important; /* 22px -> 16px */
        font-size: 15px !important;
        width: 85%; /* 터치하기 편하게 너비 확보 */
        max-width: 280px;
    }
}

/* 3. 초소형 모바일 (360px 이하): 극강의 슬림 최적화 */
@media screen and (max-width: 360px) {
    .model-gallery h2 { font-size: 21px !important; }
    .model-gallery .gallery-desc { font-size: 13px !important; }
    
    .gallery-grid { gap: 8px; }
    
    .m-info h5 { font-size: 14px !important; }
    .m-info p { font-size: 10px !important; }
    
    .gallery-cta .btn-orange { font-size: 14px !important; padding: 14px 30px !important; }
}



/* =========================================
   Work Flow Section (업무 절차)
   ========================================= */
   .work-flow {
    padding: 140px 0;
    background: #000;
}

.work-flow h2 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-top: 15px;
    text-align: center;
}

.flow-container {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flow-item {
    display: flex;
    align-items: center;
    background: #111418;
    padding: 40px 50px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: 0.3s;
}

.flow-item:hover {
    border-color: #F73C13;
    background: #161b22;
    transform: translateX(10px);
}

.flow-num {
    font-family: 'Montserrat';
    font-size: 42px;
    font-weight: 900;
    color: #F73C13;
    margin-right: 50px;
    min-width: 60px;
}

.flow-txt h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.flow-txt p {
    font-size: 17px;
    color: #8B95A1;
    line-height: 1.5;
    margin-bottom: 0;
}


/* =========================================
   Work Flow - 3개/2개 아기자기 그리드
   ========================================= */
   @media screen and (max-width: 768px) {


    .work-flow h4.subTitle {
        font-size: 13px !important; /* 18px -> 13px */
        letter-spacing: 2px !important;
        margin-bottom: 12px !important;
        color: #F73C13 !important;
        text-align: center;
    }

    /* 2. 메인 제목 (협업 및 제작 절차) */
    .work-flow h2 {
        font-size: 24px !important; /* 48px -> 24px */
        line-height: 1.3 !important;
        letter-spacing: -1px !important;
        margin-bottom: 30px !important;
        text-align: center;
        color: #fff;
    }


    .work-flow {
        padding: 60px 0;
    }

    /* 1. 컨테이너: 세로(column)에서 가로(row)로 다시 변경 */
    .flow-container {
        display: flex !important;
        flex-direction: row !important; /* 가로 나열로 복구 */
        flex-wrap: wrap !important;     /* 줄바꿈 허용 */
        justify-content: center !important; /* 중앙 정렬 */
        gap: 10px !important;           /* 좁은 폭을 위한 최소 간격 */
        margin-top: 40px;
        padding: 0 10px;
    }

    /* 2. 개별 아이템: 3개/2개로 나누기 위한 너비 계산 */
    .flow-item {
        /* 한 줄에 3개 나오게 하려면 너비를 31% 정도로 잡습니다 */
        width: calc(33.333% - 8px) !important;
        flex: none !important;
        
        flex-direction: column !important; /* 번호가 위로 */
        padding: 20px 10px !important;    /* 아주 슬림한 패딩 */
        border-radius: 15px;
        text-align: center;
        align-items: center !important;
        min-height: 160px; /* 높이 통일로 아기자기하게 */
    }

    /* 번호 스타일: 3열에서는 더 작아야 함 */
    .flow-num {
        font-size: 22px !important; /* 더 앙증맞게 */
        margin-right: 0 !important;
        margin-bottom: 8px;
        min-width: auto;
    }

    /* 텍스트 영역 */
    .flow-txt h3 {
        font-size: 13px !important; /* 텍스트 파격 다이어트 */
        margin-bottom: 5px;
        word-break: keep-all;
    }

    .flow-txt p {
        font-size: 10px !important; /* 아주 작은 설명글 */
        line-height: 1.3;
        color: #6B7280;
        letter-spacing: -0.5px;
    }
}

/* 3. 너무 좁은 기기 (360px 이하) - 3열은 무리이므로 2열로 자동 전환 */
@media screen and (max-width: 380px) {
    .flow-item {
        width: calc(50% - 6px) !important; /* 2열 배치 */
    }
    .work-flow h2 { font-size: 21px !important; }
}