/* ================================================= */
/* 1. 사이트맵 그리드 레이아웃 (Grid Layout) */
/* ================================================= */
.sitemap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC 기준 3열 배치 (3x2) */
    gap: 30px; /* 카드 사이 간격 */
    margin-bottom: 40px;
}

/* ================================================= */
/* 2. 카드 스타일 (Card Style) */
/* ================================================= */
.sitemap-card {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 12px; /* 모서리 둥글게 */
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    
    /* 카드 높이를 균일하게 맞추기 위한 설정 */
    display: flex;
    flex-direction: column;
}

.sitemap-card:hover {
    transform: translateY(-5px); /* 마우스 올리면 살짝 위로 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border-color: #0078ff;
}

/* 카드 헤더 */
.card-header {
    background-color: #0078ff; /* 기본 테마 컬러 (파랑) */
    color: #fff;
    padding: 18px 25px;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -0.5px;
}

/* (옵션) 섹션 성격별 헤더 색상 변경용 클래스 */
/* 사용법: <div class="card-header type-biz"> */
.card-header.type-biz { background-color: #2c3e50; }       /* 비즈니스: 네이비 */
.card-header.type-community { background-color: #27ae60; } /* 커뮤니티: 그린 */
.card-header.type-resource { background-color: #e67e22; }  /* 자료실: 오렌지 */

.card-header i {
    opacity: 0.7;
    font-size: 1.2rem;
    color: #fff;
}

/* 카드 바디 */
.card-body {
    padding: 25px;
    flex-grow: 1; /* 내용이 적어도 카드가 늘어나도록 설정 */
}

/* ================================================= */
/* 3. 메인 메뉴 리스트 (Depth 1) */
/* ================================================= */
.sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap-list > li {
    margin-bottom: 20px; /* 그룹 간 간격 조금 더 확보 */
}

.sitemap-list > li:last-child {
    margin-bottom: 0;
}

/* [수정됨] 대분류 텍스트 강조 - 가로선 제거 */
.sitemap-list > li > strong {
    display: block;
    margin-bottom: 12px; /* 가로선이 없으므로 여백으로 구분감 확보 */
    font-size: 1.1rem;
    color: #222;         /* 진한 회색으로 가독성 높임 */
    font-weight: 700;
}

/* 1차 메뉴 링크 스타일 (Strong 태그 없이 바로 a태그가 나오는 경우 대비) */
.sitemap-list > li > a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 4px 0;
    font-weight: 600;
    font-size: 1.05rem;
    transition: color 0.2s;
}

.sitemap-list > li > a:hover {
    color: #0078ff;
    text-decoration: underline;
}

/* ================================================= */
/* 4. 서브 메뉴 & 타임라인 (Depth 2) - 완전판 */
/* ================================================= */
.sub-list {
    list-style: none;
    padding: 5px 0 0 0; /* 상단 여백 최소화 */
    margin-top: 5px;
    margin-bottom: 10px;
    position: relative;
}

.sub-list li {
    position: relative;
    padding-left: 25px; /* 점과 텍스트 사이 간격 */
    
    /* [핵심] 선 끊어짐 방지를 위해 margin 대신 padding 사용 */
    margin-bottom: 0;
    padding-bottom: 15px; 
    
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 마지막 아이템은 하단 여백 제거 */
.sub-list li:last-child {
    padding-bottom: 0;
}

/* (1) 세로 연결 선 */
.sub-list li::after {
    content: "";
    position: absolute;
    left: 8px; /* 점의 중심축 */
    top: 0;
    bottom: 0; /* padding 영역까지 선을 꽉 채움 */
    width: 2px;
    background-color: #e0e0e0; /* 은은한 회색 */
    z-index: 0;
}

/* (2) 첫 번째 아이템: 선 시작점 조정 */
.sub-list li:first-child::after {
    top: 10px; /* 텍스트 중앙 높이에서 시작 */
}

/* (3) 마지막 아이템: 선 끝점 조정 */
.sub-list li:last-child::after {
    height: 10px; /* 시작점에서 조금만 내려오고 끊김 */
    bottom: auto;
}

/* (4) 원형 점 디자인 */
.sub-list li::before {
    content: "";
    position: absolute;
    left: 5px; /* (8px - 3px) 선 중심 정렬 */
    top: 8px;  /* 텍스트 라인 높이 맞춤 */
    width: 8px;
    height: 8px;
    background-color: #fff; /* 내부 흰색 */
    border: 2px solid #0078ff; /* 테두리 파란색 */
    border-radius: 50%;
    z-index: 1;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

/* 서브 메뉴 링크 스타일 */
.sub-list li a {
    color: #666;
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s;
}

.sub-list li a:hover {
    color: #0078ff;
    text-decoration: underline;
    font-weight: 500;
}

/* 마우스 호버 시 점 색상 채우기 */
.sub-list li:hover::before {
    background-color: #0078ff;
}

/* ================================================= */
/* 5. 반응형 처리 (Responsive) */
/* ================================================= */

/* 태블릿 (992px 이하): 2열 배치 */
@media (max-width: 992px) {
    .sitemap-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    #container {
        padding-top: 20px;
    }
}

/* 모바일 (600px 이하): 1열 배치 */
@media (max-width: 600px) {
    .sitemap-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .card-header {
        padding: 15px;
        font-size: 1.1rem;
    }
}