/* --- 메일 호스팅 서비스 특징 섹션 --- */
.mail-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2열 그리드 */
    gap: 2.5rem 2rem; /* 아이템 간 상하, 좌우 간격 */
    margin-top: 2.5rem; /* 제목과의 간격 */
}

.mail-feature-item {
    display: flex;
    align-items: flex-start; /* 아이콘과 내용을 위쪽 정렬 */
    gap: 1.5rem; /* 숫자 원과 내용 사이 간격 */
}

.feature-number-circle {
    width: 60px; /* 원 크기 */
    height: 60px; /* 원 크기 */
    border-radius: 50%; /* 원형 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 숫자 크기 */
    font-weight: bold;
    color: var(--white-color);
    flex-shrink: 0; /* 크기 고정 */
}

.feature-number-circle.blue-circle {
    background-color: #3484C9; /* 스크린샷의 파란색 계열 */
}

.feature-number-circle.gray-circle {
    background-color: #AAAAAA; /* 스크린샷의 회색 */
}

.mail-feature-item .feature-content h4 {
    font-size: 1.125rem; /* 특징 제목 크기 (18px) */
    font-weight: bold; /* 스크린샷에 맞춰 굵게 */
    color: var(--dark-text-color);
    margin-top: 5px; /* 원형 숫자와 제목 상단 정렬을 위한 미세 조정 */
    margin-bottom: 0.75rem;
}

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

.mail-feature-item .feature-content ul li {
    font-size: 0.9rem; /* 특징 설명 텍스트 크기 */
    color: var(--light-text-color);
    line-height: 1.7;
    margin-bottom: 0.4rem; /* 항목 간 간격 */
    padding-left: 1.2em; /* 들여쓰기 */
    position: relative;
}

.mail-feature-item .feature-content ul li::before {
    content: '■'; /* 네모 글머리 기호 */
    color: #888888; /* 글머리 기호 색상 (스크린샷 참고, 연한 회색 계열) */
    position: absolute;
    left: 0;
    font-size: 0.4em; /* 글머리 기호 크기 */
    top: 1em; /* 글머리 기호 수직 위치 조정 */
}

/* 반응형: 모바일에서 1열로 변경 */
@media (max-width: 768px) {
    .mail-features-grid {
        grid-template-columns: 1fr; /* 1열 그리드 */
        gap: 2rem 0; /* 모바일에서 상하 간격만 적용 */
    }
    .mail-feature-item {
        gap: 1rem;
    }
    .feature-number-circle {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    .mail-feature-item .feature-content h4 {
        font-size: 1.05rem;
    }
    .mail-feature-item .feature-content ul li {
        font-size: 0.85rem;
    }
}
/* --- 메일 호스팅 이미지 슬라이더 (커버플로우 효과) --- */
.mail-slider-container {
    position: relative;
    width: 100%;
    /* max-width는 슬라이드 하나의 크기에 맞춰 조정, 또는 뷰포트 너비에 따라 유동적으로 */
    /* 예: max-width: 600px; /* 중앙 슬라이드 너비 */
    margin: 3rem auto 0;
    perspective: 1000px; /* 3D 효과를 위한 perspective */
    padding: 0 50px; /* 양 옆에 이전/다음 슬라이드가 보일 공간 확보 (조정 필요) */
    /* border: 1px solid var(--border-color); /* 테두리는 디자인에 따라 선택 */
    min-height: 450px; /* 슬라이더 영역 최소 높이 확보 (버튼 위치 등 고려) */
}

.mail-slider {
    position: relative;
    width: 100%;
    height: 400px; /* 슬라이더 높이 고정 (이미지 비율에 따라 조정) */
    transform-style: preserve-3d;
}

.mail-slide {
    position: absolute; /* 모든 슬라이드를 겹쳐놓고 transform으로 위치 조절 */
    left: 0;
    right: 0;
    margin: auto; /* 중앙 정렬 */
    width: 70%; /* 중앙 슬라이드 기준 너비 (조정 가능, 예: 300px) */
    max-width: 450px; /* 슬라이드 최대 너비 */
    height: 100%; /* 부모(.mail-slider) 높이에 맞춤 */
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0; /* 기본적으로는 안 보이게 처리 (JavaScript가 current-slide로 보이게 함) */
    transform: scale(0.7) translateX(0px) translateZ(-200px); /* 기본 상태 (멀리 작게) */
    filter: blur(3px); /* 기본적으로 흐리게 */
}

.mail-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 또는 cover, 이미지에 맞게 */
    display: block;
    border-radius: 10px;
}

/* 현재 활성화된 (가운데) 슬라이드 */
.mail-slide.current-slide {
    opacity: 1;
    filter: blur(0px);
    transform: scale(1) translateX(0px) translateZ(0px);
    z-index: 3;
}

/* 이전 슬라이드 */
.mail-slide.prev-slide {
    opacity: 0.6;
    filter: blur(2px);
    transform: scale(0.85) translateX(-60%) translateZ(-100px) rotateY(30deg);
    z-index: 2;
}

/* 다음 슬라이드 */
.mail-slide.next-slide {
    opacity: 0.6;
    filter: blur(2px);
    transform: scale(0.85) translateX(60%) translateZ(-100px) rotateY(-30deg);
    z-index: 2;
}

/* 그 외 멀리 있는 슬라이드들 (선택 사항) */
.mail-slide.far-prev-slide {
    opacity: 0.3;
    filter: blur(4px);
    transform: scale(0.7) translateX(-100%) translateZ(-200px) rotateY(45deg);
    z-index: 1;
}

.mail-slide.far-next-slide {
    opacity: 0.3;
    filter: blur(4px);
    transform: scale(0.7) translateX(100%) translateZ(-200px) rotateY(-45deg);
    z-index: 1;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    z-index: 100; /* 다른 슬라이드보다 확실히 위에 오도록 */
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.prev-btn {
    left: 0px; /* 컨테이너 패딩 고려하여 조정 */
}

.next-btn {
    right: 0px; /* 컨테이너 패딩 고려하여 조정 */
}


/* --- 단독구축형 메일 - 서비스 종류 섹션 --- */
#standard-mail-service-types .title-decorated { /* 서비스 종류 제목 스타일은 기존 title-decorated 활용 */
    /* 필요시 이 섹션의 제목에만 특정 스타일 추가 */
}

.standard-service-type-grid {
    display: flex;
    justify-content: space-around; /* 양쪽에 적당한 간격을 두고 배치 */
    align-items: flex-start; /* 상단 정렬 */
    gap: 2rem; /* 아이템 간 간격 */
    margin-top: 2.5rem; /* 제목과의 간격 */
    padding: 0 2rem; /* 내부 좌우 패딩으로 너무 넓게 퍼지지 않도록 */
}

.standard-service-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 내부 요소들 중앙 정렬 */
    text-align: center;
    max-width: 300px; /* 각 아이템의 최대 너비 */
}

.service-type-circle {
    width: 160px; /* 원 크기 */
    height: 160px; /* 원 크기 */
    border-radius: 50%; /* 원형 */
    background-color: var(--primary-color); /* 스크린샷의 파란색 */
    color: var(--white-color);
    display: flex;
    flex-direction: column; /* 내부 텍스트 세로 정렬 */
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 원 안의 텍스트 크기 */
    font-weight: bold;
    line-height: 1.3; /* 줄 간격 */
    margin-bottom: 1.5rem; /* 원과 설명 사이 간격 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.service-type-description {
    font-size: 0.95rem; /* 설명 텍스트 크기 */
    color: var(--light-text-color);
    line-height: 1.7;
    margin-bottom: 0;
}

/* 반응형: 모바일에서 세로로 배치 */
@media (max-width: 768px) {
    .standard-service-type-grid {
        flex-direction: column; /* 세로로 쌓이도록 변경 */
        align-items: center; /* 전체 아이템들을 중앙 정렬 */
        gap: 3rem; /* 모바일에서 아이템 간 간격 */
        padding: 0 1rem;
    }
    .service-type-circle {
        width: 140px;
        height: 140px;
        font-size: 1.3rem;
    }
    .service-type-description {
        font-size: 0.9rem;
    }
}