@charset "utf-8";
/* organ-119.css — 소방본부 조직도(NE050801) 오버라이드
   theme/119/contents.css 뒤에 링크할 것.

/* 잘리는 대신 가로 스크롤 */
.ic26-organ-scroll {
  overflow-x: auto;
  margin-bottom: 40px;
}

.ic26-organ-scroll:focus-visible {
  outline: 2px solid #0070bd;
  outline-offset: 2px;
}

/* 1줄 5칸 / 2줄 4칸. 좌우 2.5% 는 브래킷 자리로 비운다
   2.5% + 18.2%×5 + 1%×4 = 97.5% */
.ic26-organ-hq .organ-cols {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0 1%;
}

.ic26-organ-hq .organ-cols > li {
  flex: 0 0 18.2%;
  width: 18.2%;
  margin: 0;
  text-align: center;
}

.ic26-organ-hq .organ-cols > li:first-child {
  margin-left: 2.5%;
}

/* ⚠️ 80px 과 .cols5::after 의 bottom:-30px 은 한 쌍이다 (80 − 가로바 50 = 30) */
.ic26-organ-hq .cols4 {
  margin-top: 80px;
}

/* 원본은 칸마다 4칸 기준으로 선을 잇는다. 줄에 가로바 하나로 바꾼다 */
.ic26-organ-hq .organ-cols .organ-depth02::after {
  display: none !important;
}

/* 칸 중앙 = 2.5% + (n−1)×19.2% + 9.1% → 3칸째가 정확히 50% */
.ic26-organ-hq .organ-cols::before {
  content: '';
  position: absolute;
  top: -50px;
  height: 1px;
  background: #ddd;
}

/* 왼쪽은 박스 바깥(세로선이 꺾이는 자리), 오른쪽은 마지막 칸 중앙 */
.ic26-organ-hq .cols5::before {
  left: 1%;
  right: 11.6%;
}

.ic26-organ-hq .cols4::before {
  left: 1%;
  right: 30.8%;
}

/* 1줄 → 2줄 세로선. 1줄 높이가 가변이라 줄 간격으로만 잡는다 */
.ic26-organ-hq .cols5::after {
  content: '';
  position: absolute;
  left: 1%;
  top: -50px;
  bottom: -30px;
  width: 1px;
  background: #ddd;
}

.ic26-organ-hq .organ-cols .organ-depth02::before {
  display: block !important;
  width: 1px !important;
  height: 50px;
  top: -50px;
  left: 50%;
}

/* 769px 이하 — 한 칸 126px 에 글자 100px 이라 답답하다. 원본처럼 세로로 쌓는다 */
@media (max-width: 769px) {
  .ic26-organ-hq .organ-depth01 {
    width: 100%;
    margin: 0 auto 20px;
  }

  .ic26-organ-hq .organ-depth01::before {
    top: 50px;
    height: 20px;
  }

  .ic26-organ-hq .organ-cols {
    display: block;
  }

  .ic26-organ-hq .organ-cols > li,
  .ic26-organ-hq .organ-cols > li:first-child {
    width: 100%;
    margin: 20px auto 0;
  }

  .ic26-organ-hq .cols4 {
    margin-top: 20px;
  }

  .ic26-organ-hq .organ-cols::before,
  .ic26-organ-hq .cols5::after {
    display: none;
  }

  .ic26-organ-hq .organ-cols .organ-depth02::before {
    height: 20px;
    top: -20px;
  }
}

/* 파란 박스 위 빨간 점선(원본)은 대비가 모자란다 */
.ic26-organ-hq .organ-depth02:focus-visible {
  outline: 3px solid #ff8a00 !important;
  outline-offset: 2px;
}