@charset "utf-8";
/* ═══════════════════════════════════════════
   group.css — group.php(조직도) 전용 스타일
   공통 영역(reset/root/body/sub-nav/page-title/breadcrumb)은
   style.css + page-common.css 에 있으므로 여기서는 재정의하지 않습니다.
═══════════════════════════════════════════ */

/* ⚙ 이 페이지(조직도)에서만 쓰는 전용 변수 — style.css에는 없어서 여기 유지 */
:root {
  --color-main-mgr: #245c9c;
  --color-dept: #eef5e9;
  --color-comm-hr: #e6a93b;
  --color-comm-sub: #fdf5da;
  --line: #e7e7e7;
  --radius: 6px;
  --shadow: 0 2px 6px rgba(0,0,0,0.06);
  --shadow-h: 0 4px 12px rgba(0,0,0,0.12);
}

/* ─── SCROLL HINT ─── */
.scroll-hint{display:none;text-align:center;font-size:.73rem;color:var(--teal-d);padding:8px 0 2px;letter-spacing:.05em;}
@media(max-width:980px){.scroll-hint{display:block;}}


/* ─── CHART ─── */
.chart{min-width:920px;position:relative;padding:40px 0 20px;}

#h-bar {
  position: absolute;
  height: 1px;
  background: #e7e7e7; /* 선 색상 */
  top: 0;
  pointer-events: none;
  left: 50px;  /* 첫 번째 기둥 중심에 맞춤 */
  right: 50px; /* 마지막 기둥 중심에 맞춤 */
}

/* ─── BOXES ─── */
.box {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-size: 16px; font-weight: 500; letter-spacing: .04em; padding: 8px 16px;
  border-radius: var(--radius); white-space: nowrap; cursor: default; line-height: 1.4;
  transition: transform .15s, box-shadow .15s;
}
.box:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }

/* 주요 관리층 (주주총회, 이사회, 이사장, 총경리, CEO 등) */
.bt  { background: #004e9e; color: #fff; box-shadow: var(--shadow); }

/* 부서 / 오피스 (개발투자부, 기전부, 법무실 등 세부 조직) */
.btl { background: #4e9a5a; color: #fff; box-shadow: var(--shadow); border: 1px solid rgba(119,181,64,0.2); }

/* 인사평의위원회 (단독 위원회) */
.bg  { background: var(--color-comm-hr); color: #fff; box-shadow: var(--shadow); }

/* 일반 4대 위원회 (심사, 보수, ESG, 리스크 관리 위원회) */
.bgl { background: var(--color-comm-sub); color: var(--text); box-shadow: var(--shadow); border: 1px solid #f3e5be; }

/* ─── UPPER TREE ─── */
.upper{display:flex;flex-direction:column;align-items:center;position:relative;}
.vbar{width:1px;background:var(--line);}

.row{display:flex;align-items:center;justify-content:center;position:relative;width:100%;}

.upper .vbar {
  height: auto !important;     /* 고정 높이를 풀고 자동으로 늘어나게 합니다 */
  align-self: stretch !important; /* 부모(row)의 높이만큼 선이 끝까지 쭈욱 늘어납니다 */
  min-height: 25px;            /* 그래도 최소 25px은 유지하도록 설정 */
}

.upper .row {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* 3. 이사회 아래쪽 세로선 영역 자체의 여백을 줄여 밀착시키기 */
.upper .row + .vbar {
  margin: 0 !important;<strong></strong>
}

/* side branches */
.side-l{display:flex;align-items:center;margin-right:0;}
.side-r{display:flex;align-items:center;margin-left:0;}
.hbar{height:1px;background:var(--line);}

/* stacked left boxes */
.stack{display:flex;flex-direction:column;gap:4px;align-items:flex-end;}

/* committee panel */
.panel{
  display:flex;flex-direction:column;gap:3px;
  border:2px solid var(--gold);border-radius:8px;
}

/* ─── LOWER TREE ─── */
.lower{display:flex;flex-direction:column;align-items:center;}

/* horizontal row of VP columns */
.vp-row{display:flex;align-items:flex-start;justify-content:center;position:relative;}

/* each column in the lower section */
.lc{display:flex;flex-direction:column;align-items:center;padding:0 5px;}

/* VP / CE badges */
.badge-vp{
  font-size:16px;color:var(--teal-d);letter-spacing:.06em;
  padding:4px 10px;border:1.5px solid var(--teal);border-radius:4px;
  background:var(--teal-bg);white-space:nowrap;
}
.badge-ce{
  font-size:16px;color:var(--gold-d);letter-spacing:.06em;
  padding:4px 10px;border:1.5px solid var(--gold);border-radius:4px;
  background:var(--gold-ll);white-space:nowrap;
}

/* 1. 직책 배지 변경 (副總經理 / 總工程師) */
.badge-vp, .badge-ce {
  background-color: #82b929 !important;   /* 깊은 보라색 배경 */
  color: #ffffff !important;              /* 흰색 글씨 */
  border: 1px solid #82b929 !important;   /* 진한 보라색 테두리 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

span.box.btl-dept.dept {
  background-color: #999 !important;  /* 원하는 색상으로 변경 */
  color: #ffffff !important;
  border: 1px solid #999 !important;
}

.lower .btl-dept:hover {
  background-color: #c0392b !important;  /* 빨강 계열로 통일 */
}

/* 4. 하단 연결선 색상 조정 (선택사항: 선이 너무 흐리다면 진하게 수정) */
.lower .vbar, 
.vp-row::before, 
.sub::before {
  background: #bbbbbb !important;         /* 연결선들을 조금 더 명확한 회색으로 변경 */
}

/* dept boxes – vertical text */
.dept{
  writing-mode:vertical-rl;text-orientation:mixed;
  min-height:110px;padding:9px 9px 9px 8px;font-size:14px;line-height:1.5;
}

/* sub-row of depts under a VP */
.sub{display:flex;gap:6px;position:relative;align-items:flex-start;}
.sub::before{
  content:'';position:absolute;top:0;
  left:calc(50% - 1px);
  /* overridden per instance via inline style */
  height:2px;background:var(--line);
}

/* ─── LEGEND ─── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;              /* 범례 아이템 간의 간격 */
  justify-content: center;
  padding: 80px 20px;
  font-size: 15px;         /* 글자 크기 조정 */
  color: #333333;
}

/* 개별 범례 아이템 정렬 */
.li {
  display: flex;
  align-items: center;    /* 원과 글자의 세로 중앙 정렬 */
  gap: 8px;               /* 원과 글자 사이의 간격 */
}

/* [핵심] 컬러 원 아이콘 만들기 */
.circle-dot {
  width: 12px;            /* 원의 가로 크기 */
  height: 12px;           /* 원의 세로 크기 */
  border-radius: 50%;     /* 완벽한 원형으로 만드는 속성 */
  display: inline-block;
  flex-shrink: 0;         /* 화면이 줄어들어도 원 모양 유지 */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 살짝 입체감을 주는 그림자 */
}

/* ═══════════════════════════════════════════
   HORIZONTAL SCROLL WRAPPER (mobile projects)
═══════════════════════════════════════════ */
.scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  display: block;
}
.scroll-wrapper::-webkit-scrollbar { display: none; }

/* Swipe hint dots */
.swipe-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.swipe-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ccc;
  transition: background .3s;
}
.swipe-dots span.active { background: var(--green); }

/* ══════════════════════════
   TABLET 769px ~ 1024px (iPad)
══════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  html, body, main { overflow-x: visible !important; }
  .scroll-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  .chart { min-width: 920px !important; }
}

/* ══════════════════════════
   RESPONSIVE  ≤ 1024px 
══════════════════════════ */
@media (max-width: 1024px){
  .sub-nav { top: 84px; }
  .sub-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 16px; 
    scrollbar-width: none;
  }
  .sub-nav-inner::-webkit-scrollbar { display: none; }
  
  .sub-nav-inner a { padding: 0 20px; font-size: 14px; }
  .sub-nav-inner a::before { display: none; } 

  
  .breadcrumb-bar::after {
    margin: 0 auto 30px;
  }
  .chart {
    transform: scale(0.95);
    transform-origin: top center;
	zoom: 0.75;
    min-width: 920px !important;
    margin-bottom: -50px !important;
  }
	
  #lower-wrap {
  width: 100% !important;
  padding: 0 8px !important;
	}
  #vp-row {
	  min-width: 860px !important;
	}

  /* Footer */
  footer {
  padding: 36px 24px 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;        /* ✅ 좌우 흰 공간 제거 */
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}
.footer-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
  .footer-top { flex-direction: column; gap: 20px; }
  .footer-bottom {padding-top: 6px;}
}


/* ⚙ 이 페이지만 breadcrumb 여백이 공통값(page-common.css)과 달라서 오버라이드 */
.breadcrumb { padding-bottom: 70px; }
.breadcrumb-bar::after { margin-bottom: 60px; }

/* ══════════════════════════
   RESPONSIVE ≤ 768px (모바일 및 타임라인 통합 보정)
══════════════════════════ */
@media (max-width: 768px) {
  .sub-nav { top: 52px; }
  .sub-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 0 8px;
    scrollbar-width: none;
  }
  .sub-nav-inner::-webkit-scrollbar { display: none; }
  .sub-nav-inner a { padding: 0 18px; font-size: 14px; }

  .page-title-block { padding: 60px 0 0; }
  .page-title-block h1 { font-size: 24px; }
  .title h4 { font-size: 60px; }
  .breadcrumb-bar::after { margin: 0 20px 30px; }
  .history-section { padding: 0 20px 40px; }    
    
/* [공통] 가로폭 제한 해제 및 좌우 패딩 최적화 */
  .chart {
    min-width: 100% !important;
    padding: 20px 14px !important;
  }
  
  #vp-row {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  /* PC용 연결선들은 완벽히 숨김 처리 */
  .vbar, .hbar, #h-bar, .sub::before {
    display: none !important;
  }

   /* ──────────────────────────────────────────────────
     [1] 상부 틀 무조건 3열 그리드로 강제 (완벽한 대칭 기둥)
  ────────────────────────────────────────────────── */
  .upper {
    display: grid !important;
    grid-template-columns: 1fr 160px 1fr !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;         /* 화면에 맞게 시원하게 늘림 */
    margin: 0 auto !important;
    row-gap: 5px !important;  
    position: relative !important;
    padding: 0px 8px 16px !important;
    box-sizing: border-box !important;
  }

  /* ──────────────────────────────────────────────────
     인라인 absolute 좌표 완전 리셋 (직접 자식 div만)
  ────────────────────────────────────────────────── */
  .upper > div {
    position: relative !important;
    left: unset !important;
    top: unset !important;
    bottom: unset !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* upper 안의 wrapper div (side-arm 컨테이너) 도 리셋 */
  .upper > div > div {
    position: relative !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    bottom: unset !important;
    transform: none !important;
  }

  /* ──────────────────────────────────────────────────
     [2] 🔵 중앙 파란색 직책 -> 2열 (정중앙 축) 고정
  ────────────────────────────────────────────────── */
  .upper > span.box {
    grid-column: 2 !important;
    justify-self: center !important;
    
    /* 1. 고정 너비를 지우거나 최소 너비로 변경하여 글자가 내려갈 공간 확보 */
    width: auto !important;
    min-width: 100px !important;
    max-width: 140px !important; /* 화면을 벗어나지 않도록 최대 너비 제한 */
    
    margin: 0 auto !important;
    display: block !important;
    position: relative;
    z-index: 5;

    /* 2. 줄바꿈 및 자름 방지 핵심 속성 */
    white-space: normal !important;  /* 텍스트가 박스 너비를 넘으면 자동 줄바꿈 */
    word-break: keep-all !important; /* 태국어/한국어 단어가 어색하게 쪼개지는 것 방지 */
    overflow-wrap: break-word !important; /* 너무 긴 단어는 강제 줄바꿈 */
    
    /* 3. 줄바꿈 시 글자가 답답해 보이지 않도록 안쪽 여백과 행간 보정 */
    padding: 8px 6px !important;
    line-height: 1.3 !important;
  }

  /* 3. [핵심] 사라졌거나 틀어졌던 오른쪽 가로선(hbar) 되살리기 */
  .green-arm .hbar {
    display: block !important;
    width: 40px !important;            /* 모바일 화면 폭에 맞춰 가로선 길이 적절히 조절 */
    height: 1px !important;            /* 선 두께 */
    background-color: #cbd5e1 !important; /* 중앙선과 연결될 선 색상 (필요시 var(--line) 등으로 변경) */
    flex-shrink: 0 !important;
  }

  /* 중앙 세로선 */
.upper::before{
    content:'';
    position:absolute;
    left:50%;
    top:50px;
    bottom:0;
    width:1px;
    background:#d3dbe3;
    transform:translateX(-50%);
    z-index:1;
}

/* 중앙 파란박스 */
.upper > span.box{
    grid-column:2 !important;
    justify-self:center !important;
    width:100px !important;
    margin:0 auto !important;
    display:block !important;
    position:relative;
    z-index:5;
}

/* 좌측 조직 */
.green-arm{
    grid-column:1 !important;
    justify-self:end !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
}

/* 우측 위원회 */
.orange-arm{
    grid-column:3 !important;
    justify-self:start !important;
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
}

/* 좌측 스택 */
.green-arm .stack{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    width:130px !important;
    gap:6px !important;
}

/* 좌측 박스 */
.upper .green-arm .box,
.upper .green-arm .stack .box{
    width:100% !important;
    max-width:130px !important;
    margin:3px 0 !important;
    text-align:center !important;
    font-size:12px !important;
    padding:7px 4px !important;
    white-space:normal !important;
}

/* 우측 박스 */
.upper .orange-arm .box,
.upper .orange-arm .panel .box{
    width:100% !important;
    max-width:130px !important;
    text-align:center !important;
    font-size:11px !important;
    padding:6px 3px !important;
    white-space:normal !important;
}

/* 우측 패널 */
.upper .orange-arm .panel{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:130px !important;
    gap:4px !important;
    border:none !important;
}

  /* 1. 두 부서의 부모 wrapper div 내부 공간 및 정렬 최적화 */
  .upper > div:not(.green-arm):not(.orange-arm):not(.vbar) {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 100px 1fr !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
  }

  /* 2. 내부의 green-arm을 1열(좌측) 우측 끝으로 강제 밀착 */
  .upper > div:not(.green-arm) > .green-arm {
    grid-column: 1 !important;
    justify-self: end !important;
    position: relative !important;
    left: unset !important;
    right: unset !important; 
    transform: none !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }

  /* 3. 글자 상자와 가로선 순서 고정 및 가로선(hbar) 복원 */
  .upper > div:not(.green-arm) > .green-arm .box {
    order: 1 !important;
    margin: 0 !important;
  }

  .upper > div:not(.green-arm) > .green-arm .hbar {
    order: 2 !important;
    display: block !important;
    width: 40px !important; 
    flex-shrink: 0 !important;
  }


  .upper > div:not(.green-arm) > .orange-arm {
    grid-column: 3 !important;
    justify-self: start !important; 
    position: relative !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important; /* 선이 먼저 나오고 그다지 박스가 나오도록 */
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .upper > div:not(.green-arm) > .orange-arm .hbar {
    order: 1 !important;
    display: block !important;
    width: 40px !important;
    flex-shrink: 0 !important;
  }

  .upper > div:not(.green-arm) > .orange-arm .panel {
    order: 2 !important;
  }

  .upper .box {
    font-size: 13px !important;
    padding: 9px 4px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }
    .upper > span.box:nth-of-type(1) {
    margin-top: 20px !important;
  }

  .upper > span.box:nth-of-type(2) {
    margin-top: 10px !important;
  }

  /* 1. 개별 부서 기둥(lc)들을 모바일 화면에 맞춰 카드 형태로 튜닝 */
  .lc {
    width: 95% !important;              /* 화면에 맞춰 가로폭을 넓힘 */
    max-width: 480px;
    margin: 0 auto 16px !important;     /* 카드 간의 간격 */
    padding: 16px !important;           /* 카드 내부 여백 */
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  }

  /* 2. [핵심] 기존 PC 버전의 패딩/마진 때문에 찌그러지던 부서 상자(span) 복원 */
  span.box.btl-dept.dept {
    writing-mode: horizontal-tb !important; /* 가로 정방향 글쓰기 */
    text-orientation: unset !important;
    min-height: unset !important;
    width: 100% !important;                 
    font-size: 15px !important;
    text-align: center;
    box-sizing: border-box;
    display: block !important;    
    background: #999 !important;         /* 부드러운 밝은 회색 */
    color: #fff !important;
    border: 1px solid #999 !important;
    border-radius: 6px !important;
    transform: none !important;
    box-shadow: none !important;
	margin-top: 12px;
  }

  /* 3. 부총경리 / 총엔지니어 배지 정렬 */
  .badge-vp, .badge-ce {
    width: auto !important;
    min-width: 130px;
    text-align: center;
    margin-bottom: 12px !important;
    font-weight: 500;
	margin-top: 14px;
	font-size: 13px;
	padding:10px;
  }

  #col-a1 .dept {
    background: #999 !important; 
    color: #fff !important;
    border: 1px solid #999 !important;
    font-weight: 500;
	font-size: 13px;
	padding:10px;
  }

   /* 1. 조직도 전체 컨테이너를 중앙 정렬 기준점으로 설정 */
  .organization-chart, 
  .group-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* 2. 대형 부서 카드 (녹색 col-a1, 오렌지 col-a2) 공통 레이아웃 초기화 */
  #col-a1, #col-a2 {
    position: relative !important;
    width: 95% !important;
    margin: 0 0 20px 0 !important; /* 아래 박스와의 간격 */
    display: block !important;
  }

  /* 3. 하위 부서 감싸는 .sub 컨테이너 초기화 및 중앙 정렬 */
  .sub {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 자식 박스들을 가로 중앙으로 정렬 */
    position: relative !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 2px 0 !important; 
    gap: 12px !important;
  }

  /* 4. [핵심] 중앙에서 뻗어 내려오는 메인 수직 가이드선 */
  .sub::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;            /* 정확히 화면의 정중앙 세로축 */
    transform: translateX(-50%) !important;
    top: -24px !important;           /* 상위 박스 바로 밑바닥 닿는 곳부터 시작 */
    bottom: 22px !important;         /* 마지막 하위 부서의 가로선 위치에서 딱 마감 */
    width: 1px !important;
    background-color: #cbd5e1 !important; /* 연결선 색상 */
    display: block !important;
    z-index: 5 !important;
  }

  /* 5. 개별 하위 부서 박스 스타일 */
  .sub > div {
    position: relative !important;
    width: 100% !important;  
    margin: 0 auto !important;       /* 가운데 정렬 */
    display: block !important;
    flex: none !important;
  }


  #col-a1 .sub > div::before {
    content: "" !important;
    position: absolute !important;
    left: 100% !important;           /* 박스의 오른쪽 끝 테두리에서 출발 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: calc(8.82% + 1px) !important; /* 박스 우측면에서 정중앙 가이드선까지 완벽하게 도달하는 길이 계산 */
    height: 1px !important;
    background-color: #cbd5e1 !important;
    display: block !important;
    z-index: 5 !important;
  }


  #col-a2 .sub > div::before {
    content: "" !important;
    position: absolute !important;
    right: 100% !important;          /* 박스의 왼쪽 끝 테두리에서 출발 */
    left: auto !important;           /* 기존 left 값 초기화 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: calc(8.82% + 1px) !important; /* 박스 좌측면에서 정중앙 가이드선까지 완벽하게 도달하는 길이 계산 */
    height: 1px !important;
    background-color: #cbd5e1 !important;
    display: block !important;
    z-index: 5 !important;
  }

  #col-b div[style*="position:absolute"][style*="height:2px"] {
    display: none !important;
  }
  
  #col-b div[style*="absolute"] {
    display: none !important;
  }
	
   #col-g div[style*="position:absolute"][style*="height:2px"] {
    display: none !important;
  }
  
  #col-g div[style*="absolute"] {
    display: none !important;
  }
	
    #col-h div[style*="position:absolute"][style*="height:2px"] {
    display: none !important;
  }
  
  #col-h div[style*="absolute"] {
    display: none !important;
  }
	
  /* 🎯 모바일 푸터 레이아웃 완벽 일치 */
  footer { padding: 28px 16px 16px !important; }
  .footer-top { flex-direction: column; gap: 16px; }
  .footer-info { font-size: 16px; color: var(--text); line-height: 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-inner { padding: 0 14px; }
  .footer-family { margin-top: 20px; }
} /* 💡 768px 미디어쿼리를 닫아주는 중괄호 배치 완료 */

@media (min-width: 769px) {
  .green-arm .hbar,
  .orange-arm .hbar {
    width: 160px !important;
  }
}
/* ═══════════════════════════════════════════
     SMALL MOBILE (≤ 390px)  
═══════════════════════════════════════════ */
@media (max-width: 390px) {
  .footer-links { gap: 10px; }
  .footer-links a { font-size: 11px; }
}