/* /static/css/vpn.css */

.feature-icon-img {
    display: block; /* 이미지를 블록 레벨 요소로 만들어 너비를 차지하게 함 */
    margin-left: auto; /* 왼쪽 마진을 자동으로 설정 */
    margin-right: auto; /* 오른쪽 마진을 자동으로 설정하여 가운데 정렬 */
    max-width: 100%; /* 이미지가 부모 요소보다 커지지 않도록 최대 너비 설정 */
    height: auto; /* 비율을 유지하며 높이 자동 조정 */
}


/* vpn-doverview 섹션 내부의 이미지 컨테이너 */
#vpn-doverview .vpn-image-container {
    /* text-align: center; 는 이미 .text-center 클래스에 의해 적용됨 */
    margin-top: 2rem; /* 이미지와 위 텍스트 간의 간격 (필요에 따라 조정) */
}

/* vpn-image-container 내부의 이미지가 block 요소일 경우 margin으로 중앙 정렬 */
#vpn-doverview .vpn-image-container img {
    display: block; /* 이미지를 블록 요소로 만듦 */
    margin-left: auto; /* 왼쪽 마진을 자동으로 설정 */
    margin-right: auto; /* 오른쪽 마진을 자동으로 설정 */
    /* max-width: 100%; height: auto; 는 이미 인라인 스타일 또는 전역 스타일에 있을 수 있음 */
}

/* /static/css/vpn.css */

/* VPN 페이지 전용 스타일 */

/* VPN 소개 섹션 (vpn-intro) 이미지 상단 간격 조정 등 */
#vpn-intro .container > div > img { /* VPN 서비스 구성도 이미지 */
    margin-top: 2rem; /* 이미지와 위 텍스트 간의 간격 */
}

/* VPN 서비스 특징 섹션 (vpn-features) */
#vpn-features .title-decorated {
    /* 이 섹션의 제목 스타일은 style.css의 .title-decorated를 따르거나, 필요시 여기서 덮어씁니다. */
    /* 예: margin-bottom: 3rem; */
}

.vpn-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 그리드 */
    gap: 2.5rem 2rem; /* 행 간격, 열 간격 */
    margin-top: 2.5rem; /* 제목과의 간격 */
}

.vpn-feature-item {
    display: flex;
    align-items: flex-start; /* 아이콘과 내용을 상단 기준으로 정렬 */
    gap: 1.5rem; /* 아이콘과 내용 사이 간격 */
}

.vpn-feature-icon {
    flex-shrink: 0; /* 아이콘 크기가 줄어들지 않도록 */
    width: 60px; /* 아이콘 이미지의 원하는 크기 (조정 가능) */
    /* height: 60px; /* 필요시 높이도 지정 */
}

.vpn-feature-icon img {
    width: 100%;
    height: auto;
}

.vpn-feature-content h4 {
    font-size: 1.125rem; /* 특징 제목 크기 (18px) */
    font-weight: bold;
    color: var(--dark-text-color); /* style.css의 변수 사용 */
    margin-bottom: 0.75rem;
    margin-top: 0; /* 아이콘과 정렬을 위해 상단 마진 제거 */
}

.vpn-feature-content ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.vpn-feature-content ul li {
    font-size: 0.9rem;
    color: var(--light-text-color); /* style.css의 변수 사용 */
    line-height: 1.7;
    margin-bottom: 0.4rem;
    padding-left: 1.2em; /* 글머리 기호 공간 */
    position: relative;
}

.vpn-feature-content ul li::before {
    content: '■'; /* 네모 글머리 기호 */
    color: var(--primary-color); /* style.css의 변수 사용 */
    position: absolute;
    left: 0;
    font-size: 0.7em; /* 글머리 기호 크기 */
    top: 0.3em; /* 글머리 기호 수직 위치 조정 (line-height에 따라 다를 수 있음) */
}

/* 반응형: 모바일에서 1열로 변경 */
@media (max-width: 768px) {
    .vpn-features-grid {
        grid-template-columns: 1fr; /* 1열 그리드 */
        gap: 2rem 0; /* 모바일에서 상하 간격만 적용 */
    }

    .vpn-feature-item {
        gap: 1rem; /* 모바일에서 아이콘과 내용 사이 간격 줄임 */
    }

    .vpn-feature-icon {
        width: 50px; /* 모바일에서 아이콘 크기 약간 줄임 */
    }

    .vpn-feature-content h4 {
        font-size: 1.05rem;
    }

    .vpn-feature-content ul li {
        font-size: 0.85rem;
    }
}


/* /static/css/vpn.css */

/* ... 이전 VPN 특징 관련 CSS ... */

/* VPN의 필요성 섹션 (vpn-necessity) */
#vpn-necessity {
    /* 섹션 자체에 배경색이 필요하다면 여기에 추가 */
}

#vpn-necessity .title-decorated {
    /* 필요시 이 섹션의 제목에만 특정 스타일 추가 */
    margin-bottom: 3rem; /* 스크린샷과 유사한 간격 */
}

.vpn-necessity-content {
    position: relative; /* 자식 요소의 position: absolute 기준점 */
    width: 100%;
    max-width: 900px; /* 전체 콘텐츠 최대 너비 (조정 가능) */
    margin: 0 auto; /* 중앙 정렬 */
    min-height: 300px; /* 최소 높이 (배경 및 내용 표시용) */
    padding: 2rem 0; /* 상하 패딩 */
}

.vpn-necessity-bg {
    position: absolute;
    top: 5%;
    left: -13%; /* 스크린샷에서는 왼쪽에 아이콘과 원형 그래픽이 있으므로 left: 0 */
    width: 100%; /* 배경 이미지 영역 너비 (조정 가능) */
    height: 100%;
    background-image: url('/static/image/vpn/network_bg.jpg'); /* 여기에 업로드한 배경이미지 경로 */
    background-repeat: no-repeat;
    background-position: left; /* 왼쪽 중앙 정렬 */
    background-size: contain; /* 이미지가 잘리지 않고 다 보이도록 */
    opacity: 0.8; /* 스크린샷에서 약간 투명해 보임 (조정 가능) */
    z-index: 1;
}

.vpn-necessity-list {
    position: relative; /* 배경 위에 오도록 */
    z-index: 2;
    margin-left: 15%; /* 배경 이미지 영역을 피해서 오른쪽으로 이동 (조정 필요) */
    padding-top: 20px; /* 스크린샷 상단 여백과 유사하게 */
}

.necessity-item {
    display: flex;
    align-items: baseline; /* 숫자와 텍스트의 첫 번째 줄 기준 정렬 */
    margin-bottom: 0.5rem; /* 항목 간 간격 */
    padding-left: 10px; /* 왼쪽 점선과의 간격 */
                                               /* var(--border-color) 또는 직접 색상 지정 */
}

.necessity-item:first-child {
    border-left: none; /* 첫 번째 항목은 왼쪽 선 없음 (또는 다르게 처리) */
    /* 또는 모든 항목에 선을 두고, 점으로 연결하는 방식으로 변경 가능 */
    /* 스크린샷에서는 각 항목 시작점에 파란 점이 있고, 선이 이어짐 */
    /* 이 부분은 디테일하게 구현하려면 HTML/CSS 구조 변경 필요 */
    /* 현재는 간단하게 왼쪽 점선으로 표현 */
}


.item-number {
    font-size: 1.5rem; /* 숫자 크기 */
    font-weight: 300; /* 스크린샷의 얇은 폰트 */
    color: var(--primary-color); /* 숫자의 파란색 */
    margin-right: 1.5rem; /* 숫자와 텍스트 사이 간격 */
    line-height: 1;
    min-width: 50px; /* 숫자 영역 너비 고정 */
}

.item-text {
    font-size: 1rem;
    color: var(--dark-text-color);
    line-height: 1.6;
    border-bottom: 1px solid var(--border-color); /* 텍스트 아래 구분선 */
    padding-bottom: 1.5rem; /* 구분선과의 간격 */
    flex-grow: 1;
}

.necessity-item:last-child .item-text {
    border-bottom: none; /* 마지막 항목은 하단 선 없음 */
}


.vpn-solution-cta {
    display: block; /* 블록 레벨 요소로 변경 */
    width: fit-content; /* 내용물에 맞게 너비 설정 (선택 사항, 버튼처럼 보이게 하려면) */
    /* 또는 max-width: 300px; 등으로 최대 너비 지정 가능 */
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 0.8rem 2rem;
    border-radius: 25px;
    font-weight: 500;
    font-size: 1.1rem;
    text-align: center; /* 내부 텍스트 중앙 정렬 (필수 아님, 이미 중앙일 경우) */
    margin-top: 0rem; /* 위쪽 여백 */
    margin-bottom: 0; /* 아래쪽 여백 (필요에 따라 조정) */
    margin-left: auto; /* 왼쪽 마진 자동 */
    margin-right: auto; /* 오른쪽 마진 자동 */
    /* float: right; -> 제거 또는 주석 처리 */
    position: relative; /* z-index를 사용했었으므로 유지하거나, 필요 없다면 제거 */
    z-index: 2; /* z-index를 사용했었으므로 유지하거나, 필요 없다면 제거 */
    /* margin-right: 5%; -> 제거 또는 주석 처리 */
}


/* 반응형 스타일 */
@media (max-width: 992px) {
    .vpn-necessity-bg {
        width: 50%;
    }
    .vpn-necessity-list {
        margin-left: 45%;
    }
}

@media (max-width: 768px) {
    .vpn-necessity-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: auto;
    }
    .vpn-necessity-bg {
        position: static;
        width: 80%;
        max-width: 300px;
        height: 200px;
        margin-bottom: 2rem;
        opacity: 1;
    }
    .vpn-necessity-list {
        margin-left: 0;
        width: 100%;
        padding-top: 0;
    }
    .necessity-item {
        padding-left: 0;
        border-left: none;
        /* 모바일에서는 baseline 정렬이 다르게 보일 수 있으므로, flex-start로 유지하거나 확인 필요 */
        align-items: flex-start;
    }
    .item-number {
        font-size: 2rem;
        margin-right: 1rem;
    }
    .item-text {
        font-size: 0.9rem;
    }
    .vpn-solution-cta {
        float: none;
        display: block;
        margin: 2rem auto;
        text-align: center;
    }
    .vpn-solution-cta {
        /* float: none; /* 이미 display:block으로 변경되므로 float은 의미 없음 */
        /* display: block; /* 이미 위에서 설정 */
        margin: 2rem auto; /* 상하 2rem, 좌우 자동 (중앙 정렬) */
        width: auto; /* 모바일에서는 내용에 맞게 또는 90% 등 유동적으로 */
        max-width: 90%; /* 화면 너비의 90%를 넘지 않도록 */
        padding: 0.8rem 1.5rem; /* 모바일에서 패딩 약간 줄임 */
    }

}