/* body {
    font-family: sans-serif;
    margin: 20px;
} */

.org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.node {
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px 20px;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    position: relative;
}

.ceo {
    background-color: #436ab2;
    border-color: #061c45;
    font-weight: bold;
    margin-bottom: 0px;
    color:white;
}

.subordinates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
    position: relative;
}
.group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 20px;
    position: relative;
    flex: 1 0 auto; /* 추가: 그룹이 균등하게 공간을 차지하도록 */
    max-width: 150px; /* 추가: 그룹 최대 너비 제한 (필요에 따라) */
}

/* 수직 연결선 (부모에서 자식 그룹으로) */
.org-chart > .subordinates::before {
    content: '';
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-0.5px);
    border-left: 1px solid #ccc;
    height: 20px;
}

/* 수직 연결선 (그룹에서 각 자식 노드로) */
.group::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-0.5px);
    border-left: 1px solid #ccc;
    height: 20px;
}

.group > .subordinates {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

/* 자식 그룹 간의 수직 연결선 */
.group > .subordinates > .group::before {
    top: -10px;
    left: 50%;
    transform: translateX(-0.5px);
    border-left: 1px solid #ccc;
    height: 20px;
}

/* 가로선 추가 (수정된 부분) */
.org-chart > .subordinates::after,
.group > .subordinates::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--horizontal-line-width, 0px); /* CSS 변수 사용, 기본값 0 */
  height: 1px;
  background-color: #ccc;
}

.group > .subordinates::after {
    top: -10px; /* 자식 그룹의 수직선 시작점과 동일하게 */
}

/* 반응형 디자인 (화면 너비 768px 이하) */
@media (max-width: 768px) {
    .subordinates {
        flex-direction: column;
        align-items: center;
    }

    .group {
       margin:0px;
        width: 80%;
    }

    /* 작은 화면에서는 중앙에서 연결선 */
    .subordinates > .group::before,
    .group::before,
    .group > .subordinates > .group::before {
        left: 50%;
        transform: translateX(-0.5px);
    }

    .org-chart > .subordinates::after,
    .group > .subordinates::after {
        width:0px;
        height:0px;
    }


    
}