@media (min-width: 768px) {
	/* org_chart.css 파일 수정 */
	
	.is-pc .node-label {
		padding-left:28px !important;
	}
	/* 조직도 전체 컨테이너에 수평 스크롤 적용 */
	.tree-view-root {
	    /* 기존 스타일 유지 */
	    padding: 3px; 
	    border: 1px solid #dee2e6; /* .border, .rounded 대신 직접 정의 */
	    border-radius: 0.25rem;
	    
	    /* ⭐ [핵심 수정] 수평 스크롤 활성화 */
	    overflow-x: auto; 
	    
	    /* 모바일 뷰포트에서 세로 스크롤을 막지 않도록 width: 100%만 설정 */
	    width: 100%; 
	}
	/* TreeView 기본 스타일 */
	.tree-view-root ul {
	    /* HTML 기본 목록 스타일 제거 */
	    list-style: none;
	    padding-left: 0;
	}
	
	/* ------------------------------------------- */
	/* 1. 수평 구조 및 중앙 정렬 (피라미드 시뮬레이션의 핵심) */
	/* ------------------------------------------- */
	
	/* 최상위 레벨을 중앙에 배치하기 위한 래퍼 */
	.top-level-wrapper {
	    display: flex;
	    justify-content: center;
	    align-items: flex-start;
	    flex-direction: column; 
	    width: 100%;
	}
	
	/* 각 레벨(ul)은 flex 컨테이너가 되어 li를 수평으로 배치합니다. */
	.tree-level {
	    padding-left: 0 !important;
	    display: flex; 
	    justify-content: center; /* 노드들을 중앙에 정렬 */
	    flex-wrap: wrap; /* 공간 부족 시 다음 줄로 넘김 */
	    margin: 10px 0;
	    position: relative; /* 연결선 기준점 */
	    width: 100%; /* 상위 래퍼를 따름 */
	}
	
	/* 개별 노드 (li): 수직으로 쌓이고 중앙 정렬됩니다. */
	.tree-node {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding: 0 15px; /* 노드 간 수평 간격 */
	    margin: 0;
	    position: relative;
	    list-style: none; 
	}
	
	/* ------------------------------------------- */
	/* 2. 노드 라벨 (카드) 디자인 */
	/* ------------------------------------------- */
	
	/* 노드 라벨: 카드 스타일 */
	.node-label {
	    padding: 10px 15px; 
	    cursor: pointer;
	    user-select: none;
	    display: flex;
	    align-items: flex-start; /* 내용이 여러 줄일 때 상단 정렬 */
	    transition: background-color 0.15s;
	
	    /* 카드 스타일 유지 */
	    border: 1px solid #ddd;
	    border-radius: 4px; 
	    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
	    margin: 10px 0; 
	    
	    /* ⭐ [핵심] width: 260px; 제거! */
	    /* ⭐ [추가] tree-node 내부 공간의 90%를 사용 (유동적) */
	    min-width: 180px; /* 최소 너비 제한 (너무 작아지는 것 방지) */
	    max-width: 300px; /* 최대 너비 제한 */
	    height: auto; /* ⭐ [핵심] 내용이 넘치면 높이가 자동으로 늘어남 */
	    text-align:left;
	}
	/* 호버 시 스타일 */
	.node-label:hover {
	    background-color: #f0f8ff;
	    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
	}
	
	/* 부서 노드 스타일 */
	.is-dept .node-label {
	    background-color: #f4f9ff; 
	    border-color: #d8e6f2;
	    font-weight: bold;
	}
	
	/* ------------------------------------------- */
	/* 3. 연결선 시뮬레이션 (CSS Connectors) */
	/* ------------------------------------------- */
	
	/* A. 하위 레벨 전체를 감싸는 children-wrapper */
	.children-wrapper {
	    position: relative;
	    width: 100%;
	    justify-content: center;
	    margin-top: 0px; 
	    /*display:none;*/
	    /* ⭐ [수정 완료] display: none; 제거. 이제 기본적으로 하위 레벨이 보입니다. */
	}
	
	/* 부모 노드 카드(li) 아래에서 하위 레벨(tree-level)로 내려오는 수직선 */
	.children-wrapper::before {
	    content: '';
	    position: absolute;
	    top: -10px; 
	    left: 50%;
	    transform: translateX(-50%);
	    width: 2px;
	    height: 10px; 
	    background: #ccc;
	}
	
	/* B. 하위 노드들을 수평으로 연결하는 수평선 */
	.tree-level::before {
	    content: '';
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 2px;
	    background: #ccc;
	    z-index: -1;
	}
	/* ⭐ [핵심 추가] 최상위 tree-level::before만 제거 */
	.tree-view-root > .top-level-wrapper > .tree-level::before {
	    display: none;
	}
	/* C. 각 자식 노드에서 수평선으로 연결되는 수직선 */
	.tree-node::before {
	    content: '';
	    position: absolute;
	    top: 0; 
	    left: 50%;
	    transform: translateX(-50%);
	    width: 2px;
	    height: 10px; 
	    background: #ccc;
	}
	.tree-view-root > .top-level-wrapper > .tree-level > .tree-node:first-child::before {
	    display: none;
	}
	/* ------------------------------------------- */
	/* 4. 토글 및 아이콘 스타일 */
	/* ------------------------------------------- */
	
	/* 토글 아이콘 (펼쳐진 상태에 따라 회전) */
	.toggle-icon {
	    transition: transform 0.2s;
	}
	
	/* 펼쳐진 상태 (기본 상태)에서는 90도 회전 */
	.node-label.expanded .toggle-icon {
	    transform: rotate(90deg);
	}
	
	/* 아이콘 스타일 */
	.bi-diagram-2-fill {
	    color: #007bff;
	}
	
	.bi-person-circle {
	    color: #28a745;
	}
}