/* =========================================================
   1. Header & Navigation (Fixed & Glassmorphism)
   ========================================================= */
header {
    position: fixed;    /* 화면에 고정 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;      /* 다른 요소보다 위에 표시 */
    background-color: rgba(17, 17, 17, 0.9); /* 배경을 살짝 투명하게 하면 더 고급스러움 */
    backdrop-filter: blur(10px); /* 배경 흐림 효과 */
    border-bottom: 1px solid rgba(212, 175, 55, 0.2); /* 하단에 얇은 골드 라인 */
}

/* 헤더가 고정되면 본문 내용이 위로 빨려 들어가므로, 
   맨 위 섹션(Hero)에 헤더 높이만큼 여백을 줍니다. */
.hero {
    margin-top: 80px; 
}

header .container.nav { 
    height: 100px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 30px; 
    max-width: 1200px;
}

/* Logo System */
/* 로고 링크 컨테이너 */
.logo-link { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    text-decoration: none;
}

/* 영문 로고: 강렬한 입체 골드 */
.logo-en { 
    font-size: 28px !important; 
    font-weight: 900; 
    letter-spacing: -0.5px; 
    line-height: 1.1; 
    
    /* 골드 그라데이션 적용 */
    background: linear-gradient(to bottom, #FFF5C3 0%, #D4AF37 45%, #AA8A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 검은 배경에서 묻히지 않도록 그림자 추가 */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5));
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* 국문 로고: 은은한 샴페인 골드 (가독성 확보) */
.logo-ko { 
    font-size: 15px !important; /* 국문은 20px보다 조금 줄여야 영문이 돋보입니다 */
    letter-spacing: 4px; 
    margin-top: 4px; 
    
    /* 영문보다 연하고 밝은 골드 톤 */
    color: #F1D279 !important; 
    opacity: 0.9; 
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Nav Menu */
nav { flex-grow: 1; display: flex; justify-content: flex-end; }
nav ul { display: flex !important; gap: clamp(15px, 3vw, 40px); }
nav a { 
    font-size: 19px !important; 
    font-weight: 700; 
    color: var(--white) !important; 
    white-space: nowrap; 
}
nav a:hover, nav a.active { color: var(--accent) !important; }

.nav-contact { 
    background: var(--accent) !important; 
    color: var(--white) !important; 
    padding: 12px 24px !important; 
    border-radius: 50px; 
    font-weight: 800 !important;
}

/* =========================================================
   2. Main Visual (Hero Section)
   ========================================================= */
.top-visual-wrapper {
    background-color: var(--dark-bg);
    background-image: 
        linear-gradient(rgba(5, 4, 10, 0.6), rgba(5, 4, 10, 0.8)), 
        url('../images/webmain.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: var(--white);
    border-bottom: 1px solid var(--line-white);
}

.hero { padding: 160px 0 100px; text-align: center; }
.hero h2 { 
    font-size: clamp(42px, 7vw, 72px) !important; 
    font-weight: 900 !important; 
    letter-spacing: -2px; 
    line-height: 1.2; 
}
.hero h2 span { color: var(--accent) !important; }
.hero-sub { font-size: 22px !important; margin-top: 24px; color: rgba(255,255,255,0.8); }

/* Main Buttons (Neon/B2B Style) */
.main-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 50px; }
.btn-primary, .btn-secondary { 
    background-color: #4a80ff !important; 
    color: var(--white) !important;
    padding: 18px 45px;
    border-radius: 8px;
    font-weight: 700;
    transition: 0.3s;
}
.btn-primary:hover { 
    background: var(--neon) !important; 
    color: #000 !important; 
    transform: translateY(-5px); 
}
/* =========================================================
   3. Common Service Grid (칼정렬 동기화 보정)
   ========================================================= */
.service-box { padding: 120px 0; border-bottom: 1px solid var(--line); }

.service-layout {
    display: grid;
    /* [보정] 모든 서비스의 좌우 비율을 520px : 550px 느낌의 고정 비율로 통일 */
    grid-template-columns: 520px 1fr; 
    gap: 80px;
    align-items: start;
    max-width: 1200px; 
    margin: 0 auto;
    padding: 100px 20px;
}

/* [보정] 서비스 01에만 따로 걸려있던 너비와 비율을 제거하여 02, 03과 일치시킴 */
#service-01 .service-layout {
    grid-template-columns: 520px 1fr; 
    max-width: 1200px; 
}

.service-copy {
    width: 520px; /* 좌측 텍스트 영역 너비 강제 고정 */
}

.service-proof {
    width: 100%;
    max-width: 550px; /* 우측 카드 영역 최대 너비 제한 */
    justify-self: end; /* 카드를 우측 끝으로 밀착 */
}

/* 서비스 2(반전) 레이아웃 설정 */
.service-layout.reverse {
    grid-template-columns: 1fr 520px; /* 반전 시에도 텍스트 영역 폭은 유지 */
    direction: rtl;
}
.service-layout.reverse > * {
    direction: ltr;
}

/* =========================================================
   [추가] 하단 요약 바(|) 공통 토대 (서비스 1,2,3 공용)
   ========================================================= */
.service-one-line {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.75;
    color: var(--muted);
}

.service-one-line::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 18px;
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}
/* =========================================================
   [Typography] 서비스 01, 02, 03 글씨 크기 완벽 동기화
   ========================================================= */

/* 1. 최상단 배지 (SERVICE 01 등) */
.service-box .service-badge {
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    margin-bottom: 20px !important;
    display: inline-block;
    border-radius: 50px;
}

/* 2. 연결 문구 (상단 세로 바 옆) */
.service-box .service-connection {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    color: #444;
}

/* 3. 국문 소제목 (타이틀 바로 위) */
.service-box .service-kick {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    line-height: 1.2 !important;
}

/* 4. 메인 타이틀 (가장 중요) */
.service-box .service-title {
    font-size: 44px !important; /* 기획자님 요청 수치 고정 */
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: -1.5px !important;
    margin-bottom: 28px !important;
    color: var(--text-pure) !important;
}

/* 5. 본문 설명 (Define) */
.service-box .service-define {
    font-size: 16px !important; /* 16px 고정 */
    line-height: 1.85 !important;
    color: var(--muted) !important;
    margin-bottom: 32px !important;
    word-break: keep-all;
}

/* 6. 리스트 소제목 및 항목 */
.service-box .service-block h4 {
    font-size: 15px !important;
    font-weight: 900 !important;
    margin-bottom: 16px !important;
    color: #1a1a1a !important;
}

.service-box .service-list li {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
}

/* 7. 하단 요약 문구 (세로 바 옆) */
.service-one-line {
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.75 !important;
}
/* =========================================================
   FOOTER STYLE
   ========================================================= */
.footer {
    background-color: #1a1a1a;
    color: #999;
    padding: 80px 0 40px;
    font-size: 14px;
    border-top: 1px solid #333;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 40px;
    border-bottom: 1px solid #2a2a2a;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.footer-logo span {
    color: #5D3FD3; /* 서비스 컬러 중 하나 사용 */
}

.footer-slogan {
    font-size: 15px;
    color: #666;
}

.btn-contact {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #444;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.btn-contact:hover {
    background: #fff;
    color: #000;
}

/* =========================================================
   FOOTER GADOKSUNG (가독성) 보정
   ========================================================= */

.footer {
    background-color: #111111; /* 배경을 조금 더 딥하게 하여 텍스트를 부각 */
    color: #888888; /* 기본 텍스트 색상 */
    padding: 60px 0 40px;
    border-top: 1px solid #222;
}

/* 1. 로고 및 슬로건 */


/* 2. 로고: INSYNC부터 GLOBAL까지 전체 골드 적용 */
.footer-logo {
    font-size: 28px; /* 로고 사이즈 업 */
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

/* INSYNC와 GLOBAL 모두에 골드 그라데이션 적용 */

.footer-logo {
    font-size: 28px; /* 로고 사이즈 업 */
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.footer-logo, 
.footer-logo span {
    background: linear-gradient(to bottom, #FFF5C3 0%, #D4AF37 45%, #AA8A2E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.7));

    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    
    font-weight: 900;
    display: inline-block;
}
.footer-slogan {
    color: #ffffff; /* 완전한 화이트로 변경하여 가독성 확보 */
    font-size: 18px; /* 크기를 기존보다 키움 */
    font-weight: 500;
    letter-spacing: -0.2px;
    margin-top: 12px;
    opacity: 0.9;   /* 너무 쨍하면 살짝 조절 가능 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 배경과 분리 */
}

/* 2. 메인 정보 (가장 중요한 부분) */
.footer-main {
    margin-top: 30px;
}

.info-item {
    margin-bottom: 12px; /* 항목 간 간격 확보 */
}

/* 항목 제목과 내용을 미세하게 구분 */
.info-item span {
    color: #bbbbbb; /* 기존보다 밝은 회색으로 변경 */
    margin-right: 20px;
    font-weight: 400;
}

/* 3. 이메일 (클릭 요소 강조) */
.contact-item {
    margin: 15px 0;
}

.contact-label {
    display: inline-block;
    color: #666;
    font-size: 13px;
    margin-bottom: 4px;
}

.contact-link {
    display: block;
    color: #ffffff; /* 이메일 주소는 화이트로 강조 */
    text-decoration: none;
    font-weight: 500;
    font-size: 16px; /* 크기를 살짝 키움 */
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--light-gold) !important;
}

/* 4. 카피라이트 */
.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #222;
}

.copyright {
    color: #444; /* 저작권 문구는 가장 눈에 덜 띄게 조절 */
    font-size: 12px;
}

.service-tech .service-badge {
    background: var(--gold-gradient) !important;
    color: #000 !important; /* 골드 배경엔 검은 글씨가 잘 보입니다 */
}

.service-tech .service-title span {
    color: var(--point-gold) !important;
}
.footer-info .info-item span {
    color: #f0f0f0; /* 회색이 아닌 거의 화이트에 가까운 연회색 */
    font-size: 14.5px;
    line-height: 1.8;
}

.footer-info .info-item b, 
.footer-info .info-item strong {
    color: #F1D279; /* 강조 데이터(이메일, 번호 등)는 연한 골드로 고정 */
}
/* 1. 로고 링크의 모든 테두리 및 외곽선 제거 */
.logo-link, 
.logo-link:focus, 
.logo-link:active, 
.logo-link:hover {
    outline: none !important;      /* 포커스 시 생기는 점선 제거 */
    border: none !important;       /* 혹시 모를 테두리 제거 */
    text-decoration: none !important; /* 밑줄 제거 */
    box-shadow: none !important;   /* 그림자로 인한 테두리 효과 제거 */
}

/* 2. 하얀 테두리가 생길 수 있는 이미지 요소 보정 */
.logo-link img, 
.header-logo img {
    border: 0 !important;
}

/* 3. 혹시 모를 버튼 형태의 테두리 초기화 */
button, input, a {
    -webkit-tap-highlight-color: transparent; /* 모바일 터치 시 하얀 박스 제거 */
}
.footer-right {
    display: flex;
    gap: 20px;
}

.contact-card {
    background: #1a1a1a; /* 이미지와 유사한 짙은 회색 배경 */
    padding: 24px;
    border-radius: 12px;
    width: 300px; /* 가로 크기 적정 조절 */
    border: 1px solid #222;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.contact-card:hover {
    border-color: #D4AF37; /* 호버 시 골드 테두리 */
    transform: translateY(-5px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.card-header h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.arrow-icon {
    color: #fff;
    font-style: normal;
    font-size: 18px;
    opacity: 0.7;
}

.card-email, .card-sub {
    color: #888;
    font-size: 14px;
    margin-bottom: 24px; /* 버튼과 간격 확보 */
}

.card-link.gold-text {
    color: #F1D279 !important; /* 골드 컬러 강조 */
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    margin-top: auto; /* 버튼을 항상 하단에 고정 */
}
/* 1. 푸터의 메인 컨테이너를 가로 정렬로 변경 */
.footer-main {
    display: flex !important;
    flex-direction: row !important; /* 강제로 가로 배치 */
    justify-content: space-between; /* 좌우 끝으로 밀착 */
    align-items: flex-start;
    gap: 40px; /* 왼쪽 정보와 오른쪽 카드 사이 간격 */
    width: 100%;
}

/* 2. 왼쪽 정보 영역 (공간 확보) */
.footer-info {
    flex: 1; /* 남은 공간을 차지하도록 설정 */
    min-width: 300px;
}

/* 3. 오른쪽 카드 영역 (카드 2개를 가로로 배치) */
.footer-right {
    display: flex !important;
    flex-direction: row !important; /* 카드끼리도 가로 배치 */
    gap: 15px; /* 카드와 카드 사이 간격 */
    flex-shrink: 0; /* 크기가 줄어들지 않게 고정 */
}

/* 4. 카드 개별 사이즈 조정 (옆으로 나란히 놓이게) */
.contact-card {
    width: 260px !important; /* 전체 폭에 맞춰 조금 줄임 */
    background: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
}

/* [중요] 모바일에서는 다시 아래로 내려가야 합니다 */
@media (max-width: 1024px) {
    .footer-main {
        flex-direction: column !important; /* 화면이 좁아지면 세로로 */
    }
    .footer-right {
        flex-direction: column !important;
        width: 100%;
    }
    .contact-card {
        width: 100% !important;
    }
}
.contact-card {
    position: relative; /* 상대 위치 지정 */
    z-index: 1;
    cursor: default;
}

.card-link.gold-text {
    position: relative;
    z-index: 10; /* 버튼이 가장 위에 오도록 설정 */
    cursor: pointer !important; /* 마우스 커서가 손가락 모양으로 나오게 함 */
    display: inline-block; /* 클릭 영역 확보 */
    color: #F1D279 !important;
}

/* 호버 시 밑줄 효과를 주어 클릭 가능함을 시각적으로 보여줌 */
.card-link.gold-text:hover {
    text-decoration: underline !important;
    color: #FFF5C3 !important;
}
/* =========================================================
   최종 레이아웃 정렬 보정 (Hero & Footer)
   ========================================================= */

/* 1. Hero 섹션 너비 정렬 */
.hero {
    max-width: 1200px;  /* 서비스 섹션과 동일한 기준선 */
    margin: 80px auto 0; /* 중앙 정렬 (상단 80px은 헤더 여백) */
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. 푸터 전체 배경은 꽉 채우되, 내부 컨텐츠만 1200px로 모음 */
.footer {
    width: 100%;
}

/* 푸터 내부의 실제 내용물이 들어가는 컨테이너 (없다면 추가/수정) */
.footer-top, .footer-main, .footer-bottom {
    max-width: 1200px;  /* 서비스 섹션과 동일한 기준선 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 3. 모바일에서 짤리는 현상 방지 (min-width 리셋) */
@media (max-width: 768px) {
    header .container.nav,
    .service-layout,
    .hero,
    .footer-top,
    .footer-main,
    .footer-bottom {
        min-width: 0 !important; /* 1200px 고정 해제 */
        width: 100% !important;
        grid-template-columns: 1fr !important; /* 서비스 그리드 해제 */
        gap: 40px !important;
    }
    
    .service-copy, .service-proof {
        width: 100% !important; /* 좌우 520px 고정 해제 */
    }
}
/* =========================================================
   모바일 전용: 서비스 섹션 세로 정렬 (HTML 수정 불필요)
   ========================================================= */
@media (max-width: 1024px) {
    /* 1. 그리드 레이아웃을 해제하고 세로로 쌓기 */
    .service-layout, 
    #service-01 .service-layout, 
    .service-layout.reverse {
        display: flex !important;
        flex-direction: column !important; /* 위아래 정렬 */
        grid-template-columns: 1fr !important; /* 그리드 무력화 */
        padding: 60px 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        direction: ltr !important; /* 반전(reverse) 섹션도 원래대로 */
    }

    /* 2. 고정되어 있던 520px 너비를 100%로 해제 */
    .service-copy, 
    .service-proof {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 40px 0 !important; /* 요소 사이 간격 */
    }

    /* 3. 서비스 01, 02, 03의 리포트 이미지/카드를 중앙 정렬 */
    .service-proof {
        justify-self: center !important;
        display: flex;
        justify-content: center;
    }

    /* 4. 텍스트가 너무 길어 삐져나가는 것 방지 */
    .service-title {
        font-size: clamp(28px, 8vw, 36px) !important; /* 화면에 맞춰 글자 크기 축소 */
        word-break: keep-all !important;
    }
}
/* =========================================================
   모바일 최적화: 좌우 꽉 채우기 & 헤더 잘림 방지
   ========================================================= */
@media (max-width: 768px) {
    /* [문제 1 해결] 화면 축소가 안 되고 좁아 보이는 현상 방지 */
    html, body {
        width: 100% !important;
        overflow-x: hidden !important; /* 가로 스크롤(박살) 방지 */
        font-size: 14px; /* 전체적인 글자 크기 살짝 조정 */
    }

    /* [문제 2 해결] 헤더가 오른쪽으로 짤리는 현상 방지 */
    header .container.nav {
        height: auto !important; /* 고정 높이 100px 해제 */
        flex-direction: column !important; /* 로고와 메뉴를 위아래로 */
        padding: 20px !important;
        gap: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 네비게이션 메뉴가 한 줄에 다 안 들어가면 아래로 흐르게 함 */
    nav ul {
        flex-wrap: wrap !important; /* 메뉴가 많으면 다음 줄로 넘김 */
        justify-content: center !important;
        gap: 10px 15px !important;
    }

    nav a {
        font-size: 15px !important; /* 메뉴 글자 크기 최적화 */
    }

    /* 모든 컨테이너의 1200px 제한 해제 */
    .container, .service-layout, #service-01 .service-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* 범인: 1200px 고정값 리셋 */
        padding: 40px 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* 서비스 텍스트와 이미지 영역 너비 100% 확장 */
    .service-copy, .service-proof, .service-layout.reverse > * {
        width: 100% !important;
        max-width: 100% !important;
        direction: ltr !important; /* 반전 레이아웃 해제 */
    }

    /* 메인 타이틀 크기 조정 (안 예쁘게 좁아지는 것 방지) */
    .service-box .service-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        word-break: keep-all !important; /* 단어 단위 줄바꿈 */
    }
}
/* =========================================================
   Main Buttons (Primary & Secondary 동기화)
   ========================================================= */

/* 1. 기본 크기와 스타일 통일 */
.btn-primary, .btn-secondary { 
    display: inline-flex;       /* 내부 정렬을 위해 flex 사용 */
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* 크기 고정: 두 버튼의 가로/세로를 똑같이 맞춤 */
    width: 180px;               
    height: 70px;               
    
    padding: 0 !important;      /* 안쪽 여백 초기화 */
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    transition: all 0.3s ease;  /* 변화 속도 통일 */
    cursor: pointer;
    text-decoration: none;
}

/* 2. 각각의 배경색 설정 */
.btn-primary {
    background-color: #4a80ff !important; 
    color: #ffffff !important;
    border: none;
}

.btn-secondary {
    background-color: #4a80ff !important; /* 세컨더리는 보통 조금 더 어두운 톤 */
    color: #ffffff !important;
    border: 1px solid #444;
}

/* 3. 마우스 올렸을 때(Hover) 효과 동기화 */
.btn-primary:hover, .btn-secondary:hover { 
    background: #00ecff !important; /* 네온 블루 계열로 변경 */
    color: #000000 !important;      /* 글자색은 검정으로 */
    transform: translateY(-5px);    /* 위로 살짝 뜨는 모션 */
    box-shadow: 0 10px 20px rgba(0, 236, 255, 0.3); /* 은은한 빛 효과 */
}
.nav-contact, 
.nav-contact:link, 
.nav-contact:visited { 
    background: var(--accent) !important; 
    color: #ffffff !important;           /* 어떤 상태에서도 글자색은 화이트 */
    padding: 12px 24px !important; 
    border-radius: 50px; 
    font-weight: 800 !important;

}
.nav-contact:hover {
    background: #00ecff !important;      /* 버튼들과 동일한 네온 블루로 변경 */
    color: #000000 !important;           /* 호버 시에만 글자색 검정 */
    transform: translateY(-2px);
    transition: all 0.3s ease;
}