.container {
			width: 100%;
			height: calc(100vh - 60px); /* 버튼 영역 높이를 뺀 값 */
			overflow: auto;
		}

		#diagram {
			min-width: 200%;
			min-height: 90%;
			background-color: #ffffff;
			background-image: 
				linear-gradient(rgba(114, 103, 245, 0.1) 1px, transparent 1px),
				linear-gradient(90deg, rgba(114, 103, 245, 0.1) 1px, transparent 1px);
			background-size: 20px 20px;
			position: relative;
		}

		#buttons {
			height: 60px; /* 버튼 영역 높이 */
			padding: 10px;
			background-color: #f8f9fa;
			border-top: 1px solid #dee2e6;
		}

		#addNode {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28px;
			box-shadow: 0 4px 8px rgba(0,0,0,0.2);
			position:absolute;
			width: 50px; 
			height: 50px; 
			z-index: 1000;
			bottom: 30px;
			left: 350px;
		}
		#addNode:hover {
			transform: scale(1.1);
			transition: transform 0.2s;
		}


		/* 나머지 스타일은 그대로 유지 */
        .node {
            font-size: 0.85rem;
            position: absolute;
            border-radius: 0.3rem;
            border: 2px solid;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
        }
        .node-text {
            background-color: #7267f5;
            border-color: #5549e3;
            width: 60px;
            height: 60px;
            font-size: 24px;
        }
        .node-llm {
            background-color: #64c5eb;
            border-color: #4da8cc;
            width: 250px;
            padding: 10px;
            color: #333333;
            flex-direction: column;
            align-items: stretch;
        }
        .node-switch {
			background-color: #f75c84;
			border-color: #e54b70;
            width: 60px;
            height: 60px;
			font-size: 18px;
			position: relative;  /* 추가 */
			padding: 10px;  /* 추가 */
		}
        .node-api {
			background-color: #2ecc71 ;
			border-color: #229954;
            width: 60px;
            height: 60px;
			font-size: 18px;
			padding: 10px;  /* 추가 */
		}
		.node-docsRetriever {
			background-color: #ffc107;
			border-color: #cc9a05;
			width: 250px;
			height: 80px;  /* 높이를 조금 늘렸습니다 */
			font-size: 14px;  /* 폰트 크기를 조금 줄였습니다 */
			padding: 10px;
			display: flex;
			align-items: center;
		}

		.node-docsRetriever .node-content {
			display: flex;
			width: 100%;
			height: 100%;
		}

		.node-docsRetriever .node-icon {
			width: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #fff;
		}

		.node-docsRetriever .node-inputs {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10px;
		}

		.node-docsRetriever select,
		.node-docsRetriever input {
			width: 100%;
			margin-bottom: 5px;
		}

		.node-docsRetriever select {
			height: 30px;
			padding: 2px 5px;
		}

		.node-docsRetriever input {
			height: 30px;
			padding: 2px 5px;
		}
		
		.node-sheetRetriever {
			background-color: #4caf50;
			border-color: #357c38;
			width: 250px;
			height: 80px;  /* 높이를 조금 늘렸습니다 */
			font-size: 14px;  /* 폰트 크기를 조금 줄였습니다 */
			padding: 10px;
			display: flex;
			align-items: center;
		}

		.node-sheetRetriever .node-content {
			display: flex;
			width: 100%;
			height: 100%;
		}

		.node-sheetRetriever .node-icon {
			width: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #fff;
		}

		.node-sheetRetriever .node-inputs {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10px;
		}

		.node-sheetRetriever select,
		.node-sheetRetriever input {
			width: 100%;
			margin-bottom: 5px;
		}

		.node-sheetRetriever select {
			height: 30px;
			padding: 2px 5px;
		}

		.node-sheetRetriever input {
			height: 30px;
			padding: 2px 5px;
		}


		.node .add-socket-btn {
            font-size: 0.8rem;
			display: none;
			position: absolute;
			right: -35px;
		    top: calc(50% - 12px); /* 50%에서 12px 위로 이동 */
			width: 24px;  /* 버튼 너비 축소 */
			height: 24px; /* 버튼 높이 축소 */
			border-radius: 50%;
			color: #7267f5;
			background: rgba(255, 255, 255, 0.7); /* 투명도 있는 흰 배경 */
			cursor: pointer;
			font-size: 16px;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			border: none; /* 불필요한 테두리 제거 */
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); /* 더 부드러운 그림자 */
            padding: 0.25rem 0.5rem;
		}


		/* 노드에 마우스를 올리거나 버튼에 마우스를 올릴 때 보이도록 */
		.node:hover .add-socket-btn,
		.node .add-socket-btn:hover {
			display: flex;
		}



		
		
        .node-header {
            font-size: 0.9rem;
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .node-header i {
            margin-right: 5px;
        }
        .form-select, .form-control {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
            background-color: rgba(255, 255, 255, 0.9);
            margin-bottom: 8px;
            height: auto;
        }
        #buttons {
            margin-top: 20px;
        }
        #buttons button {
            margin-right: 10px;
        }
		
		
		
		.node-type-btn {
			display: flex;
			align-items: center;
			font-size: 1.1rem;
			padding: 15px;
		}

		.provider-logo {
			width: 32px;
			height: 32px;
			object-fit: contain;
		}

		.node-type-btn i {
			width: 32px;
			height: 32px;
			font-size: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.node-header i {
			font-size: 1.1rem; /* 아이콘 크기 */
			line-height: 1; /* 아이콘 수직 정렬 조정 */
		}

		.node-header span {
			font-size: 1rem; /* 텍스트 크기 */
			line-height: 1; /* 텍스트의 수직 정렬 조정 */
		}


		/* 휴지통 버튼 스타일링 */
		.node-delete {
			position: absolute;
			top: -24px; /* 필요에 따라 조정 */
			left: 50%;
			transform: translateX(-50%);
			display: none; /* 기본적으로 숨김 */
			cursor: pointer;
			border-radius: 50%;
			color: #999;
			width: 24px; /* 컨테이너 너비 */
			height: 24px; /* 컨테이너 높이 */
			align-items: center; /* 수직 중앙 정렬 */
			justify-content: center; /* 수평 중앙 정렬 */
		}

		.node-delete i {
			font-size: 14px; /* 아이콘 크기 조절 */
		}

		/* 마우스 호버 시 휴지통 버튼 표시 */
		.node:hover .node-delete,
		.node-delete:hover {
			display: flex; /* display: block 대신 flex로 변경 */
		}
		
		/* Ensure endpoints are above connectors */
		.jtk-endpoint {
			position: relative; /* Required for z-index to take effect */
			z-index: 1000;
		}

		/* Ensure connectors are below endpoints */
		.jtk-connector {
			position: relative; /* Required for z-index to take effect */
			z-index: 500;
		}

		/* 노드 콘텐츠를 상대적으로 위치시키기 위해 position 설정 */
		.node-content {
			position: relative;
		}



.tribute-container {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    max-height: 300px;
    overflow-y: auto;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.tribute-container::-webkit-scrollbar {
    width: 8px;
}

.tribute-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}

.tribute-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
}

.tribute-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.tribute-container ul {
    padding: 0;
    margin: 0;
}

/* 선택 시 */
.tribute-container li.highlight {
    background: #7267f5 !important;
	color:#FFF !important;
}

.tribute-container ul {
    background: #FFF !important;
}

.tribute-container li {
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    list-style-type: none;
}

.tribute-container li:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.tribute-container li:hover {
    background-color: #f7f9fc;
}

.tribute-container .highlight {
    background-color: #e8f0fe;
    color: #1a73e8;
}

.tribute-container .selected,
.tribute-container .selected .highlight {
    background-color: #1a73e8;
    color: white;
}