@charset "utf-8";
/* ==========================================================================
   BMTECH — 조직도 (content/organization.php)
   --------------------------------------------------------------------------
   디자인뱅크 archive 이식:
     03_about/org-chart/_code/a1_nsv_org-chart_tree-interactive
   구조·수치는 archive style.css 그대로. 색·폰트만 --bmt-* 토큰으로 리컬러.

   archive 대비 의도된 차이 2가지뿐:
     1. 직속 라인이 1개(품질경영)가 아니라 2개(안전관리·품질관리)라
        가로 연결선 폭을 300px 고정 → calc(40% + 12px)
        (= 2·3·4열 중심 간 거리. 1080 이하는 gap 15px라 calc(40% + 6px))
     2. 담당자 데이터가 없어 클릭 모달은 미이식 — 버튼 대신 정적 span.
        cursor·hover·모달 CSS 만 제외. 데이터가 오면 archive 의
        script.js + 모달 블록을 그대로 이식하면 된다.
   ========================================================================== */

/* --- Chart Structure --- */
.wd-org__chart {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 200px;
}

/* CEO → 부서 그리드 세로 중심선 */
.wd-org__chart::before {
  content: "";
  position: absolute;
  display: block;
  top: 150px;
  left: 50%;
  width: 1px;
  height: 200px;
  background-color: var(--bmt-line);
  z-index: 1;
}

/* 직속 조직을 잇는 가로선 (2열 중심 ↔ 4열 중심) */
.wd-org__chart::after {
  content: "";
  position: absolute;
  display: block;
  top: 236px;
  left: 50%;
  width: calc(40% + 12px);
  height: 1px;
  background-color: var(--bmt-line);
  transform: translateX(-50%);
  z-index: 1;
}

/* --- CEO Circle --- */
.wd-org__ceo {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
}

.wd-org__ceo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  color: var(--bmt-inverse);
  font-size: 20px;
  font-weight: 600;
  font-family: var(--bmt-font);
  background: linear-gradient(90deg, var(--bmt-accent-deep) 0%, var(--bmt-accent-mid) 100%);
  border: none;
  border-radius: 50%;
}

/* --- Connector Dot --- */
.wd-org__connector-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  background-color: var(--bmt-surface);
  border-radius: 50%;
  border: 2px solid var(--bmt-accent);
  z-index: 3;
}

.wd-org__connector-dot--center {
  top: 233px;
  left: calc(50% - 3px);
}

/* --- Direct (안전관리·품질관리 row) --- */
.wd-org__direct {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  padding-bottom: 100px;
}

.wd-org__direct-item {
  position: relative;
  z-index: 2;
}

.wd-org__dept-btn--sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 75px;
  color: var(--bmt-inverse);
  background-color: var(--bmt-accent-mid);
  font-size: 18px;
  font-weight: 400;
  font-family: var(--bmt-font);
  border: none;
}

/* --- Department Grid (5-col) --- */
.wd-org__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

/* --- Team Block --- */
.wd-org__team {
  position: relative;
}

/* 부서 사이 가로 연결선 */
.wd-org__team:not(:last-child)::before {
  content: "";
  position: absolute;
  display: block;
  top: -40px;
  left: 50%;
  width: calc(100% + 30px);
  height: 1px;
  border-top: 1px solid var(--bmt-line);
}

/* 가로선 → 부서명 세로 연결선 */
.wd-org__team::after {
  content: "";
  position: absolute;
  display: block;
  top: -40px;
  left: 50%;
  width: 1px;
  height: 40px;
  background-color: var(--bmt-line);
}

.wd-org__team > .wd-org__connector-dot {
  top: -42px;
  left: calc(50% - 3px);
}

/* --- Team Title (부서명 Bar) --- */
.wd-org__team-title {
  position: relative;
  margin-bottom: 10px;
  z-index: 2;
}

.wd-org__dept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 75px;
  color: var(--bmt-inverse);
  background-color: var(--bmt-accent);
  font-size: 18px;
  font-weight: 400;
  font-family: var(--bmt-font);
  border: none;
}

/* --- Team List (하위 팀) --- */
.wd-org__team-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 리스트 중앙 세로선 */
.wd-org__team-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -20px;
  bottom: 0;
  border-left: 1px solid var(--bmt-line);
}

/* --- Team Link (하위 팀 박스) --- */
.wd-org__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 65px;
  color: var(--bmt-ink);
  background-color: var(--bmt-accent-tint);
  text-align: center;
  border: 1px dashed var(--bmt-accent);
  font-size: 17px;
  font-family: var(--bmt-font);
  z-index: 2;
}

/* ==========================================================================
   Responsive — archive 브레이크포인트 그대로 (1080 / 800 / 640)
   ========================================================================== */

@media (max-width: 1080px) {
  .wd-org__chart::after {
    top: 230px;
    width: calc(40% + 6px);
  }

  .wd-org__connector-dot--center {
    top: 227px;
  }

  .wd-org__grid,
  .wd-org__direct {
    gap: 15px;
  }

  .wd-org__team:not(:last-child)::before {
    width: calc(100% + 15px);
  }

  .wd-org__dept-btn,
  .wd-org__dept-btn--sub {
    font-size: 17px;
    height: 60px;
  }

  .wd-org__link {
    font-size: 15px;
    height: 58px;
  }
}

@media (max-width: 800px) {
  .wd-org__chart {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .wd-org__direct {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 30px;
  }

  .wd-org__direct-spacer {
    display: none;
  }

  .wd-org__grid {
    grid-template-columns: 1fr;
  }

  .wd-org__team {
    padding-bottom: 30px;
  }

  .wd-org__team:not(:last-child)::before,
  .wd-org__team::after,
  .wd-org__team > .wd-org__connector-dot {
    display: none;
  }

  .wd-org__chart::after {
    width: 50px;
  }
}

@media (max-width: 640px) {
  .wd-org__ceo-btn {
    width: 120px;
    height: 120px;
    font-size: 17px;
  }

  .wd-org__chart {
    padding-top: 160px;
  }

  .wd-org__chart::before {
    top: 120px;
    height: 160px;
  }
}