ninegrid2 6.1427.0 → 6.1429.0

package/dist/bundle.cjs.js

@@ -10996,7 +10996,7 @@ class ninegrid {
 		NUM_10000	: "10000",
 	}
 
-    static version = "6.1427.0";
+    static version = "6.1429.0";
 
     static options = {
 		confirm : {

package/dist/bundle.esm.js

@@ -10992,7 +10992,7 @@ class ninegrid {
 		NUM_10000	: "10000",
 	}
 
-    static version = "6.1427.0";
+    static version = "6.1429.0";
 
     static options = {
 		confirm : {

package/dist/css/_common.css

@@ -0,0 +1,11 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:root {
+	--font-size: 12px;
+	--font-family: "Noto Sans KR", sans-serif;
+	--color: #333;
+}

package/dist/css/ai.css

@@ -0,0 +1,609 @@
+@keyframes collapse {
+	0% { width: 320px; transform: translateX(0); }
+	100% { width: 0px; transform: translateX(100%); }
+}
+
+@keyframes expand {
+	0% { width: 0px; transform: translateX(100%); }
+	100% { width: 320px; transform: translateX(0); }
+}
+
+@keyframes slideFade {
+	0% { transform: translateY(-20px); opacity: 0; }
+	100% { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes zoomIn {
+	0% { transform: scale(0.9); opacity: 0; }
+	100% { transform: scale(1); opacity: 1; }
+}
+@keyframes zoomOut {
+	0% { transform: scale(1); opacity: 1; }
+	100% { transform: scale(0.9); opacity: 0; }
+}
+
+@keyframes slideLeft {
+	0% { transform: translateX(100%); opacity: 0; }
+	100% { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideRight {
+	from { transform: translateX(0); opacity: 1;  }
+	to { transform: translateX(100%); opacity: 0; }
+}
+
+:host(nx-ai-container) {
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 320px;
+	background: #f9f9f9;
+	z-index: 999;
+	opacity: 0.99;
+	animation: expand 0.1s ease-in-out forwards;
+	border-left: 1px solid #eee;
+	box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.3); /* ✅ 퍼지는 그림자 */
+
+	.expand-icon {
+		display: none;
+	}
+
+	.wrapper {
+		height: 100%;
+		display: flex;
+		overflow: hidden;
+	}
+
+	.menu {
+		z-index: 10;
+		width: 32px;
+		background: #ccc;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.collapse-icon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 32px;
+		cursor: pointer;
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>');
+	}
+
+	.menu-filter {
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z"/></svg>');
+	}
+
+	.menu-general {
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/></svg>');
+	}
+
+	.menu-db {
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6-.097 1.016-.417 2.13-.771 2.966-.079.186.074.394.273.362 2.256-.37 3.597-.938 4.18-1.234A9 9 0 0 0 8 15"/></svg>');
+	}
+
+	.menu-setting {
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/></svg>');
+	}
+
+	.menu-icon {
+		display: flex;
+		/* align-content: space-between; */
+		justify-content: center;
+		align-items: center;
+		height: 32px;
+	}
+	.menu-icon.active {
+		--border-right: 4px solid #999;
+		background-color: #c0c0c0;
+		--filter: brightness(170%);
+	}
+
+	.settings {
+		display: none;
+		position: absolute;
+		background: #fff;
+		left: 0;
+		right: 30px;
+		top: 0;
+		bottom: 0;
+		justify-content: center;
+		align-items: center;
+		opacity: 0;
+		transform: translateX(100%);
+		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+	}
+
+	.settings.expand {
+		display: flex;
+		animation: slideLeft 0.3s ease-out forwards;
+	}
+
+	.container {
+		height: 100%;
+		display: flex;
+		--background: white;
+		width: 100%;
+		flex-direction: column;
+
+		.head {
+			width: 100%;
+			height: 64px;
+			background: #f0f0f0;
+			--border: 1px solid #ccc;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			padding-left: 16px;
+
+			.logo {
+				position: relative;
+				width: 70px;
+				height: 18px;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: auto;
+				background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="fin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 140 35" style="enable-background:new 0 0 140 35;" xml:space="preserve"><g><g fill="darkgray"><path d="M131.73,34.14l-80.24,0c-3.91,0-7.1-3.18-7.11-7.1l2.52,0c0,2.53,2.06,4.58,4.59,4.58l80.24,0 c2.53,0,4.59-2.06,4.59-4.59v-8.26c0-2.53-2.06-4.59-4.59-4.59l-29.75,0v-2.52l29.75,0c3.92,0,7.11,3.19,7.11,7.11v8.26 C138.84,30.95,135.65,34.14,131.73,34.14z"/> </g> <g fill="dodgerblue"> <path d="M11.96,0.86L11.96,0.86H8.73h0l0,0L1.16,21.02h3.6l1.93-5.4H14l1.93,5.4h3.6L11.96,0.86L11.96,0.86z M12.84,12.38H7.85l2.5-6.99L12.84,12.38z"/> <path d="M24.28,7.88V5.54h-3.24v15.48h3.24v-8.28c0-0.01,0.01-0.02,0.01-0.02c0-0.05-0.01-0.1-0.01-0.16 c0-2.29,1.74-4.14,3.88-4.14c0.54,0,1.05,0.12,1.52,0.33c0-0.95,0-1.9,0-2.85c-0.43-0.26-1.07-0.54-1.86-0.54 C26.27,5.36,25.13,6.14,24.28,7.88z"/> <path d="M37.6,18.5c-0.83,0-1.33-0.63-1.42-1.44h-0.02V8.42h2.88V5.54h-2.88V1.22L32.92,2.3v3.24H30.4v2.88h2.52v9.18 c0,1.51,0.89,2.82,2.18,3.42c0.49,0.23,1.03,0.36,1.6,0.36c1.06,0,2.01-0.44,2.7-1.14v-2.82h-0.02 C38.52,18.31,38.16,18.5,37.6,18.5z"/> <path d="M53.8,24.26c-1.32-0.44-2.88-3.6-2.88-3.6l-0.5-1.17l6.22-13.95h-3.73l-4.23,9.89l-4.19-9.8h-3.73l6.18,13.86 l1.74,3.89l0.07,0.16h0.01c0.08,0.16,0.15,0.31,0.23,0.45c1.02,1.77,3.37,4.54,7.69,2.92V23.6C55.96,24.26,54.82,24.6,53.8,24.26z "/> <path d="M67.66,6.69c-1.09-0.89-2.41-1.42-3.82-1.42c-3.8,0-6.88,3.77-6.88,8.41c0,4.64,3.08,8.41,6.88,8.41 c1.41,0,2.72-0.52,3.82-1.41c-0.03,1.51-0.8,2.93-2.11,3.68c-0.87,0.5-1.86,0.79-2.92,0.79c-1.98,0-3.74-0.64-4.86-2.19v3.47 c1.39,1.22,3.22,1.97,5.22,1.97c1.75,0,3.37-0.57,4.68-1.53c1.96-1.44,3.24-3.77,3.24-6.39V5.54h-3.24V6.69z M67.66,14.09v0.88 c-0.5,2.11-1.96,3.65-3.69,3.65c-2.14,0-3.87-2.34-3.87-5.22s1.73-5.22,3.87-5.22c1.73,0,3.19,1.53,3.69,3.65V14.09z"/> <path d="M83.32,6.26c-1.51-0.96-3.21-0.91-3.78-0.9c-0.4,0.01-1.6,0.06-2.7,0.54c-2.29,1-3.96,3.24-4.13,7.49 c0,0.05,0,0.1,0,0.16c0,4.52,3.3,8.19,7.38,8.19c1.95,0,3.72-0.84,5.04-2.21v-3.28c-1.35,1.6-3.27,2.61-5.4,2.61 c-0.18,0-0.36-0.01-0.54-0.02c-1.87-0.48-3.24-1.99-3.24-3.78c0-0.12,0.01-0.24,0.02-0.36c0.01-0.11,0.03-0.23,0.05-0.34 c0,0,0,0,0,0h8.85h1.03h0.31v-2.07c0-0.27-0.02-0.54-0.05-0.81C86.13,11.09,85.91,7.9,83.32,6.26z M82.76,11.48h-0.44h-3.74h-2.42 c0.33-1.26,1.41-3.42,3.48-3.29C82.6,8.19,82.77,11.35,82.76,11.48z"/> <path d="M100.25,9.87c0,0,0-0.01,0-0.01c-0.08-0.41-0.18-0.8-0.28-1.17c-0.54-1.77-1.65-2.62-2.78-3.01 c-1.69-0.58-3.42-0.11-3.42-0.11l0,0c-1.23,0.2-2.16,0.98-2.88,2.46v-2.5h-3.24v15.84h3.24v-8.48c0-0.01,0.01-0.02,0.01-0.02 c0-0.05-0.01-0.1-0.01-0.16c0-2.29,1.74-4.14,3.88-4.14l0.02,0c1.01,0,1.9,0.68,2.16,1.66c0.16,0.6,0.22,1.23,0.24,1.72v0.79 c0,0.04,0,0.06,0,0.06l0,0v8.57h3.24v-8.3v-1.32C100.42,11.13,100.37,10.49,100.25,9.87z"/> </g> <g fill="darkgray"> <path d="M109.24,22.46c-1.12-0.84-1.61-0.89-2.16-1.44c-0.12-0.12-0.2-0.4-0.11-0.64c0.19-0.54,1.29-0.75,2.09-0.51 c0.35,0.1,0.66,0.26,0.91,0.44v-1.19c-0.23-0.18-0.73-0.53-1.44-0.62c-0.26-0.03-1.04-0.13-1.8,0.36 c-0.19,0.12-0.7,0.49-0.95,1.17c-0.08,0.21-0.21,0.56-0.13,0.99c0.1,0.49,0.43,0.81,0.72,1.08c0.39,0.36,0.8,0.57,1.08,0.72 c0.21,0.12,0.8,0.43,1.08,0.72c0.23,0.23,0.4,0.41,0.42,0.69c0,0.05,0.02,0.26-0.09,0.44c-0.36,0.58-1.65,0.34-1.78,0.32 c-0.65-0.13-1.12-0.46-1.42-0.73l-0.02,0.01v1.52c0.39,0.24,1.16,0.65,2.16,0.64c0.37-0.01,0.9-0.02,1.44-0.36 c0.12-0.08,0.45-0.3,0.72-0.72c0.12-0.19,0.36-0.56,0.36-1.08c0-0.52-0.23-0.88-0.36-1.08C109.83,22.97,109.65,22.76,109.24,22.46 z"/> <path d="M113.68,20.66c-0.51,0-0.99,0.19-1.38,0.52v-0.52h-1.08v7.92h1.08v-2.77c0.39,0.33,0.87,0.52,1.38,0.52 c1.32,0,2.4-1.27,2.4-2.83S115.01,20.66,113.68,20.66z M113.64,25.15c-0.7,0-1.27-0.7-1.34-1.58v-0.35 c0.07-0.89,0.64-1.58,1.34-1.58c0.75,0,1.35,0.79,1.35,1.76C114.99,24.37,114.38,25.15,113.64,25.15z"/> <path d="M119.22,20.56c0,0-1.34-0.26-2.27,0.56v1.32c0,0,2.23-1.9,2.67,0.07c-1.8-0.31-2.67,0.81-2.67,0.81 c-1.29,1.57,0.09,2.55,0.09,2.55c0.96,0.74,2.15,0.1,2.6-0.2l0,0.44h1.17v-3.72C120.81,22.38,120.92,20.83,119.22,20.56z M118.73,25.15c-1.31,0.17-1.09-0.78-1.09-0.78c0.19-0.97,1.5-0.89,1.99-0.83l0,0.91C119.3,25.08,118.73,25.15,118.73,25.15z"/> <path d="M123.81,20.66c-1.48,0-2.33,1.25-2.33,2.79s0.84,2.79,2.33,2.79c0.54,0,1.04-0.17,1.46-0.45l0.07-0.05l0-1.11 c-0.3,0.32-0.72,0.53-1.18,0.53c-0.91,0-1.65-0.77-1.65-1.71c0-0.94,0.74-1.71,1.65-1.71c0.47,0,0.89,0.21,1.19,0.53l0-1.11 c-0.14-0.1-0.28-0.18-0.43-0.26C124.58,20.75,124.2,20.66,123.81,20.66z"/> <path d="M130.53,22.77c-0.01-0.13-0.08-1.24-0.98-1.8c-0.52-0.33-1.11-0.31-1.31-0.31c-0.14,0-0.55,0.02-0.93,0.19 c-0.79,0.34-1.37,1.12-1.43,2.59c0,0.02,0,0.04,0,0.05c0,1.56,1.14,2.83,2.55,2.83c0.67,0,1.28-0.29,1.74-0.76v-1.13 c-0.47,0.55-1.13,0.9-1.86,0.9c-0.06,0-0.13,0-0.19-0.01c-0.65-0.16-1.12-0.69-1.12-1.31c0-0.04,0-0.08,0.01-0.12 c0-0.04,0.01-0.08,0.02-0.12c0,0,0,0,0,0h3.06h0.36h0.11v-0.72C130.55,22.96,130.54,22.87,130.53,22.77z M129.21,22.77h-1.29 h-0.84c0.12-0.44,0.49-1.18,1.2-1.14c1.03,0,1.08,1.09,1.08,1.14H129.21z"/> </g> </g> </svg>');
+			}
+		}
+
+		.foot {
+			margin-bottom: 32px;
+			width: 100%;
+			height: 200px;
+			--background: #f0f0f0;
+			display: flex;
+			textarea {
+				width: 100%;
+				height: 100%;
+				margin: 4px;
+				outline: none;
+				border: 1px solid #ccc;
+				border-radius: 8px;
+				resize: none;
+				padding: 8px;
+			}
+		}
+	}
+}
+
+:host(nx-ai-container.collapse) {
+	width: 0px;
+	animation: collapse 0.1s ease-in-out forwards;
+	box-shadow: unset;
+
+	.expand-icon {
+		position: absolute;
+		width: 48px;
+		height: 40px;
+		bottom: 32px;
+		left: -48px;
+		background: white;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-top-left-radius: 18px;
+		border-bottom-left-radius: 18px;
+		cursor: pointer;
+		box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.3); /* ✅ 퍼지는 그림자 */
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+		background-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" fill="green" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5" viewBox="-0.17090198558635983 0.482230148717937 41.14235318283891 40.0339509076386"><text x="-9999" y="-9999">ChatGPT</text><path d="M37.532 16.87a9.963 9.963 0 0 0-.856-8.184 10.078 10.078 0 0 0-10.855-4.835A9.964 9.964 0 0 0 18.306.5a10.079 10.079 0 0 0-9.614 6.977 9.967 9.967 0 0 0-6.664 4.834 10.08 10.08 0 0 0 1.24 11.817 9.965 9.965 0 0 0 .856 8.185 10.079 10.079 0 0 0 10.855 4.835 9.965 9.965 0 0 0 7.516 3.35 10.078 10.078 0 0 0 9.617-6.981 9.967 9.967 0 0 0 6.663-4.834 10.079 10.079 0 0 0-1.243-11.813zM22.498 37.886a7.474 7.474 0 0 1-4.799-1.735c.061-.033.168-.091.237-.134l7.964-4.6a1.294 1.294 0 0 0 .655-1.134V19.054l3.366 1.944a.12.12 0 0 1 .066.092v9.299a7.505 7.505 0 0 1-7.49 7.496zM6.392 31.006a7.471 7.471 0 0 1-.894-5.023c.06.036.162.099.237.141l7.964 4.6a1.297 1.297 0 0 0 1.308 0l9.724-5.614v3.888a.12.12 0 0 1-.048.103l-8.051 4.649a7.504 7.504 0 0 1-10.24-2.744zM4.297 13.62A7.469 7.469 0 0 1 8.2 10.333c0 .068-.004.19-.004.274v9.201a1.294 1.294 0 0 0 .654 1.132l9.723 5.614-3.366 1.944a.12.12 0 0 1-.114.01L7.04 23.856a7.504 7.504 0 0 1-2.743-10.237zm27.658 6.437l-9.724-5.615 3.367-1.943a.121.121 0 0 1 .113-.01l8.052 4.648a7.498 7.498 0 0 1-1.158 13.528v-9.476a1.293 1.293 0 0 0-.65-1.132zm3.35-5.043c-.059-.037-.162-.099-.236-.141l-7.965-4.6a1.298 1.298 0 0 0-1.308 0l-9.723 5.614v-3.888a.12.12 0 0 1 .048-.103l8.05-4.645a7.497 7.497 0 0 1 11.135 7.763zm-21.063 6.929l-3.367-1.944a.12.12 0 0 1-.065-.092v-9.299a7.497 7.497 0 0 1 12.293-5.756 6.94 6.94 0 0 0-.236.134l-7.965 4.6a1.294 1.294 0 0 0-.654 1.132l-.006 11.225zm1.829-3.943l4.33-2.501 4.332 2.5v5l-4.331 2.5-4.331-2.5V18z"/></svg>');
+	}
+}
+
+
+:host(nx-ai-message) {
+	display: flex;
+	justify-content: flex-start;
+	padding: 5px;
+	flex-direction: column;
+
+	.chat-message {
+		max-width: 70%;
+		border-radius: 8px;
+		font-size: 14px;
+		background-color: #fff;
+		color: black;
+		align-self: flex-start;
+		text-align: left;
+		position: relative;
+		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+		text-overflow: ellipsis;
+		padding: 8px 16px;
+		display: flex;
+		align-items: center;
+
+		div.message {
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
+			overflow: hidden;
+			padding: 0;
+			flex-grow: 1;
+			/* 줄바꿈 강제 적용 */
+			/**word-wrap: break-word;*/ /* 긴 단어를 줄바꿈 */
+			overflow-wrap: anywhere; /* 텍스트 길이에 따라 자동 줄바꿈 */
+			white-space: normal; /* 공백 처리 */
+		}
+
+		span.more {
+			right: 4px;
+			bottom: 0px;
+			font-size: 9px;
+			font-weight: 700;
+
+			a {
+				position: relative;
+				color: green;
+				text-decoration: none;
+			}
+
+			a::after {
+				content: "";
+				position: absolute;
+				left: 0;
+				bottom: -2px;
+				width: 100%;
+				height: 2px;
+				background-color: green;
+				transform: scaleX(0);
+				transition: transform 0.3s ease-in-out;
+			}
+
+			a:hover::after {
+				transform: scaleX(1);
+			}
+		}
+	}
+
+	.grid {
+		margin-top: 8px;
+	}
+
+	.chat-menu {
+		display: flex;
+		justify-content: space-between; /* 좌우 정렬 */
+		align-items: center; /* 세로 중앙 정렬 */
+		width: 100%;
+		margin-top: 2px;
+
+		.left-menu{
+			display: flex;
+			gap: 4px;
+
+			.filter.disabled, .database.disabled {
+				pointer-events: none;
+				color: #ccc;
+			}
+
+			.filter, .database, .excel, .maximize {
+				margin-left: 0;
+				cursor: pointer;
+				color: #999;
+				width: 16px;
+				height: 16px;
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: auto;
+			}
+
+			.filter svg {
+				color: #999;
+			}
+
+			.filter:hover, .database:hover, .excel:hover, .maximize:hover {
+				color: green;
+			}
+
+			.filter {
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/></svg>');
+			}
+			.database {
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/></svg>');
+			}
+			.excel {
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5zM6.472 15.29a1.2 1.2 0 0 1-.111-.449h.765a.58.58 0 0 0 .254.384q.106.073.25.114.143.041.319.041.246 0 .413-.07a.56.56 0 0 0 .255-.193.5.5 0 0 0 .085-.29.39.39 0 0 0-.153-.326q-.152-.12-.462-.193l-.619-.143a1.7 1.7 0 0 1-.539-.214 1 1 0 0 1-.351-.367 1.1 1.1 0 0 1-.123-.524q0-.366.19-.639.19-.272.527-.422.338-.15.777-.149.457 0 .78.152.324.153.5.41.18.255.2.566h-.75a.56.56 0 0 0-.12-.258.6.6 0 0 0-.247-.181.9.9 0 0 0-.369-.068q-.325 0-.513.152a.47.47 0 0 0-.184.384q0 .18.143.3a1 1 0 0 0 .405.175l.62.143q.326.075.566.211a1 1 0 0 1 .375.358q.135.222.135.56 0 .37-.188.656a1.2 1.2 0 0 1-.539.439q-.351.158-.858.158-.381 0-.665-.09a1.4 1.4 0 0 1-.478-.252 1.1 1.1 0 0 1-.29-.375m-2.945-3.358h-.893L1.81 13.37h-.036l-.832-1.438h-.93l1.227 1.983L0 15.931h.861l.853-1.415h.035l.85 1.415h.908L2.253 13.94zm2.727 3.325H4.557v-3.325h-.79v4h2.487z"/></svg>');
+			}
+			.maximize {
+				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707m4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707m0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707m-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707"/></svg>');
+			}
+		}
+	}
+}
+
+
+:host(nx-ai-ing-message) {
+	display: flex;
+	justify-content: flex-start;
+	padding: 0;
+
+	.chat-message {
+		padding: 0px 8px;
+		color: #999;
+		align-self: flex-start;
+		text-align: left;
+		position: relative;
+		font-size: 32px;
+		font-weight: bold;
+	}
+}
+
+
+:host(nx-ai-my-message) {
+	display: flex;
+	justify-content: flex-end;
+	padding: 5px;
+
+	.chat-message {
+		max-width: 70%;
+		padding: 8px 16px;
+		border-radius: 8px;
+		font-size: 14px;
+		background-color: #fef01b;
+		text-align: left;
+		color: #333;
+		align-self: flex-end;
+		position: relative;
+		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+	}
+}
+
+:host(nx-ai-progress-message) {
+	display: flex;
+	justify-content: flex-start;
+	padding: 5px;
+	flex-direction: column;
+
+	.chat-message.progress-message {
+		max-width: 80%;
+		border-radius: 8px;
+		font-size: 14px;
+		background-color: #fff;
+		color: black;
+		align-self: flex-start;
+		text-align: left;
+		position: relative;
+		box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15);
+		padding: 8px 16px; /* 버블 자체의 패딩 */
+	}
+
+	.progress-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		--font-size: 12px;
+	}
+
+	.progress-item {
+		display: flex;
+		align-items: center; /* 번호, 텍스트, 점을 세로 중앙 정렬 */
+		margin-bottom: 5px;
+		color: #999; /* 기본 텍스트 색상 */
+		font-size: 1em; /* 부모 폰트 사이즈(14px)를 따르도록 */
+		line-height: 1.4; /* 가독성을 위해 줄 간격 추가 */
+	}
+
+	.progress-item:last-child {
+		margin-bottom: 0;
+	}
+
+	/* 번호 스타일 */
+	.progress-item .step-number {
+		--font-weight: bold;
+		margin-right: 5px; /* 번호와 텍스트 사이 간격 */
+		color: #999; /* 번호 색상 */
+	}
+
+	/* 텍스트 내용 */
+	.progress-item .text {
+		--flex-grow: 1; /* 텍스트가 공간을 채우도록 */
+		white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
+	}
+
+	/* 진행 중 점 애니메이션 */
+	.progress-item .animated-dots {
+		width: 20px; /* 점 공간 확보 */
+		text-align: left; /* 점이 왼쪽에서 시작되도록 */
+		font-weight: bold;
+	}
+
+	/* completed 상태 */
+	.progress-item.completed {
+		color: #333; /* 완료된 텍스트 색상 */
+		--font-weight: bold; /* 완료 시 굵게 */
+	}
+	.progress-item.completed .animated-dots::after {
+		content: '✓'; /* 체크마크 */
+		margin-left: 5px; /* 체크마크와 텍스트 사이 간격 */
+		color: #28a745;
+		font-size: 1.0em; /* 체크마크 크기 */
+		font-weight: bold;
+	}
+
+	.progress-item.completed .step-number {
+		color: #333; /* 번호 색상 */
+	}
+
+	/* pending 상태에만 애니메이션 점 표시 */
+	.progress-item.pending .animated-dots {
+		/* JS로 내용이 채워지므로 별도의 CSS 애니메이션은 필요 없음 */
+	}
+}
+
+
+:host(nx-ai-chat) {
+	width: 100%;
+	height: 100%;
+	overflow: scroll;
+}
+
+
+
+:host(nx-ai-settings) {
+	z-index: 9;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+	position: absolute;
+	background: #fff;
+	left: 0;
+	right: 30px;
+	top: 48px;
+	bottom: 0;
+	--opacity: 0;
+	padding-left: 16px;
+	padding-right: 16px;
+	gap: 0;
+	--transform: translateX(100%);
+	--transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+	transition: transform 0.3s ease-out;
+
+	.line {
+		font-size: 12px;
+		display: flex;
+	}
+
+	.line:first-of-type {
+		--margin-top: 32px;
+	}
+
+	.subject {
+		font-weight: 700;
+		height: 24px;
+		margin-top: 32px;
+	}
+
+	.contents {
+		--margin-left: 16px;
+		width: 100%;
+		gap: 32px;
+	}
+
+	.analyze {
+		font-weight: 400;
+		input[type="number"]::-webkit-inner-spin-button,
+		input[type="number"]::-webkit-outer-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+		input[type="number"] {
+			width: 32px;
+			text-align: center;
+			margin-left: 4px;
+			margin-right: 4px;
+		}
+		input[type="checkbox"] {
+			margin-left: 0;
+		}
+	}
+
+	label {
+		display: flex;
+		align-items: center;
+
+		input {
+			margin-bottom: 2px;
+		}
+	}
+
+	input[type="text"], input[type="number"] {
+		outline: none;
+		border-radius: 4px;
+		width: 100%;
+		height: 26px;
+		border: 1px solid #b1b2c8;
+		padding: 0 4px;
+		--margin-top: 8px;
+		color: #666;
+	}
+
+	select {
+		outline: none;
+		border-radius: 4px;
+		width: 100%;
+		height: 26px;
+		border: 1px solid #b1b2c8;
+		padding: 0 4px;
+		--margin-top: 8px;
+		color: #666;
+	}
+}
+
+:host(nx-ai-settings.expand) {
+	animation: slideLeft 0.3s ease-out forwards;
+}
+:host(nx-ai-settings:not(.expand)) {
+	animation: slideRight 0.3s ease-out forwards;
+}
+
+
+:host(ide-ai-loading-tips) {
+	/* ... (기존 스타일 유지) ... */
+
+	.chat-message.loading-tips-message {
+		/* ... (기존 스타일 유지) ... */
+		padding-bottom: 8px; /* 이미지 공간을 위해 하단 패딩 조정 */
+	}
+
+	.tip-content {
+		/* ... (기존 스타일 유지) ... */
+	}
+
+	.tip-label {
+		/* ... (기존 스타일 유지) ... */
+	}
+
+	.current-tip {
+		/* ... (기존 스타일 유지) ... */
+		margin-bottom: 10px; /* 팁 텍스트와 이미지 사이 간격 */
+	}
+
+	.tip-image-container {
+		width: 100%; /* 컨테이너 너비 */
+		max-height: 150px; /* 이미지 컨테이너 최대 높이 설정 (조정 가능) */
+		overflow: hidden; /* 이미지가 컨테이너를 벗어나지 않도록 */
+		display: flex; /* 이미지를 중앙 정렬하기 위해 flex 사용 */
+		justify-content: center; /* 가로 중앙 정렬 */
+		align-items: center; /* 세로 중앙 정렬 */
+		background-color: #f0f0f0; /* 이미지 배경색 (선택 사항) */
+		border-radius: 4px;
+		margin-top: 5px; /* 팁 텍스트와 이미지 컨테이너 사이 간격 */
+		display: none; /* 초기에는 숨김, JS에서 활성화 */
+	}
+
+	.tip-image {
+		max-width: 100%; /* 컨테이너 너비에 맞춤 */
+		max-height: 100%; /* 컨테이너 높이에 맞춤 */
+		object-fit: contain; /* 이미지가 잘리지 않고 비율 유지 */
+		border-radius: 4px; /* 이미지 모서리 둥글게 */
+		display: none; /* 초기에는 숨김, JS에서 활성화 */
+	}
+
+	/* 로딩 스피너 애니메이션 */
+	@keyframes spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+}
+