@charset "utf-8";

/* =========================
   내용관리 기본
========================= */
#ctt { margin:10px 0; padding:20px; background:#fff; }
.ctt_admin { text-align:right; }
#ctt header h1 { position:absolute; font-size:0; line-height:0; overflow:hidden; }
#ctt_con { padding:10px 0; }
#ctt_con img { max-width:100%; height:auto; }
.ctt_img { text-align:center; }

#ctt_con{
  /* =========================
     Typography tokens
  ========================= */

  /* 기본 글꼴/렌더링(선택) */
  --c-font: var(--font-main);
  --c-body: 16px;
  --c-body-lg: 17px;
  --c-small: 13px;

  /* 제목 스케일 */
  --c-title-xl: clamp(26px, 2.2vw + 14px, 34px);
  --c-title-lg: clamp(20px, 1.6vw + 12px, 26px);
  --c-title-md: clamp(17px, 1.0vw + 12px, 20px);

  /* 라인하이트 */
  --c-lh: 1.65;
  --c-lh-tight: 1.25;

  /* 텍스트 컬러 */
  --c-muted: rgba(23, 50, 72, .62);
  --c-text: var(--t-ink, #222);

  /* 섹션 간격 */
  --space-block: 24px;
}


#ctt_con{
  --t-ink: #2b241d;
  --t-ink-soft: #5a4b3b;

  --t-bg-0: var(--color-surface-soft-2);
  --t-bg-1: var(--color-surface-soft);  /* 카드/노드 베이스(너무 진하면 촌스러워 보일 수 있어요) */
  --t-bg-2: var(--color-surface-soft);

  --t-accent-1: var(--color-main);
  --t-accent-2: var(--color-sub-1);

  --t-accent-a12: rgba(20, 110, 166, .12);
  --t-accent-a18: rgba(20, 110, 166, .18);
  --t-accent-a35: rgba(43, 168, 217, 0.13);

  --t-ink-a10: rgba(23, 50, 72, .10);
  --t-ink-a12: rgba(23, 50, 72, .12);

  --r-node: 16px;
  --node-py: 14px;
  --node-px: 16px;
  --node-minh: 58px;

  --fw-node: 800;
  --ls-node: -0.2px;
  --lh-tight: 1.25;

  --sh-node: 0 14px 34px rgba(23, 50, 72, .08), 0 2px 8px rgba(23, 50, 72, .06);
  --sh-node-hover: 0 20px 46px rgba(23, 50, 72, .10), 0 4px 12px rgba(23, 50, 72, .08);

  --org-line-w: 2px;
  --org-line-style: dashed;
  --org-line-color: rgba(20, 110, 166, .35); /* 파랑값 남기지 않기 */
}



/* =========================
   content base
========================= */
#ctt { border-radius:14px; }
#ctt_con{
  font-size: var(--c-body);
  line-height: var(--c-lh);
  color:#222;
}


/* 조직도 라인 토큰 */
#ctt_con{
  --org-line-w: 2px;
  --org-line-color: rgba(23, 50, 72, .12);;
  --org-line-style: dashed;
}


#ctt_con h2{
      display: inline-block;
    width: fit-content;
    position: relative;
    margin: var(--space-block, 24px) 0 14px;
    padding-bottom: 12px;
    line-height: var(--c-lh-tight);
    color: var(--color-text);
    letter-spacing: -0.4px;
}

#ctt_con h2::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--color-title-line);
    border-radius: 999px;
    opacity: .95;
}
/* =========================
   조직도 (UL/LI + 라인)
========================= */

#ctt_con .c-orgchart{
  margin-top: 14px;
  padding-bottom: 10px;
}

#ctt_con .c-orgchart *{ box-sizing: border-box; }

#ctt_con .c-orgchart ul{
  list-style:none;
}

#ctt_con .c-orgchart__board{
  position: relative;
  padding: 18px 14px 0;
  border-radius: 18px;
  /* background: linear-gradient(180deg, var(--color-bg,#fff) 0%, var(--color-bg3,#f1f9ff) 130%); */
  /* border: 1px solid rgba(0,0,0,.06); */
  /* box-shadow: 0 14px 34px rgba(0,0,0,.08); */
  min-height: 450px;
}

/* 중앙 세로 라인(원장~사무국장 내려오는 느낌) */
#ctt_con .c-orgchart__board::before{
  content:"";
  position:absolute;
  left:50%;
  top:38px;
  bottom:0;
  width:0;                         /* 막대 폭 대신 */
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  transform: translateX(-50%);
}


/* 행 공통 */
#ctt_con .c-orgchart__row{
  position: relative;
  display:block;
  width:100%;
  height: 92px;
}
#ctt_con .c-orgchart__row li{
  position: relative;
}

/* 1개 중앙 */
#ctt_con .c-orgchart__row--one{
  display: flex;
  justify-content: center;
  align-items: center;
}

#ctt_con .c-orgchart__row--one li{
  width: 32%;
  margin: 0 auto;
}

/* 2개 좌/우 */
#ctt_con .c-orgchart__row--two{
      display: flex;
    justify-content: space-between;
    align-items: center;
}
#ctt_con .c-orgchart__row--two li{
  width: 32%;
}
#ctt_con .c-orgchart__row--two li:first-child{ float:left; }
#ctt_con .c-orgchart__row--two li:last-child{ float:right; }

/* 2개 행 상단 가로 라인 */
#ctt_con .c-orgchart__row--two::before{
  content:"";
  position:absolute;
  left: 13%;
  right: 13%;
  top: 50%;
  height: 0;  /* 핵심 */
  border-top: var(--org-line-w) var(--org-line-style) var(--org-line-color);
}

/* 레벨 색상(사이트 변수 기반) */
#ctt_con .c-node--lvlA{
  color:#fff;
  background: var(--color-main);
}
#ctt_con .c-node--lvlB{
  color:#fff;
  background: var(--color-main);
}
#ctt_con .c-node--lvlC{
  color:#08324b;
  background: var(--color-bg3);
}
#ctt_con .c-node--aux{
  color:#1b1b1b;
  background: var(--color-bg2);
  line-height: 1.7;
}
#ctt_con .c-node--sub{
  color:#08324b;
  background: rgba(255,255,255,.82);
  border-style: dashed;
  border-color: rgba(4,119,191,.28);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
  font-weight: 800;
  position: relative;
}


/* 하단 부서 라인 프레임 */
#ctt_con .c-orgchart__depts{
  padding: 40px 14px 20px;
  display:flex;
  gap: 14px;
  justify-content: space-between;
  position: relative;
}

/* 부서 상단 가로 라인 + 좌우 기둥 */
#ctt_con .c-orgchart__depts::before{
  content:"";
  position:absolute;
  left:13%;
  right:13%;
  top: 0;
  /* height: 46px; */
  border-top:  var(--org-line-w) var(--org-line-style) var(--org-line-color);
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  border-right:var(--org-line-w) var(--org-line-style) var(--org-line-color);
}

/* 부서 */
#ctt_con .c-orgchart__dept{
  width: calc(25% - 10px);
  position: relative;
}

/* 부서로 내려오는 수직 라인 */
#ctt_con .c-orgchart__dept::before{
  content:"";
  position:absolute;
  left:50%;
  top: -40px;
  width: 2px;
  height: 40px;
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  transform: translateX(-50%);
}

/* 하위 팀(시설관리팀) 리스트 */
#ctt_con .c-orgchart__sections{
}
#ctt_con .c-orgchart__sections li{
}

/* 모바일: 세로 스택(가독성 우선) */
@media (max-width: 820px){
  #ctt_con .c-orgchart__board{
    padding: 0;
  }
  #ctt_con .c-node{
 flex-direction: column;
}
}

/* =========================
   조직도 - 2026 개편안
========================= */
#ctt_con .c-orgDiagram,
#ctt_con .c-orgDiagram *{
  box-sizing: border-box;
}

#ctt_con .c-orgDiagram{
  width: 100%;
  margin: 24px 0 64px;
  padding: 38px 10px 28px;
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  scrollbar-color: rgba(20, 110, 166, .28) transparent;
  scrollbar-width: thin;
}

#ctt_con .c-orgDiagram ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

#ctt_con .c-orgDiagram__canvas{
  --org-head-width: 190px;
  --org-line: rgba(20, 110, 166, .22);
  --org-trunk-gap: 38px;
  min-width: 900px;
  max-width: 1040px;
  margin: 0 auto;
}

#ctt_con .c-orgDiagram__lead{
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) var(--org-head-width) minmax(240px, 1fr);
  grid-template-rows: 54px 116px 54px;
  min-height: 224px;
}

#ctt_con .c-orgDiagram__lead::before{
  content: "";
  position: absolute;
  top: 54px;
  bottom: 54px;
  left: 50%;
  border-left: 1px solid var(--org-line);
  transform: translateX(-50%);
}

/* 사무국장 아래 중앙선: 이 선의 끝에서 4개 부서로 분기 */
#ctt_con .c-orgDiagram__lead::after{
  content: "";
  position: absolute;
  bottom: calc(0px - var(--org-trunk-gap));
  left: 50%;
  height: var(--org-trunk-gap);
  border-left: 1px solid var(--org-line);
  transform: translateX(-50%);
}

#ctt_con .c-orgDiagram__head{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 2px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.3px;
  box-shadow: none;
}

#ctt_con .c-orgDiagram__head--director{
  grid-column: 2;
  grid-row: 1;
  background: var(--color-main, #146ea6);
}

#ctt_con .c-orgDiagram__head--manager{
  grid-column: 2;
  grid-row: 3;
  background: var(--color-sub-1, #2ba8d9);
}

#ctt_con .c-orgDiagram__committees{
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  width: 190px;
  margin-right: 54px !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#ctt_con .c-orgDiagram__committees::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 150px;
  border-top: 1px solid var(--org-line);
}

#ctt_con .c-orgDiagram__committees li{
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px solid rgba(20, 110, 166, .13);
  background: var(--color-surface-soft-2, #f7fbfd);
  color: var(--color-text, #173248);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

#ctt_con .c-orgDiagram__committees li + li{
  margin-top: 4px;
}

#ctt_con .c-orgDiagram__departments{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--org-trunk-gap) !important;
  padding-top: 44px !important;
}

#ctt_con .c-orgDiagram__departments::before{
  content: "";
  position: absolute;
  top: 0;
  right: calc(12.5% - 5.5px);
  left: calc(12.5% - 5.5px);
  border-top: 1px solid var(--org-line);
}

#ctt_con .c-orgDiagram__department{
  position: relative;
}

#ctt_con .c-orgDiagram__department::before{
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: 44px;
  border-left: 1px solid var(--org-line);
  transform: translateX(-50%);
}

#ctt_con .c-orgDiagram__card{
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(20, 110, 166, .17);
  border-radius: 2px;
  background: var(--color-surface-soft-2, #f7fbfd);
  box-shadow: none;
}

#ctt_con .c-orgDiagram__card h3{
  margin: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  border-bottom: 0;
  background: var(--color-main, #146ea6);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  letter-spacing: -.2px;
}

#ctt_con .c-orgDiagram__department:nth-child(2) .c-orgDiagram__card h3{
  background: var(--color-sub-1, #2ba8d9);
}

#ctt_con .c-orgDiagram__department:nth-child(3) .c-orgDiagram__card h3{
  background: var(--color-sub-2, #5fafcf);
}

#ctt_con .c-orgDiagram__department:nth-child(4) .c-orgDiagram__card h3{
  background: var(--color-sub-3, #9abf75);
  color: var(--color-text, #173248);
}

#ctt_con .c-orgDiagram__card > ul{
  padding: 16px 12px 18px;
}

#ctt_con .c-orgDiagram__card li{
  padding: 3px 6px;
  color: var(--color-text, #173248);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}

#ctt_con .c-orgDiagram__card li.is-team{
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(20, 110, 166, .14);
  color: var(--color-main, #0477bf);
  font-weight: 900;
}

@media (max-width: 820px){
  #ctt_con .c-orgDiagram{
    margin-bottom: 42px;
    padding: 26px 0 20px;
    overflow-x: visible;
  }

  #ctt_con .c-orgDiagram__canvas{
    --org-trunk-gap: 28px;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #ctt_con .c-orgDiagram__lead{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 0;
  }

  #ctt_con .c-orgDiagram__lead::before{
    top: 27px;
    bottom: 27px;
  }

  #ctt_con .c-orgDiagram__head{
    flex: 0 0 auto;
    width: min(230px, 100%);
    min-height: 50px;
    font-size: 16px;
  }

  #ctt_con .c-orgDiagram__committees{
    align-self: center;
    justify-self: auto;
    width: min(230px, calc(100% - 20px));
    margin-right: 0 !important;
  }

  #ctt_con .c-orgDiagram__committees::after{
    display: none;
  }

  #ctt_con .c-orgDiagram__departments{
    display: block;
    margin-top: var(--org-trunk-gap) !important;
    padding: 28px 0 0 30px !important;
  }

  /* 중앙선에서 왼쪽 부서 스파인으로 연결 */
  #ctt_con .c-orgDiagram__departments::after{
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    width: calc(50% - 18px);
    border-top: 1px solid var(--org-line);
  }

  /* 4개 부서를 잇는 세로 스파인 */
  #ctt_con .c-orgDiagram__departments::before{
    top: 0;
    right: auto;
    bottom: 0;
    left: 18px;
    width: 0;
    border-top: 0;
    border-left: 1px solid var(--org-line);
  }

  #ctt_con .c-orgDiagram__department{
    margin: 0 0 18px;
  }

  #ctt_con .c-orgDiagram__department:last-child{
    margin-bottom: 0;
  }

  /* 세로 스파인에서 각 부서 카드로 연결 */
  #ctt_con .c-orgDiagram__department::before{
    top: 22px;
    bottom: auto;
    left: -12px;
    width: 12px;
    height: 0;
    border-top: 1px solid var(--org-line);
    border-left: 0;
    transform: none;
  }

  /* 마지막 부서 아래로 남는 스파인 숨김 */
  #ctt_con .c-orgDiagram__department:last-child::after{
    content: "";
    position: absolute;
    z-index: 1;
    top: 23px;
    bottom: 0;
    left: -13px;
    width: 3px;
    background: #fff;
  }

  #ctt_con .c-orgDiagram__card{
    position: relative;
    z-index: 2;
  }
}

/* =========================================
   직원 및 운영위원 현황
   - status 스킨의 카드/표 디자인을 조직도 하단에 이식
========================================= */
#ctt_con .org-status-sections{
  --p-ink: var(--color-text);
  --p-ink-muted: rgba(23, 50, 72, .62);
  --p-card: #fff;
  --p-tint: var(--color-surface-soft);
  --p-line-2: rgba(20, 110, 166, .14);
  --r-card: 18px;
  --sh-1: 0 10px 30px rgba(23, 50, 72, .06);
  --sh-2: 0 18px 50px rgba(23, 50, 72, .10);
  --tone-sub3-s1: #fff;
  --tone-sub3-s2: var(--color-surface-soft-2);
  --tone-sub3-border: rgba(20, 110, 166, .12);
  margin-top: 52px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 50, 72, .08);
}

#ctt_con .org-status-sections h2{
  margin: 28px 0 14px;
  padding-bottom: 10px;
  letter-spacing: -.3px;
}

#ctt_con .org-status-sections h2::after{
  height: 3px;
  background: var(--color-title-line);
  opacity: .95;
}

#ctt_con .org-status-sections .stat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 0 0 50px;
}

#ctt_con .org-status-sections .stat{
  position: relative;
  overflow: hidden;
  padding: 12px 14px;
  border: 1px solid var(--tone-sub3-border);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--tone-sub3-s1), var(--tone-sub3-s2));
  box-shadow: var(--sh-1);
  transition: transform .18s var(--nav-ease, ease), box-shadow .18s var(--nav-ease, ease), border-color .18s var(--nav-ease, ease);
}

#ctt_con .org-status-sections .stat:hover{
  transform: translateY(-1px);
  border-color: rgba(20, 110, 166, .28);
  box-shadow: var(--sh-2);
}

#ctt_con .org-status-sections .stat .label{
  color: var(--p-ink-muted);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
}

#ctt_con .org-status-sections .stat .value{
  margin-top: 8px;
  color: var(--p-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: var(--c-lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
}

#ctt_con .org-status-sections .table-wrap{
  overflow: auto;
  border: 1px solid var(--p-line-2);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--p-card), var(--p-tint));
  box-shadow: var(--sh-1);
}

#ctt_con .org-status-sections table{
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

#ctt_con .org-status-sections th,
#ctt_con .org-status-sections td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(23, 50, 72, .08);
  text-align: center;
}

#ctt_con .org-status-sections th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface-soft-2);
  color: rgba(23, 50, 72, .78);
  font-size: var(--c-small);
}

#ctt_con .org-status-sections tr:hover td{
  background: rgba(20, 110, 166, .05);
}

#ctt_con .org-status-sections td.num{
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px){
  #ctt_con .org-status-sections{
    margin-top: 38px;
    padding-top: 8px;
  }

  #ctt_con .org-status-sections .stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #ctt_con .org-status-sections .table-wrap--committee{
    overflow: visible;
    padding: 6px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #ctt_con .org-status-sections table.tbl-committee{
    min-width: 0;
    background: transparent;
  }

  #ctt_con .org-status-sections table.tbl-committee thead{
    display: none;
  }

  #ctt_con .org-status-sections table.tbl-committee,
  #ctt_con .org-status-sections table.tbl-committee tbody,
  #ctt_con .org-status-sections table.tbl-committee tr,
  #ctt_con .org-status-sections table.tbl-committee td{
    display: block;
    width: 100%;
  }

  #ctt_con .org-status-sections table.tbl-committee tr{
    position: relative;
    overflow: visible;
    margin: 12px 0;
    padding: 14px 14px 12px;
    border: 1px solid rgba(20, 110, 166, .16);
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, var(--color-surface-soft) 140%);
  }

  #ctt_con .org-status-sections table.tbl-committee tr::before{
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 98%;
    height: 4px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--color-sub-1), var(--color-main));
    transform: translateX(-50%);
    pointer-events: none;
  }

  #ctt_con .org-status-sections table.tbl-committee tr::after{
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 10px 24px rgba(0,0,0,.10);
    pointer-events: none;
  }

  #ctt_con .org-status-sections table.tbl-committee td{
    position: relative;
    z-index: 1;
    padding: 8px 0;
    border: 0;
    text-align: left;
  }

  #ctt_con .org-status-sections table.tbl-committee td + td{
    border-top: 1px dashed rgba(20, 110, 166, .18);
  }

  #ctt_con .org-status-sections table.tbl-committee td::before{
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: rgba(23, 50, 72, .60);
    font-size: var(--c-small);
    font-weight: 700;
    letter-spacing: -.2px;
  }

  #ctt_con .org-status-sections table.tbl-committee td.num[data-label="번호"]{
    padding: 6px 0 12px;
    border-top: 0;
    color: var(--color-text);
    font-weight: 900;
  }

  #ctt_con .org-status-sections table.tbl-committee td.num[data-label="번호"]::before{
    content: "#";
    display: inline-block;
    margin-right: 6px;
    color: var(--color-main);
    font-weight: 900;
  }

  #ctt_con .org-status-sections table.tbl-committee td[data-label="성명"]{
    color: var(--color-text);
    font-weight: 900;
  }

  #ctt_con .org-status-sections table.tbl-committee td[data-label="위원구성"]{
    padding: 10px 12px;
    border: 1px solid rgba(20, 110, 166, .18);
    border-radius: 14px;
    background: rgba(20, 110, 166, .08);
  }
}


/* =========================
   모바일 반응형 조직도 (가로스크롤 제거 + 세로 스택)
========================= */
@media (max-width: 820px){

  /* 1) 가로 스크롤 제거 */
  #ctt_con .c-orgchart{
    padding-bottom: 0;
  }

  /* 2) 보드/부서영역 폭 강제(min-width) 해제 */
  #ctt_con .c-orgchart__board{
    min-width: 0;
    width: 100%;
            display: flex;
        flex-direction: column;
        gap: 20px;
  }
  #ctt_con .c-orgchart__depts{
    min-width: 0;
    width: 100%;
    display: block;          /* flex 해제 */
    padding: 0;
  }

  /* 3) PC용 중앙 세로 라인, 가로 라인들 제거 */
  #ctt_con .c-orgchart__depts::before{ display:none; }

  /* 4) 행 레이아웃: 1개도 100% */
  #ctt_con .c-orgchart__row{
    height: auto;
    word-break: keep-all;
  }
  #ctt_con .c-orgchart__row--one li{
    width: 100%;
    margin: 0;
  }

  #ctt_con .c-orgchart__row--two{
    gap: 40px;
  }
  /* 5) 2개(위원회)도 세로로 쌓기 (float 제거) */
  #ctt_con .c-orgchart__row--two li{
    width: 100%;
    float: none;
    margin-top: 12px;
  }
  #ctt_con .c-orgchart__row--two li:first-child{ margin-top: 0; }
  /* 7) 부서(4개)를 세로로 쌓기 */
  #ctt_con .c-orgchart__dept{
    width: 100%;
    margin: 0 0 16px 0;
    padding-left: 14px;      /* 왼쪽 라인 공간 */
  }



  /* 8) 부서로 내려오는 수직 라인(모바일 버전) */
  #ctt_con .c-orgchart__dept::before{
        left: 0;
        top: 48px;
        width: 15px;
        height: 2px;
        transform: none;
    border-top: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  }

  /* 9) 첫 부서는 위 라인 제거 */


  /* 10) 하위팀(섹션) 여백 조정 */
  #ctt_con .c-orgchart__sections{
  }
  #ctt_con .c-orgchart__sections li{
  }

  /* 11) 노드 글자 살짝만 줄여서 줄바꿈 덜 깨지게 */
  #ctt_con .c-node{
    font-size: 16px;
    border-radius: 16px;
    padding: 12px 12px;
  }
}


#ctt_con .c-orgchart__sections li{
  position: relative;
  padding-top: 18px;     /* 선 공간 */
}

#ctt_con .c-orgchart__sections li::before{
  content:"";
  position:absolute;
  left:50%;
  top: 0;
  width: 2px;
  height: 18px;
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  transform: translateX(-50%);
  z-index: 0;
}

#ctt_con .c-node--sub{
  position: relative;
  z-index: 1;            /* 선 위에 박스 */
}


@media (max-width: 820px){

  /* depts 영역 기준점 */
  #ctt_con .c-orgchart__depts{
    position: relative;
    padding-top: 14px;     /* 위쪽 가로선 공간 */
  }

  /* 왼쪽 세로 스파인 */
  #ctt_con .c-orgchart__depts::before{
    display:block;         /* (기존 display:none 덮기) */
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:90%;
  width: 0; /* 또는 1px */
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  border-top: 0;
  border-right: 0;

  }

  /* 위쪽 중간까지 가로선(ㄴ자 윗부분) */
  #ctt_con .c-orgchart__depts::after{
    content:"";
    position:absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 50%;            /* “위쪽 중간” → 40~60%로 취향조절 */
    border-top: var(--org-line-w) var(--org-line-style) var(--org-line-color);
  }
}


#ctt_con .c-node{
  gap: 10px;
}

/* 원장/사무국장(포인트 노드): 블루+다크 잉크 */
#ctt_con .c-node--lvlA,
#ctt_con .c-node--lvlB{
  color: #fff;
  border-color: rgba(43, 168, 217, .40);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--color-sub-1), var(--color-main-hover));
}

/* 부서 노드: 크림 */
#ctt_con .c-node--lvlC{
  color: var(--t-ink);
  background: linear-gradient(180deg, #fff, var(--color-surface-soft));
  border-color: rgba(20, 110, 166, .18);
}


/* 하위팀: 점선 카드(블루) */
#ctt_con .c-node--sub{
  color: var(--t-ink);
  background: linear-gradient(180deg, #fff, var(--color-surface-soft-2));
  border: 1px dashed rgba(20, 110, 166, .35);
  box-shadow:
    0 12px 26px rgba(23, 50, 72, .06),
    0 2px 8px rgba(23, 50, 72, .05);
  font-weight: 800;
}


/* 공통 노드 */
#ctt_con .c-node{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 15px;
  padding: var(--node-py) var(--node-px);
  min-height: var(--node-minh);
  border-radius: var(--r-node);
  border: 1px solid rgba(20, 110, 166, .18);
  font-weight: var(--fw-node);
  letter-spacing: var(--ls-node);
  line-height: var(--lh-tight);

  transition: transform .18s ease, box-shadow .18s ease;
}
#ctt_con .c-node:hover{
  transform: translateY(-1px);
  box-shadow: var(--sh-node-hover);
}

/* 레벨별 */
#ctt_con .c-node--lvlA,
#ctt_con .c-node--lvlB{
  color: #fff;
  border-color: rgba(43, 168, 217, .40);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    linear-gradient(180deg, var(--color-sub-1), var(--color-main));
}
#ctt_con .c-node--lvlC{
  color: var(--t-ink);
  background: linear-gradient(180deg, #fff, var(--t-bg-1));
}
#ctt_con .c-node--aux{
  color: var(--t-ink-soft);
  background: linear-gradient(180deg, #fff, var(--t-bg-1));
  border-color: var(--t-ink-a12);
}
#ctt_con .c-node--sub{
  color: var(--t-ink);
  background: linear-gradient(180deg, #fff, var(--t-bg-0));
  border: 1px dashed rgba(20, 110, 166, .35);
}


/* 세로 라인 */
#ctt_con .c-orgchart__board::before{
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
}

/* 가로 라인 */
#ctt_con .c-orgchart__row--two::before{
  border-top: var(--org-line-w) var(--org-line-style) var(--org-line-color);
}



/* dept에서 내려오는 선 */
#ctt_con .c-orgchart__dept::before{
  border-left: var(--org-line-w) var(--org-line-style) var(--org-line-color);
}


/* =========================================
   ORGCHART TYPOGRAPHY (token-based)
   - paste at the end
========================================= */

/* 0) 조직도 전용 폰트 토큰(필요하면 조절) */
#ctt_con{
  /* 원장/사무국장(핵심) */
  --org-fs-head: clamp(16px, 1.0vw + 14px, 18px);

  /* 부서(중간) */
  --org-fs-dept: clamp(15px, 0.6vw + 13px, 16px);

  /* 위원회(보조) */
  --org-fs-aux: clamp(15px, 0.4vw + 11px, 16px);

  /* 하위팀 */
  --org-fs-sub: clamp(15px, 0.4vw + 12px, 16px);
}

/* 1) 기본: 노드는 바디 기준으로 시작 */
#ctt_con .c-node{
  font-size: var(--c-body);
  line-height: var(--c-lh-tight);
  font-weight: var(--fw-node, 800);
}

/* 2) 핵심(원장/사무국장) */
#ctt_con .c-node--lvlA,
#ctt_con .c-node--lvlB{
  font-size: var(--org-fs-head);
}

/* 3) 부서(운영지원과/돌봄복지/건강지원) */
#ctt_con .c-node--lvlC{
  font-size: var(--org-fs-dept);
}

/* 4) 위원회(여러 줄) */
#ctt_con .c-node--aux{
  font-size: var(--org-fs-aux);
  line-height: 1.55; /* 줄 많은 곳은 tight 대신 살짝 여유 */
  font-weight: 700;  /* 보조는 조금 가볍게 */
}

/* 5) 하위팀(시설관리팀 등) */
#ctt_con .c-node--sub{
  font-size: var(--org-fs-sub);
}

/* 6) strong만 확실히 강조(마크업의 strong 활용) */
#ctt_con .c-node strong{
  font-weight: 900;
  font-size: inherit; /* strong이 따로 커지지 않게 */
}

/* 7) 모바일에서 전체 한 단계 다운(기존 @media의 .c-node font-size 덮기) */
@media (max-width: 820px){
  #ctt_con{
    --org-fs-head: 17px;
    --org-fs-dept: 15px;
    --org-fs-aux:  13px;
    --org-fs-sub:  14px;

    /* 필요하면 바디 자체도 15로 */
    /* --c-body: 15px; */
  }

  #ctt_con .c-node{
    font-size: var(--c-body);
  }
}