/* IDC 주요 특징 섹션 스타일 (IDC 소개 페이지 내부) */
#idc-features .section-title {
    margin-bottom: 3rem; 
}

.idc-feature-block {
    display: flex;
    gap: 2rem; 
    align-items: flex-start; 
    margin-bottom: 3rem; 
}

.idc-image-wrapper {
    flex: 0 0 45%; 
    max-width: 45%;
}

.idc-image-wrapper img {
    width: 100%;
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.idc-image-wrapper .image-caption {
    font-size: 0.85rem;
    color: var(--light-text-color);
    margin-top: 0.5rem;
    text-align: left;
}

.idc-description-wrapper {
    flex: 1; 
}

.idc-description-wrapper h3 { 
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.feature-detail-group {
    display: flex;
    gap: 1rem; 
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.detail-icon {
    /* flex: 0 0 40px; */  /* 기존 flex-basis 설정 대신 width/height 사용 */
    /* max-width: 40px; */ /* 기존 max-width 설정 대신 width/height 사용 */

    width: 50px;  /* 원형 배경의 지름 (조절 가능) */
    height: 50px; /* 원형 배경의 지름 (조절 가능) */
    background-color: var(--primary-color); /* 파란색 배경 (원하는 다른 색으로 변경 가능) */
    border-radius: 50%; /* 완벽한 원형으로 만듦 */

    display: flex; /* 내부 아이콘 이미지를 중앙 정렬하기 위해 flex 사용 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */

    flex-shrink: 0; /* 아이콘 컨테이너 크기가 줄어들지 않도록 */
    margin-top: 5px; /* 상단 여백 (기존 스타일 유지 또는 필요시 조절) */
}

.detail-icon img {
    width: 80%;  /* 원형 배경 크기(50px)의 60% = 30px. 아이콘 크기 조절 */
    height: 80%; /* 원형 배경 크기(50px)의 60% = 30px. 아이콘 크기 조절 */
    /* object-fit: contain; */ /* 이미지 비율을 유지하며 컨테이너 안에 맞춤 (이미지가 정사각형이 아닐 경우 유용) */
                               /* 투명 PNG이므로, 특별히 object-fit이 필요 없을 수도 있습니다. */
}


.detail-texts h4 { 
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-text-color);
    margin-bottom: 0.5rem;
}

.detail-texts ul {
    list-style-type: none; 
    padding-left: 0;
}

.detail-texts ul li {
    font-size: 0.95rem;
    color: var(--light-text-color);
    line-height: 1.8;
    padding-left: 1.2em; 
    position: relative;
    margin-bottom: 0.3rem;
}

.detail-texts ul li::before {
    content: '•'; 
    color: var(--primary-color); 
    position: absolute;
    left: 0;
    font-weight: bold;
}

.idc-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 3rem auto; 
    width: 80%; 
}

/* IDC 위치보기 버튼 스타일 */
.btn-location-view {
    background-color: transparent; /* 배경색 투명 */
    border: 1px solid var(--primary-color); /* 파란색 테두리 (RhinoNet 기본 파란색 사용) */
                                        /* 더 밝은 파란색을 원하시면 var(--highlight-text-color) 또는 직접 색상 코드 사용 */
    color: var(--primary-color); /* 파란색 텍스트 (테두리와 동일한 색상) */
    padding: 0.4rem 0.9rem; /* 버튼 내부 여백 (상하 0.4rem, 좌우 0.9rem 정도로 조정) */
    border-radius: 4px;     /* 버튼 모서리 약간 둥글게 */
    font-size: 0.875rem;    /* 폰트 크기 (14px 정도, 테이블 내용과 어울리게 조정) */
    font-weight: 500;       /* 폰트 두께 */
    text-align: center;     /* 텍스트 중앙 정렬 */
    cursor: pointer;        /* 마우스 오버 시 커서 변경 */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; /* 부드러운 호버 효과 */
    white-space: nowrap;    /* 버튼 내용이 한 줄로 표시되도록 */
    line-height: 1.4;       /* 줄 높이 조정으로 텍스트 세로 정렬 개선 (필요시) */
}

.btn-location-view:hover {
    background-color: var(--primary-color); /* 호버 시 배경색을 파란색으로 채움 */
    color: var(--white-color);             /* 호버 시 텍스트 색상을 흰색으로 변경 */
}
/* IDC 위치 정보 테이블 스타일 */
.idctb {
    width: 100%; /* 테이블 전체 너비 */
    border-collapse: collapse; /* 셀 사이의 간격을 없애고 단일 테두리로 표시 */
    margin-top: 2rem; /* 테이블 상단 여백 (기존 .mt30 클래스와 유사) */
    font-size: 0.95rem; /* 테이블 내 기본 폰트 크기 (조절 가능) */
}

.idctb th,
.idctb td {
    padding: 0.3rem 0.75rem; /* 셀 내부 여백 (상하 1rem, 좌우 0.75rem) */
    text-align: left;    /* 기본적으로 텍스트 왼쪽 정렬 */
    vertical-align: middle; /* 추가: 셀 내용 세로 중앙 정렬 */
    border-bottom: 1px solid var(--border-color); /* 수정: 각 행 아래에 구분선 추가 */
}

/* 테이블 헤더가 있다면 (현재 HTML 구조에는 없음) */
/* .idctb th {
    background-color: var(--light-gray-bg);
    font-weight: 700;
    color: var(--dark-text-color);
} */

/* 마지막 행의 하단 구분선 제거 (선택 사항) */
.idctb tr:last-child td {
    border-bottom: none;
}

/* "위치보기" 버튼이 있는 마지막 셀 오른쪽 정렬 */
.idctb td.tr { /* 기존 HTML에서 사용된 클래스 'tr' 활용 */
    text-align: right;
}

/* (선택 사항) 첫 번째 셀(IDC 이름)은 조금 더 강조하고 싶다면 */
.idctb td:first-child {
    font-weight: 500;
    color: var(--dark-text-color);
}



/* 반응형 (모바일): IDC 특징 섹션 */
@media (max-width: 768px) {
    .idc-feature-block {
        flex-direction: column; 
        gap: 1.5rem;
    }

    .idc-image-wrapper {
        flex-basis: auto; 
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .idc-description-wrapper h3 {
        font-size: 1.5rem;
    }

    .detail-texts ul li {
        font-size: 0.9rem;
    }
}



/* colocation 페이지의 features-grid 레이아웃 조정 (필요시) */
/* 예: 스크린샷처럼 첫 줄에 3개, 다음 줄에 2개가 중앙에 오도록 하려면 */
.colocation-features { /* HTML에서 .features-grid에 추가한 클래스 */
    /* display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
    /* 위는 일반적인 반응형 그리드이고, 스크린샷처럼 특정 개수를 맞추려면 아래와 같이 할 수 있습니다. */
    display: flex;
    flex-wrap: wrap; /* 넘어가면 다음 줄로 */
    justify-content: center; /* 아이템들을 중앙 정렬 (특히 마지막 줄 아이템이 적을 때) */
    gap: 2rem; /* 아이템 사이 간격 */
}

.colocation-features .feature-item {
    flex-basis: calc(33.333% - 2rem); /* 3개씩 배치될 때의 기본 너비 (gap 고려) */
    min-width: 250px; /* 최소 너비 */
    /* 좀 더 복잡한 레이아웃 (예: 5개일 때 3-2 배치)은 JS 또는 더 많은 CSS 규칙이 필요할 수 있습니다. */
    /* 간단하게는 flex-basis로 기본 너비를 주고, justify-content로 정렬합니다. */
}

/* 태블릿 화면 등에서 2열로 보이게 하려면 */
@media (max-width: 992px) and (min-width: 769px) {
    .colocation-features .feature-item {
        flex-basis: calc(50% - 1rem); /* 2개씩 배치 (gap 고려하여 계산) */
    }
}

/* 모바일 화면에서는 1열로 (기존 .features-grid의 auto-fit, minmax 설정이 이를 처리할 수 있음) */
/* 또는 명시적으로 */
@media (max-width: 768px) {
    .colocation-features .feature-item {
        flex-basis: 100%; /* 1개씩 전체 너비 */
    }
    .feature-icon-wrapper { /* 모바일에서 아이콘 크기 약간 줄임 (선택 사항) */
        width: 70px;
        height: 70px;
        margin-bottom: 1rem;
    }
    .feature-item h4 {
        font-size: 1rem;
    }
    .feature-item p {
        font-size: 0.85rem;
    }
}



/* --- 코로케이션 페이지 "서비스 종류" 섹션 스타일 --- */
.service-type-block {
    margin-top: 2.5rem; /* "서비스 종류" h3 제목과의 간격 */
    margin-bottom: 3rem; /* 다음 블록과의 간격 */
}

.service-type-title { /* "상면 서비스", "네트워크 회선 서비스" 등 소제목 */
    font-size: 1.3rem; /* h3.title-decorated (1.5rem) 보다 약간 작게 */
    color: var(--dark-text-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.service-type-title::before { /* 소제목 앞 파란 네모 포인트 */
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--primary-color); /* 기본 파란색 사용 */
    margin-right: 10px;
    flex-shrink: 0;
}

/* 스펙 테이블 스타일 (.specs-table) */
.specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem; /* 테이블과 아래 설명 리스트 사이 간격 */
    font-size: 0.9rem;
    border: 1px solid var(--border-color); /* 테이블 전체 테두리 */
}

.specs-table th,
.specs-table td {
    border: 1px solid var(--border-color); /* 셀 테두리 */
    padding: 0.75rem 1rem; /* 셀 안쪽 여백 */
    text-align: center; /* 기본적으로 중앙 정렬 */
    vertical-align: middle;
    line-height: 1.5;
}

.specs-table th { /* 테이블 헤더 */
    background-color: var(--primary-color); /* 스크린샷의 파란색 배경 */
    color: var(--white-color);
    font-weight: 700;
}

/* 테이블 데이터 셀 특정 정렬 (필요시) */
.specs-table td:first-child { /* 종류 (RACK) */
    text-align: center;
    font-weight: 500;
}
.specs-table td:last-child { /* 비고 */
    text-align: center;
}


/* 서비스 상세 설명 리스트 스타일 (.service-details-list) */
.service-details-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1rem;
}

.service-details-list li {
    font-size: 0.95rem;
    color: var(--light-text-color);
    line-height: 1.8;
    padding-left: 1.5em; /* 들여쓰기 (마커 공간) */
    position: relative;
    margin-bottom: 0.5rem;
}

.service-details-list li::before { /* 리스트 항목 앞 네모 마커 */
    content: '■'; /* 작은 네모 (스크린샷의 마커와 유사) */
    color: var(--primary-color); /* 마커 색상 */
    position: absolute;
    left: 0.2em; /* 위치 조정 */
    top: 0.05em;  /* 위치 조정 */
    font-size: 0.7em; /* 마커 크기 */
}


/* 반응형 (모바일): 코로케이션 서비스 종류 테이블 */
@media (max-width: 768px) {
    .service-type-title {
        font-size: 1.15rem;
    }
    .specs-table {
        font-size: 0.85rem;
        display: block; /* 모바일에서 테이블 스크롤 가능하도록 */
        overflow-x: auto; /* 가로 스크롤 생성 */
        white-space: nowrap; /* 내용이 줄바꿈되지 않도록 */
    }
    .specs-table th,
    .specs-table td {
        padding: 0.6rem 0.5rem; /* 모바일에서 셀 패딩 약간 줄임 */
        white-space: normal; /* 셀 내부에서는 내용 줄바꿈 허용 (선택) */
    }
    .service-details-list li {
        font-size: 0.9rem;
        padding-left: 1.2em;
    }
    .service-details-list li::before {
        left: 0;
    }
}


/* 서버호스팅 페이지 - 다이어그램 스타일 */
.server-diagram-wrapper.tc { /* tc 클래스가 text-align: center; 라면 유지 */
    text-align: center; /* 전체 다이어그램 영역 중앙 정렬 */
}
.server-diagram-wrapper.mt30 { /* mt30 클래스가 margin-top: 30px; 라면 유지 */
    margin-top: 30px;
}

.diagram-image-container.svhosting { /* svhosting 클래스에 대한 스타일 */
    width: 100%; /* 또는 다이어그램 이미지의 실제 너비에 맞춘 max-width */
    max-width: 500px; /* 스크린샷 이미지의 대략적인 최대 너비 (조절 가능) */
    height: 170px; /* 다이어그램 이미지의 높이 (조절 가능) */
    background-image: url('/static/image/serverhosting01.jpg'); /* 다이어그램 이미지 경로 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* 이미지가 잘리지 않고 다 보이도록, 또는 cover */
    margin: 0 auto; /* tc 클래스가 없을 경우 중앙 정렬 */
    position: relative; /* 내부 텍스트 위치 조정을 위한 기준점 */
}

.diagram-image-container.svhosting2 { /* svhosting 클래스에 대한 스타일 */
    width: 100%; /* 또는 다이어그램 이미지의 실제 너비에 맞춘 max-width */
    max-width: 500px; /* 스크린샷 이미지의 대략적인 최대 너비 (조절 가능) */
    height: 170px; /* 다이어그램 이미지의 높이 (조절 가능) */
    background-image: url('/static/image/serverhosting02.jpg'); /* 다이어그램 이미지 경로 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; /* 이미지가 잘리지 않고 다 보이도록, 또는 cover */
    margin: 0 auto; /* tc 클래스가 없을 경우 중앙 정렬 */
    position: relative; /* 내부 텍스트 위치 조정을 위한 기준점 */
}

/* "서버" 텍스트 스타일 및 위치 조정 */
.diagram-text-server {
    position: absolute; /* 부모(.diagram-image-container) 기준으로 위치 설정 */
    /* 아래 top, left, transform 값은 실제 다이어그램 이미지와 텍스트 위치에 맞춰 정밀 조정 필요 */
    top: 82%;             /* 예시: 이미지 하단에서 약간 위 (조절 필요) */
    left: 16%;            /* 예시: 이미지 왼쪽에서 안쪽으로 (조절 필요) */
    transform: translate(-50%, -50%); /* 텍스트 자체의 중앙을 top, left 지점에 맞춤 */
    text-align: center;
    font-size: 0.9rem;    /* 스크린샷 참고하여 크기 조절 */
    color: var(--dark-text-color);
    /* width: 100px; */ /* 필요시 텍스트 영역 너비 지정 */
}

/* "하나의 사용자가 서버 단독 사용" 텍스트 스타일 및 위치 조정 */
.diagram-text-user {
    position: absolute; /* 부모(.diagram-image-container) 기준으로 위치 설정 */
    /* 아래 top, left, transform 값은 실제 다이어그램 이미지와 텍스트 위치에 맞춰 정밀 조정 필요 */
    top: 82%;             /* 예시: 이미지 하단에서 약간 위 (조절 필요) */
    left: 64%;            /* 예시: 이미지 오른쪽에서 안쪽으로 (조절 필요) */
    transform: translate(50%, -50%); /* 텍스트 자체의 중앙을 top, left 지점에 맞춤 */
    text-align: center;
    font-size: 0.9rem;    /* 스크린샷 참고하여 크기 조절 */
    color: var(--dark-text-color); /* 스크린샷에서는 회색 계열로 보임, var(--light-text-color) 사용 가능 */
    /* width: 150px; */ /* 필요시 텍스트 영역 너비 지정 (줄바꿈 제어) */
}

.diagram-text-server p,
.diagram-text-user p {
    margin-bottom: 0;
    line-height: 1.4;
}