.org-chart { max-width: 1400px; margin: 50px auto; padding: 20px; position: relative; }

/* 중앙 수직선 */
.org-chart::before { content: ''; position: absolute; top: 80px; left: 50%; width: 2px; height: calc(100% - 200px); background: #ddd; z-index: 0; }
.org-chart .level { position: relative; text-align: center; margin-bottom: 40px; }
.org-chart .node { position: relative; z-index: 1; background: #fff; padding: 10px; }
.org-chart .content { padding: 20px 30px; border-radius: 5px; color: white; display: inline-block; font-weight: bold; min-width: 200px; box-shadow: 0 3px 6px rgba(0,0,0,0.1); }

/* 이사회 레벨 스타일 */
.org-chart .level.director-level { position: relative; text-align: center; margin-bottom: 60px; width: 90%; margin-left: auto; margin-right: auto; }
.org-chart .level.director-level .node.auditor { position: absolute; right: 10%; top: 0; }

/* 감사로 향하는 선 - 가로선 */
.org-chart .level.director-level::after { content: ''; position: absolute; top: 35px; right: 15%; width: 15%; height: 2px; background-color: #ddd; }

/* 색상 스타일 */
.org-chart .purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.org-chart .green { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.org-chart .blue { background: linear-gradient(135deg, #3498db, #2980b9); }
.org-chart .gray { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }

/* 팀 레벨 스타일 */
.org-chart .level.team-level { display: flex; justify-content: space-between; width: 90%; margin: 60px auto 0; position: relative; }

/* 팀 레벨 상단 연결선 */
.org-chart .level.team-level::before { content: ''; position: absolute; top: -30px; left: 110px; right: 110px; height: 2px; background: #ddd; }

/* 각 팀 노드 스타일 */
.org-chart .level.team-level .node { position: relative; }

/* 팀 노드 상단 연결선 */
.org-chart .level.team-level .node::before { content: ''; position: absolute; top: -30px; left: 50%; width: 2px; height: 30px; background: #ddd; transform: translateX(-50%); }

/* 섹션 타이틀 스타일 */
.section-title { margin: 70px auto 40px; padding: 30px 40px; background: #fff; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); color: #2c3e50; font-size: 1.4em; font-weight: 600; position: relative; display: flex; align-items: center; max-width: 1400px; }
.section-title::before { content: ''; width: 6px; height: 35px; background: linear-gradient(to bottom, #8e44ad, #2980b9); position: absolute; left: 20px; border-radius: 3px; }

/* 표 컨테이너 */
.table-container { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); padding: 40px; margin: 0 auto 70px; max-width: 1400px; position: relative; overflow: hidden; }
.table-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, #8e44ad, #2980b9); }

/* 표 스타일 */
.staff-table { width: 100%; border-collapse: separate; border-spacing: 0; }

/* 테이블 헤더 */
.staff-table th { background: #f8f9fa; color: #2c3e50; font-weight: 600; padding: 25px 30px; text-align: left; font-size: 1.1em; letter-spacing: 0.5px; border-bottom: 2px solid #eef2f7; position: relative; }
.staff-table th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.staff-table th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

/* 테이블 셀 */
.staff-table td { padding: 25px 30px; color: #34495e; line-height: 1.6; vertical-align: top; border-bottom: 1px solid #eef2f7; transition: all 0.3s ease; }

/* 테이블 행 */
.staff-table tr { transition: all 0.3s ease; }
.staff-table tr:last-child td { border-bottom: none; }
.staff-table tr:hover { background: linear-gradient(to right, rgba(142,68,173,0.02), rgba(41,128,185,0.02)); transform: translateX(5px); }

/* 업무 리스트 스타일 */
.task-list { margin: 0; padding: 0; list-style: none; }
.task-list li { position: relative; padding-left: 22px; margin-bottom: 12px; line-height: 1.5; color: #34495e; }
.task-list li:last-child { margin-bottom: 0; }
.task-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #8e44ad; border-radius: 50%; }

/* 연락처 스타일 */
.contact { display: inline-flex; align-items: center; background: linear-gradient(to right, #f8f9fa, #ffffff); padding: 10px 20px; border-radius: 8px; color: #34495e; font-family: 'Consolas', monospace; font-size: 0.95em; border: 1px solid #eef2f7; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: all 0.3s ease; }
.contact:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* 반응형 스타일 추가 */
@media screen and (max-width: 1440px) {
    .org-chart, .table-container, .section-title { margin-left: 20px; margin-right: 20px; }
    .org-chart .level.team-level { gap: 80px; padding: 0 60px; }
}

@media screen and (max-width: 1024px) { 
    .org-chart .level.team-level { gap: 50px; padding: 0 40px; }
    .org-chart .content { min-width: 180px; padding: 15px 25px; }
    .table-container { padding: 30px; }
    .staff-table th, .staff-table td { padding: 20px 25px; }
    .section-title { padding: 25px 35px; font-size: 1.3em; }
}

@media screen and (max-width: 768px) {
    .org-chart::before { height: calc(100% - 120px); }
    .org-chart .level.director-level { display: flex; flex-direction: column; align-items: center; gap: 30px; }
    .org-chart .level.director-level .node.auditor { position: relative; right: auto; top: auto; }
    .org-chart .level.director-level::after { display: none; }
    .org-chart .level.team-level { flex-direction: column; align-items: center; padding: 0; gap: 40px; }
    .org-chart .level.team-level::before { left: 50%; width: 2px; height: calc(100% + 40px); top: -30px; transform: translateX(-50%); }
    .section-title { padding: 20px 30px; font-size: 1.2em; margin: 50px auto 30px; }
    .table-container { padding: 20px; margin-bottom: 50px; border-radius: 15px; }
    .staff-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .staff-table th, .staff-table td { padding: 15px 20px; font-size: 0.95em; white-space: nowrap; }
    .task-list { white-space: normal; }
    .contact { padding: 8px 15px; font-size: 0.9em; }
}

@media screen and (max-width: 480px) {
    .org-chart .content { min-width: 160px; padding: 12px 20px; font-size: 0.9em; }
    .section-title { padding: 15px 25px; font-size: 1.1em; }
    .section-title::before { height: 25px; }
    .staff-table th, .staff-table td { padding: 12px 15px; font-size: 0.9em; }
    .task-list li { font-size: 0.9em; margin-bottom: 8px; }
}