@charset "UTF-8";@keyframes slide-up {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-spin {
  from {
    stroke-dashoffset: 31.416;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes theme-transition {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes theme-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes theme-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.toast-message-wrapper {
  position: fixed;
  top: 50%;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 1000;
  transform: translateY(-50%);
}

#toast-message {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 16px 24px;
  max-width: 80%;
  white-space: pre-line;
  text-align: center;
  width: fit-content;
  font-size: 14px;
  line-height: 1.25;
  color: #ffffff;
  background-color: var(--kis-color-gray80);
  border-radius: 8px;
  box-shadow: 0 20px 20px 0 rgba(68, 68, 68, 0.2);
}

.fade-in-up {
  animation: fade-in 0.25s forwards, slide-up 0.25s forwards;
}

.fade-out-down {
  animation: fade-out 0.25s forwards, slide-down 0.25s forwards;
}.error-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background-color: #f8f9fa;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
}
.error-fallback__content {
  max-width: 500px;
  text-align: center;
  background: white;
  padding: 3rem 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.error-fallback__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.error-fallback__icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}
.error-fallback__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}
.error-fallback__message {
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
}
.error-fallback__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.error-fallback__button {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.error-fallback__button--primary {
  background-color: #007bff;
  color: white;
}
.error-fallback__button--primary:hover {
  background-color: #0056b3;
}
.error-fallback__button--primary:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}
.error-fallback__button--secondary {
  background-color: #6c757d;
  color: white;
}
.error-fallback__button--secondary:hover {
  background-color: #545b62;
}
.error-fallback__button--secondary:focus {
  outline: 2px solid #6c757d;
  outline-offset: 2px;
}
.error-fallback__details {
  margin-top: 2rem;
  text-align: left;
}
.error-fallback__details summary {
  cursor: pointer;
  color: #007bff;
  font-weight: 500;
  margin-bottom: 1rem;
}
.error-fallback__details summary:hover {
  text-decoration: underline;
}
.error-fallback__error-stack {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  padding: 1rem;
  font-size: 0.875rem;
  color: #dc3545;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  user-select: none;
  outline: none;
  width: 100%;
}
.custom-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.custom-button--default {
  padding: 12px 24px;
  font-size: 14px;
}
.custom-button--small {
  padding: 4px 4px;
  font-size: 12px;
  width: fit-content;
}
.custom-button--medium {
  padding: 14px 28px;
  font-size: 16px;
}
.custom-button--large {
  padding: 16px 32px;
  font-size: 18px;
}
.custom-button--red.custom-button--solid {
  background-color: var(--button-red-primary);
  color: white;
}
.custom-button--red.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-red-hover);
}
.custom-button--red.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-red-active);
}
.custom-button--red.custom-button--outline {
  background-color: transparent;
  color: var(--button-red-primary);
  border: 1px solid var(--button-red-border, var(--button-red-primary));
}
.custom-button--red.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-red-hover);
}
.custom-button--red.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-red-primary);
  border-width: 1px;
}
.custom-button--red.custom-button--ghost {
  background-color: transparent;
  color: var(--button-red-primary);
}
.custom-button--red.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-red-light);
}
.custom-button--red.custom-button--ghost:active:not(:disabled) {
  background-color: #fecaca;
}
.custom-button--red.custom-button--text {
  background-color: transparent;
  color: var(--button-red-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--red.custom-button--text:active:not(:disabled) {
  color: var(--button-red-active);
}
.custom-button--yellow.custom-button--solid {
  background-color: var(--button-yellow-primary);
  color: white;
}
.custom-button--yellow.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-yellow-hover);
}
.custom-button--yellow.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-yellow-active);
}
.custom-button--yellow.custom-button--outline {
  background-color: transparent;
  color: var(--button-yellow-primary);
  border: 1px solid var(--button-yellow-border, var(--button-yellow-primary));
}
.custom-button--yellow.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-yellow-hover);
}
.custom-button--yellow.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-yellow-primary);
  border-width: 1px;
}
.custom-button--yellow.custom-button--ghost {
  background-color: transparent;
  color: var(--button-yellow-primary);
}
.custom-button--yellow.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-yellow-light);
}
.custom-button--yellow.custom-button--ghost:active:not(:disabled) {
  background-color: #fef3c7;
}
.custom-button--yellow.custom-button--text {
  background-color: transparent;
  color: var(--button-yellow-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--yellow.custom-button--text:active:not(:disabled) {
  color: var(--button-yellow-active);
}
.custom-button--purple.custom-button--solid {
  background-color: var(--button-purple-primary);
  color: white;
}
.custom-button--purple.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-purple-hover);
}
.custom-button--purple.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-purple-active);
}
.custom-button--purple.custom-button--outline {
  background-color: transparent;
  color: var(--button-purple-primary);
  border: 1px solid var(--button-purple-border, var(--button-purple-primary));
}
.custom-button--purple.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-purple-hover);
}
.custom-button--purple.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-purple-primary);
  border-width: 1px;
}
.custom-button--purple.custom-button--ghost {
  background-color: transparent;
  color: var(--button-purple-primary);
}
.custom-button--purple.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-purple-light);
}
.custom-button--purple.custom-button--ghost:active:not(:disabled) {
  background-color: #f3e8ff;
}
.custom-button--purple.custom-button--text {
  background-color: transparent;
  color: var(--button-purple-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--purple.custom-button--text:active:not(:disabled) {
  color: var(--button-purple-active);
}
.custom-button--blue.custom-button--solid {
  background-color: var(--button-blue-primary);
  color: white;
}
.custom-button--blue.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-blue-hover);
}
.custom-button--blue.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-blue-active);
}
.custom-button--blue.custom-button--outline {
  background-color: transparent;
  color: var(--button-blue-primary);
  border: 1px solid var(--button-blue-border, var(--button-blue-primary));
}
.custom-button--blue.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-blue-hover);
}
.custom-button--blue.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-blue-primary);
  border-width: 1px;
}
.custom-button--blue.custom-button--ghost {
  background-color: transparent;
  color: var(--button-blue-primary);
}
.custom-button--blue.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-blue-light);
}
.custom-button--blue.custom-button--ghost:active:not(:disabled) {
  background-color: #dbeafe;
}
.custom-button--blue.custom-button--text {
  background-color: transparent;
  color: var(--button-blue-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--blue.custom-button--text:active:not(:disabled) {
  color: var(--button-blue-active);
}
.custom-button--skyblue.custom-button--solid {
  background-color: var(--button-skyblue-primary);
  color: white;
}
.custom-button--skyblue.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-skyblue-hover);
}
.custom-button--skyblue.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-skyblue-active);
}
.custom-button--skyblue.custom-button--outline {
  background-color: transparent;
  color: var(--button-skyblue-primary);
  border: 1px solid var(--button-skyblue-border, var(--button-skyblue-primary));
}
.custom-button--skyblue.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-skyblue-hover);
}
.custom-button--skyblue.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-skyblue-primary);
  border-width: 1px;
}
.custom-button--skyblue.custom-button--ghost {
  background-color: transparent;
  color: var(--button-skyblue-primary);
}
.custom-button--skyblue.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-skyblue-light);
}
.custom-button--skyblue.custom-button--ghost:active:not(:disabled) {
  background-color: #cffafe;
}
.custom-button--skyblue.custom-button--text {
  background-color: transparent;
  color: var(--button-skyblue-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--skyblue.custom-button--text:active:not(:disabled) {
  color: var(--button-skyblue-active);
}
.custom-button--black.custom-button--solid {
  background-color: var(--button-black-primary);
  color: white;
}
.custom-button--black.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-black-hover);
}
.custom-button--black.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-black-active);
}
.custom-button--black.custom-button--outline {
  background-color: transparent;
  color: var(--button-black-primary);
  border: 1px solid var(--button-black-border, var(--button-black-primary));
}
.custom-button--black.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-black-hover);
}
.custom-button--black.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-black-primary);
  border-width: 1px;
}
.custom-button--black.custom-button--ghost {
  background-color: transparent;
  color: var(--button-black-primary);
}
.custom-button--black.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-black-light);
}
.custom-button--black.custom-button--ghost:active:not(:disabled) {
  background-color: #f3f4f6;
}
.custom-button--black.custom-button--text {
  background-color: transparent;
  color: var(--button-black-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--black.custom-button--text:active:not(:disabled) {
  color: var(--button-black-active);
}
.custom-button--white.button--solid {
  background-color: var(--button-white-primary);
  color: var(--button-white-text);
  border: 1px solid var(--button-white-border);
}
.custom-button--white.button--solid:hover:not(:disabled) {
  background-color: var(--button-white-hover);
}
.custom-button--white.button--solid:active:not(:disabled) {
  background-color: var(--button-white-active);
}
.custom-button--white.button--outline {
  background-color: transparent;
  color: var(--button-white-primary);
  border: 2px solid var(--button-white-primary);
}
.custom-button--white.button--outline:hover:not(:disabled) {
  background-color: var(--button-white-primary);
  color: var(--button-white-text);
}
.custom-button--white.button--outline:active:not(:disabled) {
  background-color: var(--button-white-active);
}
.custom-button--white.button--ghost {
  background-color: transparent;
  color: var(--button-white-primary);
}
.custom-button--white.button--ghost:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
}
.custom-button--white.button--ghost:active:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.2);
}
.custom-button--white.button--hover {
  background-color: transparent;
  color: var(--button-white-primary);
}
.custom-button--white.button--hover:hover:not(:disabled) {
  background-color: rgba(208, 208, 208, 0.2);
}
.custom-button--white.button--hover:active:not(:disabled) {
  background-color: rgba(186, 185, 185, 0.3);
}
.custom-button--white.button--text {
  background-color: transparent;
  color: var(--button-white-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--white.button--text:active:not(:disabled) {
  opacity: 0.8;
}
.custom-button--green.custom-button--solid {
  background-color: var(--button-green-primary);
  color: white;
}
.custom-button--green.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-green-hover);
}
.custom-button--green.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-green-active);
}
.custom-button--green.custom-button--outline {
  background-color: transparent;
  color: var(--button-green-primary);
  border: 1px solid var(--button-green-border, var(--button-green-primary));
}
.custom-button--green.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-green-hover);
}
.custom-button--green.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-green-primary);
  border-width: 1px;
}
.custom-button--green.custom-button--ghost {
  background-color: transparent;
  color: var(--button-green-primary);
}
.custom-button--green.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-green-light);
}
.custom-button--green.custom-button--ghost:active:not(:disabled) {
  background-color: #d1fae5;
}
.custom-button--green.custom-button--text {
  background-color: transparent;
  color: var(--button-green-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--green.custom-button--text:active:not(:disabled) {
  color: var(--button-green-active);
}
.custom-button--gray.custom-button--solid {
  background-color: var(--button-gray-primary);
  color: white;
}
.custom-button--gray.custom-button--solid:hover:not(:disabled) {
  background-color: var(--button-gray-hover);
}
.custom-button--gray.custom-button--solid:active:not(:disabled) {
  background-color: var(--button-gray-active);
}
.custom-button--gray.custom-button--outline {
  background-color: transparent;
  color: var(--button-gray-primary);
  border: 1px solid var(--button-gray-border, var(--button-gray-primary));
}
.custom-button--gray.custom-button--outline:hover:not(:disabled) {
  background-color: #f1f1f1;
  border-color: var(--button-gray-hover);
}
.custom-button--gray.custom-button--outline:active:not(:disabled) {
  background-color: #e8e8e8;
  border-color: var(--button-gray-primary);
  border-width: 1px;
}
.custom-button--gray.custom-button--ghost {
  background-color: transparent;
  color: var(--button-gray-primary);
}
.custom-button--gray.custom-button--ghost:hover:not(:disabled) {
  background-color: var(--button-gray-light);
}
.custom-button--gray.custom-button--ghost:active:not(:disabled) {
  background-color: #f3f4f6;
}
.custom-button--gray.custom-button--text {
  background-color: transparent;
  color: var(--button-gray-primary);
  padding-left: 0;
  padding-right: 0;
}
.custom-button--gray.custom-button--text:active:not(:disabled) {
  color: var(--button-gray-active);
}
[data-theme-mode=dark] .custom-button--gray.button--outline {
  background-color: transparent;
  color: var(--button-gray-primary);
  border: 1px solid var(--button-gray-border);
}
[data-theme-mode=dark] .custom-button--gray.button--outline:hover:not(:disabled) {
  background-color: var(--button-gray-light);
  border-color: var(--button-gray-hover);
}
[data-theme-mode=dark] .custom-button--gray.button--outline:active:not(:disabled) {
  background-color: var(--button-gray-light);
  border-color: var(--button-gray-primary);
}
[data-theme-mode=dark] .custom-button--gray.button--ghost {
  background-color: transparent;
  color: var(--button-gray-primary);
}
[data-theme-mode=dark] .custom-button--gray.button--ghost:hover:not(:disabled) {
  background-color: var(--button-gray-light);
}
[data-theme-mode=dark] .custom-button--gray.button--ghost:active:not(:disabled) {
  background-color: var(--button-gray-light);
}
.custom-button--full-width {
  width: 100%;
}
.custom-button--rounded {
  border-radius: 9999px;
}
.custom-button--loading {
  cursor: wait;
  pointer-events: none;
}
.custom-button--disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}
.custom-button__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.custom-button__loading-text {
  opacity: 0.8;
}
.custom-button svg,
.custom-button img {
  color: inherit;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #070b14;
  background-image: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(37, 99, 235, 0.22) 0%, transparent 55%), radial-gradient(ellipse 90% 90% at 100% 100%, rgba(59, 130, 246, 0.12) 0%, transparent 50%), linear-gradient(165deg, #0a1628 0%, #070b14 45%, #0c1220 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-clip: border-box;
}

.login-card {
  background: rgba(255, 255, 255, 0.1);
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 300px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
.logo .test-mode {
  font-size: 10px;
  color: #fff;
  font-weight: 200;
  background-color: #000;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
}

.logo img {
  width: 100px;
  height: auto;
}

.input-group {
  margin-bottom: 1rem;
  text-align: left;
}
.input-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #ccc;
}
.input-group input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #fff;
  color: #1a2b3c;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
  text-align: center;
}
.login-button:hover {
  filter: brightness(0.95);
}
.login-button:active {
  filter: brightness(0.8);
}

[data-brand=ant] .login-container {
  background-color: #070b14;
  background-image: radial-gradient(ellipse 100% 100% at 0% 0%, rgba(37, 99, 235, 0.22) 0%, transparent 55%), radial-gradient(ellipse 90% 90% at 100% 100%, rgba(59, 130, 246, 0.12) 0%, transparent 50%), linear-gradient(165deg, #0a1628 0%, #070b14 45%, #0c1220 100%);
  background-position: center;
}
[data-brand=ant] .login-card {
  background: rgb(255, 255, 255);
  padding: 60px 40px 40px 40px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.0509803922);
  text-align: center;
  width: 440px;
  border: none;
  backdrop-filter: blur(100%);
}
[data-brand=ant] .login-card .logo {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
  height: 86px;
}
[data-brand=ant] .login-card .logo .login-title {
  font-size: 20px;
  font-weight: 700;
}
[data-brand=ant] .login-card .logo img {
  width: 291px;
  height: auto;
}
[data-brand=ant] .input-group {
  margin-bottom: 16px;
}
[data-brand=ant] .input-group label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #000000;
}
[data-brand=ant] .input-group input {
  display: flex;
  height: 48px;
  min-width: 64px;
  padding: 16px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: var(--kis-radius-sm);
  border: 1px solid #bfc0c5;
  background: #fff;
  color: #000;
}
[data-brand=ant] .login-button {
  display: flex;
  width: 360px;
  height: 48px;
  min-width: 80px;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  border-radius: var(--kis-radius-sm);
  background-color: var(--kis-btn);
  margin-bottom: 0;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-White, #fff);
  text-align: center;
  font-size: var(--Font-size-Body-Reading-Large, 16px);
  font-weight: 600;
}
[data-brand=ant] .login-button:hover {
  background-color: var(--kis-btn-hover);
}
[data-brand=ant] .login-button:active {
  background-color: var(--kis-btn-active);
}
[data-brand=ant] .login-button:disabled {
  background-color: var(--kis-btn-disabled);
}

.kis-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  background-color: #070b14;
  background-image: radial-gradient(ellipse 110% 90% at 8% 12%, rgba(37, 99, 235, 0.28) 0%, transparent 52%), radial-gradient(ellipse 95% 85% at 92% 88%, rgba(96, 165, 250, 0.14) 0%, transparent 48%), radial-gradient(ellipse 70% 55% at 50% 110%, rgba(29, 78, 216, 0.12) 0%, transparent 42%), repeating-linear-gradient(-18deg, transparent 0, transparent 56px, rgba(255, 255, 255, 0.018) 56px, rgba(255, 255, 255, 0.018) 57px), linear-gradient(168deg, #0a1628 0%, #070b14 38%, #0c1520 100%);
}
.kis-login-wrap .login-area {
  display: flex;
  justify-content: space-between;
  width: 74.4791%;
  min-width: var(--kis-width-max-content);
}
.kis-login-wrap .login-area--title .title-sub {
  font-size: var(--kis-font-24);
  font-weight: 600;
  color: rgba(226, 232, 240, 0.9);
  letter-spacing: -0.02em;
}
.kis-login-wrap .login-area--title .title-main {
  margin-top: 16px;
  font-size: var(--kis-font-42);
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: -0.03em;
}
.kis-login-wrap .login-area--title .title-desc {
  margin-top: 32px;
  line-height: 1.6;
  font-size: var(--kis-font-18);
  color: rgba(186, 198, 216, 0.92);
}
.kis-login-wrap .login-area--panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 520px;
  height: 604px;
  background-color: rgba(255, 255, 255, 0.5019607843);
  border: 2px solid white;
  border-radius: var(--kis-radius-xl);
  box-shadow: 0 4px 40px 0 rgba(139, 147, 171, 0.1019607843);
  backdrop-filter: blur(30px);
}
.kis-login-wrap .login-area--panel .login-form {
  width: 75%;
}
.kis-login-wrap .login-area--panel h2 {
  text-align: center;
  font-size: var(--kis-font-32);
  font-weight: 700;
  color: var(--kis-color-font);
}
.kis-login-wrap .login-area--panel .login-input {
  margin-top: 60px;
}
.kis-login-wrap .login-area--panel .login-input input[type=text],
.kis-login-wrap .login-area--panel .login-input input[type=password] {
  padding: 0 15px;
  width: 100%;
  height: 48px;
  font-size: var(--kis-font-base);
  background-color: white;
  border: 1px solid var(--kis-color-gray50);
  border-radius: var(--kis-radius-sm);
}
.kis-login-wrap .login-area--panel .login-input input[type=text]:focus,
.kis-login-wrap .login-area--panel .login-input input[type=password]:focus {
  outline: 2px solid var(--kis-color-blue30);
  outline-offset: -2px;
}
.kis-login-wrap .login-area--panel .login-input + .login-input {
  margin-top: 16px;
}
.kis-login-wrap .login-area--panel .login-error {
  margin-top: 4px;
  line-height: 1.5;
  font-size: var(--kis-font-14);
  color: var(--kis-color-error);
}
.kis-login-wrap .login-area--panel .btn--login {
  margin-top: 24px;
  width: 100%;
  height: 56px;
  text-align: center;
  font-size: var(--kis-font-base);
  font-weight: 600;
  background-color: var(--kis-btn);
  border-radius: var(--kis-radius-sm);
  color: white;
}
.kis-login-wrap .login-area--panel .btn--login:hover {
  background-color: var(--kis-btn-hover);
}
.kis-login-wrap .login-area--panel .btn--login:active {
  background-color: var(--kis-btn-active);
}
.kis-login-wrap .login-area--panel .btn--redirect {
  background-color: var(--kis-color-blue30);
}

@media (max-width: 1296px) {
  .kis-login-wrap .login-area--panel {
    width: 420px;
    height: 504px;
  }
}
.chat-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chat-layout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: var(--color-chat-thread-panel-bg);
  width: 100%;
  min-height: 64px;
  max-height: 64px;
  border-bottom: 2px solid var(--color-border-primary);
}
.chat-layout__header-content {
  display: flex;
  flex-direction: column;
  align-items: safe flex-start;
  justify-content: safe center;
  color: var(--color-text-primary);
}
.chat-layout__header-content h3 {
  color: var(--color-text-primary);
  margin: 0;
}
.chat-layout__header-content span {
  color: var(--color-text-primary);
}
.chat-layout__header-title {
  display: flex;
  align-items: center;
}
.chat-layout__header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.chat-layout__main {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  flex: 1;
}
.chat-layout__main.bookmark-animating {
  overflow: hidden;
}
.chat-layout__footer {
  width: 100%;
  min-height: fit-content !important;
  display: flex;
  flex-direction: column;
  background-color: var(--color-page-bg) !important;
  box-sizing: border-box;
  box-shadow: 0px -8px 16px 0px rgba(0, 0, 0, 0.0392156863);
  border-top: 1px solid var(--color-border-primary);
}
.chat-layout__footer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 0px 20px;
}
.chat-layout__footer-toolbar-icon-text {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 500;
  gap: 0;
  color: var(--color-text-primary);
}
.chat-layout__footer-toolbar-icon-text-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.chat-layout__footer-toolbar-icon-text-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
}

[data-brand=ant] .chat-layout,
[data-brand=test] .chat-layout {
  position: relative;
}
[data-brand=ant] .chat-layout__header,
[data-brand=test] .chat-layout__header {
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  border-bottom: none;
  background-color: #ffffff;
  padding: 25px 20px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
}
[data-brand=ant] .chat-layout__footer,
[data-brand=test] .chat-layout__footer {
  border-top: none;
  box-shadow: none;
  height: auto;
  min-height: auto;
}
[data-brand=ant] .chat-layout__footer-toolbar,
[data-brand=test] .chat-layout__footer-toolbar {
  padding: 0;
  display: none;
}

.chat-wrapper--header {
  position: relative;
  padding: 25px 20px;
  height: 64px;
}

.chat-layout--error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.chat-layout--error .error-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding-top: 128px;
  min-width: var(--kis-width-max-content);
  background: transparent url(data:image/png;base64,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) center top/96px no-repeat;
}
.chat-layout--error .error-wrap--title, .chat-layout--error .error-wrap--desc {
  text-align: center;
}
.chat-layout--error .error-wrap--title {
  font-size: 32px;
  font-weight: 700;
  color: var(--kis-color-font);
}
.chat-layout--error .error-wrap--desc {
  line-height: 1.5;
  font-size: 16px;
  color: var(--kis-color-gray70);
}
.chat-layout--error .btn--refresh {
  display: flex;
  align-items: center;
  column-gap: 4px;
  padding: 10px 25px;
  border-color: var(--kis-color-gray80);
  border-radius: var(--kis-radius-xs);
  color: var(--kis-color-gray80);
}

.popup-layer-wrap.errer-info .popup-layer, .popup-layer-wrap.svc-info .popup-layer {
  padding: 32px 24px;
  width: 540px;
}
.popup-layer-wrap.errer-info .popup-layer--body, .popup-layer-wrap.svc-info .popup-layer--body {
  margin-top: 24px;
}
.popup-layer-wrap.errer-info .popup-layer--body .popup-info-text, .popup-layer-wrap.svc-info .popup-layer--body .popup-info-text {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.popup-layer-wrap.errer-info .popup-layer--body .popup-info-text--title, .popup-layer-wrap.errer-info .popup-layer--body .popup-info-text--desc, .popup-layer-wrap.svc-info .popup-layer--body .popup-info-text--title, .popup-layer-wrap.svc-info .popup-layer--body .popup-info-text--desc {
  text-align: center;
}
.popup-layer-wrap.errer-info .popup-layer--body .popup-info-text--title, .popup-layer-wrap.svc-info .popup-layer--body .popup-info-text--title {
  font-size: var(--kis-font-20);
  font-weight: 700;
  color: var(--kis-color-font);
}
.popup-layer-wrap.errer-info .popup-layer--body .popup-info-text--desc, .popup-layer-wrap.svc-info .popup-layer--body .popup-info-text--desc {
  line-height: 1.5;
  font-size: var(--kis-font-base);
  color: var(--kis-color-gray70);
}
.popup-layer-wrap.errer-info .popup-layer--footer .btn--full, .popup-layer-wrap.svc-info .popup-layer--footer .btn--full {
  width: 100%;
  height: 48px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--kis-color-blue30);
  border-radius: var(--kis-radius-sm);
  color: white;
}
.popup-layer-wrap.errer-info .btn-popup-close, .popup-layer-wrap.svc-info .btn-popup-close {
  width: 20px;
  height: 20px;
}
.popup-layer-wrap.errer-info .btn-popup-close svg, .popup-layer-wrap.svc-info .btn-popup-close svg {
  width: 20px;
  height: 20px;
}
.popup-layer-wrap.svc-info .popup-layer {
  width: 720px;
}
.popup-layer-wrap.svc-info .popup-layer .popup-info-text {
  row-gap: 16px;
  padding-top: 152px;
  background: transparent url(data:image/png;base64,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) center 24px/96px 96px no-repeat;
}
.popup-layer-wrap.svc-info .popup-layer .popup-info-text--title {
  font-size: var(--kis-font-32);
}
.popup-layer-wrap.svc-info .popup-layer .popup-info-text--desc {
  font-size: var(--kis-font-18);
}
.popup-layer-wrap.svc-info--footer {
  margin-top: 32px;
}

/* 원버튼 알럿(one-alert) 전용 오버라이드 */
.popup-layer-wrap.errer-info.one-alert .popup-layer--footer {
  display: flex;
  justify-content: center;
}
.popup-layer-wrap.errer-info.one-alert .popup-layer--footer .btn--full {
  width: 160px;
  height: 56px;
  font-size: 14px;
}

/* ============================
   📌 2버튼 알럿(default)
   ============================ */
/* 🔵 2 버튼 알럿 (default-alert) */
.popup-layer-wrap.errer-info.default-alert .popup-layer--footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  /* 취소 버튼 */
  /* 확인 버튼 */
}
.popup-layer-wrap.errer-info.default-alert .popup-layer--footer .btn--cancel,
.popup-layer-wrap.errer-info.default-alert .popup-layer--footer .btn--confirm {
  width: 160px; /* ← 너가 원하는 고정 크기 */
  height: 56px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--kis-radius-sm);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-layer-wrap.errer-info.default-alert .popup-layer--footer .btn--cancel {
  background-color: #fff;
  border: 1px solid var(--kis-color-gray30);
  color: var(--kis-color-gray80);
}
.popup-layer-wrap.errer-info.default-alert .popup-layer--footer .btn--confirm {
  background-color: var(--kis-color-blue30);
  border: none;
  color: #fff;
}.drawer {
  border: 1px solid var(--color-border-primary);
  border-radius: 8px;
  overflow: hidden;
}
.drawer .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  background-color: var(--color-input-bg);
  transition: background-color 0.2s;
}
.drawer .drawer-header:hover {
  background-color: var(--color-system-msg-bg);
}
.drawer .drawer-header .drawer-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}
.drawer .drawer-header .drawer-info .expand-button {
  display: flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.drawer .drawer-header .drawer-info .expand-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.drawer .drawer-header .drawer-info .expand-button svg {
  color: var(--color-text-secondary);
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease-in-out;
}
.drawer .drawer-header .drawer-info .expand-button.expanded svg {
  transform: rotate(90deg);
}
.drawer .drawer-header .drawer-info .drawer-title {
  font-weight: 500;
  color: var(--color-text-primary);
  width: 100%;
  font-size: 14px;
}
.drawer .drawer-header .drawer-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.drawer .drawer-content {
  border: 1px solid var(--color-border-primary);
  border-top: 1px solid var(--color-border-primary);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.drawer .drawer-content.expanded {
  max-height: 1000px;
  transition: max-height 0.3s cubic-bezier(0.2, 0, 0.2, 1);
}
.drawer.sub-drawer {
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--color-border-primary);
}.switch-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.switch-container .switch-label {
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}

.switch {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s ease;
}
.switch.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.switch.disabled .slider {
  cursor: not-allowed;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-input-bg);
  transition: 0.3s ease;
  border-radius: 20px;
}
.switch .slider:before {
  position: absolute;
  content: "";
  background-color: white;
  transition: 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  top: 2px;
  left: 2px;
}
.switch input:focus + .slider {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}
.switch:hover:not(.disabled) .slider {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.switch.switch-sm {
  width: 28px;
  height: 16px;
}
.switch.switch-sm .slider:before {
  height: 12px;
  width: 12px;
}
.switch.switch-sm input:checked + .slider:before {
  transform: translateX(12px);
}
.switch.switch-md {
  width: 36px;
  height: 20px;
}
.switch.switch-md .slider:before {
  height: 16px;
  width: 16px;
}
.switch.switch-md input:checked + .slider:before {
  transform: translateX(16px);
}
.switch.switch-lg {
  width: 44px;
  height: 24px;
}
.switch.switch-lg .slider:before {
  height: 20px;
  width: 20px;
}
.switch.switch-lg input:checked + .slider:before {
  transform: translateX(20px);
}
.switch.switch-primary .slider {
  background-color: var(--color-input-bg);
}
.switch.switch-primary input:checked + .slider {
  background-color: var(--color-bookmark-btn);
}
.switch.switch-success .slider {
  background-color: var(--color-input-bg);
}
.switch.switch-success input:checked + .slider {
  background-color: var(--color-bookmark-btn);
}
.switch.switch-warning .slider {
  background-color: var(--color-input-bg);
}
.switch.switch-warning input:checked + .slider {
  background-color: var(--color-bookmark-btn);
}
.switch.switch-danger .slider {
  background-color: var(--color-input-bg);
}
.switch.switch-danger input:checked + .slider {
  background-color: var(--color-bookmark-btn);
}.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-popup {
  position: fixed;
  z-index: 9999;
  text-align: center;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 200px;
  min-width: 100px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.95);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  background-color: #111827;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tooltip-popup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}
.dark .tooltip-popup {
  background-color: #1f2937;
  color: #f5f5f5;
}

.tooltip-popup.tooltip-light {
  background-color: #ffffff;
  color: #374151;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
}
.dark .tooltip-popup.tooltip-light {
  background-color: #374151;
  color: #f5f5f5;
}
.dark .tooltip-popup.tooltip-light {
  border-color: #4b5563;
}

.tooltip-popup.tooltip-dark {
  background-color: #111827;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dark .tooltip-popup.tooltip-dark {
  background-color: #1f2937;
  color: #f5f5f5;
}

.tooltip-popup.tooltip-primary {
  background-color: #3b82f6;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.dark .tooltip-popup.tooltip-primary {
  background-color: #60a5fa;
  color: #1f2937;
}

.tooltip-popup.tooltip-success {
  background-color: #10b981;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  color: #f5f5f5 !important;
}
.dark .tooltip-popup.tooltip-success {
  background-color: #34d399;
  color: #1f2937;
}

.tooltip-popup.tooltip-warning {
  background-color: #f59e0b;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.dark .tooltip-popup.tooltip-warning {
  background-color: #fbbf24;
  color: #1f2937;
}

.tooltip-popup.tooltip-danger {
  background-color: #ef4444;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.dark .tooltip-popup.tooltip-danger {
  background-color: #f87171;
  color: #1f2937;
}

.tooltip-popup.tooltip-info {
  background-color: #06b6d4;
  color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
.dark .tooltip-popup.tooltip-info {
  background-color: #22d3ee;
  color: #1f2937;
}.domain-tool {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--color-tool-panel-light-hover);
}
.domain-tool .drawer-header {
  background-color: var(--color-domain-tool-bg);
}
.domain-tool .drawer-header:hover {
  background-color: var(--color-panel-hover);
}
.domain-tool .domain-details {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex !important;
  align-items: center !important;
}
.domain-tool .domain-details .domain-icon {
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.domain-tool .domain-details .domain-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(0);
  opacity: 0.6;
}
[data-theme-mode=dark] .domain-tool .domain-details .domain-icon img {
  filter: brightness(0) saturate(100%) invert(1);
  opacity: 0.7;
}
.domain-tool .domain-details .domain-name {
  font-weight: 500;
  font-size: 14px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.domain-tool .domain-details .domain-name svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.domain-tool .domain-details .domain-name.enabled {
  color: var(--color-tool-panel-light-text);
}
.domain-tool .domain-details .domain-name.disabled {
  color: var(--color-tool-panel-light-text-secondary);
}
.domain-tool .domain-details .domain-count {
  font-size: 12px;
  color: var(--color-tool-panel-light-text-secondary);
}
.domain-tool .domain-category {
  font-size: 12px;
  color: var(--color-tool-panel-light-text-secondary);
  background-color: var(--color-domain-tool-category);
  padding: 2px 6px;
  border-radius: 4px;
}
.domain-tool .domain-functions .function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  transition: background-color 0.2s;
  border-bottom: 1px solid var(--color-tool-panel-light-hover);
}
.domain-tool .domain-functions .function-item:last-child {
  border-bottom: none;
}
.domain-tool .domain-functions .function-item:hover {
  background-color: var(--color-domain-tool-hover-bg);
}
.domain-tool .domain-functions .function-item .function-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  margin-left: 16px;
}
.domain-tool .domain-functions .function-item .function-info .function-name {
  font-weight: 500;
  font-size: 14px;
  margin-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  max-width: 200px;
}
.domain-tool .domain-functions .function-item .function-info .function-name span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.domain-tool .domain-functions .function-item .function-info .function-name.enabled {
  color: var(--color-tool-panel-light-text);
}
.domain-tool .domain-functions .function-item .function-info .function-name.disabled {
  color: var(--color-tool-panel-light-text-secondary);
}
.domain-tool .domain-functions .function-item .function-info .help-button {
  padding: 2px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}
.domain-tool .domain-functions .function-item .function-info .help-button:hover {
  background-color: var(--color-panel-hover);
}
.domain-tool .domain-functions .function-item .function-info .help-button svg {
  color: var(--color-tool-panel-light-text-secondary);
}
.domain-tool .domain-functions .function-item .function-model {
  flex-shrink: 0;
  margin-right: 8px;
  width: 80px;
  color: var(--color-default-tool-text);
}
.domain-tool .domain-functions .function-item .function-model__badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--color-domain-tool-model-badge);
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.domain-tool .domain-functions .function-item .function-model__badge.disabled {
  color: gray;
  background-color: var(--color-domain-tool-model-badge-dark);
}
.domain-tool .domain-functions .function-item .function-toggle {
  flex-shrink: 0;
}.two-depth-tool {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--color-tool-panel-light-hover);
}
.two-depth-tool .drawer-header {
  background-color: var(--color-domain-tool-bg);
}
.two-depth-tool .drawer-header:hover {
  background-color: var(--color-panel-hover);
}
.two-depth-tool .domain-details {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: flex !important;
  align-items: center !important;
}
.two-depth-tool .domain-details .domain-icon {
  margin-right: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.two-depth-tool .domain-details .domain-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(0);
  opacity: 0.6;
}
[data-theme-mode=dark] .two-depth-tool .domain-details .domain-icon img {
  filter: brightness(0) saturate(100%) invert(1);
  opacity: 0.7;
}
.two-depth-tool .domain-details .domain-name {
  font-weight: 500;
  font-size: 14px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.two-depth-tool .domain-details .domain-name svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.two-depth-tool .domain-details .domain-name.enabled {
  color: var(--color-tool-panel-light-text);
}
.two-depth-tool .domain-details .domain-name.disabled {
  color: var(--color-tool-panel-light-text-secondary);
}
.two-depth-tool .domain-details .domain-count {
  font-size: 12px;
  color: var(--color-tool-panel-light-text-secondary);
}
.two-depth-tool .domain-category {
  font-size: 12px;
  color: var(--color-tool-panel-light-text-secondary);
  background-color: var(--color-domain-tool-category);
  padding: 2px 6px;
  border-radius: 4px;
}
.two-depth-tool .domain-functions .function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  transition: background-color 0.2s;
  border-bottom: 1px solid var(--color-tool-panel-light-hover);
}
.two-depth-tool .domain-functions .function-item:last-child {
  border-bottom: none;
}
.two-depth-tool .domain-functions .function-item:hover {
  background-color: var(--color-domain-tool-hover-bg);
}
.two-depth-tool .domain-functions .function-item .function-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  margin-left: 16px;
}
.two-depth-tool .domain-functions .function-item .function-info .function-name {
  font-weight: 500;
  font-size: 14px;
  margin-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.two-depth-tool .domain-functions .function-item .function-info .function-name.enabled {
  color: var(--color-tool-panel-light-text);
}
.two-depth-tool .domain-functions .function-item .function-info .function-name.disabled {
  color: var(--color-tool-panel-light-text-secondary);
}
.two-depth-tool .domain-functions .function-item .function-info .help-button {
  padding: 2px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}
.two-depth-tool .domain-functions .function-item .function-info .help-button:hover {
  background-color: var(--color-panel-hover);
}
.two-depth-tool .domain-functions .function-item .function-info .help-button svg {
  color: var(--color-tool-panel-light-text-secondary);
}
.two-depth-tool .domain-functions .function-item .function-model {
  flex-shrink: 0;
  margin-right: 8px;
  width: 80px;
  color: var(--color-default-tool-text);
}
.two-depth-tool .domain-functions .function-item .function-model__badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--color-domain-tool-model-badge);
}
.two-depth-tool .domain-functions .function-item .function-model__badge.disabled {
  color: gray;
  background-color: var(--color-domain-tool-model-badge-dark);
}
.two-depth-tool .domain-functions .function-item .function-toggle {
  flex-shrink: 0;
}.sub-item-drawer {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--color-tool-panel-light-hover);
}
.sub-item-drawer .sub-item-drawer__content {
  max-height: 190px;
  overflow-y: auto;
}
.sub-item-drawer .drawer-header {
  background-color: var(--color-domain-tool-bg);
}
.sub-item-drawer .drawer-header:hover {
  background-color: var(--color-panel-hover);
}
.sub-item-drawer .function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  transition: background-color 0.2s;
  border-bottom: 1px solid var(--color-tool-panel-light-hover);
}
.sub-item-drawer .function-item:last-child {
  border-bottom: none;
}
.sub-item-drawer .function-item:hover {
  background-color: var(--color-domain-tool-hover-bg);
}
.sub-item-drawer .function-item .function-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  margin-left: 16px;
}
.sub-item-drawer .function-item .function-info .function-name {
  font-weight: 500;
  font-size: 14px;
  margin-right: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 2px;
}
.sub-item-drawer .function-item .function-info .function-name.enabled {
  color: var(--color-tool-panel-light-text);
}
.sub-item-drawer .function-item .function-info .function-name.disabled {
  color: var(--color-tool-panel-light-text-secondary);
}
.sub-item-drawer .function-item .function-info .help-button {
  padding: 2px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}
.sub-item-drawer .function-item .function-info .help-button:hover {
  background-color: var(--color-panel-hover);
}
.sub-item-drawer .function-item .function-info .help-button svg {
  color: var(--color-tool-panel-light-text-secondary);
}
.sub-item-drawer .function-item .function-toggle {
  flex-shrink: 0;
}.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  transition: background-color 0.2s;
  border-bottom: 1px solid var(--color-tool-panel-light-hover);
}
.function-item:last-child {
  border-bottom: none;
}
.function-item:hover {
  background-color: var(--color-domain-tool-hover-bg);
}
.function-item .function-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
  margin-left: 16px;
}
.function-item .function-info .function-name {
  font-weight: 500;
  font-size: 14px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.function-item .function-info .function-name .function-name__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.function-item .function-info .function-name.enabled {
  color: var(--color-tool-panel-light-text);
}
.function-item .function-info .function-name.disabled {
  color: var(--color-tool-panel-light-text-secondary);
}
.function-item .function-info .help-button {
  padding: 2px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s;
  flex-shrink: 0;
  height: 12px;
  width: 12px;
}
.function-item .function-info .help-button:hover {
  background-color: var(--color-panel-hover);
}
.function-item .function-info .help-button svg {
  color: var(--color-tool-panel-light-text-secondary);
}
.function-item .function-model {
  flex-shrink: 0;
  margin-right: 8px;
  width: 80px;
  color: var(--color-default-tool-text);
}
.function-item .function-model__badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: var(--color-domain-tool-model-badge);
}
.function-item .function-model__badge.disabled {
  color: gray;
  background-color: var(--color-domain-tool-model-badge-dark);
}
.function-item .function-toggle {
  flex-shrink: 0;
}.chat-tool-panel {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-tool-panel-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 0;
  transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
  letter-spacing: 0.01em;
  overflow: hidden;
  box-shadow: -4px 0 8px 0 rgba(0, 0, 0, 0.077);
  border-left: 1px solid var(--color-tool-panel-border);
  z-index: 10;
  pointer-events: none;
}
.chat-tool-panel.open {
  width: 320px;
  min-width: 320px;
  overflow: auto;
  overflow-x: hidden;
  pointer-events: auto;
}
.chat-tool-panel.closed {
  width: 0;
  min-width: 0;
  overflow: hidden;
}
.chat-tool-panel .panel-header {
  min-width: 320px;
  padding: 12px;
  border-bottom: 1px solid var(--color-tool-panel-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-tool-panel .panel-header .header-content h3 {
  font-weight: 500;
  color: var(--color-tool-panel-text);
  margin: 0;
}
.chat-tool-panel .panel-header .header-content p {
  font-size: 12px;
  color: var(--color-tool-panel-text);
  margin: 0;
}
.chat-tool-panel .panel-header .close-button {
  padding: 4px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.chat-tool-panel .panel-header .close-button:hover {
  background-color: var(--color-input-bg);
}
.chat-tool-panel .panel-header .close-button svg {
  color: var(--color-tool-panel-text);
}
.chat-tool-panel .section-title {
  font-size: 12px;
  font-weight: 500;
  padding-left: 8px;
  color: var(--color-tool-panel-text);
}
.chat-tool-panel .section-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-tool-panel__main {
  display: flex;
  flex-direction: column;
  justify-content: safe flex-start;
  height: 100%;
  min-width: 320px;
  overflow: auto;
  color: var(--color-tool-panel-text);
  letter-spacing: 0.01em;
  padding: 8px;
}
.chat-tool-panel__footer {
  height: 100% !important;
  max-height: fit-content !important;
  min-width: 320px;
  color: var(--color-tool-panel-text);
  text-transform: uppercase;
  padding: 8px;
}.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown.disabled .dropdown-trigger {
  cursor: not-allowed;
}
.dropdown .dropdown-trigger {
  cursor: pointer;
  user-select: none;
}

.dropdown-content {
  position: fixed;
  box-sizing: border-box;
  z-index: 10000;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 150px;
  overflow-y: auto;
  animation: dropdownFadeIn 0.2s ease-out;
}
[data-theme-mode=dark] .dropdown-content {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}
.dropdown-content .dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 14px;
}
.dropdown-content .dropdown-item:not(:last-child) {
  border-bottom: 1px solid #e6e6e6;
}
.dropdown-content .dropdown-item:hover:not(.disabled) {
  background-color: #f3f4f6;
}
.dropdown-content .dropdown-item.disabled .dropdown-trigger {
  cursor: not-allowed;
}
.dropdown-content .dropdown-item.nested {
  font-size: 13px;
}
[data-theme-mode=dark] .dropdown-content .dropdown-item {
  color: #d1d5db;
}
[data-theme-mode=dark] .dropdown-content .dropdown-item:not(:last-child) {
  border-bottom: 1px solid #414150;
}
[data-theme-mode=dark] .dropdown-content .dropdown-item:hover:not(.disabled) {
  background-color: #374151;
}
.dropdown-content .dropdown-item .dropdown-item-icon {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.dropdown-content .dropdown-item .dropdown-item-label {
  flex: 1;
}
.dropdown-content .dropdown-item .dropdown-item-arrow {
  margin-left: 8px;
  font-size: 10px;
  color: #9ca3af;
}
.dropdown-content .dropdown-submenu {
  display: none;
  background-color: #f9fafb;
}
[data-theme-mode=dark] .dropdown-content .dropdown-submenu {
  background-color: #111827;
}
.dropdown-content .dropdown-item:hover + .dropdown-submenu {
  display: block;
}

.small {
  width: fit-content;
  max-width: 400px;
  display: flex;
  padding: var(--Spacing-Padding-6, 12px) var(--Spacing-Padding-7, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-Gap-3, 8px);
  align-self: stretch;
}

[data-brand=ant] .model-arrow,
[data-brand=test] .model-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
[data-brand=ant] .model-arrow--hidden,
[data-brand=test] .model-arrow--hidden {
  visibility: hidden;
}
[data-brand=ant] .dropdown-content.small,
[data-brand=test] .dropdown-content.small {
  row-gap: 8px;
  padding: 15px;
  width: 100% !important;
  max-width: 320px !important;
  max-height: 304px !important;
  border: 1px solid #ebebed;
  border-radius: 16px;
  box-shadow: 8px 8px 15px 0 rgba(0, 0, 0, 0.0509803922), -8px -8px 15px 0 rgba(0, 0, 0, 0.0509803922);
}
[data-brand=ant] .dropdown-content.small .dropdown-item,
[data-brand=test] .dropdown-content.small .dropdown-item {
  display: flex;
  align-items: baseline;
  flex-direction: column;
  row-gap: 8px;
  position: relative;
  padding: 12px 44px 12px 12px !important;
  border: none !important;
  border-radius: 8px;
}
[data-brand=ant] .dropdown-content.small .dropdown-item-label,
[data-brand=test] .dropdown-content.small .dropdown-item-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--kis-color-font);
}
[data-brand=ant] .dropdown-content.small .dropdown-item-description,
[data-brand=test] .dropdown-content.small .dropdown-item-description {
  font-size: var(--kis-font-14);
  color: var(--kis-color-gray70);
}
[data-brand=ant] .dropdown-content.small .dropdown-item > svg,
[data-brand=test] .dropdown-content.small .dropdown-item > svg {
  position: absolute;
  top: calc(50% - 12px);
  right: 12px;
  width: 24px;
  height: 24px;
}
[data-brand=ant] .dropdown-content.small .dropdown-item > svg path,
[data-brand=test] .dropdown-content.small .dropdown-item > svg path {
  stroke: var(--kis-color-blue30);
}
[data-brand=ant] .dropdown-content.small .dropdown-item:hover:not(.disabled),
[data-brand=test] .dropdown-content.small .dropdown-item:hover:not(.disabled) {
  background-color: var(--kis-color-gray05);
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(1);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}.tool-panel-toggle-button__container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0px 2px 5px;
}
.tool-panel-toggle-button__icon-text {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 500;
  gap: 0;
  color: var(--color-text-primary);
}
.tool-panel-toggle-button__icon-text-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.tool-panel-toggle-button__icon-text-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
}.kis-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kis-text-secondary, #1a1d29);
  font-size: var(--kis-font-14);
  font-weight: 400;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
}
.kis-user-info__content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.kis-user-info__role {
  color: var(--kis-text-user);
  font-size: var(--kis-font-14);
  font-weight: 400;
}
.kis-user-info__divider {
  width: 16px;
  height: 16px;
}
.kis-user-info__name {
  color: var(--kis-text-user);
  font-size: var(--kis-font-14);
  font-weight: 600;
}
.kis-user-info__logout {
  display: flex;
  height: 32px;
  width: 67px;
  min-width: 64px;
  padding: var(--Spacing-Padding-3, 6px) var(--Spacing-Padding-4, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--Spacing-Gap-2, 4px);
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #bdc0c5;
  background: #fff;
  color: var(--kis-text-tertiary, #4d4f58);
  font-size: var(--kis-font-14);
  font-weight: 600;
  text-align: center;
  /* Title/M */
  font-family: var(--Typo-Font-family-Type, Pretendard);
  font-size: var(--kis-font-14);
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: var(--Typo-Font-spacing-0, 0);
}
@media (max-width: 778px) {
  .kis-user-info__role__menu-open {
    display: none;
  }
}

.kis-user-menu {
  display: flex;
  column-gap: 12px;
  position: absolute;
  top: 12px;
  right: 20px;
}
.kis-user-menu .user-menu-btn {
  background-color: #fff;
  cursor: pointer;
}
.kis-user-menu .user-menu-btn.user-id {
  display: flex;
  align-items: center;
  column-gap: 13px;
  padding-right: 16px;
  height: 40px;
  font-size: var(--kis-font-13);
}
.kis-user-menu .user-menu-btn.user-id > p {
  font-weight: 700;
  color: #232c3c;
}
.kis-user-menu .user-menu-btn.user-id > span {
  position: relative;
  color: #73757c;
}
.kis-user-menu .user-menu-btn.user-id > span::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: -7px;
  width: 1px;
  height: 10px;
  background-color: #cdcecf;
}
.kis-user-menu .user-menu-btn.user-id .drop-arrow {
  position: absolute;
  top: calc(50% - 6px);
  right: 0;
  transition: transform 200ms ease-out;
}
.kis-user-menu__list {
  position: absolute;
  top: 40px;
  right: 0;
  padding: 7px;
  width: 152px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #b3b4b9;
  border-radius: 20px;
  animation: dropdownFadeIn 200ms ease-out;
  z-index: 301;
}
.kis-user-menu__list .user-menu-btn {
  padding: 12px 8px;
  width: 100%;
  height: 38px;
  font-size: var(--kis-font-14);
  font-weight: 500;
  border-radius: 8px;
  color: #4d4f58;
}
.kis-user-menu__list .user-menu-btn:hover {
  background-color: #fafafa;
}
.kis-user-menu__box {
  position: relative;
}
.kis-user-menu__box.open .drop-arrow {
  transform: rotate(180deg);
}
.kis-user-menu .btn-custom-ai {
  display: flex;
  align-items: center;
  column-gap: 4px;
  padding-right: 16px;
  padding-left: 16px;
  height: 40px;
  font-size: var(--kis-font-14);
  font-weight: 700;
  background-color: rgba(86, 145, 255, 0.1019607843);
  border-radius: 24px;
  color: #5691ff;
}
.kis-user-menu .tooltip {
  position: absolute;
  top: 50px;
  right: 0;
  padding: 12px 64px 12px 16px;
  font-size: var(--kis-font-13);
  font-weight: 500;
  white-space: nowrap;
  background-color: #4f77ff;
  border-radius: 8px;
  color: white;
  animation: toolTipMove 1.5s ease-in-out infinite;
  z-index: 300;
}
.kis-user-menu .tooltip::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 42px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #4f77ff;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.kis-user-menu .tooltip--emoji {
  position: absolute;
  top: 10px;
  right: 44px;
  width: 15px;
  height: 15px;
}
.kis-user-menu .tooltip .btn {
  position: absolute;
  top: 9px;
  right: 16px;
}

@keyframes toolTipMove {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}.kis-header-title-container {
  display: flex;
  align-items: baseline;
  column-gap: 12px;
}
.kis-header-title {
  font-size: var(--kis-font-14);
  font-weight: 700;
  color: #1a1d29;
  margin: 0;
}@keyframes slide-up {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-spin {
  from {
    stroke-dashoffset: 31.416;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes theme-transition {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes theme-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes theme-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.agent-list {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.agent-list__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}
.agent-list__items {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.agent-list__item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  width: 100%;
  min-width: 0;
}
.agent-list__item-content .icon {
  border-radius: 9999px;
  object-fit: contain;
}
.agent-list__item-left {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}
.agent-list__item-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}
.agent-list__item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.agent-list__item-info {
  margin: 0 12px;
  min-width: 0;
  flex: 1;
}
.agent-list__item-name-container {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.agent-list__item-name {
  font-weight: 500;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.agent-list__item-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  height: 20px;
  font-size: 0.75rem;
  background-color: #fee2e2;
  color: #991b1b;
  border-radius: 9999px;
  flex-shrink: 0;
}
[data-theme-mode=dark] .agent-list__item-badge {
  background-color: #7f1d1d;
  color: #fecaca;
}
.agent-list__item-type {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.agent-list__item-count {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  min-width: 28px;
}
.agent-list__info {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.agent-list__info__loading {
  animation: spin 1s linear infinite;
}
.agent-list--collapsed {
  padding: 4px;
}
.agent-list--collapsed .agent-list__items {
  gap: 0.5rem;
}
.agent-list--collapsed .selectable-list-item__container {
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.agent-list--collapsed .selectable-list-item__container.selectable-list-item__container--selected {
  border-left: none;
  border: 2px solid var(--selectable-blue-500);
  background-color: var(--selectable-blue-50);
}
.agent-list--collapsed .agent-list__item-content {
  justify-content: center;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.agent-list--collapsed .agent-list__item-content:hover {
  background-color: var(--color-bg-hover);
}
.agent-list--collapsed .agent-list__item-content--collapsed {
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  margin: 0 auto;
}
.agent-list--collapsed .agent-list__item-content--collapsed .agent-list__item-left {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}
.agent-list--collapsed .agent-list__item-content--collapsed .agent-list__item-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-list--collapsed .agent-list__item-content--collapsed .agent-list__item-icon .agent-tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.agent-list--collapsed .agent-list__item-content--collapsed .agent-list__item-icon .agent-tooltip .tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.agent-list--collapsed .agent-list__item-content--collapsed .agent-list__item-icon .tooltip-popup {
  position: fixed !important;
  max-height: none !important;
  height: auto !important;
}

[data-brand=alpy] .agent-list__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px;
}
[data-brand=alpy] .agent-list__actions .btn-drag-drop {
  padding: 0 6px;
  text-decoration: underline;
  font-size: var(--kis-font-13);
  color: var(--kis-color-gray50);
}
[data-brand=alpy] .agent-list__items > ul {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  list-style: none;
}
[data-brand=alpy] .agent-list:not(.agent-list--collapsed).dragMode {
  position: fixed;
  top: 76px;
  left: 0;
  width: 272px;
  height: calc(100% - 76px);
  background-color: var(--kis-color-main);
  z-index: 10;
  animation: theme-transition 300ms ease;
}
[data-brand=alpy] .agent-list:not(.agent-list--collapsed).dragMode .agent-list__items {
  overflow-y: auto;
}
[data-brand=alpy] .agent-list:not(.agent-list--collapsed).dragMode .agent-list__items::-webkit-scrollbar-thumb {
  background-color: var(--kis-color-gray70);
}
[data-brand=alpy] .agent-list:not(.agent-list--collapsed).dragMode .agent-list__items::-webkit-scrollbar-thumb:hover {
  background-color: var(--kis-color-gray60);
}
[data-brand=alpy] .agent-list--none {
  display: flex;
  align-items: center;
  column-gap: 2px;
  width: 100%;
  min-height: 40px;
}
[data-brand=alpy] .agent-list--none .btn-list-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
}
[data-brand=alpy] .agent-list--none > p {
  font-size: var(--kis-font-14);
  color: white;
}
[data-brand=alpy] .agent-item {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 6px;
  min-height: 40px;
  border-radius: var(--kis-radius-sm);
  transition: background-color 200ms ease-out;
  cursor: pointer;
}
[data-brand=alpy] .agent-item--icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kis-radius-xs);
  overflow: hidden;
}
[data-brand=alpy] .agent-item--icon > img {
  width: 100%;
  height: 100%;
}
[data-brand=alpy] .agent-item--name {
  flex: 1;
  line-height: 1.1;
  font-size: var(--kis-font-14);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: black;
  overflow: hidden;
}
[data-brand=alpy] .agent-item--more {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
[data-brand=alpy] .agent-item:hover {
  background-color: #f0f6ff;
}
[data-brand=alpy] .agent-item:hover .agent-item--more {
  opacity: 1;
}
[data-brand=alpy] .selected .agent-item {
  background-color: #f0f6ff;
}

[data-brand=ant] .agent-list,
[data-brand=test] .agent-list {
  padding: 0;
}
[data-brand=ant] .agent-list__info,
[data-brand=test] .agent-list__info {
  padding: 10px;
}
[data-brand=ant] .agent-list__item-icon,
[data-brand=test] .agent-list__item-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
}
[data-brand=ant] .agent-list__title,
[data-brand=test] .agent-list__title {
  display: flex;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 16px var(--Spacing-Padding-7, 16px) var(--Spacing-Padding-6, 4px) var(--Spacing-Padding-7, 16px);
  align-items: center;
  gap: var(--Spacing-Gap-3, 8px);
  align-self: stretch;
  margin-bottom: 0;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Title-Medium, 14px);
  font-weight: 600;
  color: var(--kis-menu-title, #fff);
}
[data-brand=ant] .agent-list__items,
[data-brand=test] .agent-list__items {
  padding: 0 10px;
  overflow-y: hidden;
  overflow-x: hidden;
  gap: var(--Spacing-Gap-3, 4px);
}
[data-brand=ant] .agent-list__item-content,
[data-brand=test] .agent-list__item-content {
  display: flex;
  height: 42px;
  min-width: 42px;
  padding: var(--Spacing-Padding-2, 6px) var(--Spacing-Padding-4, 6px) var(--Spacing-Padding-2, 6px) var(--Spacing-Padding-2, 6px);
  align-items: center;
  align-self: stretch;
}
[data-brand=ant] .agent-list__item-left,
[data-brand=test] .agent-list__item-left {
  column-gap: 8px;
}
[data-brand=ant] .agent-list__item-info,
[data-brand=test] .agent-list__item-info {
  margin: 0;
}

.agent-list__actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 10px;
}
.agent-list__actions .btn-drag-drop {
  padding: 0 6px;
  text-decoration: underline;
  font-size: var(--kis-font-13);
  color: var(--kis-color-gray50);
}
.agent-list__items > ul {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  list-style: none;
}
.agent-list:not(.agent-list--collapsed).dragMode {
  position: fixed;
  top: 76px;
  left: 0;
  width: 272px;
  height: calc(100% - 76px);
  background-color: var(--kis-color-main);
  z-index: 10;
  animation: theme-transition 300ms ease;
}
.agent-list:not(.agent-list--collapsed).dragMode .agent-list__items {
  overflow-y: auto;
}
.agent-list:not(.agent-list--collapsed).dragMode .agent-list__items::-webkit-scrollbar-thumb {
  background-color: var(--kis-color-gray70);
}
.agent-list:not(.agent-list--collapsed).dragMode .agent-list__items::-webkit-scrollbar-thumb:hover {
  background-color: var(--kis-color-gray60);
}
.agent-list--none {
  display: flex;
  align-items: center;
  column-gap: 2px;
  width: 100%;
  min-height: 40px;
}
.agent-list--none .btn-list-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
}
.agent-list--none > p {
  font-size: var(--kis-font-14);
  color: white;
}

.agent-item {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 6px;
  min-height: 40px;
  border-radius: var(--kis-radius-sm);
  transition: background-color 200ms ease-out;
  cursor: pointer;
}
.agent-item--icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kis-radius-xs);
  overflow: hidden;
}
.agent-item--icon > img {
  width: 100%;
  height: 100%;
}
.agent-item--name {
  flex: 1;
  line-height: 1.1;
  font-size: var(--kis-font-14);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  overflow: hidden;
}
.agent-item--more {
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.agent-item:hover {
  background-color: #3b475c;
}
.agent-item:hover .agent-item--more {
  opacity: 1;
}

.selected .agent-item {
  background-color: #3b475c;
}.kis-agent-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.kis-agent-panel--header {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 32px;
  padding: 16px 10px 0;
  width: 100%;
}
.kis-agent-panel--header .agent-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  width: 100%;
}
.kis-agent-panel--header .agent-header-title .btn-lnb-menu,
.kis-agent-panel--header .agent-header-title .btn-lnb-search {
  border: none;
}
.kis-agent-panel__buttons {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  width: 100%;
}
.kis-agent-panel__buttons.menu-closed {
  padding: 0;
}
.kis-agent-panel__buttons__item {
  display: flex;
  align-items: center;
}
.kis-agent-panel__buttons__item__icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kis-agent-panel__buttons__item p {
  color: var(--kis-menu-text);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
.kis-agent-panel__buttons__item:first-child {
  color: var(--kis-menu-text);
}
.kis-agent-panel.menu-closed {
  width: 0px !important;
  min-width: 0px !important;
  max-width: 0px !important;
  overflow: hidden;
}
.kis-agent-panel.menu-closed .kis-agent-panel__header__title {
  justify-content: center;
  padding: 0;
  gap: 0;
}
.kis-agent-panel.menu-closed .kis-agent-panel__brand {
  width: 0 !important;
  overflow: hidden;
}
.kis-agent-panel.menu-closed .kis-agent-panel__buttons__item {
  padding: 0 !important;
}
.kis-agent-panel.menu-closed .kis-agent-panel__buttons__item button {
  justify-content: center !important;
}
.kis-agent-panel__buttons-menu-closed .kis-agent-panel__buttons__item {
  padding: 0 !important;
}
.kis-agent-panel__buttons-menu-closed .kis-agent-panel__buttons__item button {
  justify-content: center !important;
}
.kis-agent-panel__more-button-wrapper {
  padding: 0 8px 8px 8px;
}
.kis-agent-panel__more-button {
  width: 100%;
  height: 20px;
  border: none;
  cursor: pointer;
  padding: 0px 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  font-size: 14px;
  font-style: normal;
  line-height: 150%; /* 21px */
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  border-radius: 20px;
  background-color: transparent;
  color: var(--kis-menu-sub-title, #909599);
}
.kis-agent-panel__more-button * {
  color: var(--kis-menu-sub-title);
}
.kis-agent-panel__more-button p {
  overflow: hidden;
  color: var(--kis-menu-title, #fff);
  text-align: center;
  text-overflow: ellipsis;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: var(--Typo-Font-spacing-0, 0);
}
.kis-agent-panel__more-button__close {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kis-agent-panel__more-button__more {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-new-chat {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding: 8px 6px;
  width: 100%;
  border: none;
  border-radius: var(--kis-radius-sm);
}

.kis-agent-panel__buttons:not(.kis-agent-panel__buttons-menu-closed) .btn-new-chat:hover {
  background-color: #3b475c;
}

.btn.btn-svc-more {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  padding-top: 4px;
  font-size: var(--kis-font-13);
  border: none;
  color: var(--kis-color-gray60);
}
.btn.btn-svc-more svg {
  transition: transform 300ms ease-out;
}
.btn.btn-svc-more.fold svg {
  transform: rotate(180deg);
}.popup {
  min-width: 120px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  background-color: #fff;
  border: 1px solid #ebebed;
  border-radius: 16px;
  box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.0509803922), -8px -8px 15px 0px rgba(0, 0, 0, 0.0509803922);
  z-index: 1000;
}
.popup .chat-actions-menu__list {
  padding: 31px 15px;
  min-width: 370px;
}
.popup .chat-actions-menu__list .chat-menu-title {
  position: relative;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
}
.popup .chat-actions-menu__list .chat-menu-title::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 1px;
  background-color: #e1e2e5;
}
.popup .chat-actions-menu__list .chat-menu-title > p {
  padding-right: 30px;
  padding-bottom: 25px;
}
.popup .chat-actions-menu__list .chat-menu-title .btn-book-mark {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.popup .chat-actions-menu__list .chat-menu-title .btn-book-mark.marked path {
  fill: #ffc567;
}
.popup .chat-actions-menu__list > ul {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  padding-top: 16px;
  list-style: none;
}
.popup .chat-actions-menu__list .chat-actions-menu__item {
  padding: 12px;
  width: 100%;
  font-size: 16px;
  background-color: transparent;
  border-radius: 8px;
  border: none;
  color: #4d4f58;
  cursor: pointer;
}
.popup .chat-actions-menu__list .chat-actions-menu__item:hover {
  background-color: #fafafa;
}.rename-layer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.rename-layer {
  background: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  width: 320px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  animation: fadeIn 0.25s ease;
}
.rename-layer__title {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}
.rename-layer__desc {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}
.rename-layer__input-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rename-layer__input-box input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.rename-layer__input-box input:focus {
  outline: none;
  border-color: #888;
}
.rename-layer__input-box button {
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.rename-layer__input-box button:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.rename-layer__input-box button.success {
  background: #4caf50;
}
.rename-layer__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.rename-layer__actions .rename-layer__cancel {
  border: none;
  background: #f0f0f0;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.chat-rename {
  width: 700px;
}.chat-thread-menu {
  position: relative;
}
.chat-thread-menu__item button {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s ease-in-out;
}
.chat-thread-menu__item button:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}
.chat-thread-menu__item button:hover {
  background-color: #f3f4f6;
}
[data-theme-mode=dark] .chat-thread-menu__item button {
  color: #d1d5db;
}
[data-theme-mode=dark] .chat-thread-menu__item button:hover {
  background-color: #374151;
}
.chat-thread-menu__item svg {
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
}
.chat-thread-menu__item__danger {
  color: #dc2626 !important;
}
.chat-thread-menu__item__danger:hover {
  background-color: #fef2f2;
}
.chat-thread-menu__button {
  color: #fff !important;
  padding: 0.25rem;
  border-radius: 9999px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
.chat-thread-menu__button path {
  fill: #bababa;
}
.chat-thread-menu__button:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}
[data-theme-mode=dark] .chat-thread-menu__button {
  color: #6b7280;
}
[data-theme-mode=dark] .chat-thread-menu__button:hover {
  color: #d1d5db;
  background-color: #374151;
}
.chat-thread-menu__button svg {
  width: 16px;
  height: 16px;
}
.chat-thread-menu__dropdown {
  position: fixed;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  border: 1px solid #e5e7eb;
  width: 144px;
  padding: 8px;
}
.chat-thread-menu__dropdown button {
  padding: var(--Spacing-Padding-3, 6px) var(--Spacing-Padding-4, 8px);
}
[data-theme-mode=dark] .chat-thread-menu__dropdown {
  background-color: #232e3f;
  border-color: #374151;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.chat-thread-menu__list {
  list-style: none;
  margin: 0;
}

[data-brand=ant] .chat-thread-menu__button path,
[data-brand=test] .chat-thread-menu__button path {
  fill: #ebebed;
}

.chat-thread--more {
  padding: 15px;
  background-color: white;
  border: 1px solid var(--kis-color-gray20);
  border-radius: 16px;
  box-shadow: 8px 8px 15px 0 rgba(0, 0, 0, 0.0509803922), -8px -8px 15px 0 rgba(0, 0, 0, 0.0509803922);
  animation: dropdownFadeIn 200ms ease-out;
}
.chat-thread--list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  list-style: none;
}
.chat-thread--list .btn {
  padding: 12px;
  width: 168px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
}
.chat-thread--list .btn:hover {
  background-color: var(--kis-color-gray05);
}

[data-brand=alpy] .chat-thread-menu circle {
  stroke: #b7b7b7 !important;
}.chat-thread-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--color-chat-thread-panel-bg);
}
.chat-thread-container__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chat-thread-container__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0rem;
  margin-top: 0.5rem;
  padding: 0 1rem;
}
.chat-thread-container__content {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.chat-thread-container__content--empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  gap: 10px;
  color: var(--color-chat-thread-panel-text);
}
.chat-thread-container__list {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  height: 100%;
}
.chat-thread-container__list__infinite-scroll-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  padding: 1rem;
  width: 100%;
}
.chat-thread-container__item {
  margin-bottom: 0.25rem;
}
.chat-thread-container__item-container {
  cursor: pointer;
  transition: all 0.2s ease;
}
.chat-thread-container__item-content {
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
}
.chat-thread-container__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.chat-thread-container__item-header-left {
  display: flex;
  align-items: center;
  flex: 1;
  margin-right: 0.5rem;
  overflow: hidden;
}
.chat-thread-container__item-header-left svg {
  width: 14px;
  height: 14px;
  color: #9ca3af;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.chat-thread-container__item-header-left div {
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.chat-thread-container__item-footer {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-chat-thread-panel-text);
  margin-left: 1.5rem;
}
.chat-thread-container__item-footer svg {
  width: 12px;
  height: 12px;
  margin-right: 0.25rem;
}
.chat-thread-container__edit-form {
  padding: 0.5rem;
}
.chat-thread-container__edit-form .input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.chat-thread-container__edit-form .input-container input {
  width: 100%;
  padding: 0.25rem;
  padding-right: 3rem;
  border: 1px solid var(--color-border-primary);
  border-radius: 0.25rem;
  font-size: 0.875rem;
  background-color: var(--color-page-bg);
  color: var(--color-text-primary);
}
.chat-thread-container__edit-form .input-container input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}
.chat-thread-container__edit-form .input-container input.error {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px #ef4444;
}
.chat-thread-container__edit-form .input-container .char-count {
  position: absolute;
  right: 0.5rem;
  font-size: 0.75rem;
  color: #9ca3af;
  pointer-events: none;
}
.chat-thread-container__edit-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
.chat-thread-container__edit-form-actions button {
  font-size: 0.75rem;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  transition: all 0.2s ease-in-out;
}
.chat-thread-container__edit-form-actions button:first-child {
  margin-right: 0.5rem;
}
.chat-thread-container__footer {
  padding: 0.75rem;
  border-top: 1px solid var(--color-border-primary);
}
.chat-thread-container__footer button {
  width: 100%;
  padding: 0.5rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
}
.chat-thread-container__footer button svg {
  width: 16px;
  height: 16px;
  margin-right: 0.5rem;
}

[data-brand=ant] .chat-thread-container__list,
[data-brand=test] .chat-thread-container__list {
  display: flex;
  flex-direction: column;
  padding: 0 8px 0 8px;
  gap: 4px;
  overflow: visible;
}
[data-brand=ant] .chat-thread-container__item,
[data-brand=test] .chat-thread-container__item {
  margin-bottom: 0;
}
[data-brand=ant] .chat-thread-container__item-content,
[data-brand=test] .chat-thread-container__item-content {
  padding: 8px;
}
[data-brand=ant] .chat-thread-container__item-header,
[data-brand=test] .chat-thread-container__item-header {
  height: 22px;
  margin-bottom: 0;
}

[data-brand=ant] .chat-thread-container__edit-form,
[data-brand=test] .chat-thread-container__edit-form {
  background-color: var(--kis-menu-bg);
}

[data-brand=alpy] .chat-thread-container__list {
  height: auto !important;
}
/* -------------------------------
    ✅ 추가: kis-agent-panel의 more-button 스타일 이식
    ------------------------------- */
.kis-bookmark-panel__more-button-wrapper {
  padding: 0 8px 8px 8px;
}

.kis-bookmark-panel__more-button {
  width: 100%;
  height: 20px;
  border: none;
  cursor: pointer;
  padding: 0px 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--kis-font-14);
  line-height: 150%; /* 21px */
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  border-radius: 20px;
  background-color: transparent;
  color: var(--kis-menu-sub-title, #909599);
}
.kis-bookmark-panel__more-button * {
  color: var(--kis-menu-sub-title);
}
.kis-bookmark-panel__more-button p {
  overflow: hidden;
  color: var(--kis-menu-title, #fff);
  text-align: center;
  text-overflow: ellipsis;
  font-size: var(--kis-font-14);
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: var(--Typo-Font-spacing-0, 0);
}
.kis-bookmark-panel__more-button__close {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kis-bookmark-panel__more-button__more {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kis-chat-title {
  padding: 32px 10px 12px;
}
.kis-chat-title h4 {
  padding-inline: 6px;
  font-size: var(--kis-font-13);
  font-weight: 400;
  color: var(--kis-color-gray50);
}.kis-chat-thread-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--kis-menu-bg);
}
.kis-chat-thread-panel.menu-closed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden;
}
.kis-chat-thread-panel__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  display: flex;
  height: 48px;
  padding: 16px var(--Spacing-Padding-7, 16px) var(--Spacing-Padding-6, 4px) var(--Spacing-Padding-7, 16px);
  gap: var(--Spacing-Gap-3, 8px);
  align-items: center;
  align-self: stretch;
}
.kis-chat-thread-panel__header h4 {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Title-Medium, 14px);
  font-weight: 600;
  color: var(--kis-menu-title, #fff);
}
.kis-chat-thread-panel__list-content {
  width: 100%;
  display: flex;
  align-items: center;
}
.kis-chat-thread-panel__info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.kis-chat-thread-panel__info__loading {
  animation: spin 1s linear infinite;
}
.kis-chat-thread-panel__footer {
  display: flex;
  justify-content: safe center;
  align-items: safe center;
  width: 100%;
  padding: 0 20px;
  gap: 10px;
}

[data-brand=ant] .kis-chat-thread-panel__info,
[data-brand=test] .kis-chat-thread-panel__info {
  padding: 10px;
}
[data-brand=ant] .kis-chat-thread-panel--none,
[data-brand=test] .kis-chat-thread-panel--none {
  display: flex;
  align-items: center;
  column-gap: 2px;
  width: 100%;
  min-height: 40px;
}
[data-brand=ant] .kis-chat-thread-panel--none .btn-list-refresh,
[data-brand=test] .kis-chat-thread-panel--none .btn-list-refresh {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 40px;
}
[data-brand=ant] .kis-chat-thread-panel--none > p,
[data-brand=test] .kis-chat-thread-panel--none > p {
  font-size: var(--kis-font-14);
  color: white;
}
.kis-chat-search-layer {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  inset: 0;
  background-color: transparent;
  z-index: 1000;
}

.kis-chat-search-box {
  padding: 48px;
  width: 90%;
  max-width: 760px;
  height: 720px;
  background-color: white;
  border: 1px solid #ebebed;
  border-radius: 24px;
  box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.1019607843), -8px -8px 30px 0px rgba(0, 0, 0, 0.1019607843);
}
.kis-chat-search-box .search-box__header {
  position: relative;
  padding-right: 40px;
}
.kis-chat-search-box .search-box__header > h2 {
  line-height: 1.5;
  font-size: 24px;
  font-weight: 700;
}
.kis-chat-search-box .search-box__header .btn-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.kis-chat-search-box .search-box__input {
  display: flex;
  justify-content: space-between;
  column-gap: 8px;
  margin-top: 32px;
}
.kis-chat-search-box .search-box__input > input {
  flex: 1;
  padding: 0 16px;
  height: 48px;
  font-size: 16px;
  background-color: white;
  border: 1px solid #b3b4b9;
  border-radius: 8px;
}
.kis-chat-search-box .search-box__input > input::placeholder {
  color: #73757c;
}
.kis-chat-search-box .search-box__input .btn-popup-search {
  padding: 10px;
  width: 48px;
  height: 48px;
  background-color: #008ddb;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.kis-chat-search-box .search-box__filter {
  margin-top: 16px;
}
.kis-chat-search-box .search-box__result {
  margin-top: 24px;
}

.kis-chat-search {
  width: 760px;
  height: 720px;
}
.kis-chat-search .search-box--input {
  display: flex;
  justify-content: space-between;
  column-gap: 8px;
  margin-top: 32px;
}
.kis-chat-search .search-box--input > input {
  flex: 1;
  padding: 0 16px;
  height: 48px;
  font-size: var(--kis-font-base);
  background-color: white;
  border: 1px solid #b3b4b9;
  border-radius: 8px;
}
.kis-chat-search .search-box--input > input::placeholder {
  color: #73757c;
}
.kis-chat-search .search-box--input .btn-popup-search {
  padding: 10px;
  width: 48px;
  height: 48px;
  background-color: #008ddb;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.kis-chat-search .search-box--filter {
  margin-top: 16px;
}
.kis-chat-search .search-box--result {
  padding-top: 24px;
  max-height: 430px;
  overflow-y: auto;
}
.kis-chat-search .search-result-msg {
  margin-top: 24px;
}
.kis-chat-search .search-threads {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  list-style: none;
}
.kis-chat-search .search-threads--item {
  display: flex;
  align-items: center;
  column-gap: 8px;
  height: 48px;
  background-color: white;
  border-radius: 8px;
  cursor: pointer;
}
.kis-chat-search .search-threads--item:hover {
  background-color: var(--kis-color-gray05);
}
.kis-chat-search .search-threads .item-txt {
  flex: 1;
  font-size: var(--kis-font-base);
  color: var(--kis-color-gray80);
}
.kis-chat-search .search-threads .item-date {
  font-size: var(--kis-font-14);
  color: var(--kis-color-gray60);
}
.kis-chat-search .search-threads .btn-threads {
  padding-right: 12px;
  border: 0;
}

.search-threads--item label {
  display: flex;
  align-items: center;
  column-gap: 8px;
  position: relative;
  padding-left: 12px;
  cursor: pointer;
}
.search-threads--item label input[type=checkbox]:checked + svg path {
  fill: #ffc567;
}

.search-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}
.search-filter-list .check-filter,
.search-filter-list .radio-filter {
  position: relative;
}
.search-filter-list .check-filter > input[type=checkbox],
.search-filter-list .check-filter > input[type=radio],
.search-filter-list .radio-filter > input[type=checkbox],
.search-filter-list .radio-filter > input[type=radio] {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}
.search-filter-list .check-filter > input[type=checkbox] + .filter-value,
.search-filter-list .check-filter > input[type=radio] + .filter-value,
.search-filter-list .radio-filter > input[type=checkbox] + .filter-value,
.search-filter-list .radio-filter > input[type=radio] + .filter-value {
  display: block;
  padding: 12px 16px;
  font-size: var(--kis-font-14);
  font-weight: 600;
  background-color: #f6f8fc;
  border-radius: 9999px;
  color: #4d4f58;
  cursor: pointer;
}
.search-filter-list .check-filter > input[type=checkbox]:checked + .filter-value,
.search-filter-list .check-filter > input[type=radio]:checked + .filter-value,
.search-filter-list .radio-filter > input[type=checkbox]:checked + .filter-value,
.search-filter-list .radio-filter > input[type=radio]:checked + .filter-value {
  color: #008ddb;
}

.kis-search-result--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.kis-search-result--loading .kis-aichat-loading {
  padding: 160px 0;
}
.kis-search-result--loading .kis-aichat-loading > svg {
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}

.search-threads .item-txt {
  flex: 1 1 auto; /* 오른쪽 요소 때문에 반드시 필요 */
  min-width: 0; /* ⭐⭐ flex 안에서 ellipsis 적용 핵심 */
  white-space: nowrap; /* 한 줄로 표시 */
  overflow: hidden; /* 넘치는 텍스트 숨기기 */
  text-overflow: ellipsis; /* ... 말줄임 */
  display: block;
}.kis-sidebar {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: var(--kis-width-side-bar);
  background-color: var(--kis-color-main);
  transition: all 0.2s ease;
}
.kis-sidebar--content {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 32px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.kis-sidebar--content::-webkit-scrollbar-thumb {
  background-color: var(--kis-color-gray70);
}
.kis-sidebar--content::-webkit-scrollbar-thumb:hover {
  background-color: var(--kis-color-gray60);
}
.kis-sidebar.menu-closed {
  width: 60px;
}
.kis-sidebar:not(.menu-closed) .kis-sidebar--content.scrollBot::before, .kis-sidebar:not(.menu-closed) .kis-sidebar--content.scrollMid::before {
  content: "";
  position: fixed;
  top: 122px;
  left: 0;
  width: 272px;
  height: 30px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

@media screen and (max-width: 1296px) {
  .kis-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
  }
}.kis-chat-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
}
.kis-chat-page .chat-message-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: auto;
  min-width: 500px;
  height: 100%;
  position: relative;
  overflow: auto;
}
.kis-chat-page__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.kis-chat-page__model-dropdown .dropdown.small {
  padding-top: 0;
  padding-bottom: 20px;
}
.kis-chat-page__model-dropdown .dropdown .dropdown-trigger > button {
  display: flex;
  align-items: center;
  column-gap: 4px;
  padding: 0;
  line-height: 1.1;
}
.kis-chat-page__model-dropdown .dropdown .dropdown-trigger > button svg {
  width: 12px;
  height: 12px;
  transition: transform 200ms ease-out;
}
.kis-chat-page__model-dropdown .dropdown .dropdown-trigger > button.open svg {
  transform: rotate(180deg);
}
.kis-chat-page__model-dropdown-text {
  color: var(--kis-text-secondary, #73757c) !important;
}
.kis-chat-page__no-agent-message {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kis-text-secondary, #1a1d29);
  font-size: var(--kis-font-base);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  padding: 20px;
}
.kis-chat-page__chat-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.kis-chat-page__init-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  margin: 0 auto;
  width: 100%;
  max-width: var(--kis-width-max-content);
  gap: var(--Spacing-Gap-9, 40px);
}
.kis-chat-page__init-message-container__content.bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  row-gap: 24px;
}

.suggestion-list {
  display: flex;
  justify-content: center;
  column-gap: 12px;
  width: 100%;
  list-style: none;
}
.suggestion-list > li {
  width: calc(25% - 9px);
}
.suggestion-list .suggestion-item {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  padding: 31px;
  width: 100%;
  max-width: 247px;
  height: 100%;
  background-color: #fff;
  border: 1px solid #ebebed;
  border-radius: 16px;
  cursor: pointer;
}
.suggestion-list .suggestion-item .item-icon {
  width: 48px;
  height: 48px;
}
.suggestion-list .suggestion-item .item-icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.suggestion-list .suggestion-item .item-title {
  display: block;
  font-size: var(--kis-font-18);
  font-weight: 700;
  color: #1a1d29;
}
.suggestion-list .suggestion-item .item-desc {
  font-size: var(--kis-font-14);
  line-height: 1.5;
  color: #73757c;
}
.suggestion-list .suggestion-item.selected {
  background-color: #f5fafd;
  border-color: transparent;
}
.suggestion-list .suggestion-item.selected > strong {
  color: #008ddb;
}
.suggestion-list.specialized .item-desc, .suggestion-list.chatbuilder .item-desc {
  font-size: var(--kis-font-base);
  font-weight: 500;
  color: var(--kis-color-gray80);
}
.suggestion-list.specialized .suggestion-item.selected .item-desc, .suggestion-list.chatbuilder .suggestion-item.selected .item-desc {
  color: var(--kis-color-blue30);
}

.svc-starter-wrap--header {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
}
.svc-starter-wrap--header .header--icon {
  position: relative;
  width: 96px;
  height: 96px;
  background-color: white;
  border-radius: 24px;
  overflow: hidden;
}
.svc-starter-wrap--header .header--icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--kis-color-gray30);
  border-radius: 24px;
}
.svc-starter-wrap--header .header--icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.svc-starter-wrap--header .header--title {
  font-size: var(--kis-font-24);
  color: var(--kis-color-font);
}
.svc-starter-wrap--header .header--desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.svc-starter-wrap--header .header--desc li {
  white-space: pre-line;
}
.svc-starter-wrap.specialized .header--desc {
  row-gap: 8px;
}
.svc-starter-wrap.chatbuilder .header--desc {
  row-gap: 12px;
}
.svc-starter-wrap.chatbuilder .header--desc dt,
.svc-starter-wrap.chatbuilder .header--desc dd {
  font-size: var(--kis-font-base);
  color: var(--kis-color-gray80);
}
.svc-starter-wrap.chatbuilder .header--desc dd {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
.svc-starter-wrap.chatbuilder .header--desc .desc-tag {
  padding: 6px 8px;
  font-size: var(--kis-font-13);
  font-weight: 600;
  background-color: var(--kis-color-gray10);
  border-radius: 4px;
  color: var(--kis-color-gray70);
}

.ai-brief-report {
  display: flex;
  justify-content: center;
  column-gap: 12px;
  width: 100%;
}
.ai-brief-report--box {
  min-width: 240px;
  max-width: 772px;
  padding: 32px;
  background-color: var(--kis-color-gray05);
  border-radius: 16px;
}
.ai-brief-report--box:not(:last-child) {
  flex: 1;
}
.ai-brief-report .report--title {
  text-align: center;
  font-size: var(--kis-font-base);
  font-weight: 700;
  color: var(--kis-color-font);
}
.ai-brief-report .report--list {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  margin-top: 16px;
}

@media (max-width: 1296px) {
  .kis-chat-page {
    padding-left: 60px;
    min-width: 1024px;
  }
}
:root {
  /* 페이지 배경 */
  --color-page-bg: #ffffff;
  --color-modal-bg: #ffffff;
  /* 시스템 메시지 */
  --color-system-msg-bg: #f7f8f9;
  --color-system-msg-text: #252628;
  /* 유저 메시지 */
  --color-user-msg-bg: #373740;
  --color-user-msg-text: #ffffff;
  /* 북마크·전송 버튼 (메인 컬러) */
  --color-bookmark-btn: #373740;
  --color-bookmark-shadow: #0000001a;
  --color-send-btn: #373740;
  --color-btn-disabled: #e5e7eb;
  /* 카테고리 칩 */
  --color-chip-bg: #ffffff;
  --color-chip-border: #e7ecf3;
  --color-chip-text: #252628;
  /* 입력창 */
  --color-input-bg: #f7f8f9;
  --color-input-border: #e0e0e0;
  --color-input-disabled: #f0f0f0;
  --color-input-text: #111827;
  /** 질문 수 배지 */
  --color-count-badge-bg: #e5e7eb;
  --color-count-badge-text: #222222;
  --color-count-icon: #777d8d;
  /* 답변 카드 */
  --color-reply-card-bg: #f8f9fa;
  --color-reply-card-border: #d8d7d7;
  --color-reply-card-text: #252628;
  /* 텍스트 일반 */
  --color-text-primary: #252628;
  --color-text-secondary: #777d8d;
  /* 추천 질문 */
  --color-recommend-question-bg: #fcfcfc;
  --color-recommend-question-text: #252628;
  /* 피드백 패널 */
  --color-feedback-panel-bg: #ffffff;
  --color-feedback-panel-border: #e0e0e0;
  --color-feedback-panel-text: #252628;
  /* 새로운 테마 시스템과 통합 */
  --color-border-primary: #f1f5f9;
  --color-border-secondary: #e5e7eb;
  /* 텍스트 컬러 */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-primary-blue: #3b82f6;
  /* Shadow */
  --color-hover: #f3f4f6;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-primary-blue: rgba(59, 130, 246, 0.1);
  /* 에이전트 패널 */
  --color-agent-panel-bg: #f9f8fd;
  --color-agent-panel-border: #e5e7eb;
  --color-agent-panel-text: #252628;
  /* 대화 스레드 패널 */
  --color-chat-thread-panel-bg: #fafafc;
  --color-chat-thread-panel-border: #e5e7eb;
  --color-chat-thread-panel-text: #252628;
  /* 도구 패널 */
  --color-tool-panel-bg: #f8f8fd;
  --color-tool-panel-border: #e5e7eb;
  --color-tool-panel-text: #252628;
  /* 추가 패널 변수들 */
  --color-panel-hover: #f3f4f6;
  --color-panel-active: #e5e7eb;
  --color-panel-disabled: #f9fafb;
  /* Tool Panel Colors */
  --color-tool-panel-light-bg: #ffffff;
  --color-tool-panel-light-border: #e5e7eb;
  --color-tool-panel-light-text: #111827;
  --color-tool-panel-light-text-secondary: #6b7280;
  --color-tool-panel-light-hover: #d9d9d9;
  /* Domain Tool Colors */
  --color-domain-tool-bg: #e9edef;
  --color-domain-tool-hover-bg: #edf0f2;
  --color-domain-tool-category: #dee0e4;
  --color-domain-tool-model-badge: #bbf7d0;
  --color-domain-tool-model-badge-dark: #efeff0;
  /* Default Tool Colors */
  --color-default-tool-bg: #effdf4;
  --color-default-tool-border: #bbf7d0;
  --color-default-tool-text: #047857;
  /* Button Colors */
  --button-red-primary: #ef4444;
  --button-red-hover: #dc2626;
  --button-red-active: #b91c1c;
  --button-red-light: #fef2f2;
  --button-yellow-primary: #f59e0b;
  --button-yellow-hover: #d97706;
  --button-yellow-active: #b45309;
  --button-yellow-light: #fffbeb;
  --button-purple-primary: #8b5cf6;
  --button-purple-hover: #7c3aed;
  --button-purple-active: #6d28d9;
  --button-purple-light: #faf5ff;
  --button-blue-primary: #008ddb;
  --button-blue-hover: #008ddb;
  --button-blue-active: #1d4ed8;
  --button-blue-light: #eff6ff;
  --button-skyblue-primary: #06b6d4;
  --button-skyblue-hover: #0891b2;
  --button-skyblue-active: #0e7490;
  --button-skyblue-light: #ecfeff;
  --button-black-primary: #1f2937;
  --button-black-hover: #111827;
  --button-black-active: #0f172a;
  --button-black-light: #f9fafb;
  --button-white-primary: #ffffff;
  --button-white-hover: #f3f4f6;
  --button-white-active: #f3f4f6;
  --button-white-border: #dddee0;
  --button-white-text: #1f2937;
  --button-green-primary: #10b981;
  --button-green-hover: #059669;
  --button-green-active: #047857;
  --button-green-light: #bbf7d0;
  --button-gray-primary: #6b7280;
  --button-gray-hover: #555555;
  --button-gray-active: #404040;
  --button-gray-light: #f3f4f6;
  --button-gray-border: #e5e7eb;
  --button-gray-text: #1f2937;
  /* SelectableListItem Colors */
  --selectable-blue-500: #3b82f6;
  --selectable-blue-50: #eff6ff;
  --selectable-blue-hover: #dbeafe;
  --selectable-blue-dark: #192348;
  --selectable-blue-dark-hover: #18253b;
  --selectable-green-500: #10b981;
  --selectable-green-50: #bbf7d0;
  --selectable-green-hover: #dcfce7;
  --selectable-green-dark: #15803d;
  --selectable-green-dark-hover: #10b981;
  --selectable-purple-500: #8b5cf6;
  --selectable-purple-50: #faf5ff;
  --selectable-purple-hover: #f3e8ff;
  --selectable-purple-dark: #7c3aed;
  --selectable-purple-dark-hover: #8b5cf6;
  --selectable-orange-500: #f97316;
  --selectable-orange-50: #fff7ed;
  --selectable-orange-hover: #fed7aa;
  --selectable-orange-dark: #c2410c;
  --selectable-orange-dark-hover: #f97316;
  --selectable-red-500: #ef4444;
  --selectable-red-50: #fef2f2;
  --selectable-red-hover: #fecaca;
  --selectable-red-dark: #b91c1c;
  --selectable-red-dark-hover: #ef4444;
  --selectable-gray-500: #6b7280;
  --selectable-gray-50: #f9fafb;
  --selectable-gray-hover: #f3f4f6;
  --selectable-gray-dark: #374151;
  --selectable-gray-dark-hover: #6b7280;
  /* Kis Theme Colors */
  --kis-menu-bg: #232c3c;
  --kis-menu-text: #fff;
  --kis-menu-title: #909599;
  --kis-layout-border: #cdcecf;
  --kis-text-secondary: #1a1d29;
  --kis-text-tertiary: #4d4f58;
  --selectable-kis-border: #cdcecf;
  --selectable-kis-selected: #3b475c;
  --selectable-kis-selected-text: #ffffff;
  --selectable-kis-hover: #3b475c;
  --selectable-kis-text: #fff;
  --selectable-kis-default: #f7f8f9;
  --kis-btn: #2563eb;
  --kis-btn-hover: #1d4ed8;
  --kis-btn-active: #1e40af;
  --kis-btn-disabled: #f1f2f4;
  --kis-system-msg-bg: #f7f8f9;
  --kis-text-dark: #000000;
  --kis-text-main: #1a1d29;
  --kis-text-sub: #73757c;
  --kis-text-desc: #4d4f58;
  --kis-text-user: #80624c;
  --kis-text-point: #2563eb;
  --kis-msg-user: #f5fafd;
  /* Thinking Message Colors (Light Mode) */
  --color-thinking-bg: #f8f9fa;
  --color-thinking-border: #e9ecef;
  --color-thinking-text: #495057;
  --color-thinking-content: #212529;
  --color-thinking-meta: #6c757d;
  --color-thinking-meta-bg: #f1f3f4;
  --color-thinking-meta-text: #6c757d;
  --color-thinking-badge: #007bff;
  --color-thinking-badge-text: #ffffff;
  /* Table Colors (Light Mode) */
  --color-table-bg: var(--Color-Blue-99, #ffffff);
  --color-table-border: var(--State-Border-Default, #dcdfe4);
  --color-table-text: #495057;
  --color-table-header-bg: #f8f9fa;
  --color-table-header-text: #495057;
  --color-table-row-bg: #f8f9fa;
}

[data-theme-mode=light][data-accent=purple] {
  --color-user-msg-bg: #755fff;
  --color-bookmark-btn: #755fff;
  --color-send-btn: #755fff;
}
[data-theme-mode=light][data-accent=blue] {
  --color-user-msg-bg: #466cf5;
  --color-bookmark-btn: #466cf5;
  --color-send-btn: #466cf5;
}

[data-theme-mode=dark] {
  /** 페이지 배경 */
  --color-page-bg: #0f0f0f;
  --color-modal-bg: #0f141a;
  /** 시스템 메시지 */
  --color-system-msg-bg: #1a1a1a;
  --color-system-msg-text: #cecece;
  /** 유저 메시지 */
  --color-user-msg-bg: #0e98ff;
  --color-user-msg-text: #ffffff;
  /** 북마크·전송 버튼 */
  --color-bookmark-btn: #0e98ff;
  --color-bookmark-shadow: #9090902c;
  --color-send-btn: #0e98ff;
  /** 카테고리 칩 */
  --color-chip-bg: #212121;
  --color-chip-border: #212121;
  --color-chip-text: #ffffff;
  /** 입력창 */
  --color-input-bg: #212121;
  --color-input-disabled: #4d4c4c;
  --color-input-border: #2b2b2b;
  --color-input-text: #ffffff;
  /** 질문 수 배지 */
  --color-count-badge-bg: #3a3a3a;
  --color-count-badge-text: #cecece;
  --color-count-icon: #5f5f5f;
  /** 답변 카드 */
  --color-reply-card-bg: #212121;
  --color-reply-card-border: #212121;
  --color-reply-card-text: #cecece;
  /** 텍스트 일반 */
  --color-text-primary: #cecece;
  --color-text-secondary: #5f5f5f;
  /** 추천 질문 */
  --color-recommend-question-bg: #1a1a1a;
  --color-recommend-question-text: #cecece;
  /** 피드백 패널 */
  --color-feedback-panel-bg: #212121;
  --color-feedback-panel-border: #444444;
  --color-feedback-panel-text: #cecece;
  /* 새로운 테마 시스템과 통합 */
  --color-border-primary: #2d3748;
  --color-border-secondary: #4a5568;
  /* 텍스트 컬러 */
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #9ca3af;
  --color-text-primary-blue: #60a5fa;
  /* Shadow */
  --color-hover: #374151;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-primary-blue: rgba(96, 165, 250, 0.1);
  /* 에이전트 패널 */
  --color-agent-panel-bg: #0f1419;
  --color-agent-panel-border: #142644;
  --color-agent-panel-text: #e2e8f0;
  /* 대화 스레드 패널 */
  --color-chat-thread-panel-bg: #161e2b;
  --color-chat-thread-panel-border: #253143;
  --color-chat-thread-panel-text: #e2e8f0;
  /* 도구 패널 */
  --color-tool-panel-bg: #181c20;
  --color-tool-panel-border: #1d1e1e;
  --color-tool-panel-text: #cecece;
  /* 추가 패널 변수들 */
  --color-panel-hover: #374151;
  --color-panel-active: #4b5563;
  --color-panel-disabled: #1f2937;
  /* Tool Panel Colors (Dark Mode) */
  --color-tool-panel-light-bg: #111827;
  --color-tool-panel-light-border: #374151;
  --color-tool-panel-light-text: #f9fafb;
  --color-tool-panel-light-text-secondary: #9ca3af;
  --color-tool-panel-light-hover: #374151;
  /* Domain Tool Colors (Dark Mode) */
  --color-domain-tool-bg: rgba(31, 41, 55, 0.5);
  --color-domain-tool-hover-bg: rgba(31, 41, 55, 0.5);
  --color-domain-tool-category: #4b5563;
  --color-domain-tool-model-badge: #047857;
  --color-domain-tool-model-badge-dark: #3d3d3d;
  /* Default Tool Colors (Dark Mode) */
  --color-default-tool-bg: rgba(5, 46, 22, 0.2);
  --color-default-tool-border: #047857;
  --color-default-tool-text: #4ade80;
  /* Button Colors (Dark Mode) */
  --button-red-primary: #ef4444;
  --button-red-hover: #dc2626;
  --button-red-active: #b91c1c;
  --button-red-light: #fef2f2;
  --button-yellow-primary: #f59e0b;
  --button-yellow-hover: #d97706;
  --button-yellow-active: #b45309;
  --button-yellow-light: #fffbeb;
  /* Thinking Message Colors (Dark Mode) */
  --color-thinking-bg: #2a2a2a;
  --color-thinking-border: #404040;
  --color-thinking-text: #e0e0e0;
  --color-thinking-content: #f0f0f0;
  --color-thinking-meta: #a0a0a0;
  --color-thinking-meta-bg: #1a1a1a;
  --color-thinking-meta-text: #888888;
  --color-thinking-badge: #4a9eff;
  --color-thinking-badge-text: #ffffff;
  --button-purple-primary: #8b5cf6;
  --button-purple-hover: #7c3aed;
  --button-purple-active: #6d28d9;
  --button-purple-light: #faf5ff;
  --button-blue-primary: #3b82f6;
  --button-blue-hover: #2563eb;
  --button-blue-active: #1d4ed8;
  --button-blue-light: #eff6ff;
  --button-skyblue-primary: #06b6d4;
  --button-skyblue-hover: #0891b2;
  --button-skyblue-active: #0e7490;
  --button-skyblue-light: #ecfeff;
  --button-black-primary: #1f2937;
  --button-black-hover: #111827;
  --button-black-active: #0f172a;
  --button-black-light: #f9fafb;
  --button-white-primary: #ffffff;
  --button-white-hover: #f9fafb;
  --button-white-active: #f3f4f6;
  --button-white-border: #eeeff1;
  --button-white-text: #1f2937;
  --button-green-primary: #10b981;
  --button-green-hover: #059669;
  --button-green-active: #047857;
  --button-green-light: #ecfdf5;
  --button-gray-primary: #9ea3ac;
  --button-gray-hover: #d1d5db;
  --button-gray-active: #f3f4f6;
  --button-gray-light: #374151;
  --button-gray-border: #4b5563;
  --button-gray-text: #f9fafb;
  /* SelectableListItem Colors (Dark Mode) */
  --selectable-blue-500: #3b82f6;
  --selectable-blue-50: #2c3d5d;
  --selectable-blue-hover: #18253b;
  --selectable-blue-dark: #222d57;
  --selectable-blue-dark-hover: #18253b;
  --selectable-green-500: #10b981;
  --selectable-green-50: #15803d;
  --selectable-green-hover: #10b981;
  --selectable-green-dark: #15803d;
  --selectable-green-dark-hover: #10b981;
  --selectable-purple-500: #8b5cf6;
  --selectable-purple-50: #7c3aed;
  --selectable-purple-hover: #a855f7;
  --selectable-purple-dark: #7c3aed;
  --selectable-purple-dark-hover: #8b5cf6;
  --selectable-orange-500: #f97316;
  --selectable-orange-50: #c2410c;
  --selectable-orange-hover: #f97316;
  --selectable-orange-dark: #c2410c;
  --selectable-orange-dark-hover: #f97316;
  --selectable-red-500: #ef4444;
  --selectable-red-50: #b91c1c;
  --selectable-red-hover: #ef4444;
  --selectable-red-dark: #b91c1c;
  --selectable-red-dark-hover: #ef4444;
  --selectable-gray-500: #6b7280;
  --selectable-gray-50: #374151;
  --selectable-gray-hover: #6b7280;
  --selectable-gray-dark: #374151;
  --selectable-gray-dark-hover: #6b7280;
  /* Table Colors (Dark Mode) */
  --color-table-bg: #1d1d1d;
  --color-table-border: #404040;
  --color-table-text: #e0e0e0;
  --color-table-header-bg: #1a1a1a;
  --color-table-header-text: #e0e0e0;
  --color-table-row-bg: #1a1a1a;
}

.theme-bg-primary {
  background-color: var(--color-page-bg);
}

.theme-bg-secondary {
  background-color: var(--color-system-msg-bg);
}

.theme-bg-tertiary {
  background-color: var(--color-input-bg);
}

.theme-bg-chat {
  background-color: var(--color-page-bg);
}

.theme-text-primary {
  color: var(--color-text-primary);
}

.theme-text-secondary {
  color: var(--color-text-secondary);
}

.theme-text-tertiary {
  color: var(--color-count-icon);
}

.theme-border {
  border: 1px solid var(--color-border-primary);
}

.theme-border-top {
  border-top: 1px solid var(--color-border-primary);
}

.theme-border-bottom {
  border-bottom: 1px solid var(--color-border-primary);
}

.theme-card {
  background-color: var(--color-reply-card-bg);
  border: 1px solid var(--color-reply-card-border);
  color: var(--color-reply-card-text);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.theme-button {
  background-color: var(--color-bookmark-btn);
  color: var(--color-user-msg-text);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}
.theme-button:hover:not(:disabled) {
  opacity: 0.8;
}
.theme-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.theme-input {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  color: var(--color-input-text);
  border-radius: 6px;
  transition: border-color 0.2s ease-in-out;
}
.theme-input:focus {
  outline: none;
  border-color: var(--color-bookmark-btn);
  box-shadow: 0 0 0 2px rgba(14, 152, 255, 0.1);
}
.theme-input::placeholder {
  color: var(--color-count-icon);
}
.kis-chatbuilder-editor {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.kis-chatbuilder-editor__innr {
  display: flex;
  column-gap: 90px;
  padding-top: 90px;
  padding-bottom: 160px;
  width: 100%;
  max-width: 926px;
  height: max-content;
}
.kis-chatbuilder-editor .editor-form-section:not(.ai-profile) {
  width: 640px;
}
.kis-chatbuilder-editor .editor-form-section:not(.ai-profile) + .editor-form-section {
  margin-top: 42px;
}
.kis-chatbuilder-editor .ai-profile-wrap {
  position: relative;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 106px;
  height: 106px;
}
.kis-chatbuilder-editor .ai-profile-wrap .ai-profile-img {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 24px;
  overflow: hidden;
}
.kis-chatbuilder-editor .ai-profile-wrap .ai-profile-img::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--kis-color-gray20);
  border-radius: 24px;
}
.kis-chatbuilder-editor .ai-profile-wrap .ai-profile-img > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kis-chatbuilder-editor .ai-profile-wrap .btn-form-setting {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 7px;
  width: 32px;
  height: 32px;
  background-color: #b3b4b9;
  border-radius: 50%;
}
.kis-chatbuilder-editor .form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kis-chatbuilder-editor .form-header--title {
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.kis-chatbuilder-editor .form-header + .form-content {
  margin-top: 12px;
}
.kis-chatbuilder-editor .form-header .txt {
  font-size: var(--kis-font-18);
  font-weight: 600;
  color: #1a1d29;
}
.kis-chatbuilder-editor .form-header .txt.required {
  position: relative;
}
.kis-chatbuilder-editor .form-header .txt.required::after {
  content: "*";
  position: absolute;
  top: 0;
  right: -7px;
  font-size: var(--kis-font-12);
  color: #ff6854;
}
.kis-chatbuilder-editor .form-header .txt-info {
  font-size: var(--kis-font-14);
  color: #73757c;
}
.kis-chatbuilder-editor .form-content input[type=text],
.kis-chatbuilder-editor .form-content textarea {
  padding-right: 15px;
  padding-left: 15px;
  width: 100%;
  font-size: var(--kis-font-base);
  background-color: white;
  border: 1px solid #b3b4b9;
  border-radius: 8px;
  color: #1a1d29;
  outline: none;
}
.kis-chatbuilder-editor .form-content input[type=text]::placeholder,
.kis-chatbuilder-editor .form-content textarea::placeholder {
  color: #73757c;
}
.kis-chatbuilder-editor .form-content > input[type=text] {
  height: 48px;
}
.kis-chatbuilder-editor .form-content textarea {
  padding-top: 15px;
  line-height: 1.5;
  resize: none;
}
.kis-chatbuilder-editor .form-content > textarea {
  min-height: 120px;
  max-height: 120px;
}
.kis-chatbuilder-editor .form-footer {
  display: flex;
  justify-content: center;
  column-gap: 8px;
}
.kis-chatbuilder-editor .btn-form {
  background-color: white;
  border-radius: 6px;
}
.kis-chatbuilder-editor .btn-form--add, .kis-chatbuilder-editor .btn-form--file {
  display: flex;
  align-items: center;
  column-gap: 4px;
  padding: 0 15px;
  height: 36px;
  font-size: var(--kis-font-14);
  font-weight: 500;
  border-color: #4d4f58;
  color: #4d4f58;
}
.kis-chatbuilder-editor .btn-form--add path {
  fill: #73757c;
}
.kis-chatbuilder-editor .btn-form--cancel, .kis-chatbuilder-editor .btn-form--submit {
  width: 160px;
  height: 56px;
  text-align: center;
  font-size: var(--kis-font-base);
  font-weight: 600;
  color: #909599;
}
.kis-chatbuilder-editor .btn-form--cancel {
  border-color: #b3b4b9;
}
.kis-chatbuilder-editor .btn-form--submit {
  background-color: var(--kis-color-blue30);
  color: white;
}
.kis-chatbuilder-editor .btn-form--submit:disabled {
  background-color: var(--kis-color-gray20);
  color: var(--kis-color-gray60);
  pointer-events: none;
  cursor: default;
}

.myai-icon-setting {
  width: 700px;
}

.start-set-line + .start-set-line {
  margin-top: 24px;
}
.start-set-line--form {
  display: flex;
  align-items: center;
  column-gap: 8px;
  position: relative;
}
.start-set-line--form > textarea {
  padding-bottom: 60px;
  min-height: 125px;
  max-height: 125px;
}
.start-set-line--form .message-length {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 100%;
  text-align: right;
}
.start-set-line--form .message-length span {
  font-size: 14px;
  color: var(--kis-color-gray60);
}
.start-set-line--form .message-length span.count {
  color: var(--kis-color-blue30);
}
.start-set-line--form + .start-set-line--form {
  margin-top: 12px;
}

.attach-file-area {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
}
.attach-file-area .attached-file {
  display: flex;
  align-items: center;
  column-gap: 4px;
  max-width: 194px;
}
.attach-file-area .attached-file .file-loading {
  animation: spin 1s linear infinite;
}
.attach-file-area .attached-file .file-name {
  flex: 1;
  text-decoration: underline;
  overflow: hidden;
}
.attach-file-area .attached-file .file-name > p,
.attach-file-area .attached-file .file-name > span {
  font-size: 14px;
  font-weight: 500;
  color: var(--kis-color-gray80);
}
.attach-file-area .attached-file .file-name > p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.attach-file-area .attached-file .btn--file-remove {
  border: none;
}

.chatbuilder-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  list-style: none;
}
.chatbuilder-tools label {
  display: flex;
  align-items: center;
  column-gap: 8px;
  position: relative;
  max-width: 152px;
  cursor: pointer;
}
.chatbuilder-tools label input[type=checkbox]:not(:checked) + svg rect {
  stroke: var(--kis-color-gray40);
}
.chatbuilder-tools label input[type=checkbox]:not(:checked) + svg path {
  stroke: white;
}
.chatbuilder-tools label span {
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.chatbuilder-tools + .chatbuilder-tools {
  margin-top: 12px;
}

.form-tooltip-wrap.files .tooltip {
  top: 46px;
  right: -20px;
  left: auto;
}
.form-tooltip-wrap.files .tooltip::before {
  right: 64px;
  left: auto;
}

@media (max-width: 1300px) {
  .kis-chatbuilder-editor__innr {
    column-gap: 45px;
    max-width: 800px;
  }
}
.instruction-input-wrap {
  position: relative;
}
.instruction-input-wrap textarea {
  padding-bottom: 60px;
  min-height: 100px;
  max-height: 480px;
  overflow-y: hidden;
}
.instruction-input-wrap textarea:focus,
.instruction-input-wrap textarea:not(:placeholder-shown) {
  overflow-y: auto;
}
.instruction-input-wrap .message-length {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 100%;
  text-align: right;
}
.instruction-input-wrap .message-length span {
  font-size: 14px;
  color: var(--kis-color-gray60);
}
.instruction-input-wrap .message-length span.count {
  color: var(--kis-color-blue30);
}

/* 1. [Input 전용] 이름, 설명, 채팅 스타터 제목(질문) */
.input-with-count-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  /* 박스 디자인을 부모에게 부여하여 숫자까지 한 영역으로 묶음 */
  border: 1px solid #b3b4b9;
  border-radius: 8px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.input-with-count-wrap input[type=text] {
  flex: 1; /* 가용한 모든 너비 차지 */
  height: 46px; /* 테두리 제외 높이 조절 */
  /* 우측 숫자가 들어갈 공간(약 70px)을 패딩으로 확보 */
  padding: 0 70px 0 15px !important;
  border: none !important; /* 내부 중복 테두리 제거 */
  outline: none;
  background: transparent !important; /* 배경을 부모와 통합 */
  font-size: var(--kis-font-base);
  color: #1a1d29;
  pointer-events: auto !important;
  cursor: text;
}
.input-with-count-wrap input[type=text]::placeholder {
  color: #73757c;
}
.input-with-count-wrap .message-length {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}
.input-with-count-wrap .message-length span {
  font-size: 14px;
  color: var(--kis-color-gray60);
  font-weight: 500;
}
.input-with-count-wrap .message-length span.count {
  color: var(--kis-color-blue30);
  font-weight: 600;
}
.input-with-count-wrap:focus-within {
  border-color: var(--kis-color-blue30);
}

/* 2. [Textarea 전용] 지침 및 스타터 답변 */
.instruction-input-wrap,
.start-set-line--form:has(textarea) {
  position: relative;
  width: 100%;
  border: 1px solid #b3b4b9;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
}
.instruction-input-wrap textarea,
.start-set-line--form:has(textarea) textarea {
  width: 100%;
  /* 좌우 패딩 15px, 하단 여백 확보를 위해 margin-bottom 사용 */
  padding: 15px 15px 0 15px !important;
  margin-bottom: 45px;
  border: none !important;
  outline: none;
  background: transparent;
  display: block;
  resize: none;
  word-break: break-all;
  font-size: var(--kis-font-base);
  line-height: 1.5;
}
.instruction-input-wrap .message-length,
.start-set-line--form:has(textarea) .message-length {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 15px;
  pointer-events: none;
  background-color: #fff;
  z-index: 10;
}
.instruction-input-wrap .message-length span,
.start-set-line--form:has(textarea) .message-length span {
  /* [수정] 폰트 사이즈와 기본 컬러 설정 */
  font-size: 14px;
  color: var(--kis-color-gray60);
  font-weight: 500; /* 기본 /5000 부분 */
}
.instruction-input-wrap .message-length span.count,
.start-set-line--form:has(textarea) .message-length span.count {
  /* [수정] 입력된 숫자 부분을 다른 곳과 동일하게 굵고 푸르게 설정 */
  color: var(--kis-color-blue30);
  font-weight: 600;
}

/* 3. [예외 처리] 스타터 제목 줄의 레이아웃 초기화 */
.start-set-line--form:has(input) {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
}

.txt-error {
  margin-top: 12px;
  font-size: 12px;
  color: var(--kis-color-error);
  font-weight: 500;
}
.txt-error pre {
  line-height: 1.2;
}.kis-share-modal {
  width: 700px;
  max-height: 644px;
}
.kis-share-modal .my-ai-info {
  display: flex;
  align-items: flex-start;
  column-gap: 16px;
}
.kis-share-modal .my-ai-info .ai-icon {
  width: 72px;
  min-width: 72px;
  height: 72px;
  border: 1px solid var(--kis-color-gray20);
  border-radius: var(--kis-radius-lg);
  overflow: hidden;
}
.kis-share-modal .my-ai-info img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.kis-share-modal .my-ai-info .ai-desc {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  min-width: 0;
}
.kis-share-modal .my-ai-info .ai-desc > h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--kis-color-font);
}
.kis-share-modal .my-ai-info .ai-desc > p {
  line-height: 1.2;
  font-size: 14px;
  color: var(--kis-color-gray70);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.kis-share-modal .share-setting {
  margin-top: 24px;
}
.kis-share-modal .kis-select.share-dept {
  max-height: 232px;
  overflow-y: auto;
}.kis-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.kis-modal-overlay .kis-modal {
  background: #fff;
  border-radius: 12px;
  width: 460px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.kis-modal-overlay .kis-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.kis-modal-overlay .kis-modal .modal-header h3 {
  font-size: 18px;
  font-weight: 600;
}
.kis-modal-overlay .kis-modal .modal-header .btn-close {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
}
.kis-modal-overlay .kis-modal .modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.kis-modal-overlay .kis-modal .modal-body .modal-desc {
  font-size: 14px;
  color: #444;
}
.kis-modal-overlay .kis-modal .modal-body .starter-input,
.kis-modal-overlay .kis-modal .modal-body .starter-textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  outline: none;
  transition: border 0.2s ease;
}
.kis-modal-overlay .kis-modal .modal-body .starter-input:focus,
.kis-modal-overlay .kis-modal .modal-body .starter-textarea:focus {
  border-color: #007aff;
}
.kis-modal-overlay .kis-modal .modal-body .starter-textarea {
  min-height: 100px;
  resize: vertical;
}
.kis-modal-overlay .kis-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.kis-modal-overlay .kis-modal .modal-footer .btn-cancel,
.kis-modal-overlay .kis-modal .modal-footer .btn-submit {
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  cursor: pointer;
}
.kis-modal-overlay .kis-modal .modal-footer .btn-cancel {
  border: 1px solid #ddd;
  background: #f5f5f5;
}
.kis-modal-overlay .kis-modal .modal-footer .btn-submit {
  background: #000;
  color: #fff;
  border: none;
}.profile-image-validation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 24px;
  min-width: 540px;
  background-color: var(--kis-color-gray80);
  border-radius: var(--kis-radius-sm);
  box-shadow: 0 20px 20px 0 rgba(68, 68, 68, 0.2);
}
.profile-image-validation .validation-content {
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.profile-image-validation .validation-content--text {
  line-height: 1.5;
  font-size: var(--kis-font-14);
  font-weight: 500;
  color: white;
}
.profile-image-validation .btn-validation {
  border: none;
}.myai-icon-list {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 42px;
  list-style: none;
}
.myai-icon-list .btn--default-icon {
  display: block;
  width: 102px;
  height: 102px;
  border-color: var(--kis-color-gray30);
  border-radius: 24px;
  overflow: hidden;
}
.myai-icon-list .btn--default-icon.chosen {
  outline: 2px solid var(--kis-color-blue30);
  outline-offset: -2px;
}
.myai-icon-list .btn--default-icon.chosen.attached-file {
  position: relative;
}
.myai-icon-list .btn--default-icon.chosen.attached-file:hover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEMSURBVHgB7dzBacNAEIbR2VSQdJDOkhbSQTq1O5A72KyIDTr4uv695j0YjE8S+4HQYVAVAAAAAAAAAABPpPf+PWYbcxrzVTzW9eBvtlpUq0Xtp37834Za0FsRJUCYAGEChAkQJkCYAGEChAkQJkCYAGEChAkQJkCYAGEChAkQJkCYAGEChAkQNi3AYW9nijvXm+XUJ+4dTVvl2G98/HzWa7i01j5qgpmPoPd6HZeaZGaAnzHnWt9++L81ic24MG9BYQKECRAmQJgAYQKECRAmQJgAYQKECRAmQJgAYQKECRAmQJgAYQKECRAmQJgAYSsHOO7qnIvH6v+rj/va4NZ9sgwAAAAAAAAA4Mn8ARUI/YQLzYc9AAAAAElFTkSuQmCC) center/48px no-repeat;
}
.myai-icon-list .btn--default-icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kis-chatbuilder {
  position: relative;
  padding-top: 414px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
.kis-chatbuilder--header {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 42px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding-top: 90px;
  padding-bottom: 12px;
  background-color: white;
  z-index: 10;
}
.kis-chatbuilder .kis-chatbuilder--content.is-empty {
  margin-top: -80px; /* 필요에 따라 -60, -100 조절 */
}
.kis-chatbuilder--intro {
  animation: fade-in 300ms ease-out;
}
.kis-chatbuilder--intro .chatbuilder-title {
  text-align: center;
  font-size: var(--kis-font-24);
  font-weight: 700;
  color: var(--kis-color-font);
}
.kis-chatbuilder--intro .chatbuilder-desc {
  margin-top: 16px;
  line-height: 1.5;
  text-align: center;
  font-size: var(--kis-font-base);
  color: var(--kis-color-gray80);
}
.kis-chatbuilder--tabs .kis-filter-tab {
  position: relative;
  padding: 6px;
  background-color: #fafafa;
  border-radius: 9999px;
}
.kis-chatbuilder--tabs .kis-filter-tab::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 126px;
  bottom: 6px;
  left: 6px;
  background-color: #4d4f58;
  border-radius: 9999px;
  transition-property: right, left;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.3, 0.2, 0.2, 1.4);
}
.kis-chatbuilder--tabs .kis-filter-tab.shared::after {
  right: 6px;
  left: 126px;
}
.kis-chatbuilder--tabs .kis-filter-tab .filter-tab-btn {
  position: relative;
  padding: 16px;
  width: 120px;
  text-align: center;
  font-size: var(--kis-font-base);
  background-color: transparent;
  border: none;
  color: #73757c;
  cursor: pointer;
  z-index: 1;
}
.kis-chatbuilder--tabs .kis-filter-tab .filter-tab-btn.actv {
  font-weight: 600;
  color: white;
}
.kis-chatbuilder--search {
  display: flex;
  column-gap: 8px;
  position: relative;
  width: 664px;
}
.kis-chatbuilder--search .input-search {
  background-color: white;
  border: 1px solid #b3b4b9;
  border-radius: 8px;
}
.kis-chatbuilder--search .input-search:focus {
  outline: none;
}
.kis-chatbuilder--search .input-search-btn {
  padding: 10px;
  width: 48px;
  background-color: #008ddb;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.kis-chatbuilder--search.result-msg {
  padding-bottom: 32px;
}
.kis-chatbuilder--search.result-msg .search-result-msg {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.kis-chatbuilder--content {
  margin: 0 auto;
  width: var(--kis-width-max-content);
  animation: theme-fade-in 300ms ease-out;
}
.kis-chatbuilder--content .kis-aichat-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kis-chatbuilder--content .kis-aichat-filter .kis-dropdown--list {
  min-width: 200px;
}
.kis-chatbuilder--content .kis-aichat-filter .create-btn {
  display: flex;
  align-items: center;
  column-gap: 4px;
  padding: 0 16px;
  height: 36px;
  font-size: var(--kis-font-14);
  font-weight: 500;
  background-color: transparent;
  border: 1px solid #008ddb;
  border-radius: 6px;
  color: #008ddb;
  cursor: pointer;
}
.kis-chatbuilder--content .kis-aichat-area,
.kis-chatbuilder--content .kis-aichat-none,
.kis-chatbuilder--content .kis-aichat-loading {
  margin-top: 32px;
}
.kis-chatbuilder--content .kis-aichat-list {
  padding-bottom: 240px;
  list-style: none;
}
.kis-chatbuilder--content .kis-aichat-list .kis-aichat-box {
  display: flex;
  position: relative;
  align-items: center;
  column-gap: 16px;
  cursor: pointer;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-icon {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-radius: 16px;
  overflow: hidden;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--kis-color-gray20);
  border-radius: 16px;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  flex: 1;
  min-width: 0;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__title, .kis-chatbuilder--content .kis-aichat-list .aichat-text__desc {
  display: flex;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__title {
  flex-direction: column;
  row-gap: 8px;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__title dt {
  font-size: var(--kis-font-18);
  font-weight: 600;
  color: #1a1d29;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__title dd {
  text-overflow: ellipsis;
  font-size: var(--kis-font-base);
  font-weight: 500;
  white-space: nowrap;
  color: #73757c;
  overflow: hidden;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__desc {
  align-items: center;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__desc .aichat-tag {
  padding: 6px 8px;
  font-size: var(--kis-font-13);
  font-weight: 600;
  background-color: var(--kis-color-gray20);
  border-radius: 4px;
  color: var(--kis-color-gray80);
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__desc .aichat-tag.tag-all {
  background-color: rgba(63, 177, 130, 0.1019607843);
  color: #3fb182;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__desc .aichat-tag.tag-dept {
  background-color: rgba(63, 105, 177, 0.1215686275);
  color: #3f69b1;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__desc .aichat-tag.creator {
  background-color: var(--kis-color-gray10);
  color: var(--kis-color-gray70);
}
.kis-chatbuilder--content .kis-aichat-list .aichat-text__desc > p {
  flex: 1;
  font-size: var(--kis-font-14);
  color: #909599;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-setting {
  display: flex;
  position: absolute;
  column-gap: 4px;
  top: 0;
  right: 0;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-setting .btn-setting.disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default !important;
  filter: grayscale(1);
  transition: opacity 0.2s ease;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-setting .btn-setting.disabled svg {
  opacity: 0.5;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-setting .btn-setting {
  width: 32px;
  height: 32px;
  border: none;
}
.kis-chatbuilder--content .kis-aichat-list .aichat-setting .btn-setting.checked > svg {
  fill: #4d4f58;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat > li {
  padding-bottom: 24px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat > li:not(:first-child) {
  padding-top: 24px;
  border-top: 1px solid #e1e2e5;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .kis-aichat-box {
  padding-right: 186px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .aichat-text {
  max-width: 750px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .aichat-text__title, .kis-chatbuilder--content .kis-aichat-list.my-aichat .aichat-text__desc {
  column-gap: 8px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag {
  position: absolute;
  top: 4px;
  right: 120px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row {
  display: flex;
  align-items: center;
  column-gap: 4px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row .tooltip-icon,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row .tooltip-icon {
  position: relative;
  display: flex;
  align-items: center;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row:hover .kis-tooltip-box,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row:hover .kis-tooltip-box {
  display: block;
  animation: fade-in 200ms ease-out;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row .kis-tooltip-box,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row .kis-tooltip-box {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  padding: 12px;
  background-color: #4d4f58;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  width: auto;
  z-index: 100;
  font-size: var(--kis-font-13);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
@media (max-width: 1200px) {
  .kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row .kis-tooltip-box,
  .kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row .kis-tooltip-box {
    white-space: pre-wrap;
    width: 300px;
    word-break: keep-all;
  }
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row .kis-tooltip-box pre,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row .kis-tooltip-box pre {
  font-family: inherit;
  margin: 0;
  white-space: inherit;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row .kis-tooltip-box::after,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row .kis-tooltip-box::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-top: 6px solid #4d4f58;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag > span,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row > span,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .btn-failure,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag > span,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row > span,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .btn-failure {
  padding: 5px 0;
  width: 50px;
  height: 24px;
  text-align: center;
  font-size: var(--kis-font-13);
  font-weight: 600;
  border-radius: 4px;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .btn-failure {
  border-color: var(--kis-color-error);
  color: var(--kis-color-error);
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-icon,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-text {
  opacity: 0.4;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag {
  z-index: 10;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag > span,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .failure .aichat-progress-flag .status-row > span {
  display: block;
  border: 1px solid var(--kis-color-gray60);
  color: var(--kis-color-gray70);
  opacity: 0.4;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-icon,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-text,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-setting {
  opacity: 0.4;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag {
  z-index: 10;
}
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag > span,
.kis-chatbuilder--content .kis-aichat-list.my-aichat .in-progress .aichat-progress-flag .status-row > span {
  display: block;
  border: 1px solid var(--kis-color-gray60);
  color: var(--kis-color-gray70);
}
.kis-chatbuilder--content .kis-aichat-list.our-aichat {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kis-chatbuilder--content .kis-aichat-list.our-aichat .kis-aichat-box {
  padding: 31px;
  border: 1px solid var(--kis-color-gray20);
  border-radius: 16px;
}
.kis-chatbuilder--content .kis-aichat-list.our-aichat .aichat-text {
  padding-right: 34px;
  max-width: 352px;
}
.kis-chatbuilder--content .kis-aichat-list.our-aichat .aichat-text__desc {
  column-gap: 10px;
}
.kis-chatbuilder--content .kis-aichat-list.our-aichat .aichat-setting {
  top: 24px;
  right: 24px;
}
.kis-chatbuilder--content .kis-aichat-none,
.kis-chatbuilder--content .kis-aichat-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kis-chatbuilder--content .kis-aichat-none {
  row-gap: 12px;
  padding-top: 210px;
  padding-bottom: 102px;
  height: 360px;
  background: transparent url("data:image/svg+xml,%3csvg%20width='72'%20height='72'%20viewBox='0%200%2072%2072'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='36'%20cy='36'%20r='36'%20fill='%23EBEBED'/%3e%3ccircle%20cx='36'%20cy='53'%20r='4'%20fill='white'/%3e%3cpath%20d='M32.1333%2018.9978C32.0604%2016.8117%2033.8128%2015%2036%2015C38.1872%2015%2039.9396%2016.8117%2039.8667%2018.9978L39.0999%2042.0017C39.0442%2043.6735%2037.6728%2045%2036%2045C34.3272%2045%2032.9558%2043.6735%2032.9001%2042.0017L32.1333%2018.9978Z'%20fill='white'/%3e%3c/svg%3e") center 102px/72px no-repeat;
}
.kis-chatbuilder--content .kis-aichat-none > h3 {
  font-size: var(--kis-font-20);
  font-weight: 600;
  color: #1a1d29;
}
.kis-chatbuilder--content .kis-aichat-none > p {
  font-size: var(--kis-font-base);
  color: #73757c;
}
.kis-chatbuilder--content .kis-aichat-loading {
  padding: 60px 0;
}
.kis-chatbuilder--content .kis-aichat-loading > svg {
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}
.kis-chatbuilder--content .kis-aichat-more-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}
.kis-chatbuilder--content .kis-aichat-more-loader > svg {
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}
.kis-chatbuilder.mid, .kis-chatbuilder.bot {
  padding-top: 0;
}
.kis-chatbuilder.mid .kis-chatbuilder--header, .kis-chatbuilder.bot .kis-chatbuilder--header {
  position: sticky;
  padding-top: 42px;
  padding-bottom: 10px;
  text-align: center;
}
.kis-chatbuilder.mid .kis-chatbuilder--intro, .kis-chatbuilder.bot .kis-chatbuilder--intro {
  display: none;
}
.kis-chatbuilder.mid .kis-chatbuilder--content, .kis-chatbuilder.bot .kis-chatbuilder--content {
  margin-bottom: 150px;
}
.kis-chatbuilder.mid .kis-chatbuilder--content .kis-aichat-filter, .kis-chatbuilder.bot .kis-chatbuilder--content .kis-aichat-filter {
  position: sticky;
  top: 230px;
  background-color: white;
  z-index: 10;
}
.kis-chatbuilder.mid .kis-chatbuilder--content .kis-aichat-filter::after, .kis-chatbuilder.bot .kis-chatbuilder--content .kis-aichat-filter::after {
  content: "";
  position: absolute;
  top: 36px;
  right: 0;
  left: 0;
  height: 24px;
  background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
}

@media (max-width: 1296px) {
  .kis-chatbuilder--content .kis-aichat-list.my-aichat .aichat-text {
    max-width: 585px;
  }
}.chatbuilder-delete-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.chatbuilder-delete-modal__content {
  background-color: #fff;
  border-radius: 12px;
  padding: 32px 40px;
  width: 420px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
}
.chatbuilder-delete-modal__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 12px;
}
.chatbuilder-delete-modal__title .highlight {
  color: #007aff;
}
.chatbuilder-delete-modal__desc {
  color: #8a8a8a;
  font-size: 14px;
  margin-bottom: 28px;
}
.chatbuilder-delete-modal__buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.chatbuilder-delete-modal__button {
  flex: 1;
  max-width: 160px;
  height: 44px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.chatbuilder-delete-modal__button.cancel {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #222;
}
.chatbuilder-delete-modal__button.delete {
  background-color: #007aff;
  color: #fff;
  border: none;
}
.chatbuilder-delete-modal__button.delete:hover {
  background-color: #0065d8;
}@keyframes slide-up {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-spin {
  from {
    stroke-dashoffset: 31.416;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes theme-transition {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes theme-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes theme-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  pointer-events: auto;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 52.5%;
  background-color: var(--color-page-bg);
  color: var(--color-text-primary);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  transform: translateY(0%);
  transform-origin: bottom;
  opacity: 1;
  padding: 16px 20px;
  z-index: 1001;
  border-top: 2px solid var(--color-bookmark-shadow);
  box-shadow: 0px -4px 16px 0px var(--color-bookmark-shadow);
}

.close-btn {
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 10px;
  background-color: #e6e6e7;
  border: 0px;
  outline: none;
  margin: 0 auto;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.title {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
  text-align: left;
  color: var(--color-text-primary);
  margin: 20px 0px 0px 4px;
}

.bookmark-ul {
  height: calc(100% - 58px);
  overflow-y: auto;
  margin-top: 16px;
}

.bookmark-list {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bookmark-list > svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.bookmark-list > svg > path {
  fill: var(--color-bookmark-btn);
}

.bookmark-list.disabled > svg > path {
  fill: var(--color-btn-disabled);
}

.list-text {
  width: 100%;
  line-height: 24px;
  color: var(--color-text-primary);
  text-align: left;
  word-break: keep-all;
  border-bottom: 0.5px solid var(--color-input-border);
  padding: 16px 14px 16px 0px;
  font-size: 14px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  cursor: pointer;
}

.bookmark-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.bookmark-empty-message {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #bec3cb;
  margin-top: 8px;
}

.slide-up {
  animation: slide-up 0.25s ease-out forwards;
}

.slide-down {
  animation: slide-down 0.25s ease-out forwards;
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small, .source-content, .source-content .source-number {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.system-message {
  color: var(--color-system-msg-text);
}
.system-message h1,
.system-message h2,
.system-message h3,
.system-message h4 {
  line-height: 1.3;
  color: #1a1d29;
}
.system-message h1 {
  font-size: var(--kis-font-24);
}
.system-message h2 {
  margin-top: 24px;
  padding-top: 24px;
  font-size: var(--kis-font-18);
  border-top: 1px solid var(--kis-color-gray30);
}
.system-message h3 {
  margin-top: 16px;
  font-size: var(--kis-font-base);
}
.system-message h4 {
  margin-top: 14px;
  font-size: var(--kis-font-14);
}
.system-message hr + h1,
.system-message hr + h2,
.system-message hr + h3,
.system-message hr + h4,
.system-message hr + h5,
.system-message hr + h6 {
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}
.system-message p {
  margin-top: 12px;
  line-height: 1.5;
  font-size: var(--kis-font-base);
  color: #4d4f58;
}
.system-message p:first-child {
  margin-top: 0;
}
.system-message table {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: var(--kis-font-base);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
  background-color: var(--color-table-bg);
  border: 1px solid var(--color-table-border);
  border-radius: var(--Shape-Radius-S, 6px);
  padding: 8px;
  overflow: hidden;
  border-spacing: 0;
}
.system-message th,
.system-message td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-table-border);
  word-break: break-word;
}
.system-message tr:last-child td {
  border-bottom: none !important;
}
.system-message th {
  color: var(--color-table-header-text);
  font-weight: bold;
  text-align: left;
  border-bottom: 2px solid var(--color-table-border);
}
.system-message tr {
  border: 1px solid var(--color-table-border);
}
.system-message a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
  margin: 6px 0 0 5px;
}
.system-message ul,
.system-message ol {
  margin-left: 14px;
  padding-left: 14px;
  margin-top: 12px;
}
.system-message ul ul,
.system-message ul ol,
.system-message ol ul,
.system-message ol ol {
  margin-top: 0;
  margin-bottom: 12px;
}
.system-message ol {
  list-style-type: decimal;
}
.system-message li {
  line-height: 1.5;
  font-size: var(--kis-font-base);
}
.system-message hr {
  margin-top: 24px;
  height: 1px;
  background-color: var(--kis-color-gray30);
  border: none;
}
.system-message hr + p {
  margin-top: 24px;
}

.source-content-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.source-content-list .source-title {
  color: var(--color-text-primary);
  font-size: var(--kis-font-14);
  font-weight: 600;
  line-height: 21px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.source-content-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.source-content {
  color: inherit;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: underline;
  background-color: var(--color-page-bg);
  border: none;
  cursor: pointer;
}
.source-content.ignored {
  text-decoration: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.source-content .source-number {
  color: var(--color-text-secondary);
  width: 18px;
  height: 18px;
  text-align: center;
  border-radius: 4px;
  flex-shrink: 0;
  background-color: var(--color-system-msg-bg);
  text-decoration: none;
}
.source-content .source-from {
  flex-shrink: 0;
}
.source-content .source-title {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-content:hover:not(.ignored) {
  text-decoration: underline;
}

.tradar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.tradar .tradar-title {
  font-size: var(--kis-font-14);
  font-weight: 600;
  line-height: 21px;
  text-align: left;
}
.tradar .tradar-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tradar .tradar-content svg:first-of-type {
  margin: 0 4px;
}
.tradar .tradar-content span {
  white-space: pre;
  font-size: var(--kis-font-14);
  font-weight: 400;
  color: var(--color-text-primary);
}
.tradar .tradar-content span.sunlight {
  font-weight: 600;
  color: #ff0000;
}
.tradar .tradar-content span.fog {
  font-weight: 600;
  color: #0059ff;
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small, .greeting-message {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.greeting-message {
  width: fit-content;
  max-width: 90%;
  text-align: left;
  background-color: var(--color-system-msg-bg);
  color: var(--color-system-msg-text);
  border-radius: 0px 16px 16px 16px;
  padding: 16px;
}
@media screen and (max-width: 480px) {
  .greeting-message {
    max-width: 90%;
  }
}

[data-brand=ant] .greeting-message,
[data-brand=test] .greeting-message {
  padding: 0;
  max-width: 100%;
  background-color: transparent;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Body-Reading-Large, 16px);
  font-weight: 400;
}
[data-brand=ant] .greeting-message > div,
[data-brand=test] .greeting-message > div {
  line-height: 1.5;
}
/**
 * ==============================================
 * Dot Elastic
 * ==============================================
 */
.dot-elastic {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-elastic 1s infinite linear;
}
.dot-elastic::before, .dot-elastic::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-elastic::before {
  left: -9px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-elastic-before 1s infinite linear;
}
.dot-elastic::after {
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-elastic-after 1s infinite linear;
}

@keyframes dot-elastic-before {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.5);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dot-elastic {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1.5);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dot-elastic-after {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  box-shadow: 9999px 0 0 -5px;
  animation: dot-pulse 1.5s infinite linear;
  animation-delay: 0.25s;
}
.dot-pulse::before, .dot-pulse::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
}
.dot-pulse::before {
  box-shadow: 9990px 0 0 -5px;
  animation: dot-pulse-before 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse::after {
  box-shadow: 10008px 0 0 -5px;
  animation: dot-pulse-after 1.5s infinite linear;
  animation-delay: 0.5s;
}

@keyframes dot-pulse-before {
  0% {
    box-shadow: 9990px 0 0 -5px;
  }
  30% {
    box-shadow: 9990px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 9990px 0 0 -5px;
  }
}
@keyframes dot-pulse {
  0% {
    box-shadow: 9999px 0 0 -5px;
  }
  30% {
    box-shadow: 9999px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 9999px 0 0 -5px;
  }
}
@keyframes dot-pulse-after {
  0% {
    box-shadow: 10008px 0 0 -5px;
  }
  30% {
    box-shadow: 10008px 0 0 2px;
  }
  60%, 100% {
    box-shadow: 10008px 0 0 -5px;
  }
}
/**
 * ==============================================
 * Dot Flashing
 * ==============================================
 */
.dot-flashing {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-flashing::before {
  left: -9px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 0s;
}
.dot-flashing::after {
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-flashing 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes dot-flashing {
  0% {
    background-color: #bec3cb;
  }
  50%, 100% {
    background-color: rgba(190, 195, 203, 0.2);
  }
}
/**
 * ==============================================
 * Dot Collision
 * ==============================================
 */
.dot-collision {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
}
.dot-collision::before, .dot-collision::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-collision::before {
  left: -6px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-collision-before 2s infinite ease-in;
}
.dot-collision::after {
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-collision-after 2s infinite ease-in;
  animation-delay: 1s;
}

@keyframes dot-collision-before {
  0%, 50%, 75%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-9px);
  }
}
@keyframes dot-collision-after {
  0%, 50%, 75%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(9px);
  }
}
/**
 * ==============================================
 * Dot Revolution
 * ==============================================
 */
.dot-revolution {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
}
.dot-revolution::before, .dot-revolution::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.dot-revolution::before {
  left: 0;
  top: -9px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  transform-origin: 3px 12px;
  animation: dot-revolution 1.4s linear infinite;
}
.dot-revolution::after {
  left: 0;
  top: -18px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  transform-origin: 3px 21px;
  animation: dot-revolution 1s linear infinite;
}

@keyframes dot-revolution {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}
/**
 * ==============================================
 * Dot Carousel
 * ==============================================
 */
.dot-carousel {
  position: relative;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  animation: dot-carousel 1.5s infinite linear;
}

@keyframes dot-carousel {
  0% {
    box-shadow: 9990px 0 0 -1px #bec3cb, 9999px 0 0 1px #bec3cb, 10008px 0 0 -1px #bec3cb;
  }
  50% {
    box-shadow: 10008px 0 0 -1px #bec3cb, 9990px 0 0 -1px #bec3cb, 9999px 0 0 1px #bec3cb;
  }
  100% {
    box-shadow: 9999px 0 0 1px #bec3cb, 10008px 0 0 -1px #bec3cb, 9990px 0 0 -1px #bec3cb;
  }
}
/**
 * ==============================================
 * Dot Typing
 * ==============================================
 */
.dot-typing {
  position: relative;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  animation: dot-typing 1.5s infinite linear;
}

@keyframes dot-typing {
  0% {
    box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  }
  16.667% {
    box-shadow: 9990px -10px 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  }
  33.333% {
    box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  }
  50% {
    box-shadow: 9990px 0 0 0 #bec3cb, 9999px -10px 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  }
  66.667% {
    box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  }
  83.333% {
    box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px -10px 0 0 #bec3cb;
  }
  100% {
    box-shadow: 9990px 0 0 0 #bec3cb, 9999px 0 0 0 #bec3cb, 10008px 0 0 0 #bec3cb;
  }
}
/**
 * ==============================================
 * Dot Windmill
 * ==============================================
 */
.dot-windmill {
  position: relative;
  top: -10px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  transform-origin: 5px 15px;
  animation: dot-windmill 2s infinite linear;
}
.dot-windmill::before, .dot-windmill::after {
  content: "";
  display: inline-block;
  position: absolute;
}
.dot-windmill::before {
  left: -8.66254px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
}
.dot-windmill::after {
  left: 8.66254px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
}

@keyframes dot-windmill {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(720deg) translate3d(0, 0, 0);
  }
}
/**
 * ==============================================
 * Dot Bricks
 * ==============================================
 */
.dot-bricks {
  position: relative;
  top: 6px;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  box-shadow: 9993px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb, 10005px 0 0 0 #bec3cb;
  animation: dot-bricks 2s infinite ease;
}

@keyframes dot-bricks {
  0% {
    box-shadow: 9993px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb, 10005px 0 0 0 #bec3cb;
  }
  8.333% {
    box-shadow: 10005px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb, 10005px 0 0 0 #bec3cb;
  }
  16.667% {
    box-shadow: 10005px -12px 0 0 #bec3cb, 9993px -12px 0 0 #bec3cb, 10005px 0 0 0 #bec3cb;
  }
  25% {
    box-shadow: 10005px -12px 0 0 #bec3cb, 9993px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb;
  }
  33.333% {
    box-shadow: 10005px 0 0 0 #bec3cb, 9993px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb;
  }
  41.667% {
    box-shadow: 10005px 0 0 0 #bec3cb, 10005px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb;
  }
  50% {
    box-shadow: 10005px 0 0 0 #bec3cb, 10005px -12px 0 0 #bec3cb, 9993px -12px 0 0 #bec3cb;
  }
  58.333% {
    box-shadow: 9993px 0 0 0 #bec3cb, 10005px -12px 0 0 #bec3cb, 9993px -12px 0 0 #bec3cb;
  }
  66.666% {
    box-shadow: 9993px 0 0 0 #bec3cb, 10005px 0 0 0 #bec3cb, 9993px -12px 0 0 #bec3cb;
  }
  75% {
    box-shadow: 9993px 0 0 0 #bec3cb, 10005px 0 0 0 #bec3cb, 10005px -12px 0 0 #bec3cb;
  }
  83.333% {
    box-shadow: 9993px -12px 0 0 #bec3cb, 10005px 0 0 0 #bec3cb, 10005px -12px 0 0 #bec3cb;
  }
  91.667% {
    box-shadow: 9993px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb, 10005px -12px 0 0 #bec3cb;
  }
  100% {
    box-shadow: 9993px -12px 0 0 #bec3cb, 9993px 0 0 0 #bec3cb, 10005px 0 0 0 #bec3cb;
  }
}
/**
 * ==============================================
 * Dot Floating
 * ==============================================
 */
.dot-floating {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-floating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}
.dot-floating::before, .dot-floating::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-floating::before {
  left: -12px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-floating-before 3s infinite ease-in-out;
}
.dot-floating::after {
  left: -24px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-floating-after 3s infinite cubic-bezier(0.4, 0, 1, 1);
}

@keyframes dot-floating {
  0% {
    left: calc(-50% - 3px);
  }
  75% {
    left: calc(50% + 103px);
  }
  100% {
    left: calc(50% + 103px);
  }
}
@keyframes dot-floating-before {
  0% {
    left: -50px;
  }
  50% {
    left: -12px;
  }
  75% {
    left: -50px;
  }
  100% {
    left: -50px;
  }
}
@keyframes dot-floating-after {
  0% {
    left: -100px;
  }
  50% {
    left: -24px;
  }
  75% {
    left: -100px;
  }
  100% {
    left: -100px;
  }
}
/**
 * ==============================================
 * Dot Fire
 * ==============================================
 */
.dot-fire {
  position: relative;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  box-shadow: 9999px 13.5px 0 -5px #bec3cb;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -0.85s;
}
.dot-fire::before, .dot-fire::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
}
.dot-fire::before {
  box-shadow: 9999px 13.5px 0 -5px #bec3cb;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -1.85s;
}
.dot-fire::after {
  box-shadow: 9999px 13.5px 0 -5px #bec3cb;
  animation: dot-fire 1.5s infinite linear;
  animation-delay: -2.85s;
}

@keyframes dot-fire {
  1% {
    box-shadow: 9999px 13.5px 0 -5px #bec3cb;
  }
  50% {
    box-shadow: 9999px -3.375px 0 2px #bec3cb;
  }
  100% {
    box-shadow: 9999px -13.5px 0 -5px #bec3cb;
  }
}
/**
 * ==============================================
 * Dot Spin
 * ==============================================
 */
.dot-spin {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: transparent;
  color: transparent;
  box-shadow: 0 -10.8px 0 0 #bec3cb, 7.6367556px -7.6367556px 0 0 #bec3cb, 10.8px 0 0 0 #bec3cb, 7.6367556px 7.6367556px 0 0 rgba(190, 195, 203, 0), 0 10.8px 0 0 rgba(190, 195, 203, 0), -7.6367556px 7.6367556px 0 0 rgba(190, 195, 203, 0), -10.8px 0 0 0 rgba(190, 195, 203, 0), -7.6367556px -7.6367556px 0 0 rgba(190, 195, 203, 0);
  animation: dot-spin 1.5s infinite linear;
}

@keyframes dot-spin {
  0%, 100% {
    box-shadow: 0 -10.8px 0 0 #bec3cb, 7.6367556px -7.6367556px 0 0 #bec3cb, 10.8px 0 0 0 #bec3cb, 7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), 0 10.8px 0 -5px rgba(190, 195, 203, 0), -7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), -10.8px 0 0 -5px rgba(190, 195, 203, 0), -7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0);
  }
  12.5% {
    box-shadow: 0 -10.8px 0 -5px rgba(190, 195, 203, 0), 7.6367556px -7.6367556px 0 0 #bec3cb, 10.8px 0 0 0 #bec3cb, 7.6367556px 7.6367556px 0 0 #bec3cb, 0 10.8px 0 -5px rgba(190, 195, 203, 0), -7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), -10.8px 0 0 -5px rgba(190, 195, 203, 0), -7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0);
  }
  25% {
    box-shadow: 0 -10.8px 0 -5px rgba(190, 195, 203, 0), 7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0), 10.8px 0 0 0 #bec3cb, 7.6367556px 7.6367556px 0 0 #bec3cb, 0 10.8px 0 0 #bec3cb, -7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), -10.8px 0 0 -5px rgba(190, 195, 203, 0), -7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0);
  }
  37.5% {
    box-shadow: 0 -10.8px 0 -5px rgba(190, 195, 203, 0), 7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0), 10.8px 0 0 -5px rgba(190, 195, 203, 0), 7.6367556px 7.6367556px 0 0 #bec3cb, 0 10.8px 0 0 #bec3cb, -7.6367556px 7.6367556px 0 0 #bec3cb, -10.8px 0 0 -5px rgba(190, 195, 203, 0), -7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0);
  }
  50% {
    box-shadow: 0 -10.8px 0 -5px rgba(190, 195, 203, 0), 7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0), 10.8px 0 0 -5px rgba(190, 195, 203, 0), 7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), 0 10.8px 0 0 #bec3cb, -7.6367556px 7.6367556px 0 0 #bec3cb, -10.8px 0 0 0 #bec3cb, -7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0);
  }
  62.5% {
    box-shadow: 0 -10.8px 0 -5px rgba(190, 195, 203, 0), 7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0), 10.8px 0 0 -5px rgba(190, 195, 203, 0), 7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), 0 10.8px 0 -5px rgba(190, 195, 203, 0), -7.6367556px 7.6367556px 0 0 #bec3cb, -10.8px 0 0 0 #bec3cb, -7.6367556px -7.6367556px 0 0 #bec3cb;
  }
  75% {
    box-shadow: 0 -10.8px 0 0 #bec3cb, 7.6367556px -7.6367556px 0 -5px rgba(190, 195, 203, 0), 10.8px 0 0 -5px rgba(190, 195, 203, 0), 7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), 0 10.8px 0 -5px rgba(190, 195, 203, 0), -7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), -10.8px 0 0 0 #bec3cb, -7.6367556px -7.6367556px 0 0 #bec3cb;
  }
  87.5% {
    box-shadow: 0 -10.8px 0 0 #bec3cb, 7.6367556px -7.6367556px 0 0 #bec3cb, 10.8px 0 0 -5px rgba(190, 195, 203, 0), 7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), 0 10.8px 0 -5px rgba(190, 195, 203, 0), -7.6367556px 7.6367556px 0 -5px rgba(190, 195, 203, 0), -10.8px 0 0 -5px rgba(190, 195, 203, 0), -7.6367556px -7.6367556px 0 0 #bec3cb;
  }
}
/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */
.dot-falling {
  position: relative;
  left: -9999px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  box-shadow: 9999px 0 0 0 #bec3cb;
  animation: dot-falling 1s infinite linear;
  animation-delay: 0.1s;
}
.dot-falling::before, .dot-falling::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-falling::before {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-falling-before 1s infinite linear;
  animation-delay: 0s;
}
.dot-falling::after {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-falling-after 1s infinite linear;
  animation-delay: 0.2s;
}

@keyframes dot-falling {
  0% {
    box-shadow: 9999px -9px 0 0 rgba(190, 195, 203, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9999px 0 0 0 #bec3cb;
  }
  100% {
    box-shadow: 9999px 9px 0 0 rgba(190, 195, 203, 0);
  }
}
@keyframes dot-falling-before {
  0% {
    box-shadow: 9990px -9px 0 0 rgba(190, 195, 203, 0);
  }
  25%, 50%, 75% {
    box-shadow: 9990px 0 0 0 #bec3cb;
  }
  100% {
    box-shadow: 9990px 9px 0 0 rgba(190, 195, 203, 0);
  }
}
@keyframes dot-falling-after {
  0% {
    box-shadow: 10008px -9px 0 0 rgba(190, 195, 203, 0);
  }
  25%, 50%, 75% {
    box-shadow: 10008px 0 0 0 #bec3cb;
  }
  100% {
    box-shadow: 10008px 9px 0 0 rgba(190, 195, 203, 0);
  }
}
/**
 * ==============================================
 * Dot Stretching
 * ==============================================
 */
.dot-stretching {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  transform: scale(1.25, 1.25);
  animation: dot-stretching 2s infinite ease-in;
}
.dot-stretching::before, .dot-stretching::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-stretching::before {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-stretching-before 2s infinite ease-in;
}
.dot-stretching::after {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bec3cb;
  color: #bec3cb;
  animation: dot-stretching-after 2s infinite ease-in;
}

@keyframes dot-stretching {
  0% {
    transform: scale(1.25, 1.25);
  }
  50%, 60% {
    transform: scale(0.8, 0.8);
  }
  100% {
    transform: scale(1.25, 1.25);
  }
}
@keyframes dot-stretching-before {
  0% {
    transform: translate(0) scale(0.7, 0.7);
  }
  50%, 60% {
    transform: translate(-20px) scale(1, 1);
  }
  100% {
    transform: translate(0) scale(0.7, 0.7);
  }
}
@keyframes dot-stretching-after {
  0% {
    transform: translate(0) scale(0.7, 0.7);
  }
  50%, 60% {
    transform: translate(20px) scale(1, 1);
  }
  100% {
    transform: translate(0) scale(0.7, 0.7);
  }
}
/**
 * ==============================================
 * Experimental: Gooey Effect
 * Dot Gathering
 * ==============================================
 */
.dot-gathering {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: hsl(0, 100%, 0%);
  color: transparent;
  margin: -1px 0;
  filter: blur(2px);
}
.dot-gathering::before, .dot-gathering::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -50px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: hsl(0, 100%, 0%);
  color: transparent;
  opacity: 0;
  filter: blur(2px);
  animation: dot-gathering 2s infinite ease-in;
}
.dot-gathering::after {
  animation-delay: 0.5s;
}

@keyframes dot-gathering {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  35%, 60% {
    opacity: 1;
    transform: translateX(50px);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}
/**
 * ==============================================
 * Experimental: Gooey Effect
 * Dot Hourglass
 * ==============================================
 */
.dot-hourglass {
  position: relative;
  top: -9px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: hsl(0, 100%, 0%);
  color: transparent;
  margin: -1px 0;
  filter: blur(2px);
  transform-origin: 3px 12px;
  animation: dot-hourglass 2.4s infinite ease-in-out;
  animation-delay: 0.6s;
}
.dot-hourglass::before, .dot-hourglass::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: hsl(0, 100%, 0%);
  color: transparent;
  filter: blur(2px);
}
.dot-hourglass::before {
  top: 18px;
}
.dot-hourglass::after {
  animation: dot-hourglass-after 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@keyframes dot-hourglass {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(180deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(360deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes dot-hourglass-after {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(18px);
  }
  50% {
    transform: translateY(18px);
  }
  75% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
/**
 * ==============================================
 * Experimental: Gooey Effect
 * Dot Overtaking
 * ==============================================
 */
.dot-overtaking {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: transparent;
  color: hsl(0, 100%, 0%);
  margin: -1px 0;
  box-shadow: 0 -20px 0 0;
  filter: blur(2px);
  animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
}
.dot-overtaking::before, .dot-overtaking::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: transparent;
  color: hsl(0, 100%, 0%);
  box-shadow: 0 -20px 0 0;
  filter: blur(2px);
}
.dot-overtaking::before {
  animation: dot-overtaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
  animation-delay: 0.3s;
}
.dot-overtaking::after {
  animation: dot-overtaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
  animation-delay: 0.6s;
}

@keyframes dot-overtaking {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
/**
 * ==============================================
 * Experimental: Gooey Effect
 * Dot Shuttle
 * ==============================================
 */
.dot-shuttle {
  position: relative;
  left: -9px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: hsl(0, 100%, 0%);
  color: transparent;
  margin: -1px 0;
  filter: blur(2px);
}
.dot-shuttle::before, .dot-shuttle::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: hsl(0, 100%, 0%);
  color: transparent;
  filter: blur(2px);
}
.dot-shuttle::before {
  left: 9px;
  animation: dot-shuttle 2s infinite ease-out;
}
.dot-shuttle::after {
  left: 18px;
}

@keyframes dot-shuttle {
  0%, 50%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-27px);
  }
  75% {
    transform: translateX(27px);
  }
}
/**
 * ==============================================
 * Experimental: Emoji
 * Dot Bouncing
 * ==============================================
 */
.dot-bouncing {
  position: relative;
  height: 6px;
  font-size: 10px;
}
.dot-bouncing::before {
  content: "⚽🏀🏐";
  display: inline-block;
  position: relative;
  animation: dot-bouncing 1s infinite;
}

@keyframes dot-bouncing {
  0% {
    top: -20px;
    animation-timing-function: ease-in;
  }
  34% {
    transform: scale(1, 1);
  }
  35% {
    top: 20px;
    animation-timing-function: ease-out;
    transform: scale(1.5, 0.5);
  }
  45% {
    transform: scale(1, 1);
  }
  90% {
    top: -20px;
  }
  100% {
    top: -20px;
  }
}
/**
 * ==============================================
 * Experimental: Emoji
 * Dot Rolling
 * ==============================================
 */
.dot-rolling {
  position: relative;
  height: 6px;
  font-size: 10px;
}
.dot-rolling::before {
  content: "⚽";
  display: inline-block;
  position: relative;
  transform: translateX(-25px);
  animation: dot-rolling 3s infinite;
}

@keyframes dot-rolling {
  0% {
    content: "⚽";
    transform: translateX(-25px) rotateZ(0deg);
  }
  16.667% {
    content: "⚽";
    transform: translateX(25px) rotateZ(720deg);
  }
  33.333% {
    content: "⚽";
    transform: translateX(-25px) rotateZ(0deg);
  }
  34.333% {
    content: "🏀";
    transform: translateX(-25px) rotateZ(0deg);
  }
  50% {
    content: "🏀";
    transform: translateX(25px) rotateZ(720deg);
  }
  66.667% {
    content: "🏀";
    transform: translateX(-25px) rotateZ(0deg);
  }
  67.667% {
    content: "🏐";
    transform: translateX(-25px) rotateZ(0deg);
  }
  83.333% {
    content: "🏐";
    transform: translateX(25px) rotateZ(720deg);
  }
  100% {
    content: "🏐";
    transform: translateX(-25px) rotateZ(0deg);
  }
}
.loading-message {
  min-width: 58px;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-message .loading-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loading-message .loading-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-system-msg-text);
  transition: transform 0.2s ease-in-out;
  opacity: 0.7;
}
.loading-message .loading-toggle-button.expanded {
  transform: rotate(180deg);
}
.loading-message .loading-toggle-button:hover {
  opacity: 1;
}
.loading-message .loading-toggle-button svg {
  width: 14px;
  height: 14px;
}
.loading-message .dot-flashing {
  width: 6px;
  height: 6px;
  align-self: center;
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@keyframes slide-up {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-spin {
  from {
    stroke-dashoffset: 31.416;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes theme-transition {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes theme-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes theme-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.recommended-question {
  width: fit-content;
  max-width: 90%;
  line-height: 150%;
  text-align: left;
  background-color: var(--color-recommend-question-bg);
  border-radius: 16px;
  padding: 16px;
}
@media screen and (max-width: 480px) {
  .recommended-question {
    max-width: 90%;
  }
}

.question-title {
  font-weight: 700;
  text-align: left;
  color: var(--color-recommend-question-text);
}

.question-content {
  margin-top: 24px;
}

.question {
  font-size: 14px;
  line-height: 150%;
  border-bottom: 1px solid #e1e5eb;
  padding: 16px 0px;
  cursor: pointer;
}
.question:first-child {
  padding-top: 0px;
}
.question:last-child {
  border-bottom: 0px;
  padding-bottom: 0px;
}

.news-title-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.news-title {
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
  color: var(--color-text-secondary);
  max-width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.question-text {
  color: var(--color-text-primary);
}

.recommended-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.category {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  background-color: var(--color-chip-bg);
  color: var(--color-chip-text);
  border: 1px solid var(--color-chip-border);
  border-radius: 24px;
  padding: 14px 20px 14px 14px;
  cursor: pointer;
}
.category p {
  font-size: 14px;
  font-weight: 600;
  line-height: 16.71px;
}

.category-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  max-width: 20px;
  height: 20px;
  max-height: 20px;
}
.category-icon-wrapper svg {
  width: 20px;
  max-width: 20px;
  height: 20px;
  max-height: 20px;
}.avatar {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-bottom: 10px;
}
.avatar > div {
  width: 100%;
  height: 100%;
}
.avatar > div svg {
  width: 100%;
  height: 100%;
}.text-extra-small, .system-message-wrapper .message-counter {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small, .system-message-wrapper .system-message {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.system-message-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: start;
}
.system-message-wrapper:last-child {
  margin-bottom: 16px;
}
.system-message-wrapper pre {
  white-space: pre-wrap;
}
.system-message-wrapper .system-message {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
  overflow-x: auto;
  background-color: transparent;
  color: var(--color-reply-card-text);
  align-self: flex-start;
}
.system-message-wrapper .system-message div:empty {
  display: none;
}
@media screen and (max-width: 480px) {
  .system-message-wrapper .system-message {
    max-width: 90%;
  }
}
.system-message-wrapper .message-counter {
  margin-left: 6px;
  margin-bottom: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 14px;
}
.system-message-wrapper .message-counter strong {
  color: var(--color-text-primary);
}

[data-brand=ant] .system-message p,
[data-brand=test] .system-message p {
  font-size: var(--kis-font-base);
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.feedback-panel {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  position: absolute;
  padding: 31px;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border: 1px solid #ebebed;
  border-radius: var(--kis-radius-lg);
  box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.0509803922), -8px -8px 15px 0px rgba(0, 0, 0, 0.0509803922);
}
.feedback-panel .feedback-title {
  margin-bottom: 12px;
  font-size: var(--kis-font-18);
  font-weight: 700;
  color: #1a1d29;
}
.feedback-panel .feedback-item {
  padding: 15px;
  font-size: var(--kis-font-base);
  font-weight: 500;
  background-color: transparent;
  border: 1px solid #ebebed;
  border-radius: var(--kis-radius-sm);
  color: #4d4f58;
  cursor: pointer;
}
.feedback-panel .feedback-item:hover {
  background-color: #f5fafd;
  border-color: transparent;
  color: #008ddb;
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle, .feedback {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.feedback {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  width: 100%;
}
.feedback .feedback-text {
  flex-grow: 1;
  width: 100%;
  font-size: 14px;
  margin-right: 16px;
  color: var(--color-reply-card-text);
}
.feedback .feedback-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

[data-brand=test] .feedback {
  display: none;
}

[data-brand=ant] .feedback-text {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Body-Reading-Large, 16px);
  font-weight: 400;
}
[data-brand=ant] .feedback-buttons {
  display: flex;
  column-gap: 8px;
}
[data-brand=ant] .feedback-buttons .feedback-button {
  padding: 7px;
  width: 32px;
  height: 32px;
  background-color: #fff;
  background-position: center;
  background-size: 16px;
  background-repeat: no-repeat;
  border: 1px solid #cdcecf;
  border-radius: 8px;
  cursor: pointer;
}
[data-brand=ant] .feedback-buttons .feedback-button.__up, [data-brand=ant] .feedback-buttons .feedback-button.__down {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKBSURBVHgBxVddbtNAEJ7ZOPBIOEHNCZpHkJCanoDcAHMCQiNTCRLSAEEKxmBO0HAC+spTUx76nN7AvUEeeKt3h9mk658QorhNtp8UecZez3zZ9X4zi1ASh4c9N1HyGADrAFTj3wSwEoWf3/+AGwDLDPb9Xl2BOp0nXgSNwmDwAkpClBmsUP1cnlwDvfbrd89hWwTa7U4TiFxtE1CsABvy6s9DQozSQaQ8KIm1CRDCbubAybfgw1kURVOF4nt2e05wKwQQoZF7aQwbQplvIF37BOnS2JUkcY2NhDGUxFoEWq2eTl43fhR8msCG4OSTiOpVc9kggXKHyHhUSE6CXDS7mS8H/htv8X1UNHWce5PhsB8vJdD23x4ByN7/JiRLPgsXFx+KnZyaNBBE458AHJbFi/N0R44Q/TwRceB3PQ7ag/UxLgbHGqwN8hJSp1pNzR0HgV5mz2FMSz4kFOQZm/d/cf0TeUFYGcEKoNAfMM2Xl7UkIS3lsD971vY76QSHwcel0pwfowVIawCUxKKMS0X7UTgYl5Li2yAI+hMWs5HxBcKz2RVsguRFaqOoWSeA4DxIHVJT6wSIVG7HoH0CiOimNlFsnQDkqiUXN/szkIdEcRcEshkQ6n58BwTQNVYYdi6tErgu6QZTY1gjUK2Ca2xu3ewTUCpJZyDfOVkjQEK4qYOWl0DXf973Wc+h6MSY3BFpRUJXO9yxHBPIlaUWSTW57XoE64Iqu4nS54V5GZ6dKWSS5nB4PUZcJo+uR3vcUnmr4rGctkqd6JCKrlKvomgYG79yfv777MnTvRqHfAxbhP7nBKL59cvgV4GQMXy/uyeJGnwEcmGTQE6MOL5JF2UFfwE4BfqcdA5QBwAAAABJRU5ErkJggg==);
}
[data-brand=ant] .feedback-buttons .feedback-button.__up.selected, [data-brand=ant] .feedback-buttons .feedback-button.__down.selected {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAiCAYAAAA+stv/AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHNSURBVHgBzZdNTsJAFMf/b0Rd+BFuIDeQIzRqdKk3EE8g2lQXihU/YlCr7IwbxRPIDYAbcAFivQF76TxnRKABIxRTxl/Sdjp97ft1pnmZEiJyeOimWjJ4BigNcFJtddBU0bs+e8EYUJRgx3HTErLSTtwPl7ybyx1EREQJliRff06uoYx9cLKNuARs+3gLzKlfg1hmEJcAE5aHxmCI4F8EiGAhBqJ8A8lhAcTkIyIjCWSzrk6eRgxQOImY/tjqnG+sry6tr62c6naj8YaHx6dRnldlyIF6QJKbicRMvVDI+/3XEnpnO0enQOCGB6TRULFriIpFENZAr3qsKl4qT66UECIfFhH7Ti6jHF1MBM60WFZ0Ne0KEHgXk0TVknYp/xZATB/XEKysfWR1BIyghn7TqABIJM0KsGyaFQCZFSBm36wAwewIBCTMCgg56xsV8Lzjd5MCzU7DiIBaupkVCK+czEwBGZ4CSC6jJ9CuSJNCzb8fBK1aV0DNRwkThKTcKxYLflfg9vYiz0RFxIx+cwmyPO+qHO7/WpTeXZ/vOU6uHDBb6hcopfsW5uf00dLtxeSiz5KqGAdiX71g9f7mohbpPlYy3KOCmDC4HvgnAp/d7K3rfLW/eQAAAABJRU5ErkJggg==);
}
[data-brand=ant] .feedback-buttons .feedback-button.__down {
  transform: scaleX(-1) rotate(180deg);
}
[data-brand=ant] .feedback-buttons .feedback-button .feedback-up-icon,
[data-brand=ant] .feedback-buttons .feedback-button .feedback-down-icon {
  width: 16px;
  height: 16px;
}
[data-brand=ant] .feedback-buttons .feedback-button .feedback-up-icon path,
[data-brand=ant] .feedback-buttons .feedback-button .feedback-down-icon path {
  fill: none;
  stroke: #626f86;
}

[data-brand=ant] .feedback-text {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Body-Reading-Large, 16px);
  font-weight: 400;
}
[data-brand=ant] .feedback-button .feedback-up-icon,
[data-brand=ant] .feedback-button .feedback-down-icon {
  width: 16px;
  height: 16px;
}
[data-brand=ant] .feedback-button .feedback-up-icon path,
[data-brand=ant] .feedback-button .feedback-down-icon path {
  fill: none;
  stroke: #626f86;
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small, .related-message {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.related-message {
  padding: 16px;
  background-color: var(--color-system-msg-bg, #f7f8f9);
  color: var(--color-system-msg-text);
  border-radius: 16px;
  text-align: left;
  width: fit-content;
  max-width: 90%;
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .related-message {
    max-width: 90%;
  }
}
.related-message:hover {
  background-color: var(--color-input-bg);
  transition: background-color 0.3s ease-in-out;
}
@media (hover: none) {
  .related-message:hover {
    background-color: var(--color-system-msg-bg);
  }
}

[data-brand=ant] .related-message,
[data-brand=test] .related-message {
  background-color: var(--kis-system-msg-bg) !important;
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small, .user-chat .user-message, .user-chat .bookmark-toggle {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.user-chat {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 8px;
  overflow: hidden;
}
.user-chat .user-message {
  padding: 16px;
  border-radius: 16px 16px 0px 16px;
  background-color: var(--color-user-msg-bg);
  color: var(--color-user-msg-text);
  align-self: flex-end;
  max-width: 90%;
  text-wrap: pretty;
  text-align: left;
  width: fit-content;
  word-break: break-all;
}
@media screen and (max-width: 480px) {
  .user-chat .user-message {
    max-width: 90%;
  }
}
.user-chat .bookmark-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #777d8d;
  cursor: pointer;
  border: none;
  background-color: transparent;
  gap: 4px;
}
.user-chat .question-bookmark-button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-chat .question-bookmark-button.active svg path {
  fill: var(--color-bookmark-btn);
}
.user-chat .bookmark-toggle.bookmarked {
  fill: var(--color-bookmark-btn);
}
.user-chat .bookmark-toggle:not(.bookmarked) > svg > path {
  fill: var(--color-bookmark-btn);
}

[data-brand=ant] .user-chat .user-message,
[data-brand=test] .user-chat .user-message {
  padding: 24px;
  font-size: 16px;
  background-color: var(--kis-msg-user);
  border-radius: 24px 0 24px 24px;
  color: var(--kis-text-desc);
}

.user-msg-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 10px;
}
.user-msg-wrap .user-attached > li {
  position: relative;
}
.user-msg-wrap .user-attached > li.uploading .attached-item {
  opacity: 0.5;
}
.user-msg-wrap .preview-box--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: var(--kis-radius-sm);
  z-index: 10;
}
.user-msg-wrap .preview-box--loading .file-loading {
  animation: spin 1s linear infinite;
}
.user-msg-wrap .user-attached {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  list-style: none;
}
.user-msg-wrap .attached-item {
  display: flex;
  align-items: center;
  column-gap: 6px;
  padding: 16px;
  background-color: #f5fafd;
  border-radius: var(--kis-radius-sm);
}
.user-msg-wrap .attached-item--thumb {
  max-width: 32px;
  max-height: 32px;
}
.user-msg-wrap .attached-item--info {
  max-width: 160px;
}
.user-msg-wrap .attached-item--info .file-name {
  line-height: 1.1;
  text-overflow: ellipsis;
  font-size: var(--kis-font-14);
  font-weight: 500;
  color: var(--kis-color-gray80);
  white-space: nowrap;
  overflow: hidden;
}
.user-msg-wrap .attached-item--info .file-size {
  margin-top: 4px;
  font-size: var(--kis-font-13);
  color: var(--kis-color-gray60);
}
.user-msg-wrap .user-msg-line {
  padding: 20px 24px;
  background-color: #f5fafd;
  border-radius: var(--kis-radius-xl) 0 var(--kis-radius-xl) var(--kis-radius-xl);
}
.user-msg-wrap .user-msg-line > * {
  line-height: 1.5;
  color: var(--kis-color-gray80);
}.thinking-message-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
}

.thinking-steps-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border-radius: 8px;
  width: 100%;
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
}
.step-header .header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-header .header-content svg {
  width: 14px;
  height: 14px;
  color: var(--color-system-msg-text);
}
.step-header .header-content span {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-system-msg-text);
}

.toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-system-msg-text);
  transition: transform 0.2s ease-in-out;
}
.toggle-button.expanded {
  transform: rotate(180deg);
}
.toggle-button:hover {
  opacity: 0.8;
}
.toggle-button svg {
  width: 16px;
  height: 16px;
}

.step-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden auto;
  transition: all 0.2s ease-in-out;
  scrollbar-width: thin;
  scrollbar-color: var(--color-system-msg-text) transparent;
}
.step-list.expanded {
  max-height: 300px;
  margin: 4px 0 0 0;
  padding: 0;
}
.step-list.collapsed {
  max-height: 0;
  margin: 0;
  padding: 0;
}
.step-list::-webkit-scrollbar {
  width: 4px;
}
.step-list::-webkit-scrollbar-track {
  background: transparent;
}
.step-list::-webkit-scrollbar-thumb {
  background: var(--color-system-msg-text);
  border-radius: 4px;
}

.step-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.step-item.active {
  opacity: 1;
}
.step-item.inactive {
  opacity: 0.5;
}
.step-item.current {
  background-color: rgba(var(--primary-color-rgb), 0.1);
  border-radius: 4px;
  padding: 3px;
  margin: -1px;
}

.step-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.step-title .step-number {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-system-msg-text);
  min-width: 55px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.step-title .step-content {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-system-msg-text);
  line-height: 18px;
}

.step-description {
  margin-left: 55px;
  font-size: 12px;
  color: var(--color-system-msg-text);
  opacity: 0.8;
  line-height: 16px;
}

.think-messages {
  margin-left: 55px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.think-message {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-system-msg-text);
  opacity: 0.9;
  word-break: break-word;
}
.think-message * {
  all: unset;
  display: revert;
  box-sizing: revert;
}
.think-message p {
  margin: 0.2em 0;
}
.think-message h1,
.think-message h2,
.think-message h3,
.think-message h4,
.think-message h5,
.think-message h6 {
  margin: 0.2em 0;
  font-weight: bold;
}
.think-message ul,
.think-message ol {
  margin: 0.2em 0;
  padding-left: 1.2em;
  list-style: outside;
}
.think-message li {
  margin: 0.1em 0;
}
.think-message blockquote {
  margin: 0.2em 0;
  padding-left: 1em;
  border-left: 3px solid var(--color-system-msg-text);
  opacity: 0.8;
}
.think-message code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.05em 0.2em;
  border-radius: 2px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
}
.think-message pre {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.3em;
  border-radius: 3px;
  overflow-x: auto;
  margin: 0.2em 0;
}
.think-message pre code {
  background: none;
  padding: 0;
}
.think-message strong,
.think-message b {
  font-weight: bold;
}
.think-message em,
.think-message i {
  font-style: italic;
}
.think-message table {
  border-collapse: collapse;
  margin: 0.2em 0;
}
.think-message table th,
.think-message table td {
  border: 1px solid var(--color-system-msg-text);
  padding: 0.1em 0.3em;
}
.think-message table th {
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: bold;
}

.loading-indicator {
  color: var(--primary-color);
  animation: blink 1.5s infinite;
  font-size: 12px;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}
.loading-only-content {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}.agent-usage-list {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}
.agent-usage-list__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.agent-usage-list__icon {
  margin-right: 0.5rem;
  color: #6b7280;
}
.agent-usage-list__title {
  font-weight: 500;
  margin: 0;
  color: #374151;
}
.agent-usage-list__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 8rem;
  overflow-y: auto;
}
.agent-usage-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #ffffff;
  transition: all 0.3s ease;
}
.agent-usage-list__item--selected {
  background-color: #dbeafe;
}
.agent-usage-list__name {
  font-size: 0.875rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.agent-usage-list__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.agent-usage-list__count {
  font-size: 0.75rem;
  color: #6b7280;
  min-width: 2.5rem;
  text-align: right;
}
.agent-usage-list__bar {
  width: 2rem;
  background-color: #e5e7eb;
  border-radius: 9999px;
  height: 0.25rem;
  overflow: hidden;
}
.agent-usage-list__fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.agent-usage-list__fill--red {
  background-color: #ef4444;
}
.agent-usage-list__fill--orange {
  background-color: #f97316;
}
.agent-usage-list__fill--yellow {
  background-color: #eab308;
}
.agent-usage-list__fill--green {
  background-color: #22c55e;
}
.dark .agent-usage-list {
  background-color: rgba(55, 65, 81, 0.5);
  border-color: #374151;
}
.dark .agent-usage-list__icon {
  color: #9ca3af;
}
.dark .agent-usage-list__title {
  color: #f9fafb;
}
.dark .agent-usage-list__item {
  background-color: #374151;
}
.dark .agent-usage-list__item--selected {
  background-color: rgba(30, 58, 138, 0.3);
}
.dark .agent-usage-list__name {
  color: #d1d5db;
}
.dark .agent-usage-list__count {
  color: #9ca3af;
}
.dark .agent-usage-list__bar {
  background-color: #4b5563;
}.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 16px 16px 16px;
}
.divider svg {
  width: 100%;
}@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.22"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}

.markdown-content {
  padding: 24px;
  background-color: var(--kis-color-gray05);
  border-radius: 0 24px 24px 24px;
  line-height: 1.6;
}
.markdown-content p {
  margin-bottom: 8px;
}
.markdown-content li {
  margin-bottom: 8px;
}
.markdown-content li:last-child {
  margin-bottom: 0;
}
.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
}
.markdown-content table th {
  background-color: #ebebed;
  font-weight: 600;
  padding: 16px 24px;
  border: 1px solid #dfe2e5;
}
.markdown-content table td {
  padding: 16px 24px;
  border: 1px solid #dfe2e5;
}

.prose li > p:first-child {
  display: inline;
  margin: 0;
}

.markdown-content pre > code {
  user-select: text;
}

.markdown-content pre .linenumber,
.markdown-content pre .line-number,
.markdown-content pre .lineNumbers,
.markdown-content pre .react-syntax-highlighter-line-number {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.markdown-content p > a {
  display: inline-block;
}

.markdown-content p > br {
  display: block;
  margin-bottom: 6px;
}

/* SyntaxHighlighter 내부의 pre 태그 */
.markdown-content pre {
  counter-reset: line-number; /* 카운터 초기화 */
}

/* 각 코드 줄 (.code-line) */
.code-line {
  display: block; /* 줄 단위 블록 설정 */
  /* 가상 요소로 줄 번호 생성 (복사 불가능) */
}
.code-line::before {
  counter-increment: line-number; /* 번호 1씩 증가 */
  content: counter(line-number); /* 번호 표시 */
  display: inline-block;
  width: 2rem; /* 줄 번호 영역 너비 */
  margin-right: 1rem; /* 코드 본문과의 간격 */
  text-align: right; /* 오른쪽 정렬 */
  color: #8fa1b3; /* 줄 번호 색상 (회색) */
  font-size: 0.85em; /* 약간 작게 */
  user-select: none; /* 드래그 선택 방지 (이중 잠금) */
  opacity: 0.7;
}.progress-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.progress-bar__track {
  flex: 1;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.3s ease;
}
.progress-bar__percentage {
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 2rem;
  text-align: right;
}
.progress-bar--blue .progress-bar__track {
  background-color: #dbeafe;
}
.progress-bar--blue .progress-bar__fill {
  background-color: #2563eb;
}
.progress-bar--blue .progress-bar__percentage {
  color: #1d4ed8;
}
.progress-bar--green .progress-bar__track {
  background-color: #dcfce7;
}
.progress-bar--green .progress-bar__fill {
  background-color: #16a34a;
}
.progress-bar--green .progress-bar__percentage {
  color: #15803d;
}
.progress-bar--gray .progress-bar__track {
  background-color: #f3f4f6;
}
.progress-bar--gray .progress-bar__fill {
  background-color: #6b7280;
}
.progress-bar--gray .progress-bar__percentage {
  color: #4b5563;
}
.progress-bar--sm .progress-bar__track {
  height: 0.25rem;
}
.progress-bar--md .progress-bar__track {
  height: 0.5rem;
}
.progress-bar--lg .progress-bar__track {
  height: 0.75rem;
}
.dark .progress-bar--blue .progress-bar__track {
  background-color: #1e3a8a;
}
.dark .progress-bar--blue .progress-bar__fill {
  background-color: #60a5fa;
}
.dark .progress-bar--blue .progress-bar__percentage {
  color: #93c5fd;
}
.dark .progress-bar--green .progress-bar__track {
  background-color: #14532d;
}
.dark .progress-bar--green .progress-bar__fill {
  background-color: #4ade80;
}
.dark .progress-bar--green .progress-bar__percentage {
  color: #86efac;
}
.dark .progress-bar--gray .progress-bar__track {
  background-color: #374151;
}
.dark .progress-bar--gray .progress-bar__fill {
  background-color: #9ca3af;
}
.dark .progress-bar--gray .progress-bar__percentage {
  color: #d1d5db;
}.usage-card {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid;
  transition: all 0.3s ease;
}
.usage-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}
.usage-card__icon {
  margin-right: 0.5rem;
}
.usage-card__title {
  font-weight: 500;
  margin: 0;
}
.usage-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.usage-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.usage-card__label {
  font-size: 0.875rem;
}
.usage-card__value {
  font-weight: 600;
}
.usage-card__subtitle {
  font-size: 0.75rem;
}
.usage-card--blue {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}
.usage-card--blue .usage-card__icon {
  color: #2563eb;
}
.usage-card--blue .usage-card__title {
  color: #1e40af;
}
.usage-card--blue .usage-card__label {
  color: #1d4ed8;
}
.usage-card--blue .usage-card__value {
  color: #1e40af;
}
.usage-card--blue .usage-card__subtitle {
  color: #2563eb;
}
.usage-card--green {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
}
.usage-card--green .usage-card__icon {
  color: #16a34a;
}
.usage-card--green .usage-card__title {
  color: #15803d;
}
.usage-card--green .usage-card__label {
  color: #15803d;
}
.usage-card--green .usage-card__value {
  color: #15803d;
}
.usage-card--green .usage-card__subtitle {
  color: #16a34a;
}
.usage-card--gray {
  background-color: #f9fafb;
  border-color: #e5e7eb;
}
.usage-card--gray .usage-card__icon {
  color: #6b7280;
}
.usage-card--gray .usage-card__title {
  color: #374151;
}
.usage-card--gray .usage-card__label {
  color: #4b5563;
}
.usage-card--gray .usage-card__value {
  color: #374151;
}
.usage-card--gray .usage-card__subtitle {
  color: #6b7280;
}
.dark .usage-card--blue {
  background-color: rgba(30, 58, 138, 0.2);
  border-color: #1e3a8a;
}
.dark .usage-card--blue .usage-card__icon {
  color: #60a5fa;
}
.dark .usage-card--blue .usage-card__title {
  color: #dbeafe;
}
.dark .usage-card--blue .usage-card__label {
  color: #93c5fd;
}
.dark .usage-card--blue .usage-card__value {
  color: #dbeafe;
}
.dark .usage-card--blue .usage-card__subtitle {
  color: #60a5fa;
}
.dark .usage-card--green {
  background-color: rgba(22, 101, 52, 0.2);
  border-color: #14532d;
}
.dark .usage-card--green .usage-card__icon {
  color: #4ade80;
}
.dark .usage-card--green .usage-card__title {
  color: #dcfce7;
}
.dark .usage-card--green .usage-card__label {
  color: #86efac;
}
.dark .usage-card--green .usage-card__value {
  color: #dcfce7;
}
.dark .usage-card--green .usage-card__subtitle {
  color: #4ade80;
}
.dark .usage-card--gray {
  background-color: rgba(55, 65, 81, 0.5);
  border-color: #374151;
}
.dark .usage-card--gray .usage-card__icon {
  color: #9ca3af;
}
.dark .usage-card--gray .usage-card__title {
  color: #f9fafb;
}
.dark .usage-card--gray .usage-card__label {
  color: #d1d5db;
}
.dark .usage-card--gray .usage-card__value {
  color: #f9fafb;
}
.dark .usage-card--gray .usage-card__subtitle {
  color: #9ca3af;
}.thinking-message-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: 100%;
  padding: var(--Spacing-Padding-7, 16px);
  margin-bottom: 12px;
  background-color: var(--kis-color-gray05);
  border-radius: 0 24px 24px;
}

.thinking-steps-wrapper {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border-radius: 8px;
  width: 100%;
}

.step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
}
.step-header .header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step-header .header-content svg {
  width: 14px;
  height: 14px;
  color: var(--color-system-msg-text);
}
.step-header .header-content span {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-system-msg-text);
}

.toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-system-msg-text);
  transition: transform 0.2s ease-in-out;
}
.toggle-button.expanded {
  transform: rotate(180deg);
}
.toggle-button:hover {
  opacity: 0.8;
}
.toggle-button svg {
  width: 16px;
  height: 16px;
}

.step-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.step-item.active {
  opacity: 1;
}
.step-item.inactive {
  opacity: 0.5;
}
.step-item.current {
  border-radius: 4px;
  padding: 3px;
  margin: -1px;
}

.step-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.step-title .step-number {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-system-msg-text);
  min-width: 55px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.step-title .step-content {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-system-msg-text);
  line-height: 18px;
}

.loading-indicator {
  color: var(--primary-color);
  animation: blink 1.5s infinite;
  font-size: 12px;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0.3;
  }
}
.hierarchical-message-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden auto;
  transition: all 0.4s ease;
  scrollbar-width: thin;
}
.hierarchical-message-list.expanded {
  max-height: 400px;
  margin: 4px 0 0 0;
}
.hierarchical-message-list.collapsed {
  max-height: 0;
  margin: 0;
}
.hierarchical-message-list::-webkit-scrollbar {
  width: 4px;
}
.hierarchical-message-list::-webkit-scrollbar-track {
  background: transparent;
}
.hierarchical-message-list::-webkit-scrollbar-thumb {
  border-radius: 2px;
}

.hierarchical-message {
  padding: var(--Spacing-Padding-4, 8px) var(--Spacing-Padding-6, 12px);
}
.hierarchical-message .message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--color-thinking-meta, #a0a0a0);
}
.hierarchical-message .message-header .message-icon {
  font-size: 14px;
}
.hierarchical-message .message-header .message-type {
  font-weight: 600;
  color: var(--color-thinking-text, #e0e0e0);
}
.hierarchical-message .message-header .iteration-badge {
  background-color: var(--color-thinking-badge, #4a9eff);
  color: var(--color-thinking-badge-text, #ffffff);
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
}
.hierarchical-message .message-content {
  border-left: 2px solid var(--color-thinking-border, #dcdfe4);
  padding-left: var(--Spacing-Gap-4, 12px);
}
.hierarchical-message .message-content p:last-child {
  margin-bottom: 0;
}
.hierarchical-message .message-content > div {
  padding: var(--Spacing-Gap-None, 0px);
}
.hierarchical-message .message-meta {
  margin-top: 8px;
  padding: 6px 8px;
  background-color: var(--color-thinking-meta-bg, #1a1a1a);
  border-radius: 4px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 11px;
  color: var(--color-thinking-meta-text, #888888);
}
.hierarchical-message .message-meta div {
  margin-bottom: 2px;
}
.hierarchical-message .message-meta div:last-child {
  margin-bottom: 0;
}

[data-brand=ant] .step-title .step-number,
[data-brand=test] .step-title .step-number {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Body-Reading-Large, 16px);
  font-weight: 600;
  font-size: var(--kis-font-base);
}
[data-brand=ant] .step-title .step-content,
[data-brand=test] .step-title .step-content {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Body-Reading-Large, 16px);
  font-weight: 600;
  font-size: var(--kis-font-base);
}
[data-brand=ant] .system-message-wrapper,
[data-brand=test] .system-message-wrapper {
  display: flex;
  flex-direction: column;
}
[data-brand=ant] .system-message-header,
[data-brand=test] .system-message-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
[data-brand=ant] .avatar-box,
[data-brand=test] .avatar-box {
  /* ▶ 레이아웃 */
  width: 72px;
  height: 72px;
  aspect-ratio: 1/1;
  /* ▶ 스타일 (피그마) */
  border-radius: 16px;
  border: 1px solid var(--Grey-Grey30, #e1e2e5);
  background-color: #fff;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  margin-right: 12px;
  flex-shrink: 0;
}
[data-brand=ant] .avatar-name,
[data-brand=test] .avatar-name {
  color: var(--Grey-Grey90, #1a1d29);
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 18px */
}
[data-brand=ant] .system-message-error,
[data-brand=test] .system-message-error {
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
  padding: 24px;
  background-color: var(--kis-color-gray05);
  border-radius: 0 var(--kis-radius-xl) var(--kis-radius-xl) var(--kis-radius-xl);
}
[data-brand=ant] .system-message-error > svg,
[data-brand=test] .system-message-error > svg {
  margin-top: 3px;
}
[data-brand=ant] .system-message-error > p,
[data-brand=test] .system-message-error > p {
  flex: 1;
  margin-top: 0;
}

[data-brand=alpy] .system-message-error {
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
  padding: 24px;
  background-color: var(--kis-color-gray05);
  border-radius: 0 var(--kis-radius-xl) var(--kis-radius-xl) var(--kis-radius-xl);
}
[data-brand=alpy] .system-message-error > p {
  flex: 1;
  margin-top: 0;
}
.chat-messages {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 24px;
}
.chat-messages .message {
  padding: 0;
}
.chat-messages .message:nth-last-child(2) > :last-child {
  margin-bottom: 8px;
}

.source-content {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-wrap: wrap;
  background-color: var(--color-system-msg-bg, #f7f8f9);
  padding: 8px 16px;
  cursor: auto;
  text-decoration: none;
}
.source-content .source-content-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px 8px 8px;
  text-decoration: none;
  gap: 4px;
  cursor: pointer;
  background-color: #ffffff;
}
.source-content .source-content-item-link {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-weight: 500;
  font-size: 14px;
  color: #222;
  text-decoration: none;
  cursor: pointer;
}

.source-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 24px;
}
.source-link-list dt,
.source-link-list dd {
  min-height: 25px;
}
.source-link-list dt {
  padding: 5px 7px;
  font-size: var(--kis-font-13);
  font-weight: 600;
  border: 1px solid var(--kis-color-gray60);
  border-radius: 4px;
  color: var(--kis-color-gray60);
}
.source-link-list .source-content-link {
  font-size: var(--kis-font-14);
  font-weight: 500;
}
.source-link-list .source-content-link > a {
  display: inline-block;
  margin: 0;
  padding-top: 5px;
  text-decoration: underline;
  color: var(--kis-color-gray80);
  cursor: pointer;
}
.source-link-list .source-content-link:hover > a {
  text-decoration: none;
}

/* ================================
   대화 종료 안내
================================ */
.chat-end-guide {
  width: 100%;
  text-align: center;
  margin: 32px 0 0;
  padding-bottom: 48px;
}
.chat-end-guide .chat-end-divider {
  border: none;
  border-top: 1px solid var(--kis-color-gray30, #e3e5e8);
  margin-bottom: 20px;
  width: 100%;
}
.chat-end-guide .chat-end-text {
  font-size: 14px;
  color: var(--kis-color-gray70, #50555c);
  margin-bottom: 8px;
  line-height: 1.6;
  text-align: center;
}
.chat-end-guide .chat-end-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--kis-color-blue, #1677ff);
  text-decoration: underline;
}
.chat-end-guide .chat-end-link:hover {
  text-decoration: none;
}.infinite-scroll-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: inherit;
}

.infinite-scroll-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  min-height: 60px;
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  gap: 0.5rem;
}
.loading-spinner .loading-icon {
  color: #fbbf24;
  z-index: 10;
}
.loading-spinner .loading-icon .loading-circle {
  animation: loading-spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-spin {
  from {
    stroke-dashoffset: 31.416;
  }
  to {
    stroke-dashoffset: 0;
  }
}
[data-brand=ant] .infinite-scroll-container,
[data-brand=test] .infinite-scroll-container {
  max-width: var(--kis-width-max-content);
}.chat-panel {
  position: relative;
  padding: 16px;
  width: 100%;
  height: 100%;
  min-width: 500px;
  overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-page-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  scroll-behavior: smooth;
  z-index: 100;
}

.down-scroll-button {
  display: none;
}

.down-scroll-button.active {
  display: block;
  position: absolute;
  bottom: 24px;
  left: calc(50% - 21px);
  padding: 12px;
  width: 42px;
  height: 42px;
  background-color: white;
  border-color: var(--kis-color-gray20);
  border-radius: var(--kis-radius-circle);
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.031372549), -4px -4px 5px 0 rgba(0, 0, 0, 0.031372549);
  z-index: 1000;
  animation: moveUpDown 1.5s ease-in-out infinite;
}

[data-brand=ant] .down-scroll-button,
[data-brand=test] .down-scroll-button {
  bottom: 40px;
}[data-theme-mode=dark] .chat-layout__main {
  background-color: #090c14;
}
[data-theme-mode=dark] .chat-layout__footer {
  background-color: #090c11;
}

.delete-confirm-popup {
  min-width: 200px;
  padding: 16px;
}

.delete-confirm-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delete-confirm-title {
  font-size: 14px;
  font-weight: 600;
}

.delete-confirm-message {
  font-size: 13px;
  line-height: 0.4;
}

.delete-confirm-buttons {
  display: flex;
  gap: 8px;
  color: #090c11;
  justify-content: flex-end;
  height: 24px;
  margin-top: 5px;
}.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  color: #fff;
  border-radius: 1rem;
  cursor: pointer;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 24px;
  font-weight: 700;
  text-align: left;
  line-height: 3;
  white-space: pre-line;
}
.banner .banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner .banner-content--icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  flex-shrink: 0;
  overflow: hidden;
}
.banner .banner-content--background {
  width: 100%;
  height: 120px;
  border-radius: 1rem;
}
.banner .text-group {
  text-align: left;
}
@media screen and (max-width: 768px) {
  .banner {
    height: 130px;
  }
  .banner--icon .banner-content {
    gap: 15px;
  }
  .banner--icon .banner-icon {
    width: 80px;
    height: 80px;
  }
  .banner--icon .text-group .subtitle {
    font-size: 22px;
  }
  .banner--icon .text-group .title {
    font-size: 22px;
  }
  .banner--background .banner-content {
    gap: 10px;
  }
  .banner--background .banner-content .text-group {
    transform: translateX(-8%);
  }
  .banner--background .banner-content .text-group .subtitle {
    font-size: 22px;
  }
  .banner--background .banner-content .text-group .title {
    font-size: 22px;
  }
  .banner--background .banner-content svg {
    right: 10%;
    width: 120px;
    height: 110px;
    transform: translateY(4px);
  }
}
@media screen and (max-width: 480px) {
  .banner {
    height: 80px;
  }
  .banner--icon .banner-content {
    gap: 8px;
  }
  .banner--icon .banner-icon {
    width: 60px;
    height: 60px;
  }
  .banner--icon .text-group .subtitle {
    font-size: 16px;
  }
  .banner--icon .text-group .title {
    font-size: 16px;
    margin-top: 2px;
  }
  .banner--background .banner-content {
    gap: 4px;
  }
  .banner--background .banner-content .text-group {
    transform: translateX(-5%);
  }
  .banner--background .banner-content .text-group .subtitle {
    font-size: 16px;
  }
  .banner--background .banner-content .text-group .title {
    font-size: 16px;
    margin-top: 2px;
  }
  .banner--background .banner-content svg {
    width: 88px;
    height: 73px;
    transform: translateY(-1px);
  }
}[data-theme-mode=dark] .chat-layout__main {
  background-color: #090c14;
}
[data-theme-mode=dark] .chat-layout__footer {
  background-color: #090c11;
}

.delete-confirm-popup {
  min-width: 200px;
  padding: 16px;
}

.delete-confirm-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delete-confirm-title {
  font-size: 14px;
  font-weight: 600;
}

.delete-confirm-message {
  font-size: 13px;
  line-height: 0.4;
}

.delete-confirm-buttons {
  display: flex;
  gap: 8px;
  color: #090c11;
  justify-content: flex-end;
  height: 24px;
  margin-top: 5px;
}.chat-share-layer__backdrop {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  background-color: transparent;
  z-index: 1000;
}

.chat-share-layer {
  padding: 47px;
  width: 700px;
  background-color: #fff;
  border: 1px solid #ebebed;
  border-radius: 24px;
  box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.1019607843), -8px -8px 30px 0px rgba(0, 0, 0, 0.1019607843);
}
.chat-share-layer__title {
  position: relative;
  padding-right: 40px;
}
.chat-share-layer__title > h2 {
  line-height: 1.5;
  font-size: 24px;
  font-weight: 700;
}
.chat-share-layer__cancel {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.chat-share-layer__link-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
}
.chat-share-layer__link-box input {
  flex: 1;
  padding: 0 14px;
  height: 48px;
  text-decoration: underline;
  font-size: 16px;
  border: 1px solid #b3b4b9;
  border-radius: 8px;
  color: #1a1d29;
}
.chat-share-layer__link-box input:focus {
  outline: none;
  background-color: #ebebed;
}
.chat-share-layer__link-box .chat-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  width: 160px;
  height: 48px;
  font-size: 16px;
  background-color: #fff;
  border: 1px solid #4d4f58;
  border-radius: 8px;
  cursor: pointer;
}
.chat-share-layer__desc {
  margin-top: 12px;
  padding-left: 12px;
}
.chat-share-layer__desc > li {
  line-height: 1.5;
  font-size: 13px;
  color: #73757c;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.chat-actions-menu {
  display: flex;
  justify-content: flex-end;
  column-gap: 4px;
  margin-bottom: 8px;
  width: 100%;
  max-width: var(--kis-width-max-content);
}
.chat-actions-menu__button {
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto !important;
}.file-quota-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.file-quota-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-family: "Pretendard";
  overflow: hidden;
  display: flex;
  width: 760px;
  padding: 48px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}
.file-quota-modal .modal-header {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.file-quota-modal .modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.2;
}
.file-quota-modal .modal-header .btn-close {
  background: transparent !important;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.file-quota-modal .modal-header .btn-close svg {
  width: 100%;
  height: 100%;
}
.file-quota-modal .modal-header .btn-close:hover {
  opacity: 0.7;
}
.file-quota-modal .modal-body {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
}
.file-quota-modal .modal-body .desc {
  overflow: hidden;
  color: var(--Grey-Grey80, #4d4f58);
  text-overflow: ellipsis;
  font-family: "Pretendard";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 32px;
}
.file-quota-modal .modal-body .list-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}
.file-quota-modal .modal-body .process-list-container {
  max-height: 300px;
  overflow-y: auto;
}
.file-quota-modal .modal-body .process-list-container .agent-group {
  margin-bottom: 24px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .agent-name {
  font-size: 14px;
  font-weight: 700;
  color: #14a1eb;
  margin-bottom: 12px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item {
  margin-bottom: 16px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .spinner-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .spinner-wrap svg {
  width: 100%;
  height: 100%;
  animation: spin 1s linear infinite;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .file-name {
  font-family: "Pretendard";
  font-size: 16px;
  color: #4d4f58;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .file-name.cancelled {
  text-decoration: line-through;
  color: #73757c;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .meta-info {
  padding-left: 30px;
  font-size: 13px;
  color: #888;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .meta-info .date {
  margin-right: 10px;
}
.file-quota-modal .modal-body .process-list-container .empty-item {
  font-size: 14px;
  color: #999;
  text-align: center;
  padding: 20px 0;
}
.file-quota-modal .modal-footer {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.file-quota-modal .modal-footer .btn-ok {
  width: 100%;
  height: 56px;
  background-color: #0085ff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.file-quota-modal .modal-footer .btn-ok:hover {
  background-color: #006bce;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}.file-quota-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.file-quota-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  font-family: "Pretendard";
  overflow: hidden;
  display: flex;
  width: 760px;
  padding: 48px 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}
.file-quota-modal .modal-header {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.file-quota-modal .modal-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin: 0;
  line-height: 1.2;
}
.file-quota-modal .modal-header .btn-close {
  background: transparent !important;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.file-quota-modal .modal-header .btn-close svg {
  width: 100%;
  height: 100%;
}
.file-quota-modal .modal-header .btn-close:hover {
  opacity: 0.7;
}
.file-quota-modal .modal-body {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
}
.file-quota-modal .modal-body .desc {
  overflow: hidden;
  color: var(--Grey-Grey80, #4d4f58);
  text-overflow: ellipsis;
  font-family: "Pretendard";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 32px;
}
.file-quota-modal .modal-body .list-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}
.file-quota-modal .modal-body .process-list-container {
  max-height: 300px;
  overflow-y: auto;
}
.file-quota-modal .modal-body .process-list-container .agent-group {
  margin-bottom: 24px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .agent-name {
  font-size: 14px;
  font-weight: 700;
  color: #14a1eb;
  margin-bottom: 12px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item {
  margin-bottom: 16px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .spinner-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .spinner-wrap svg {
  width: 100%;
  height: 100%;
  animation: spin 1s linear infinite;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .file-name {
  font-family: "Pretendard";
  font-size: 16px;
  color: #4d4f58;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .file-info-row .file-name.cancelled {
  text-decoration: line-through;
  color: #73757c;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .meta-info {
  padding-left: 30px;
  font-size: 13px;
  color: #888;
}
.file-quota-modal .modal-body .process-list-container .agent-group .process-list .process-item .meta-info .date {
  margin-right: 10px;
}
.file-quota-modal .modal-body .process-list-container .empty-item {
  font-size: 14px;
  color: #999;
  text-align: center;
  padding: 20px 0;
}
.file-quota-modal .modal-footer {
  width: 100%;
  padding: 0 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.file-quota-modal .modal-footer .btn-ok {
  width: 100%;
  height: 56px;
  background-color: #0085ff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.file-quota-modal .modal-footer .btn-ok:hover {
  background-color: #006bce;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}.text-extra-small {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #222222;
}

.text-small, .kis-user-input .message-field-wrapper .status-info .status-count {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-middle {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  color: #222222;
}

.text-large {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  color: #222222;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em rgba(194, 241, 255, 0.6));
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em rgba(109, 221, 255, 0.6));
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 24px;
}

.read-the-docs {
  color: #777d8d;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tooltip-content .tooltip-label {
  font-weight: 500;
  color: #333333;
}

.tooltip-content .tooltip-value {
  font-weight: 600;
  color: #333333;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.kis-user-input {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  gap: 8px;
  width: 100%;
  background-color: white;
  position: relative;
}
.kis-user-input .tooltip-guide {
  position: absolute;
  top: -48px;
  left: 0;
  padding: 8px 12px;
  min-width: max-content;
  background-color: #232c3c;
  border-radius: 8px;
  color: #fff;
  font-size: var(--kis-font-13);
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
}
.kis-user-input .tooltip-guide p {
  margin: 0;
  line-height: 1.5;
}
.kis-user-input .tooltip-guide::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 14px;
  width: 0;
  height: 0;
  border-top: 6px solid #232c3c;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.kis-user-input .message-field-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 67px;
  width: 100%;
  background-color: white;
  border: 1px solid #b3b4b9;
  border-radius: var(--kis-radius-md);
}
.kis-user-input .message-field-wrapper .textarea-wrap {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-top: 15px;
}
.kis-user-input .message-field-wrapper .textarea-wrap .user-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  margin-left: 15px;
  padding: 0 8px;
  min-width: 83px;
  height: 29px;
  background-color: #f5fafd;
  border-radius: 9999px;
}
.kis-user-input .message-field-wrapper .textarea-wrap .user-credit--count {
  font-size: var(--kis-font-13);
  color: var(--kis-color-gray60);
}
.kis-user-input .message-field-wrapper .textarea-wrap .user-credit--count .count {
  font-weight: 700;
  color: var(--kis-color-blue30);
}
.kis-user-input .message-field-wrapper .textarea-wrap .user-credit--count .count.zero {
  color: var(--kis-color-blue60);
}
.kis-user-input .message-field-wrapper .textarea-wrap .user-credit + .message-field {
  padding-left: 0;
}
.kis-user-input .message-field-wrapper .message-field {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 24px;
  max-height: 240px; /* 16.8px * 10 = 168px */
  line-height: 1.5;
  font-size: var(--kis-font-base);
  text-overflow: ellipsis;
  background-color: transparent;
  border: none;
  color: var(--color-input-text);
  outline: none;
  overflow-y: auto;
  resize: none;
}
.kis-user-input .message-field-wrapper .message-field:disabled::placeholder {
  color: var(--color-text-secondary);
}
.kis-user-input .message-field-wrapper .status-info {
  display: flex;
  justify-content: center;
  align-self: self-start;
  gap: 2px;
  align-items: center;
  background-color: var(--color-count-badge-bg);
  padding: 5px 6px;
  border-radius: 16px;
}
.kis-user-input .message-field-wrapper .status-info .status-count {
  color: var(--color-count-badge-text);
  font-weight: 600;
}
.kis-user-input .message-field-wrapper:not(.disabled) .upload-files-wrap:hover .upload-tooltip-box {
  display: flex;
}
.kis-user-input .message-field-wrapper:not(.disabled) .upload-files-wrap:hover .upload-tooltip-box::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 56px;
  width: 0;
  height: 0;
  border-bottom: 6px solid var(--kis-color-gray80);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.kis-user-input .message-field-wrapper.focus-on {
  outline: 2px solid var(--kis-color-blue30);
  outline-offset: -2px;
}
.kis-user-input .message-field-wrapper.disabled {
  background-color: var(--color-input-disabled);
}
.kis-user-input .message-field-wrapper.disabled .upload-files {
  cursor: default;
}
.kis-user-input .message-field-wrapper.disabled .upload-files svg {
  fill: var(--kis-color-gray20);
}
.kis-user-input .message-field-wrapper.disabled .user-credit {
  background-color: var(--kis-color-gray30);
}
.kis-user-input .message-field-wrapper.disabled .user-credit .count {
  color: var(--kis-color-blue60);
}
.kis-user-input__preview {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 8px;
  padding: 15px 15px 0;
  max-height: 90px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
}
.kis-user-input__preview > li {
  position: relative;
  max-width: 192px;
  height: 64px;
  background-color: #fafafa;
  border-radius: 8px;
}
.kis-user-input__preview .preview-box.image {
  width: 32px;
  height: 32px;
}
.kis-user-input__preview .preview-box.doc {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.kis-user-input__preview .preview-box.doc > p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.kis-user-input__preview .preview-box.doc .doc-name {
  line-height: 1.1;
  font-size: var(--kis-font-14);
  font-weight: 500;
  color: #4d4f58;
}
.kis-user-input__preview .preview-box.doc .doc-size {
  font-size: var(--kis-font-13);
  color: #909599;
}
.kis-user-input__preview .preview-box > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kis-user-input__preview .preview-box--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.2509803922);
  border-radius: var(--kis-radius-sm);
  z-index: 10;
}
.kis-user-input__preview .preview-box--loading .file-loading {
  animation: spin 1s linear infinite;
}
.kis-user-input__preview .preview-box-wrapper {
  width: 100%;
  height: 100%;
  padding: 16px;
}
.kis-user-input__preview .btn-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 102;
}
.kis-user-input__submit {
  position: absolute;
  right: 15px;
  bottom: 15px;
  left: 15px;
}
.kis-user-input__submit .btn-submit {
  background-color: transparent;
  border: none;
}
.kis-user-input__submit .upload-files-wrap {
  float: left;
  font-size: 0;
}
.kis-user-input__submit .upload-files-wrap .btn-submit {
  cursor: pointer;
}
.kis-user-input__submit .upload-files-wrap .upload-tooltip-box {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 8px);
  left: -44px;
  padding: 12px;
  font-size: var(--kis-font-13);
  background-color: #4d4f58;
  border-radius: var(--kis-radius-sm);
  color: #fff;
  white-space: nowrap;
}
.kis-user-input__submit .upload-files-wrap .upload-tooltip-box pre {
  line-height: 1.5;
}
.kis-user-input__submit .user-submit-area {
  float: right;
  display: flex;
  align-items: center;
  column-gap: 8px;
}
.kis-user-input__submit .message-length {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909599;
  font-size: var(--kis-font-14);
  font-weight: 400;
}
.kis-user-input__submit .message-length > .count {
  color: #008ddb;
}
.kis-user-input__submit .submit-button rect {
  fill: #e1e2e5;
}
.kis-user-input__submit .submit-button path {
  fill: #fff;
}
.kis-user-input__submit .submit-button.disable rect {
  fill: var(--kis-btn-disabled);
}
.kis-user-input__submit .submit-button.disable path {
  fill: #b3b9c5;
}
.kis-user-input__submit .submit-button.active {
  cursor: pointer;
}
.kis-user-input__submit .submit-button.active rect {
  fill: var(--kis-color-blue30);
}
.kis-user-input__submit .submit-button.active path {
  fill: white;
}
.kis-user-input__submit .btn-chat-pause {
  background-color: transparent;
  border: none;
  cursor: pointer;
}.kis-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 38px;
  width: 100%;
}
.kis-footer__text {
  font-size: var(--kis-font-14);
  color: var(--kis-color-gray80);
}
.kis-footer__text * {
  text-align: center;
  color: var(--kis-color-gray80) !important;
}.kis-chat-page__init-message-container__content {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
}

.kis-chat-page__init-message {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-style: normal;
  line-height: 150%;
  letter-spacing: var(--Typo-Font-spacing-0, 0);
  color: var(--Typo-Font-Color-Primary, #1a1d29);
  font-size: var(--Font-size-Headline-Large, 24px);
  font-weight: 700;
  text-align: center;
  white-space: pre-line;
}

.kis-chat-page__init-title {
  line-height: 1.5 !important;
  text-align: center;
  font-size: var(--kis-font-24) !important;
  font-weight: 700 !important;
  font-synthesis: none !important;
  color: var(--kis-color-font) !important;
  white-space: pre-line;
}
.kis-chat-page__init-title > * {
  font-size: var(--kis-font-24) !important;
  font-weight: 700 !important;
  color: var(--kis-color-font) !important;
  white-space: pre-line;
}

.kis-chat-page__init-agent-name {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  text-align: center;
}

.kis-chat-page__init-message-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.kis-chat-page__init-message-skeleton__banner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.kis-chat-page__init-message-skeleton__icon {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.kis-chat-page__init-message-skeleton__agent-name {
  width: 200px;
  height: 24px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.kis-chat-page__init-message-skeleton__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 80%;
  max-width: 600px;
}
.kis-chat-page__init-message-skeleton__line {
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
.kis-chat-page__init-message-skeleton__line.short {
  width: 60%;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}.not-found-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  background-color: var(--color-page-bg, #ffffff);
  color: var(--color-text-primary, #252628);
  padding: 20px;
  box-sizing: border-box;
}

.not-found-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 500px;
  width: 100%;
}

.not-found-icon {
  font-size: 80px;
  font-weight: 700;
  color: var(--color-primary, #7d7d7d);
  margin-bottom: 28px;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .not-found-icon {
    font-size: 80px;
  }
}

.not-found-title {
  font-size: 32px;
  font-weight: 600;
  color: var(--color-text-primary, #252628);
  margin: 0 0 16px 0;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .not-found-title {
    font-size: 24px;
  }
}

.not-found-description {
  font-size: 16px;
  color: var(--color-text-secondary, #777d8d);
  margin: 0 0 32px 0;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .not-found-description {
    font-size: 14px;
  }
}

.not-found-button {
  background-color: var(--color-primary, #c2f1ff);
  color: var(--color-text-primary, #252628);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.not-found-button:hover {
  background-color: var(--color-skyblue, #6dddff);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.not-found-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .not-found-button {
    font-size: 14px;
    padding: 10px 20px;
  }
}

[data-theme-mode=dark] .not-found-page {
  background-color: var(--color-page-bg, #0f0f0f);
  color: var(--color-text-primary, #cecece);
}
[data-theme-mode=dark] .not-found-icon {
  color: var(--color-primary, #0e98ff);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
[data-theme-mode=dark] .not-found-title {
  color: var(--color-text-primary, #cecece);
}
[data-theme-mode=dark] .not-found-description {
  color: var(--color-text-secondary, #5f5f5f);
}
[data-theme-mode=dark] .not-found-button {
  background-color: var(--color-primary, #0e98ff);
  color: var(--color-text-primary, #ffffff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
[data-theme-mode=dark] .not-found-button:hover {
  background-color: var(--color-skyblue, #4a9eff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
:root {
  /* 페이지 배경 */
  --color-page-bg: #ffffff;
  --color-modal-bg: #ffffff;
  /* 시스템 메시지 */
  --color-system-msg-bg: #f7f8f9;
  --color-system-msg-text: #252628;
  /* 유저 메시지 */
  --color-user-msg-bg: #373740;
  --color-user-msg-text: #ffffff;
  /* 북마크·전송 버튼 (메인 컬러) */
  --color-bookmark-btn: #373740;
  --color-bookmark-shadow: #0000001a;
  --color-send-btn: #373740;
  --color-btn-disabled: #e5e7eb;
  /* 카테고리 칩 */
  --color-chip-bg: #ffffff;
  --color-chip-border: #e7ecf3;
  --color-chip-text: #252628;
  /* 입력창 */
  --color-input-bg: #f7f8f9;
  --color-input-border: #e0e0e0;
  --color-input-disabled: #f0f0f0;
  --color-input-text: #111827;
  /** 질문 수 배지 */
  --color-count-badge-bg: #e5e7eb;
  --color-count-badge-text: #222222;
  --color-count-icon: #777d8d;
  /* 답변 카드 */
  --color-reply-card-bg: #f8f9fa;
  --color-reply-card-border: #d8d7d7;
  --color-reply-card-text: #252628;
  /* 텍스트 일반 */
  --color-text-primary: #252628;
  --color-text-secondary: #777d8d;
  /* 추천 질문 */
  --color-recommend-question-bg: #fcfcfc;
  --color-recommend-question-text: #252628;
  /* 피드백 패널 */
  --color-feedback-panel-bg: #ffffff;
  --color-feedback-panel-border: #e0e0e0;
  --color-feedback-panel-text: #252628;
  /* 새로운 테마 시스템과 통합 */
  --color-border-primary: #f1f5f9;
  --color-border-secondary: #e5e7eb;
  /* 텍스트 컬러 */
  --color-text-primary: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-primary-blue: #3b82f6;
  /* Shadow */
  --color-hover: #f3f4f6;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --color-shadow-primary-blue: rgba(59, 130, 246, 0.1);
  /* 에이전트 패널 */
  --color-agent-panel-bg: #f9f8fd;
  --color-agent-panel-border: #e5e7eb;
  --color-agent-panel-text: #252628;
  /* 대화 스레드 패널 */
  --color-chat-thread-panel-bg: #fafafc;
  --color-chat-thread-panel-border: #e5e7eb;
  --color-chat-thread-panel-text: #252628;
  /* 도구 패널 */
  --color-tool-panel-bg: #f8f8fd;
  --color-tool-panel-border: #e5e7eb;
  --color-tool-panel-text: #252628;
  /* 추가 패널 변수들 */
  --color-panel-hover: #f3f4f6;
  --color-panel-active: #e5e7eb;
  --color-panel-disabled: #f9fafb;
  /* Tool Panel Colors */
  --color-tool-panel-light-bg: #ffffff;
  --color-tool-panel-light-border: #e5e7eb;
  --color-tool-panel-light-text: #111827;
  --color-tool-panel-light-text-secondary: #6b7280;
  --color-tool-panel-light-hover: #d9d9d9;
  /* Domain Tool Colors */
  --color-domain-tool-bg: #e9edef;
  --color-domain-tool-hover-bg: #edf0f2;
  --color-domain-tool-category: #dee0e4;
  --color-domain-tool-model-badge: #bbf7d0;
  --color-domain-tool-model-badge-dark: #efeff0;
  /* Default Tool Colors */
  --color-default-tool-bg: #effdf4;
  --color-default-tool-border: #bbf7d0;
  --color-default-tool-text: #047857;
  /* Button Colors */
  --button-red-primary: #ef4444;
  --button-red-hover: #dc2626;
  --button-red-active: #b91c1c;
  --button-red-light: #fef2f2;
  --button-yellow-primary: #f59e0b;
  --button-yellow-hover: #d97706;
  --button-yellow-active: #b45309;
  --button-yellow-light: #fffbeb;
  --button-purple-primary: #8b5cf6;
  --button-purple-hover: #7c3aed;
  --button-purple-active: #6d28d9;
  --button-purple-light: #faf5ff;
  --button-blue-primary: #008ddb;
  --button-blue-hover: #008ddb;
  --button-blue-active: #1d4ed8;
  --button-blue-light: #eff6ff;
  --button-skyblue-primary: #06b6d4;
  --button-skyblue-hover: #0891b2;
  --button-skyblue-active: #0e7490;
  --button-skyblue-light: #ecfeff;
  --button-black-primary: #1f2937;
  --button-black-hover: #111827;
  --button-black-active: #0f172a;
  --button-black-light: #f9fafb;
  --button-white-primary: #ffffff;
  --button-white-hover: #f3f4f6;
  --button-white-active: #f3f4f6;
  --button-white-border: #dddee0;
  --button-white-text: #1f2937;
  --button-green-primary: #10b981;
  --button-green-hover: #059669;
  --button-green-active: #047857;
  --button-green-light: #bbf7d0;
  --button-gray-primary: #6b7280;
  --button-gray-hover: #555555;
  --button-gray-active: #404040;
  --button-gray-light: #f3f4f6;
  --button-gray-border: #e5e7eb;
  --button-gray-text: #1f2937;
  /* SelectableListItem Colors */
  --selectable-blue-500: #3b82f6;
  --selectable-blue-50: #eff6ff;
  --selectable-blue-hover: #dbeafe;
  --selectable-blue-dark: #192348;
  --selectable-blue-dark-hover: #18253b;
  --selectable-green-500: #10b981;
  --selectable-green-50: #bbf7d0;
  --selectable-green-hover: #dcfce7;
  --selectable-green-dark: #15803d;
  --selectable-green-dark-hover: #10b981;
  --selectable-purple-500: #8b5cf6;
  --selectable-purple-50: #faf5ff;
  --selectable-purple-hover: #f3e8ff;
  --selectable-purple-dark: #7c3aed;
  --selectable-purple-dark-hover: #8b5cf6;
  --selectable-orange-500: #f97316;
  --selectable-orange-50: #fff7ed;
  --selectable-orange-hover: #fed7aa;
  --selectable-orange-dark: #c2410c;
  --selectable-orange-dark-hover: #f97316;
  --selectable-red-500: #ef4444;
  --selectable-red-50: #fef2f2;
  --selectable-red-hover: #fecaca;
  --selectable-red-dark: #b91c1c;
  --selectable-red-dark-hover: #ef4444;
  --selectable-gray-500: #6b7280;
  --selectable-gray-50: #f9fafb;
  --selectable-gray-hover: #f3f4f6;
  --selectable-gray-dark: #374151;
  --selectable-gray-dark-hover: #6b7280;
  /* Kis Theme Colors */
  --kis-menu-bg: #232c3c;
  --kis-menu-text: #fff;
  --kis-menu-title: #909599;
  --kis-layout-border: #cdcecf;
  --kis-text-secondary: #1a1d29;
  --kis-text-tertiary: #4d4f58;
  --selectable-kis-border: #cdcecf;
  --selectable-kis-selected: #3b475c;
  --selectable-kis-selected-text: #ffffff;
  --selectable-kis-hover: #3b475c;
  --selectable-kis-text: #fff;
  --selectable-kis-default: #f7f8f9;
  --kis-btn: #2563eb;
  --kis-btn-hover: #1d4ed8;
  --kis-btn-active: #1e40af;
  --kis-btn-disabled: #f1f2f4;
  --kis-system-msg-bg: #f7f8f9;
  --kis-text-dark: #000000;
  --kis-text-main: #1a1d29;
  --kis-text-sub: #73757c;
  --kis-text-desc: #4d4f58;
  --kis-text-user: #80624c;
  --kis-text-point: #2563eb;
  --kis-msg-user: #f5fafd;
  /* Thinking Message Colors (Light Mode) */
  --color-thinking-bg: #f8f9fa;
  --color-thinking-border: #e9ecef;
  --color-thinking-text: #495057;
  --color-thinking-content: #212529;
  --color-thinking-meta: #6c757d;
  --color-thinking-meta-bg: #f1f3f4;
  --color-thinking-meta-text: #6c757d;
  --color-thinking-badge: #007bff;
  --color-thinking-badge-text: #ffffff;
  /* Table Colors (Light Mode) */
  --color-table-bg: var(--Color-Blue-99, #ffffff);
  --color-table-border: var(--State-Border-Default, #dcdfe4);
  --color-table-text: #495057;
  --color-table-header-bg: #f8f9fa;
  --color-table-header-text: #495057;
  --color-table-row-bg: #f8f9fa;
}

[data-theme-mode=light][data-accent=purple] {
  --color-user-msg-bg: #755fff;
  --color-bookmark-btn: #755fff;
  --color-send-btn: #755fff;
}
[data-theme-mode=light][data-accent=blue] {
  --color-user-msg-bg: #466cf5;
  --color-bookmark-btn: #466cf5;
  --color-send-btn: #466cf5;
}

[data-theme-mode=dark] {
  /** 페이지 배경 */
  --color-page-bg: #0f0f0f;
  --color-modal-bg: #0f141a;
  /** 시스템 메시지 */
  --color-system-msg-bg: #1a1a1a;
  --color-system-msg-text: #cecece;
  /** 유저 메시지 */
  --color-user-msg-bg: #0e98ff;
  --color-user-msg-text: #ffffff;
  /** 북마크·전송 버튼 */
  --color-bookmark-btn: #0e98ff;
  --color-bookmark-shadow: #9090902c;
  --color-send-btn: #0e98ff;
  /** 카테고리 칩 */
  --color-chip-bg: #212121;
  --color-chip-border: #212121;
  --color-chip-text: #ffffff;
  /** 입력창 */
  --color-input-bg: #212121;
  --color-input-disabled: #4d4c4c;
  --color-input-border: #2b2b2b;
  --color-input-text: #ffffff;
  /** 질문 수 배지 */
  --color-count-badge-bg: #3a3a3a;
  --color-count-badge-text: #cecece;
  --color-count-icon: #5f5f5f;
  /** 답변 카드 */
  --color-reply-card-bg: #212121;
  --color-reply-card-border: #212121;
  --color-reply-card-text: #cecece;
  /** 텍스트 일반 */
  --color-text-primary: #cecece;
  --color-text-secondary: #5f5f5f;
  /** 추천 질문 */
  --color-recommend-question-bg: #1a1a1a;
  --color-recommend-question-text: #cecece;
  /** 피드백 패널 */
  --color-feedback-panel-bg: #212121;
  --color-feedback-panel-border: #444444;
  --color-feedback-panel-text: #cecece;
  /* 새로운 테마 시스템과 통합 */
  --color-border-primary: #2d3748;
  --color-border-secondary: #4a5568;
  /* 텍스트 컬러 */
  --color-text-primary: #f9fafb;
  --color-text-secondary: #d1d5db;
  --color-text-tertiary: #9ca3af;
  --color-text-primary-blue: #60a5fa;
  /* Shadow */
  --color-hover: #374151;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-primary-blue: rgba(96, 165, 250, 0.1);
  /* 에이전트 패널 */
  --color-agent-panel-bg: #0f1419;
  --color-agent-panel-border: #142644;
  --color-agent-panel-text: #e2e8f0;
  /* 대화 스레드 패널 */
  --color-chat-thread-panel-bg: #161e2b;
  --color-chat-thread-panel-border: #253143;
  --color-chat-thread-panel-text: #e2e8f0;
  /* 도구 패널 */
  --color-tool-panel-bg: #181c20;
  --color-tool-panel-border: #1d1e1e;
  --color-tool-panel-text: #cecece;
  /* 추가 패널 변수들 */
  --color-panel-hover: #374151;
  --color-panel-active: #4b5563;
  --color-panel-disabled: #1f2937;
  /* Tool Panel Colors (Dark Mode) */
  --color-tool-panel-light-bg: #111827;
  --color-tool-panel-light-border: #374151;
  --color-tool-panel-light-text: #f9fafb;
  --color-tool-panel-light-text-secondary: #9ca3af;
  --color-tool-panel-light-hover: #374151;
  /* Domain Tool Colors (Dark Mode) */
  --color-domain-tool-bg: rgba(31, 41, 55, 0.5);
  --color-domain-tool-hover-bg: rgba(31, 41, 55, 0.5);
  --color-domain-tool-category: #4b5563;
  --color-domain-tool-model-badge: #047857;
  --color-domain-tool-model-badge-dark: #3d3d3d;
  /* Default Tool Colors (Dark Mode) */
  --color-default-tool-bg: rgba(5, 46, 22, 0.2);
  --color-default-tool-border: #047857;
  --color-default-tool-text: #4ade80;
  /* Button Colors (Dark Mode) */
  --button-red-primary: #ef4444;
  --button-red-hover: #dc2626;
  --button-red-active: #b91c1c;
  --button-red-light: #fef2f2;
  --button-yellow-primary: #f59e0b;
  --button-yellow-hover: #d97706;
  --button-yellow-active: #b45309;
  --button-yellow-light: #fffbeb;
  /* Thinking Message Colors (Dark Mode) */
  --color-thinking-bg: #2a2a2a;
  --color-thinking-border: #404040;
  --color-thinking-text: #e0e0e0;
  --color-thinking-content: #f0f0f0;
  --color-thinking-meta: #a0a0a0;
  --color-thinking-meta-bg: #1a1a1a;
  --color-thinking-meta-text: #888888;
  --color-thinking-badge: #4a9eff;
  --color-thinking-badge-text: #ffffff;
  --button-purple-primary: #8b5cf6;
  --button-purple-hover: #7c3aed;
  --button-purple-active: #6d28d9;
  --button-purple-light: #faf5ff;
  --button-blue-primary: #3b82f6;
  --button-blue-hover: #2563eb;
  --button-blue-active: #1d4ed8;
  --button-blue-light: #eff6ff;
  --button-skyblue-primary: #06b6d4;
  --button-skyblue-hover: #0891b2;
  --button-skyblue-active: #0e7490;
  --button-skyblue-light: #ecfeff;
  --button-black-primary: #1f2937;
  --button-black-hover: #111827;
  --button-black-active: #0f172a;
  --button-black-light: #f9fafb;
  --button-white-primary: #ffffff;
  --button-white-hover: #f9fafb;
  --button-white-active: #f3f4f6;
  --button-white-border: #eeeff1;
  --button-white-text: #1f2937;
  --button-green-primary: #10b981;
  --button-green-hover: #059669;
  --button-green-active: #047857;
  --button-green-light: #ecfdf5;
  --button-gray-primary: #9ea3ac;
  --button-gray-hover: #d1d5db;
  --button-gray-active: #f3f4f6;
  --button-gray-light: #374151;
  --button-gray-border: #4b5563;
  --button-gray-text: #f9fafb;
  /* SelectableListItem Colors (Dark Mode) */
  --selectable-blue-500: #3b82f6;
  --selectable-blue-50: #2c3d5d;
  --selectable-blue-hover: #18253b;
  --selectable-blue-dark: #222d57;
  --selectable-blue-dark-hover: #18253b;
  --selectable-green-500: #10b981;
  --selectable-green-50: #15803d;
  --selectable-green-hover: #10b981;
  --selectable-green-dark: #15803d;
  --selectable-green-dark-hover: #10b981;
  --selectable-purple-500: #8b5cf6;
  --selectable-purple-50: #7c3aed;
  --selectable-purple-hover: #a855f7;
  --selectable-purple-dark: #7c3aed;
  --selectable-purple-dark-hover: #8b5cf6;
  --selectable-orange-500: #f97316;
  --selectable-orange-50: #c2410c;
  --selectable-orange-hover: #f97316;
  --selectable-orange-dark: #c2410c;
  --selectable-orange-dark-hover: #f97316;
  --selectable-red-500: #ef4444;
  --selectable-red-50: #b91c1c;
  --selectable-red-hover: #ef4444;
  --selectable-red-dark: #b91c1c;
  --selectable-red-dark-hover: #ef4444;
  --selectable-gray-500: #6b7280;
  --selectable-gray-50: #374151;
  --selectable-gray-hover: #6b7280;
  --selectable-gray-dark: #374151;
  --selectable-gray-dark-hover: #6b7280;
  /* Table Colors (Dark Mode) */
  --color-table-bg: #1d1d1d;
  --color-table-border: #404040;
  --color-table-text: #e0e0e0;
  --color-table-header-bg: #1a1a1a;
  --color-table-header-text: #e0e0e0;
  --color-table-row-bg: #1a1a1a;
}

.theme-bg-primary {
  background-color: var(--color-page-bg);
}

.theme-bg-secondary {
  background-color: var(--color-system-msg-bg);
}

.theme-bg-tertiary {
  background-color: var(--color-input-bg);
}

.theme-bg-chat {
  background-color: var(--color-page-bg);
}

.theme-text-primary {
  color: var(--color-text-primary);
}

.theme-text-secondary {
  color: var(--color-text-secondary);
}

.theme-text-tertiary {
  color: var(--color-count-icon);
}

.theme-border {
  border: 1px solid var(--color-border-primary);
}

.theme-border-top {
  border-top: 1px solid var(--color-border-primary);
}

.theme-border-bottom {
  border-bottom: 1px solid var(--color-border-primary);
}

.theme-card {
  background-color: var(--color-reply-card-bg);
  border: 1px solid var(--color-reply-card-border);
  color: var(--color-reply-card-text);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.theme-button {
  background-color: var(--color-bookmark-btn);
  color: var(--color-user-msg-text);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}
.theme-button:hover:not(:disabled) {
  opacity: 0.8;
}
.theme-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.theme-input {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  color: var(--color-input-text);
  border-radius: 6px;
  transition: border-color 0.2s ease-in-out;
}
.theme-input:focus {
  outline: none;
  border-color: var(--color-bookmark-btn);
  box-shadow: 0 0 0 2px rgba(14, 152, 255, 0.1);
}
.theme-input::placeholder {
  color: var(--color-count-icon);
}

/*
  개미스쿨 Agent UI (기존 KIS 스킨 토큰 prefix 유지: --kis-*)
  포인트 컬러: antschool-web-user :root --primary (hsl(221 83% 53%))
*/
:root {
  --kis-color-main: #232c3c;
  --kis-color-font: #1a1d29;
  --kis-color-blue30: #2563eb;
  --kis-color-gray80: #4d4f58;
  --kis-color-gray70: #73757c;
  --kis-color-gray60: #909599;
  --kis-color-gray50: #b3b4b9;
  --kis-color-gray40: #cdcecf;
  --kis-color-gray30: #e1e2e5;
  --kis-color-gray20: #ebebed;
  --kis-color-gray10: #f6f8fc;
  --kis-color-gray05: #fafafa;
  --kis-color-disable: #e1e2e5;
  --kis-color-error: #e74242;
  --kis-font-base: 1rem;
  --kis-font-42: 2.625rem;
  --kis-font-32: 2rem;
  --kis-font-24: 1.5rem;
  --kis-font-20: 1.25rem;
  --kis-font-18: 1.125rem;
  --kis-font-14: 0.875rem;
  --kis-font-13: 0.813rem;
  --kis-font-12: 0.75rem;
  --kis-radius-xs: 6px;
  --kis-radius-sm: 8px;
  --kis-radius-md: 12px;
  --kis-radius-lg: 16px;
  --kis-radius-xl: 24px;
  --kis-radius-circle: 50%;
  --kis-radius-non-circle: 9999px;
  --kis-width-side-bar: 272px;
  --kis-width-max-content: 1024px;
}

.txt-blu {
  color: var(--kis-color-blue30);
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

input[type=text] {
  padding: 0 15px;
  height: 48px;
  font-size: var(--kis-font-base);
  background-color: white;
  border: 1px solid var(--kis-color-gray40);
  border-radius: 8px;
  color: var(--kis-color-font);
}
input[type=text]::placeholder {
  color: var(--kis-color-gray70);
}

input[type=radio].blind-input,
input[type=checkbox].blind-input,
input[type=file].blind-input {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

ul.kis-ul {
  list-style: none;
}
ul.kis-ul > li {
  position: relative;
  padding-left: 8px;
  font-size: var(--kis-font-base);
  color: var(--kis-color-gray80);
}
ul.kis-ul > li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: var(--kis-color-gray80);
  border-radius: var(--kis-radius-circle);
}

.btn {
  background-color: transparent;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
}
.btn--cancel, .btn--agree {
  width: 160px;
  height: 56px;
  text-align: center;
  font-size: var(--kis-font-base);
  font-weight: 600;
  border-radius: 8px;
}
.btn--cancel {
  background-color: white;
  border-color: var(--kis-color-gray50);
  color: var(--kis-color-gray80);
}
.btn--agree {
  background-color: var(--kis-color-blue30);
  color: white;
}
.btn--agree:disabled, .btn--agree.disabled {
  background-color: var(--kis-color-gray20);
  color: var(--kis-color-gray60);
  cursor: default;
  pointer-events: none;
}

.submit-btn-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.submit-btn-line.align-cntr {
  justify-content: center;
}

.kis-dropdown {
  position: relative;
}
.kis-dropdown .btn-dropdown {
  display: flex;
  align-items: center;
}
.kis-dropdown .btn-dropdown > p {
  flex: 1;
  font-size: var(--kis-font-base);
  color: var(--kis-color-font);
}
.kis-dropdown .btn-dropdown > svg {
  transition: transform 200ms ease-out;
}
.kis-dropdown.open .btn-dropdown > svg {
  transform: rotate(180deg);
}
.kis-dropdown--list {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  padding: 15px;
  list-style: none;
  background-color: white;
  border: 1px solid var(--kis-color-gray50);
  border-radius: 8px;
  animation: dropdownFadeIn 200ms ease-out;
  z-index: 200;
}
.kis-dropdown--list label {
  display: flex;
  align-items: center;
  column-gap: 12px;
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.kis-dropdown--list label p {
  flex: 1;
  color: var(--kis-color-gray70);
}
.kis-dropdown--list label:hover {
  background-color: var(--kis-color-gray05);
}
.kis-dropdown--list label:hover p {
  color: var(--kis-color-font);
}
.kis-dropdown--input:checked + p {
  color: var(--kis-color-font);
}
.kis-dropdown--input:checked + p + svg path {
  stroke: var(--kis-color-blue30);
}
.kis-dropdown.dropbox .btn-dropdown {
  justify-content: space-between;
  column-gap: 16px;
  padding: 0 15px;
  width: 100%;
  height: 48px;
  background-color: white;
  border-color: var(--kis-color-gray50);
  border-radius: 8px;
}
.kis-dropdown.dropbox .btn-dropdown:disabled {
  background-color: var(--kis-color-gray20);
  border-color: var(--kis-color-gray40);
  cursor: default;
}
.kis-dropdown.dropbox .btn-dropdown:disabled > p {
  color: var(--kis-color-gray70);
}
.kis-dropdown.dropbox .kis-dropdown--list {
  top: 56px;
  right: 0;
}

.kis-select {
  margin-top: 16px;
  padding: 24px;
  background-color: var(--kis-color-gray05);
  border-radius: 12px;
}
.kis-select--list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  list-style: none;
}
.kis-select--list label {
  display: flex;
  align-items: center;
  column-gap: 12px;
  position: relative;
  min-height: 24px;
  cursor: pointer;
}
.kis-select--list label > p {
  flex: 1;
  font-size: var(--kis-font-base);
  color: var(--kis-color-gray80);
}
.kis-select--list.disabled p {
  color: var(--kis-color-gray80);
}
.kis-select--input:checked + p + svg path {
  stroke: var(--kis-color-blue30);
}

.popup-layer-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  animation: dropdownFadeIn 300ms ease-out;
}
.popup-layer-wrap .popup-layer {
  padding: 47px;
  background-color: white;
  border: 1px solid var(--kis-color-gray20);
  border-radius: var(--kis-radius-lg);
  box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.1019607843), -8px -8px 30px 0px rgba(0, 0, 0, 0.1019607843);
}
.popup-layer-wrap .popup-layer--header {
  position: relative;
  padding-right: 40px;
}
.popup-layer-wrap .popup-layer--header > h2,
.popup-layer-wrap .popup-layer--header > h3 {
  line-height: 1.5;
  font-size: var(--kis-font-24);
  font-weight: 700;
  color: var(--kis-color-font);
}
.popup-layer-wrap .popup-layer--header .btn-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
}
.popup-layer-wrap .popup-layer--body {
  margin-top: 32px;
}
.popup-layer-wrap .popup-layer--footer {
  margin-top: 32px;
}
.popup-layer-wrap .popup-layer.alert {
  padding-right: 32px;
  padding-left: 32px;
  width: 540px;
}
.popup-layer-wrap .popup-layer.alert .popup-layer--header {
  padding-right: 0;
}
.popup-layer-wrap .popup-layer.alert .popup-layer--header > h2 {
  text-align: center;
  font-size: var(--kis-font-20);
}
.popup-layer-wrap .popup-layer.alert .popup-layer--body {
  margin-top: 16px;
}
.popup-layer-wrap .popup-layer.alert .popup-layer--body .msg {
  text-align: center;
  color: var(--kis-color-gray70);
}

.form-tooltip-wrap {
  display: flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
}
.form-tooltip-wrap .tooltip {
  display: none;
  position: absolute;
  top: 24px;
  left: calc(100% - 78px);
  padding: 12px;
  background-color: var(--kis-color-gray80);
  border-radius: 8px;
  z-index: 10;
  animation: fade-in 200ms ease-out;
}
.form-tooltip-wrap .tooltip > pre {
  line-height: 1.5;
  font-size: var(--kis-font-13);
  color: white;
}
.form-tooltip-wrap .tooltip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 64px;
  width: 0;
  height: 0;
  border-bottom: 6px solid var(--kis-color-gray80);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}
.form-tooltip-wrap:hover .tooltip {
  display: block;
}

.clearable-input-box {
  position: relative;
  width: 100%;
}
.clearable-input-box > input[type=text] {
  padding-right: 41px;
  width: 100%;
}
.clearable-input-box .btn--clear {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 10px;
}

.search-result-msg {
  font-size: var(--kis-font-base);
  font-weight: 600;
  color: var(--kis-color-gray80);
}

@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-style: normal;
  src: url("/fonts/Pretendard-Thin.woff2") format("woff2"), url("/fonts/Pretendard-Thin.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-style: normal;
  src: url("/fonts/Pretendard-ExtraLight.woff2") format("woff2"), url("/fonts/Pretendard-ExtraLight.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  src: url("/fonts/Pretendard-Light.woff2") format("woff2"), url("/fonts/Pretendard-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  src: url("/fonts/Pretendard-Regular.woff2") format("woff2"), url("/fonts/Pretendard-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  src: url("/fonts/Pretendard-Medium.woff2") format("woff2"), url("/fonts/Pretendard-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2"), url("/fonts/Pretendard-SemiBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  src: url("/fonts/Pretendard-Bold.woff2") format("woff2"), url("/fonts/Pretendard-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  src: url("/fonts/Pretendard-ExtraBold.woff2") format("woff2"), url("/fonts/Pretendard-ExtraBold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-style: normal;
  src: url("/fonts/Pretendard-Black.woff2") format("woff2"), url("/fonts/Pretendard-Black.woff") format("woff");
  font-display: swap;
}
* {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  line-height: 1;
  text-align: left;
}

:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --user-input-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  width: 100vw;
  height: 100vh;
  margin: 0;
  font-size: 16px;
  overscroll-behavior: none;
  overflow: hidden;
}

body {
  position: relative;
  margin: 0;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  background-color: var(--color-page-bg);
  overflow: hidden;
}

body,
#root {
  overflow: hidden;
}

textarea {
  height: 16px;
}

svg {
  display: block;
}

#root {
  width: 100%;
  height: 100%;
  border: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--kis-color-gray30);
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--kis-color-gray50);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--kis-color-gray50);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

::-webkit-scrollbar-button {
  display: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.apexcharts-tooltip {
  background-color: #ffffff !important;
  color: #555555 !important;
  padding: 10px !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1607843137) !important;
}

.apexcharts-tooltip-title {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 600 !important;
}

.tooltip-content {
  width: 100%;
  color: #333333;
  border-radius: 8px;
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  min-width: 40px;
  text-align: left;
  z-index: 10;
}

.tooltip-content .tooltip-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.tooltip-content .tooltip-item:last-child {
  margin-bottom: 0;
}

.tooltip-content .tooltip-dot {
  width: 10px;
  height: 10px;
  background-color: #f4d19b;
  /* Adjust color as needed */
  border-radius: 50%;
  margin-right: 6px;
}

.tooltip-content .tooltip-label {
  display: flex;
  align-items: center;
  color: #313131;
}
.tooltip-content .tooltip-label .tooltip-title {
  color: #8b8b8b;
}

.tooltip-content .tooltip-value {
  color: #313131;
  font-weight: 700;
}

[data-theme-mode=dark] .apexcharts-tooltip {
  background-color: #212121 !important;
  color: #fff !important;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.4) !important;
}
[data-theme-mode=dark] .apexcharts-tooltip-title {
  background-color: #212121 !important;
}
[data-theme-mode=dark] .tooltip-content {
  color: #fff;
}
[data-theme-mode=dark] .tooltip-content .tooltip-label {
  color: #cecece;
}
[data-theme-mode=dark] .tooltip-content .tooltip-label .tooltip-title {
  color: #fff;
}
[data-theme-mode=dark] .tooltip-content .tooltip-value {
  color: #cecece;
}

html.keyboard-visible {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.katex * {
  font-family: var(--Typo-Font-family-Type, Pretendard, sans-serif) !important;
}

.markdown-content a {
  text-decoration: underline !important;
  word-break: break-all;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
}
.markdown-content a:hover {
  text-decoration: none !important;
}
.markdown-content.prose a {
  text-decoration: underline !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.markdown-content.prose a:hover {
  text-decoration: none !important;
}

#make-scrollable {
  position: absolute;
  left: 0;
  width: 1px;
  height: calc(100% + 1px);
}

@media (max-width: 1300px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 1296px) {
  :root {
    --kis-width-max-content: 860px;
  }
  body,
  #root {
    overflow-x: auto;
  }
}