@charset "utf-8";
/* CSS Document */
.org-chart {
  width: 100%;
  max-width: 850px;
  margin: 0 auto 1rem;
}
/* =========================================================
   최상위
========================================================= */
.org-title {
  width: 300px;
  height: 58px;
  margin: 0 auto 24px;
  border: 5px solid #1768a3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1768a3;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}
.org-company {
  position: relative;
  width: 290px;
  height: 47px;
  margin: 0 auto;
  background: #176da5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
/* =========================================================
   기관 → 팀 연결
========================================================= */
.org-company::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 35px;
  background: #aaa;
}
/* =========================================================
   팀 영역
========================================================= */
.departments {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-top: 62px;
}
/* 기관에서 내려오는 가로 연결선 */
.departments::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 24%;
  right: 23.6%;
  height: 1px;
  background: #aaa;
}
/* 각 팀 */
.department {
  position: relative;
}
/* 가로선 → 팀 */
.department::before {
  content: '';
  position: absolute;
  top: -27px;
  left: 50%;
  width: 1px;
  height: 82px;
  background: #aaa;
  z-index: -1;
}
/* =========================================================
   팀 제목
========================================================= */
.department-title {
  width: 215px;
  height: 47px;
  margin: 0 auto;
  border-radius: 6px;
  background: #428fbd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}
/* =========================================================
   직원
========================================================= */
.staff {
  width: 215px;
  height: 55px;
  border: 2px solid #b5b5b5;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  text-align: center;
}
.staff .position {
  height: 24px;
  font-size: .86em;
  background: #b5b5b5;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.staff .name {
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
/* =========================================================
   재가노인지원팀
========================================================= */
.home-team .staff-list {
  position: relative;
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
/* 직원 → 팀장 연결 공간 */
.home-team .team-leader {
  position: relative;
  margin-top: 102px;
  display: flex;
  justify-content: center;
}
/* 직원과 팀장 연결선 */
.home-team .team-leader::before {
  content: '';
  position: absolute;
  top: -290px;
  left: 50%;
  width: 1px;
  height: 366px;
  background: #aaa;
  z-index: -1;
}
/* =========================================================
   맞춤돌봄지원팀
========================================================= */
.custom-team .staff-list {
  position: relative;
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 70px;
}
/* 직원 컬럼 */
.staff-column {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
/* 상단 직원 연결선 */
.custom-team .staff-list::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 21%;
  height: 1px;
  width: 237px;
  background: #aaa;
}
/* 가로선 → 직원 */
.custom-team .staff-column::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  width: 1px;
  height: 250px;
  background: #aaa;
  z-index: -1;
}
/* =========================================================
   맞춤돌봄지원팀 팀장
========================================================= */
.custom-team .team-leaders {
  position: relative;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  column-gap: 70px;
  margin-top: 20px;
}
.custom-team .team-leaders .team-leader {
  position: relative;
  display: flex;
  justify-content: center;
}
/* 직원 → 팀장 */
.custom-team .team-leaders .team-leader::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 1px;
  height: 85px;
  background: #aaa;
  z-index: -1;
}
.custom-team .team-leaders .team-leader::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 21%;
  width: 237px;
  height: 1px;
  background: #aaa;
}
/* =========================================================
   팀장 → 과장
========================================================= */
.bottom-management {
  position: relative;
  margin-top: 20px;
  padding-top: 20px;
}
/* 좌우 팀장을 연결하는 선 */
.bottom-management::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24%;
  width: 444px;
  height: 1px;
  background: #aaa;
}
/* 과장 */
.bottom-management .manager {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 팀장 → 과장 수직선 */
.bottom-management .manager::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 1px;
  height: 136px;
  background: #aaa;
  z-index: -1;
}
/* 과장 → 관장 */
.bottom-management .manager .staff + .staff {
  position: relative;
  margin-top: 28px;
}
.bottom-management .manager .staff + .staff::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 50%;
  width: 1px;
  height: 28px;
  background: #aaa;
}
/* =========================================================
   MOBILE
   재가노인지원팀 + 맞춤돌봄지원팀 = 1 COLUMN
========================================================= */
@media (width < 992px) {

  .org-chart {
    width: 100%;
    max-width: 500px;
  }
  /* -----------------------------------------
       최상위
    ----------------------------------------- */
  .org-title {
    width: min(300px, 90%);
    height: 52px;
    border-width: 4px;
    font-size: 20px;
  }
  .org-company {
    width: min(290px, 90%);
    height: 45px;
    font-size: 16px;
  }
  /* -----------------------------------------
       팀을 1 COLUMN으로 변경
    ----------------------------------------- */
  .departments {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding-top: 62px;
  }

  /* -----------------------------------------
       팀 제목
    ----------------------------------------- */
  .department-title {
    width: min(215px, 80%);
    height: 45px;
    font-size: 16px;
  }
  /* -----------------------------------------
       직원 박스
    ----------------------------------------- */
  .staff {width: min(215px, 80vw);}
  .staff-column {gap: 12px;}
  /* -----------------------------------------
       재가노인지원팀
    ----------------------------------------- */
  .home-team .staff-list {
    margin-top: 25px;
    gap: 16px;
  }
  .home-team .team-leader {
    margin-top: 16px;
  }
  /* -----------------------------------------
       맞춤돌봄지원팀
    ----------------------------------------- */
  /*
     * 2개의 직원 컬럼을
     * 모바일에서는 1개 컬럼으로 변경
     */
  .custom-team .staff-list {
    /* display: flex;flex-direction: column;*/
    gap: 14px;
    margin-top: 25px;
  }


  /*
     * 팀장 영역도 1 COLUMN
     */
  .custom-team .team-leaders {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 25px;
  }
  .custom-team .team-leaders .team-leader {
    width: 100%;
  }

  /* -----------------------------------------
       하단 관리자
    ----------------------------------------- */
  .bottom-management {
    margin-top: 40px;
    padding-top: 0;
  }

  .org-chart div::before,
  .org-chart div::after {
    display: none !important;
  }

  .org-title {
    font-size: 18px;
  }
  .org-company {
    font-size: 14px;
  }
  .department-title {
    font-size: 15px;
  }
  .staff {
    width: 90%;
  }
  .staff .position {
    font-size: 12px;
  }
}