/* organization_custom.css - 조직도 화살표 및 스타일 정렬 커스텀 */

/* 전체적인 텍스트 레이아웃 구조 */
.m-info-flex {
    display: table;
    width: 100%;
}

.m-info-main {
    display: table-cell;
    vertical-align: middle;
}

.m-name-ko {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
}

/* 관리부문/운전부문 헤더 커스텀 */
.group-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    /* 이미지의 민트/비취색 계열 */
    margin-bottom: 25px;

    /* [수정] 아래 밑줄을 제거하고 위줄로 변경 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* 윗줄 추가 (색상/두께는 기존 원본 스타일 기준) */
    padding-bottom: 15px;
    /* 줄과 글자 사이의 상단 여백 확보 */
    padding-top: 0;
    /* 기존 하단 여백 제거 */
}

/* 기사 부문은 이메일이 없으므로 간격 조절 */
.member-list .member-pill {
    position: relative;
}

/* L자형 연결 화살표 커스텀 (데스크톱 전용) */
@media (min-width: 992px) {
    .org-row {
        position: relative;
    }

    /* 화살표 컨테이너 위치 지정 */
    .org-connector-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100px;
        transform: translateX(-50%);
        z-index: 10;
        pointer-events: none;

    }

}

/* wow 애니메이션이 작동할 때, 출발 위치를 더 아래쪽(100px)에서 시작하도록 커스텀 */
.org-connector-wrapper.animated {
    animation-name: fadeInUpCustom !important;
    animation-duration: 2.5s !important;
    /* 등장하는 데 걸리는 시간 */
}

/* 오빠가 요청한 더 아래쪽에서 올라오는 애니메이션 키프레임 */
@keyframes fadeInUpCustom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
        /* 100px 아래에서 투명하게 출발 */
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        /* 원래 목적지 위치 */
    }
}

/* 시작점 회색 원 */
.connector-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #a0aec0;
    border-radius: 50%;
    left: 90px;
    top: 302px;
    /* 운전부문 2번째와 3번째 기사 사이 높이 맞춤 */
    transform: translateX(-50%);
}

/* 수직 선 (아래로 내려가는 선) */
.connector-line-v {
    position: absolute;
    width: 4px;
    background-color: #a0aec0;
    left: 90px;
    margin-left: -20px;
    top: 308px;
    height: 110px;
    /* 사원(박인경) 카드 높이까지 내려옴 */
}

/* 수평 선 (왼쪽으로 꺾이는 선) */
.connector-line-h {
    position: absolute;
    height: 4px;
    background-color: #a0aec0;
    left: 73px;
    top: 308px;
    width: 10px;
    /* 왼쪽 카드 영역까지 도달 */
}

/* 수평 선 (왼쪽으로 꺾이는 선) */
.connector-line-h2 {
    position: absolute;
    height: 4px;
    background-color: #a0aec0;
    left: 6px;
    top: 414px;
    width: 68px;
    /* 왼쪽 카드 영역까지 도달 */
}

/* 왼쪽 화살표 머리 (<- 모양) */
.connector-arrow-head {
    position: absolute;
    left: 4px;
    top: 416px;
    width: 12px;
    /* 화살표 날개 길이 */
    height: 12px;
    /* 화살표 날개 길이 */
    border-top: 3px solid #a0aec0;
    /* 화살표 윗선 두께 */
    border-left: 3px solid #a0aec0;
    /* 화살표 아랫선 두께 */
    transform: translateY(-50%) rotate(-45deg);
    /* 왼쪽을 가리키도록 45도 회전 */
}


}