/* =========================================================
   COMPANY 03 — 조직도 · 연혁 중앙정렬 / 감사 박스 수정
   이 파일은 company/03.php 에서만 로드됩니다.
   공용 style.css / 다른 페이지에는 영향을 주지 않습니다.
   company03-mobile.css 다음에 로드되어야 합니다.
   ========================================================= */

/* ---------------------------------------------------------
   1. 섹션 제목(ORGANIZATION / 조직도 / 설명문) 중앙정렬
   좌우 분리 배치를 세로 스택으로 바꿔 다른 서브페이지와 규칙을 맞춤
   --------------------------------------------------------- */
.n01-ref-org .refsub-org-history-vertical .refsub-section-head {
  display: block !important;
  text-align: center !important;
}

.n01-ref-org .refsub-org-history-vertical .refsub-section-head .refsub-secnum {
  justify-content: center !important;
}

.n01-ref-org .refsub-org-history-vertical .refsub-section-head > div h2 {
  margin: 6px 0 0 !important;
}

.n01-ref-org .refsub-org-history-vertical .refsub-section-head > p {
  max-width: 660px !important;
  margin: 18px auto 0 !important;
}

/* ---------------------------------------------------------
   2. 감사 뒤에 겹쳐 있던 네모 박스 수정
   .side 가 -42px 로 끌려 올라오면서 위쪽 '이사회' 박스를 덮고 있었음.
   :before 로 만들던 빈 칸을 없애고, 가운데 열을 '이사회' 자리로 비워
   감사 / 이사회 / 자문위원회가 한 줄에 나란히 보이도록 함.
   --------------------------------------------------------- */
.n01-ref-org .refsub-org-tree-large .side:before {
  display: none !important;
  content: none !important;
}

.n01-ref-org .refsub-org-tree-large .side {
  grid-template-columns: 1fr 190px 1fr !important;
  max-width: 780px !important;
}

.n01-ref-org .refsub-org-tree-large .side span:first-child {
  grid-column: 1 !important;
  justify-self: end !important;
  margin-right: 34px !important;
}

.n01-ref-org .refsub-org-tree-large .side span:last-child {
  grid-column: 3 !important;
  justify-self: start !important;
  margin-left: 34px !important;
}

/* ---------------------------------------------------------
   3. 연혁 타임라인 — 선을 정가운데 두고 항목을 좌우 번갈아 배치
   글자 크기와 굵기는 한 단계 낮춰 톤을 눌러줌
   --------------------------------------------------------- */
.n01-ref-org .refsub-timeline-large {
  position: relative !important;
  width: auto !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
}

.n01-ref-org .refsub-timeline-large:before {
  left: 50% !important;
  margin-left: -1px !important;
}

.n01-ref-org .refsub-timeline-large article {
  display: block !important;
  width: calc(50% - 46px) !important;
  padding: 0 0 34px !important;
  text-align: right !important;
}

.n01-ref-org .refsub-timeline-large article:nth-child(even) {
  margin-left: calc(50% + 46px) !important;
  text-align: left !important;
}

.n01-ref-org .refsub-timeline-large article:before {
  left: auto !important;
  right: -53px !important;
}

.n01-ref-org .refsub-timeline-large article:nth-child(even):before {
  left: -53px !important;
  right: auto !important;
}

.n01-ref-org .refsub-timeline-large time {
  display: block !important;
  margin-bottom: 7px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.n01-ref-org .refsub-timeline-large h3 {
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: -.01em !important;
  color: #5a6367 !important;
}

/* ---------------------------------------------------------
   반응형
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  .n01-ref-org .refsub-org-tree-large .side {
    grid-template-columns: 1fr 170px 1fr !important;
    max-width: 660px !important;
  }

  .n01-ref-org .refsub-org-tree-large .side span:first-child {
    margin-right: 22px !important;
  }

  .n01-ref-org .refsub-org-tree-large .side span:last-child {
    margin-left: 22px !important;
  }

  .n01-ref-org .refsub-timeline-large time {
    font-size: 15px !important;
  }

  .n01-ref-org .refsub-timeline-large h3 {
    font-size: 16px !important;
  }
}

@media (max-width: 800px) {
  .n01-ref-org .refsub-org-history-vertical .refsub-section-head > p {
    max-width: 560px !important;
  }
}

/* 좁은 화면에서는 좌우 배치를 풀고 한 줄로 정리 */
@media (max-width: 700px) {
  .n01-ref-org .refsub-timeline-large {
    max-width: none !important;
    padding-left: 26px !important;
  }

  .n01-ref-org .refsub-timeline-large:before {
    left: 13px !important;
    margin-left: 0 !important;
  }

  .n01-ref-org .refsub-timeline-large article,
  .n01-ref-org .refsub-timeline-large article:nth-child(even) {
    width: auto !important;
    margin-left: 0 !important;
    padding: 0 0 26px 26px !important;
    text-align: left !important;
  }

  .n01-ref-org .refsub-timeline-large article:before,
  .n01-ref-org .refsub-timeline-large article:nth-child(even):before {
    left: -19px !important;
    right: auto !important;
  }
}

@media (max-width: 560px) {
  /* 모바일에서는 감사 / 자문위원회를 2단으로 내리고 겹침 해제 */
  .n01-ref-org .refsub-org-tree-large .side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 10px 0 16px !important;
  }

  .n01-ref-org .refsub-org-tree-large .side span:first-child,
  .n01-ref-org .refsub-org-tree-large .side span:last-child {
    grid-column: auto !important;
    justify-self: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .n01-ref-org .refsub-timeline-large time {
    font-size: 14px !important;
  }

  .n01-ref-org .refsub-timeline-large h3 {
    font-size: 15px !important;
  }
}