/* =========================================
   인스타그램 상세페이지 (유튜브 톤앤매너 이식)
   ========================================= */

.InstagramGroup {
    background: #0b0e12; /* 유튜브와 동일한 딥 다크 배경 */
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 80px;
}

/* 1. 상단 헤더 텍스트 영역 (중앙 정렬) */
.InstagramGroup .inner.header-text {
    padding: 150px 20px 80px 20px; /* 상단 여백 확보 */
    max-width: 1200px;
    margin: 0 auto;
    text-align: center; /* 텍스트 중앙 정렬 */
}

.InstagramGroup .header-text h2 {
    color: #FFF;
    /* 62px을 기준으로 하되 반응형 대응 */
    font-size: clamp(30px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1.5px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

.InstagramGroup .header-text .subtitle {
    color: #8B95A1; /* 세련된 그레이 컬러 */
    font-size: 22px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto; /* 중앙 배치를 위해 오토 마진 */
    word-break: keep-all;
}

/* 강조 텍스트 (필요 시 활용) */
.InstagramGroup .header-text .subtitle strong {
    color: #FF5F00;
    font-weight: 700;
}

/* 2. 메인 비주얼 박스 (유튜브 header-visual-box 스타일 계승) */
.InstagramGroup .mainVisual {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    border-radius: 0px;
    overflow: hidden;
    /* 이미지 배경 처리 */
    background: url('../../images/instabg01.png') no-repeat center center;
    background-size: cover;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.InstagramGroup .mainVisualText {
    padding: 100px 40px;
    text-align: center;
    /* 이미지 위 가독성을 위한 레이어 */
    background: rgba(11, 14, 18, 0.5); 
    backdrop-filter: blur(4px); /* 살짝 블러를 주어 고급스럽게 */
}

/* h3 위상 - 요청하신 46px 적용 */
.InstagramGroup .mainVisualText h3 {
    color: #fff;
    font-size: 46px !important;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 30px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

.InstagramGroup .mainVisualText h3 em {
    font-style: normal;
    color: #FF5F00; /* 오렌지 강조 */
}

.InstagramGroup .mainVisualText h4 {
    color: #D1D6DB;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
}

.InstagramGroup .mainVisualText span {
    color: #8B95A1;
    font-size: 16px;
    font-weight: 400;
    display: block;
    margin-bottom: 30px;
}

.InstagramGroup .mainVisualText p {
    color: #FF5F00;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}




/* =========================================
   인스타그램 상세 - 초밀착 아기자기 (768px 이하)
   ========================================= */
   @media screen and (max-width: 768px) {
    .InstagramGroup {
        padding-bottom: 30px;
    }

    /* 1. 상단 헤더 - 군더더기 없이 밀착 */
    .InstagramGroup .inner.header-text {
        padding: 60px 15px 30px 15px; /* 상단 여백 대폭 축소 */
    }

    .InstagramGroup .header-text h2 {
        font-size: 20px; /* 24px에서도 더 줄여서 아주 콤팩트하게 */
        letter-spacing: -0.8px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .InstagramGroup .header-text .subtitle {
        font-size: 13px; /* 아주 오목조목한 사이즈 */
        line-height: 1.4;
        color: #8B95A1;
        max-width: 100%;
    }

    /* 2. 메인 비주얼 박스 - 화면을 꽉 채우되 내부 텍스트는 오목조목 */
    .InstagramGroup .mainVisual {
        border-radius: 0;
        border: none;
    }

    .InstagramGroup .mainVisualText {
        padding: 45px 20px; /* 벙벙한 느낌 제거 */
        background: rgba(11, 14, 18, 0.65); /* 가독성 위해 레이어 농도 조절 */
    }

    /* 메인 카피 - 핵심만 톡 튀어나오게 */
    .InstagramGroup .mainVisualText h3 {
        font-size: 19px !important; /* 웅장함 버리고 아기자기함 선택 */
        line-height: 1.4;
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }

    .InstagramGroup .mainVisualText h4 {
        font-size: 14px; /* 본문급으로 축소 */
        margin-bottom: 8px;
        font-weight: 700;
        color: #eee;
    }

    .InstagramGroup .mainVisualText span {
        font-size: 12px; /* 보조 설명은 아주 작게 */
        margin-bottom: 18px;
        opacity: 0.8;
    }

    /* 강조 포인트 - 앙증맞은 라벨 스타일 */
    .InstagramGroup .mainVisualText p {
        font-size: 11px; /* 칩(Chip) 디자인 느낌 */
        letter-spacing: 0;
        background: rgba(255, 95, 0, 0.15);
        border: 1px solid rgba(255, 95, 0, 0.3);
        display: inline-block;
        padding: 3px 10px;
        border-radius: 4px;
        font-weight: 800;
    }
}

/* 초소형 모바일 (360px 이하) - 픽셀 단위 한계까지 조절 */
@media screen and (max-width: 360px) {
    .InstagramGroup .header-text h2 { font-size: 18px; }
    .InstagramGroup .mainVisualText h3 { font-size: 17px !important; }
    .InstagramGroup .mainVisualText { padding: 35px 15px; }
}






/* =========================================
   서비스 유형 (Service Type Grid)
   ========================================= */
   .ServiceType {
    background: #111418; /* 완전 블랙보다 약간 밝은 톤 */
    padding: 140px 0;
    position: relative;
}

.ServiceType .inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 상단 소제목 (중앙 정렬) */
.ServiceType h5 {
    text-align: center;
    color: #FF5F00;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 60px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

/* 그리드 컨테이너 */
.ServiceType .flexcontainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개 카드 가로 배치 */
    gap: 25px;
}

/* 개별 카드 아이템 */
.ServiceType .flexitem {
    background: #1c212a; /* 카드 배경은 섹션보다 조금 더 밝게 */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 40px 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

.ServiceType .flexitem:hover {
    transform: translateY(-12px);
    background: #242b37;
    border-color: #FF5F00;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 숫자 표시 (유튜브 톤앤매너 계승) */
.ServiceType .flexitem i {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: #FF5F00;
    margin-bottom: 30px;
    font-style: normal;
    font-family: 'Montserrat', sans-serif;
}

/* 배지 (요즘 대세!, 로그통 특화!) */
.ServiceType .flexitem em {
    position: absolute;
    top: 35px;
    right: 25px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #FF5F00;
    padding: 5px 12px;
    border-radius: 6px;
    font-style: normal;
}

/* 서비스 제목 */
.ServiceType .flexitem p {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 20px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
    word-break: keep-all;
}

/* 서비스 설명 */
.ServiceType .flexitem span {
    color: #9CA3AF;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    word-break: keep-all;
}

/* 모바일 및 태블릿 대응 */
@media screen and (max-width: 1200px) {
    .ServiceType .flexcontainer {
        grid-template-columns: repeat(2, 1fr); /* 2열 배치 */
        gap: 20px;
    }
}


/* =========================================
   서비스 유형 (Service Type) - 768px 이하 2*2 최적화
   ========================================= */
@media screen and (max-width: 768px) {
    .ServiceType {
        padding: 60px 0; /* 상하 패딩 다이어트 */
    }

    .ServiceType .inner {
        padding: 0 12px; /* 좌우 여백 최소화 */
    }

    /* 소제목 아기자기하게 */
    .ServiceType h5 {
        font-size: 11px;
        letter-spacing: 2px;
        margin-bottom: 30px;
    }

    /* ★ 핵심: 2*2 그리드 유지 */
    .ServiceType .flexcontainer {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important; /* 카드 사이 간격을 아주 좁게 */
    }

    /* 개별 카드 아이템 슬림화 */
    .ServiceType .flexitem {
        padding: 20px 15px; /* 내부 여백 대폭 축소 */
        border-radius: 16px;
        min-height: 180px; /* 높이 균일화 */
    }

    /* 숫자 표시 축소 */
    .ServiceType .flexitem i {
        font-size: 20px;
        margin-bottom: 15px;
    }

    /* 배지 (요즘 대세! 등) 초소형화 */
    .ServiceType .flexitem em {
        top: 15px;
        right: 12px;
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 4px;
    }

    /* 서비스 제목 - 2줄 이상 넘어가도 정갈하게 */
    .ServiceType .flexitem p {
        font-size: 15px;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    /* 서비스 설명 - 아주 작고 오목조목하게 */
    .ServiceType .flexitem span {
        font-size: 11px;
        line-height: 1.4;
        color: #8B95A1;
        /* 텍스트가 너무 길어지면 카드 균형이 깨지므로 말줄임 추천 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 400px 이하 초소형 기기 대응 */
@media screen and (max-width: 400px) {
    .ServiceType .flexitem {
        padding: 15px 10px;
    }
    .ServiceType .flexitem p {
        font-size: 14px;
    }
    .ServiceType .flexitem span {
        font-size: 10.5px;
    }
}



/* =========================================
   01. 릴스 서비스 상세 (InstaService01)
   ========================================= */
   .InstaService01 {
    background: #0b0e12; /* 상단 헤더와 동일한 깊은 블랙 */
    padding: 140px 0;
    text-align: center;
}

.InstaService01 .inner {
    max-width: 1100px; /* 콘텐츠 집중도를 위해 살짝 좁게 설정 */
    margin: 0 auto;
    padding: 0 20px;
}

/* 섹션 번호 (01) */
.InstaService01 .inner > strong {
    display: block;
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 95, 0, 0.4); /* 배경에 은은하게 깔리는 오렌지 번호 */
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: -40px; /* 제목과 겹치게 배치하여 디자인 요소로 활용 */
}

.InstaService01 h2 {
    color: #fff;
    font-size: 46px !important; /* h3와 동일한 위상의 메인 타이틀 */
    font-weight: 800;
    margin-bottom: 40px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

/* 서비스 인트로 텍스트 */
.InstaService01 .Serviceintro {
    color: #9CA3AF;
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 80px;
    word-break: keep-all;
}

.InstaService01 .Serviceintro em {
    font-style: normal;
    color: #fff;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
    font-size: 22px;
}

.InstaService01 .Serviceintro br + br {
    display: block;
    content: "";
    margin-top: 20px;
}

/* 실제 진행 사례 (이미지 영역) */
.Progressioncase01 {
    margin-top: 100px;
}

.Progressioncase01 p {
    color: #FF5F00;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: left;
    padding-left: 10px;
    border-left: 4px solid #FF5F00;
}

/* ★ 흰색 배경 이미지를 위한 처리 ★ */
.InstaService01 .caseIMG {
    background: #fff; /* 이미지 본연의 흰색과 통일 */
    border-radius: 30px;
    padding: 10px; /* 이미지 주변 여백 */
    margin-bottom: 80px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); /* 다크모드에서 분리되게 그림자 적용 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.InstaService01 .caseIMG img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

/* 성과 지표 박스 (instaView) */
.instaView01 {
    background: linear-gradient(135deg, #FF5F00 0%, #FF8A00 100%);
    border-radius: 24px;
    padding: 50px 20px;
    margin-top: 30px;
    color: #fff;
    box-shadow: 0 15px 35px rgba(255, 95, 0, 0.2);
}

.instaView01 span {
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.instaView01 h4 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
    opacity: 0.9;
}

.instaView01 h3 {
    font-size: 56px !important;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* 모바일 대응 */



/* =========================================
   릴스 서비스 상세 - 768px 이하 초슬림 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .InstaService01 {
        padding: 60px 0; /* 패딩 다이어트 */
    }

    /* 배경 번호 (01) - 아기자기하게 축소 */
    .InstaService01 .inner > strong {
        font-size: 40px; /* 80px -> 40px */
        margin-bottom: -20px; /* 겹침 정도 조절 */
        opacity: 0.3;
    }

    .InstaService01 h2 {
        font-size: 22px !important; /* 메인 타이틀 톤앤매너 유지 */
        margin-bottom: 25px;
        letter-spacing: -0.5px;
    }

    /* 서비스 인트로 텍스트 축소 */
    .InstaService01 .Serviceintro {
        font-size: 13px; /* 19px -> 13px */
        margin-bottom: 40px;
    }

    .InstaService01 .Serviceintro em {
        font-size: 16px; /* 강조 문구 22px -> 16px */
        margin-bottom: 10px;
    }

    /* 진행 사례 레이블 */
    .Progressioncase01 {
        margin-top: 50px;
    }

    .Progressioncase01 p {
        font-size: 14px; /* 18px -> 14px */
        margin-bottom: 15px;
        border-left-width: 3px;
        padding-left: 8px;
    }

    /* 사례 이미지 박스 슬림화 */
    .InstaService01 .caseIMG {
        border-radius: 16px;
        padding: 6px; /* 내부 여백 축소 */
        margin-bottom: 40px;
    }

    .InstaService01 .caseIMG img {
        border-radius: 12px;
    }

    /* ★ 성과 지표 박스 - 아기자기한 대시보드 스타일 */
    .instaView01 {
        padding: 30px 15px;
        border-radius: 16px;
        margin-top: 20px;
    }

    .instaView01 span {
        font-size: 10px; /* 뱃지 텍스트 최소화 */
        padding: 2px 8px;
        margin-bottom: 10px;
    }

    .instaView01 h4 {
        font-size: 14px; /* 22px -> 14px */
        margin-bottom: 5px;
    }

    .instaView01 h3 {
        font-size: 32px !important; /* 대형 숫자 56px -> 32px */
        letter-spacing: -1px;
    }
}

/* 초소형 모바일 기기 (400px 이하) 추가 조정 */
@media screen and (max-width: 400px) {
    .InstaService01 h2 { font-size: 20px !important; }
    .instaView01 h3 { font-size: 28px !important; }
}







/* =========================================
   02. 연예인 섭외 사례 (InstaService02)
   ========================================= */
   .InstaService02 {
    background: #111418; /* 약간 밝은 블랙 */
    padding: 140px 0;
    text-align: center;
}

.InstaService02 .inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 섹션 번호 디자인 통일 */
.InstaService02 .inner > strong {
    display: block;
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 95, 0, 0.4);
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: -40px;
}

.InstaService02 h2 {
    color: #fff;
    font-size: 46px !important;
    font-weight: 800;
    margin-bottom: 30px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

/* 서비스 인트로 */
.InstaService02 .Serviceintro {
    color: #9CA3AF;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 80px;
    word-break: keep-all;
}

.InstaService02 .Serviceintro em {
    font-style: normal;
    color: #FF5F00;
    font-weight: 700;
    font-size: 20px;
}

/* --- 연예인 카드 그리드 레이아웃 --- */
.Progressioncase02 .flexcontiner {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 배치 */
    gap: 30px;
    margin-bottom: 100px;
}


/* 이미지 아래쪽 흰색 선 방지 */
.Progressioncase02 .flexitem {
    background: #1c212a;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.05);
}


.Progressioncase02 .flexitem:hover {
    transform: translateY(-10px);
    border-color: #FF5F00;
}

/* 카드 상단 (이미지 + 반응수 배지) */
/* 연예인 카드 이미지 박스 - 우측/하단 미세선 제거 버전 */
.casetop {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    /* 1. 배경을 이미지의 흰색이 아닌, 카드 하단의 어두운 색으로 설정 */
    background: #1c212a; 
    border-radius: 20px 20px 0 0;
    /* 2. 안쪽으로 미세한 그림자를 주어 경계선의 흰 선을 덮음 */
    box-shadow: inset 0 0 0 1px #1c212a; 
}

.casetop img {
    /* 3. 상/하/좌/우 모든 방향으로 2px 정도 더 튀어나가게 설정 */
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px); 
    height: calc(100% + 2px);
    object-fit: cover;
    display: block;
    /* 4. 미세한 선 방지를 위한 렌더링 옵션 */
    image-rendering: -webkit-optimize-contrast; 
    transform: translateZ(0); 
    backface-visibility: hidden;
}

/* 성과 배지가 이미지 위에 있으므로 z-index 확인 */
.casetop span {
    z-index: 10;
}


/* 카드 하단 (프로필 정보) */
.casebottom {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.casebottom div:first-child img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FF5F00;
    padding: 2px;
    background: #111418;
}

.casebottom h6 {
    font-size: 15px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px;
}

.casebottom i {
    color: #FF5F00;
    font-size: 12px;
    margin-right: 4px;
}

.casebottom span {
    font-size: 13px;
    color: #8B95A1;
    margin-right: 12px;
}

/* --- 크로스 미디어 영역 --- */
.crossmidea {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 20px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

#Maximization {
    color: #8B95A1;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 60px;
    word-break: keep-all;
}

/* 크로스 미디어 성과 박스 */
.instaView03 {
    background: #0b0e12;
    border: 1px solid #FF5F00;
    border-radius: 30px;
    padding: 60px 20px;
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
}

.instaView03::before {
    content: 'CROSS MEDIA';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 100px;
    font-weight: 900;
    color: rgba(255, 95, 0, 0.03);
    white-space: nowrap;
}

.instaView03 span {
    display: inline-block;
    color: #FF5F00;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.instaView03 h4 {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}

.instaView03 h3 {
    color: #fff;
    font-size: 62px !important;
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
}

/* 모바일 대응 */
@media screen and (max-width: 1024px) {
    .Progressioncase02 .flexcontiner { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================
   연예인 섭외 사례 - 768px 이하 초슬림 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .InstaService02 {
        padding: 60px 0;
    }

    /* 배경 번호 (02) - 아기자기하게 */
    .InstaService02 .inner > strong {
        font-size: 40px;
        margin-bottom: -20px;
        opacity: 0.3;
    }

    .InstaService02 h2 {
        font-size: 22px !important;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
    }

    .InstaService02 .Serviceintro {
        font-size: 13px;
        margin-bottom: 40px;
    }

    .InstaService02 .Serviceintro em {
        font-size: 15px;
        display: inline-block;
        margin-bottom: 5px;
    }

    /* ★ 카드 그리드 - 아기자기한 2열 배치 */
    .Progressioncase02 .flexcontiner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 60px;
    }

    .Progressioncase02 .flexitem {
        border-radius: 12px;
    }

    /* 카드 이미지 영역 */
    .casetop {
        border-radius: 12px 12px 0 0;
    }

    /* 카드 하단 정보 (프로필) */
    .casebottom {
        padding: 12px 10px;
        gap: 8px;
    }

    .casebottom div:first-child img {
        width: 32px; /* 48px -> 32px 축소 */
        height: 32px;
        padding: 1px;
    }

    .casebottom h6 {
        font-size: 12px;
        margin-bottom: 2px;
    }

    .casebottom span {
        font-size: 10px;
        margin-right: 5px;
    }

    .casebottom i {
        font-size: 9px;
    }

    /* --- 크로스 미디어 영역 --- */
    .crossmidea {
        font-size: 20px;
        margin-bottom: 12px;
    }

    #Maximization {
        font-size: 13px;
        margin-bottom: 35px;
    }

    /* 크로스 미디어 성과 박스 슬림화 */
    .instaView03 {
        padding: 35px 15px;
        border-radius: 16px;
        margin-bottom: 30px;
    }

    .instaView03::before {
        font-size: 40px; /* 배경 텍스트 축소 */
        top: 5px;
    }

    .instaView03 span {
        font-size: 11px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .instaView03 h4 {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .instaView03 h3 {
        font-size: 32px !important; /* 대형 숫자 축소 */
        letter-spacing: -1px;
    }
}

/* 400px 이하 초소형 기기 추가 대응 */
@media screen and (max-width: 400px) {
    .casebottom h6 { font-size: 11px; }
    .instaView03 h3 { font-size: 28px !important; }
}









/* =========================================
   03. 포토 + 영상 체험단 (4x2 배열 수정)
   ========================================= */


   /* InstaService03 헤더 영역 */

.InstaService03 .inner > strong {
    display: block;
    font-size: 80px; /* 섹션 번호 03 */
    font-weight: 900;
    color: rgba(255, 95, 0, 0.4); /* 은은한 오렌지색 번호 */
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: -40px; /* 타이틀과 겹치는 엣지 있는 디자인 */
    text-align: center;
}

.InstaService03 h2 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 46px !important;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
    text-align: center;
}

.InstaService03 p {
    color: #FF5F00; /* 오렌지색 강조 */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 70px; /* 그리드와의 간격 */
    text-align: center;
    letter-spacing: -0.5px;
    opacity: 0.9;
}

/* 모바일 대응 (반응형 추가) */
@media screen and (max-width: 768px) {
    .InstaService03 .inner > strong {
        font-size: 50px;
        margin-bottom: -25px;
    }
    .InstaService03 h2 {
        font-size: 32px !important;
        margin-bottom: 15px;
    }
    .InstaService03 p {
        font-size: 16px;
        margin-bottom: 40px;
    }
}


.InstaService03 {
    background: #0b0e12;
    padding: 140px 0;
    text-align: center;
}

.InstaService03 .inner {
    max-width: 1300px; /* 4열이므로 넓은 폭 유지 */
    margin: 0 auto;
    padding: 0 20px;
}

/* 4x2 그리드 설정 */
.InstaService03 .grid-4x2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 가로 4개 */
    gap: 20px;
}

.InstaService03 .flexitem {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.InstaService03 .flexitem:hover {
    transform: translateY(-8px);
    border-color: #FF5F00;
}

.InstaService03 .img-box {
    width: 100%;
    height: 100%;
    background: #fff; /* 이미지 배경색 통일 */
}

.InstaService03 .flexitem img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지가 잘리지 않고 선명하게 보이도록 설정 */
    display: block;
}

/* 반응수 배지 */
.InstaService03 .flexitem span {
    position: absolute;
    bottom: 15px;
    left: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 0;
    border-radius: 8px;
    text-align: center;
}

/* 8번째 통계 카드 */
.InstaService03flexitem {
    background: #1c212a !important; /* 이미지 없이 깔끔한 배경 */
    border: 1px solid #FF5F00 !important;
}

.stat-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.stat-content i {
    font-style: normal;
    color: #8B95A1;
    font-size: 13px;
    margin-bottom: 8px;
}

.stat-content em {
    font-style: normal;
    color: #FF5F00;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 5px;
}

.stat-content h4 {
    color: #fff;
    font-size: 32px !important; /* 4열에 맞춰 폰트 사이즈 조정 */
    font-weight: 900;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
}

/* 반응형 모바일 */
@media screen and (max-width: 1024px) {
    .InstaService03 .grid-4x2 { grid-template-columns: repeat(2, 1fr); } /* 태블릿은 2열 4행 */
}




/* =========================================
   포토+영상 체험단 - 768px 이하 초슬림 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .InstaService03 {
        padding: 60px 0;
    }

    /* 번호 및 타이틀 다이어트 */
    .InstaService03 .inner > strong {
        font-size: 40px; /* 80px -> 40px */
        margin-bottom: -20px;
        opacity: 0.3;
    }

    .InstaService03 h2 {
        font-size: 22px !important; /* 메인 톤앤매너 일치 */
        margin-bottom: 12px;
        letter-spacing: -0.5px;
    }

    .InstaService03 p {
        font-size: 14px; /* 20px -> 14px */
        margin-bottom: 35px;
    }

    /* ★ 2x2 그리드 유지 (8개 카드가 2열 4행으로 배치) */
    .InstaService03 .grid-4x2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important; /* 카드 간격 밀착 */
    }

    .InstaService03 .flexitem {
        border-radius: 12px;
    }

    /* 이미지 위 반응수 배지 슬림화 */
    .InstaService03 .flexitem span {
        bottom: 10px;
        left: 8px;
        right: 8px;
        font-size: 10px;
        padding: 4px 0;
        border-radius: 6px;
    }

    /* 8번째 통계 카드 - 아기자기한 마감 */
    .stat-content {
        padding: 10px;
    }

    .stat-content i {
        font-size: 10px;
        margin-bottom: 4px;
    }

    .stat-content em {
        font-size: 14px; /* 상단 작은 강조 텍스트 */
        margin-bottom: 2px;
    }

    .stat-content h4 {
        font-size: 20px !important; /* 거대 숫자 32px -> 20px 축소 */
        letter-spacing: -0.5px;
    }
}

/* 초소형 모바일 (360px 이하) 추가 조정 */
@media screen and (max-width: 360px) {
    .InstaService03 h2 { font-size: 20px !important; }
    .InstaService03 p { font-size: 13px; }
    .stat-content h4 { font-size: 18px !important; }
}


/* =========================================
   04. 인스타 배포기자단 (InstaService04)
   ========================================= */
   .InstaService04 {
    background: #111418; /* 약간 밝은 다크 배경 */
    padding: 140px 0;
    text-align: center;
}

.InstaService04 .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 섹션 번호 (04) */
.InstaService04 .inner > strong {
    display: block;
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 95, 0, 0.4);
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: -40px;
}

.InstaService04 h2 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 46px !important;
    font-weight: 800;
    margin-bottom: 40px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

/* 서비스 인트로 설명 */
.InstaService04 .Serviceintro {
    color: #9CA3AF;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 60px;
    word-break: keep-all;
}

.InstaService04 .Serviceintro em {
    font-style: normal;
    color: #FF5F00; /* 강조 문구 오렌지 */
    font-size: 22px;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}

/* 배포기자단 포인트 박스 (tagserve) */
.tagserve {
    background: linear-gradient(135deg, #1c212a 0%, #111418 100%);
    border: 1px solid rgba(255, 95, 0, 0.3);
    border-radius: 30px;
    padding: 60px 40px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
    text-align: center; /* 텍스트 중앙 정렬 */
    transition: 0.3s;
}

.tagserve:hover {
    border-color: #FF5F00;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* 박스 내부 장식 요소 (해시태그 느낌의 배경) */
.tagserve::after {
    content: '#Viral #Instagram #Logtong';
    position: absolute;
    bottom: -10px;
    right: 20px;
    font-size: 60px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    font-family: 'Montserrat', sans-serif;
    z-index: 1;
}

.tagserve p {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 20px;
}

.tagserve span {
    position: relative;
    z-index: 2;
    display: inline-block;
    color: #FF5F00;
    background: rgba(255, 95, 0, 0.1);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
}

/* 모바일 대응 */

/* =========================================
   인스타 배포기자단 - 768px 이하 초슬림 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .InstaService04 {
        padding: 60px 0;
    }

    /* 배경 번호 (04) - 아주 아기자기하게 */
    .InstaService04 .inner > strong {
        font-size: 40px; /* 80px -> 40px */
        margin-bottom: -20px;
        opacity: 0.3;
    }

    .InstaService04 h2 {
        font-size: 22px !important; /* 메인 톤앤매너 통일 */
        margin-bottom: 20px;
        letter-spacing: -0.5px;
    }

    /* 서비스 인트로 설명 축소 */
    .InstaService04 .Serviceintro {
        font-size: 13px; /* 18px -> 13px */
        margin-bottom: 35px;
        line-height: 1.6;
    }

    .InstaService04 .Serviceintro em {
        font-size: 16px; /* 22px -> 16px */
        margin-bottom: 10px;
    }

    /* ★ 포인트 박스 (tagserve) - 초밀착 다이어트 */
    .tagserve {
        padding: 35px 20px; /* 60px -> 35px */
        border-radius: 20px;
        margin-top: 30px;
    }

    /* 배경 해시태그 워터마크 축소 */
    .tagserve::after {
        font-size: 30px; /* 60px -> 30px */
        bottom: 5px;
        right: 10px;
    }

    .tagserve p {
        font-size: 18px; /* 거대 텍스트 28px -> 18px */
        line-height: 1.4;
        margin-bottom: 15px;
        letter-spacing: -0.5px;
    }

    .tagserve span {
        font-size: 13px; /* 18px -> 13px */
        padding: 6px 18px;
        border-radius: 30px;
    }
}

/* 초소형 모바일 (360px 이하) 추가 조정 */
@media screen and (max-width: 360px) {
    .InstaService04 h2 { font-size: 20px !important; }
    .tagserve p { font-size: 16px; }
    .tagserve span { font-size: 12px; }
}

/* =========================================
   05. 브랜드 진행 사례 (InstaService05)
   ========================================= */
   .InstaService05 {
    background: #1c212a; /* 섹션 구분감을 위해 조금 더 밝은 다크 그레이 */
    padding: 140px 0;
    text-align: center;
}

.InstaService05 .inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 섹션 번호 (05) */
.InstaService05 .inner > strong {
    display: block;
    font-size: 80px;
    font-weight: 900;
    color: rgba(255, 95, 0, 0.4);
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: -40px;
}

.InstaService05 h2 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 46px !important;
    font-weight: 800;
    margin-bottom: 30px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

.InstaService05 .Serviceintro {
    color: #9CA3AF;
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 60px;
    word-break: keep-all;
}

.InstaService05 .Serviceintro em {
    font-style: normal;
    color: #FF5F00;
    font-weight: 700;
}

/* 브랜드 사례 그리드 (2열) */
.brandcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.brandcaseWrap {
    background: #fff; /* 흰색 배경 이미지와 일체감 */
    border-radius: 30px;
    padding: 40px;
    text-align: left;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.brandcaseWrap:hover {
    transform: translateY(-10px);
}

/* 카테고리 뱃지 스타일 */
.brandcaseWrap .cate01 {
    display: inline-block;
    background: #FF5F00;
    color: #fff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-right: 8px;
    margin-bottom: 15px;
}

.brandcaseWrap .cate02 {
    display: inline-block;
    border: 1px solid #FF5F00;
    color: #FF5F00;
    padding: 5px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.brandcaseWrap div {
    margin-top: 10px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.brandcaseWrap img {
    width: 100%;
    display: block;
}

/* 모바일 대응 */
@media screen and (max-width: 1024px) {
    .brandcase-grid {
        grid-template-columns: 1fr; /* 모바일은 1열로 */
        max-width: 600px;
        margin: 0 auto;
    }
}
/* =========================================
   브랜드 진행 사례 - 768px 이하 초슬림 최적화
   ========================================= */
   @media screen and (max-width: 768px) {
    .InstaService05 {
        padding: 60px 0;
    }

    /* 배경 번호 (05) - 아기자기하게 축소 */
    .InstaService05 .inner > strong {
        font-size: 40px;
        margin-bottom: -20px;
        opacity: 0.3;
    }

    .InstaService05 h2 {
        font-size: 22px !important;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
    }

    .InstaService05 .Serviceintro {
        font-size: 13px;
        margin-bottom: 35px;
        line-height: 1.5;
    }

    /* ★ 브랜드 카드 그리드 - 2열 배치로 밀도 강화 */
    .brandcase-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important; /* 카드 사이 간격 밀착 */
        max-width: 100% !important;
    }

    /* 카드 본체 다이어트 */
    .brandcaseWrap {
        padding: 15px; /* 40px -> 15px 획기적 축소 */
        border-radius: 16px;
    }

    /* 뱃지 스타일 초소형화 (아기자기함의 핵심) */
    .brandcaseWrap .cate01 {
        font-size: 10px;
        padding: 3px 10px;
        margin-bottom: 8px;
        margin-right: 4px;
    }

    .brandcaseWrap .cate02 {
        font-size: 10px;
        padding: 2px 10px;
        margin-bottom: 8px;
    }

    /* 이미지 박스 둥근 모서리 조정 */
    .brandcaseWrap div {
        margin-top: 5px;
        border-radius: 8px;
    }
}

/* 초소형 모바일 (360px 이하) 추가 조정 */
@media screen and (max-width: 360px) {
    .brandcaseWrap { padding: 10px; }
    .brandcaseWrap .cate01, 
    .brandcaseWrap .cate02 { font-size: 9px; padding: 2px 6px; }
    .InstaService05 h2 { font-size: 20px !important; }
}




/* =========================================
   진행 비용 테이블 (Costtable)
   ========================================= */
   .Costtable {
    background: #0b0e12; /* 다시 딥 블랙으로 마감 */
    padding: 140px 0;
}

.Costtable .inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

.Costtable h3 {
    text-align: center;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 60px;
    font-family: 'Paperlogy-8ExtraBold', sans-serif;
}

/* 테이블 스크롤 컨테이너 (모바일 대응) */
.table-scroll {
    width: 100%;
    overflow-x: auto; /* 가로 스크롤 허용 */
    background: rgba(255, 255, 255, 0.02);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px;
}

/* 스크롤바 커스텀 */
.table-scroll::-webkit-scrollbar {
    height: 6px;
}
.table-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.table-scroll::-webkit-scrollbar-thumb {
    background: #FF5F00;
    border-radius: 10px;
}

/* 테이블 스타일 */
.Costtable table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 900px; /* 테이블 형태 유지를 위한 최소폭 */
}

/* 헤더 스타일 */
.Costtable th {
    background: rgba(255, 255, 255, 0.03);
    color: #8B95A1;
    font-size: 16px;
    font-weight: 600;
    padding: 25px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

/* 셀 스타일 */
.Costtable td {
    padding: 30px 15px;
    color: #D1D5DB;
    font-size: 16px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s;
}

/* 행(Row) 호버 효과 */
.Costtable tbody tr:hover td {
    background: rgba(255, 95, 0, 0.02);
    color: #fff;
}

/* '구분' 열 강조 */
.Costtable .highlight {
    background: rgba(255, 255, 255, 0.02);
    color: #FF5F00 !important;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* 마지막 행 테두리 제거 */
.Costtable tbody tr:last-child td {
    border-bottom: none;
}

/* 기자단 전체 너비 셀 스타일 */
.Costtable td[colspan="5"] {
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}
/* =========================================
   진행 비용 테이블 - 768px 이하 초슬림 카드화
   ========================================= */
   @media screen and (max-width: 768px) {
    .Costtable {
        padding: 60px 0;
    }

    .Costtable h3 {
        font-size: 24px; /* 44px -> 24px 축소 */
        margin-bottom: 35px;
        letter-spacing: -0.8px;
    }

    /* 테이블 스크롤 컨테이너 해제 (카드로 바꿀 것이므로) */
    .table-scroll {
        background: transparent;
        border: none;
        padding: 0;
        overflow-x: visible;
    }

    /* 테이블 요소들을 카드 형태로 재배치 */
    .Costtable table, 
    .Costtable thead, 
    .Costtable tbody, 
    .Costtable th, 
    .Costtable td, 
    .Costtable tr {
        display: block; /* 테이블 구조 해제 */
        width: 100%;
        min-width: auto !important;
    }

    /* 헤더(th) 숨기기 (카드 내부에 라벨로 명시) */
    .Costtable thead {
        display: none;
    }

    /* 각 행(Row)을 하나의 아기자기한 카드로 변신 */
    .Costtable tbody tr {
        background: #1c212a;
        border-radius: 16px;
        margin-bottom: 15px;
        padding: 20px 15px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* 셀 데이터 스타일링 */
    .Costtable td {
        text-align: left;
        padding: 6px 0;
        border-bottom: none;
        font-size: 13px;
        display: flex;
        justify-content: space-between; /* 항목명과 값 양끝 배치 */
        align-items: center;
    }

    /* '구분' 열 (상품명) 강조 */
    .Costtable td.highlight {
        background: transparent;
        border-right: none;
        font-size: 16px !important;
        color: #FF5F00 !important;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        display: block; /* 상품명은 한 줄 단독 사용 */
    }

    /* 개별 데이터 앞에 라벨(항목명) 추가 (예: 모집인원, 비용 등) */
    /* ※ HTML 구조상 TD 순서에 맞게 Content를 넣어주세요. 아래는 예시입니다. */
    .Costtable td:not(.highlight)::before {
        content: attr(data-label); /* HTML의 data-label 속성 활용 추천 */
        color: #555;
        font-weight: 500;
        font-size: 12px;
    }

    /* 기자단 등 전체 통합 열 처리 */
    .Costtable td[colspan="5"] {
        text-align: center;
        background: rgba(255, 95, 0, 0.05);
        border-radius: 8px;
        padding: 12px;
        margin-top: 10px;
        font-size: 13px;
    }

    /* 비용(Price) 강조 */
    .Costtable td:last-child {
        color: #fff;
        font-weight: 700;
        font-size: 15px;
    }
}

/* 초소형 모바일 (360px 이하) 추가 조정 */
@media screen and (max-width: 360px) {
    .Costtable h3 { font-size: 21px; }
    .Costtable td.highlight { font-size: 15px !important; }
}