/* Font
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 한국,미국 기본 폰트 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
/* 일본 기본 폰트 */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
/* 공통 영문 폰트 */
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

:root {
  /* 
        theme.css 의 css 변수를 overwrite
        변수 정의는 알파멧 순으로 한다
    */
  --primary-color: #4281ff;
  --secondary-color: #e4f2ff;
  --accent-color: #000000;

  /* base color */
  --white: #ffffff;

  /* background */
  --background-fill-secondary: #f8f8f9;
  --bg-color: #fff;
  --bg-secondary: #ececec;

  /* 랜딩이펙트 */
  --bg: #060816;
  --star: #cfd8ff;
  --star-glow: rgba(207, 216, 255, 0.6);

  /* border */
  --border-color-primary: #e4e4e7;
  --border-color-secondary: #eeeeee;

  /* button */
  --btn-bg-color: #ececec;

  /* --body-text-color:#fff; */
  --bubble-bg-bot: #f4f4f4;
  --bubble-bg-user: #e8ebfa;
  --disabled-color: #dfdfdf;

  /* text */
  --text-primary-color: #000000;
  /* --text-secondary-color: #afadad; */
  --text-secondary-color: #6b7280;
  --text-active-color: #ffffff;
}

/* color */
.point-color {
  color: var(--primary-color);
}
/* 
* {
  outline: 1px solid red;
} */

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* #react-entry-point{
background-color: pink;
} */

.row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", "Noto Sans JP", sans-serif;
  box-sizing: border-box;
  line-height: 1.5em;
  scrollbar-color: #ececec transparent;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
  ========================================================================== */

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  /*font-size: 62.5%;*/ /* 10px로 설정 */
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Grouping content
    ========================================================================== */

/**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

hr.-dashed {
  border-top: 1px dashed var(--border-color-primary);
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
    ========================================================================== */

/**
  * Remove the gray background on active links in IE 10.
  */

a {
  background-color: transparent;
}

/**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */

b,
strong {
  font-weight: bolder;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
  * Add the correct font size in all browsers.
  */

small {
  font-size: 80%;
}

/**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
    ========================================================================== */

/**
  * Remove the border on images inside links in IE 10.
  */

img {
  border-style: none;
}

/* Forms
    ========================================================================== */

/**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 15px;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
  * Correct the inability to style clickable types in iOS and Safari.
  */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
}

/**
  * Remove the inner border and padding in Firefox.
  */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
  * Restore the focus styles unset by the previous rule.
  */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
  * Correct the padding in Firefox.
  */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */

progress {
  vertical-align: baseline;
}

/**
  * Remove the default vertical scrollbar in IE 10+.
  */

textarea {
  overflow: auto;
}

/**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  border: 1px solid #333; /* teresa added */
}

/**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */

[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
  * Remove the inner padding in Chrome and Safari on macOS.
  */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
    ========================================================================== */

/*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */

details {
  display: block;
}

/*
  * Add the correct display in all browsers.
  */

summary {
  display: list-item;
}

/* Misc
    ========================================================================== */

/**
  * Add the correct display in IE 10+.
  */

template {
  display: none;
}

/**
  * Add the correct display in IE 10.
  */

[hidden] {
  display: none;
}

button {
  border: none;
  background-color: transparent;
}

a:hover,
button:hover {
  opacity: 0.8;
  cursor: pointer;
}

/* ul,ol,dl{
  list-style: none;
  } */

/* ***************************** 
common style
***************************** */

/* 정렬 */
.-flex {
  display: flex;
  align-items: center;
}

.-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.-flex-right {
  display: flex;
  justify-content: right;
}

.-flex-end {
  display: flex;
  justify-content: flex-end;
}

.-flex-column {
  display: flex;
  flex-direction: column;
}

.-flex-gap {
  display: flex;
  gap: 10px;
}

.-flex-gap5 {
  display: flex;
  gap: 5px;
}

.-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.-inline-flex {
  display: inline-flex;
  align-items: center;
}

.-align-self-start {
  align-self: flex-start;
}
.-align-self-center {
  align-self: center;
}
/* 숨김 */
.hidden {
  display: block;
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

.visually-hidden {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  position: absolute;
}

/* 높이값 */
.-h150 {
  height: 150px;
}

/* 여백 */
.marT-20 {
  margin-top: 20px;
}

/* 텍스트 줄임 */
.text-ellipsis {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow: hidden;
}

.text-ellipsis-2 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow: hidden;
}

.text-ellipsis-3 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow: hidden;
}

.text-ellipsis-4 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow: hidden;
}

.text-ellipsis-5 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  word-break: keep-all;
  overflow: hidden;
}

/* ***************************** 
글로벌 툴 스타일
***************************** */
/* 기본: 네비 닫힘 상태 */
.global-tools-inner {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 75px);
  display: flex;
  justify-content: space-between;
  z-index: 9999;
  transition: width 0.2s ease;
}

/* 네비 열림 상태에 대응 */
.global-tools-inner.active-tool {
  width: calc(100% - 300px); /* 네비 열림 기준 값 */
}

.global-tools {
  background-color: #fff;
  border: 1px solid #eeeeee;
  padding: 5px 10px;
  border-radius: 30px;
  display: flex;
  margin-top: 5px;
  margin-right: 5px;
}

.global-tools button.btn {
  width: 30px;
  height: 30px;
  background-size: 18px;
}

/*  기본 골격 구조 스타일*/
/* teresa modified container 클래스는 bootstrap css 의 class 이름과 동일하여 
bootstrap 을 사용하는 경우 충돌이 발생한다.
따라서, 이름을 변경한다. container 에서 main_container 로 변경*/
.main-container {
  height: calc(100dvh);
  width: 100%;
  position: relative;
}
.main-container.-start {
  background: radial-gradient(
    1200px 800px at 50% 20%,
    #0b1030 0%,
    var(--bg) 60%,
    #02030a 100%
  );
}
.main,
.content-area {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  transition: width 0.5s ease;
}

.content {
  width: 100%;
  height: 100%;
  /* background-color: pink;     */
}

.active-nav .navigation {
  /* margin-left: 0; */
  left: 0;
  box-shadow: -4px 0 12px rgba(0, 0, 0, 9);
  width: 300px;
}

.side-area {
  display: none;
}

.-h-dvh100 {
  height: calc(100dvh);
}

/* 스크롤 스타일 */
.-scroll_Y {
  overflow-y: scroll;
  scrollbar-width: thin;
}
.-scroll_Y-auto {
  overflow-y: auto;
  scrollbar-width: thin;
}

/* *****************************
네비게이션
***************************** */
.navigation {
  width: 75px;
  height: 100%;
  background-color: #3a3d44;
  padding: 30px 20px;
  z-index: 9999;
  /* transition: left 0.4s ease-in-out; */
  transition: 0.4s ease-in-out;
  flex: none;
  /* 텍스트 드래그 선택 방지 */
  user-select: none;
  -webkit-user-select: none; /* 사파리 */
  -moz-user-select: none; /* 파이어폭스 */
  -ms-user-select: none; /* 인터넷 익스플로러 */
  overflow: hidden;
}

.nav-section {
  /* padding: 0 10px; */
  /* height: calc(100vh - 220px); */
  height: calc(100vh - 60px);
  /* overflow-y: auto; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-btn {
  background: url(../images/icon-sidebar-white.svg) center no-repeat;
  width: 25px;
  height: 25px;
  /* position: absolute;
  top: 38px;
  right: -23px; */
}

.active-nav .nav-btn {
  background: url(../images/icon-sidebar-white-on.svg) center no-repeat;
}

.nav-btn:hover {
  opacity: 1;
}

.mode-article {
  margin: 0 10px;
  border-bottom: 1px solid #ffffff54;
}

.nav-article .nav-column {
  display: flex;
  align-items: center;
  width: 100%;
  height: 45px;
  gap: 15px;
  cursor: pointer;
}

.nav-article .nav-column .icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  flex: none;
}
.nav-article .nav-column:hover {
  opacity: 0.8;
}
.nav-article .nav-column .title-item,
.nav-article .accounts-profile-item {
  display: none;
}
.active-nav .nav-article .nav-column .title-item,
.active-nav .nav-article .accounts-profile-item {
  display: flex;
}
.nav-article .nav-column .title-item,
.nav-history-article .nav-column .title-item,
.nav-history-article .nav-list-item {
  width: calc(100% - 50px);
}

.nav-company-article .nav-list-item {
  display: none;
  flex-direction: column;
  width: calc(100% - 50px);
  margin-left: 50px;
}

.nav-history-article {
  flex: 1;
  height: calc(100% - 435px);
}

.nav-history-article .nav-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: end;
  gap: 0;
}

.nav-article .title-item,
.nav-article .accounts-profile-item {
  border-top: 1px solid #ffffff54;
}
.nav-login-article {
  width: 100%;
  display: flex;
  align-items: center;
}
.nav-article .title-item.-bor-none {
  border-top: none;
}

.nav-title,
.mone-text {
  color: #fff;
  font-weight: 400;
  cursor: pointer;
}

.nav-title {
  line-height: 45px;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.nav-title.-sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 35px;
}

/* 네비게이션 - 아코디언 스타일 */
.list-acc {
  cursor: pointer;
  transition: 0.4s;
  display: flex;
  justify-content: space-between;
}

.list-acc::after {
  content: "\002B";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 1.5rem;
  line-height: 42px;
}

.active .list-acc:after {
  content: "\2212";
}

.nav-list-item {
  display: block;
  margin-bottom: 15px;
}

.active .nav-list-item {
  display: block;
}

.nav-list_link {
  color: #ffffff9c;
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  display: block;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 네비게이션 - 유저 정보 */
/* .user-list{
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    gap: 15px;
    cursor: pointer;
} */

.logo_link {
  background: url(../images/user-name-image.svg) center no-repeat;
  background-size: 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: block;
  border: 1px solid #3a3d44;
}

.nav-column.-login .title-item {
  display: none !important;
}
.nav-column.-logout .user-info-item {
  display: none !important;
}

.nav-column.-logout {
  display: flex;
  align-items: center;
}

.user-info-item {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  flex: 1;
  padding: 5px 0;
  height: 45px;
  text-align: left;
}

.accounts-profile-item {
  display: flex;
  width: calc(100% - 50px);
}
.accounts-profile-item .user-id,
.accounts-profile-item .user-email {
  color: #fff;
  letter-spacing: 0.4px;
  font-size: 14px;
  line-height: 1.2;
}
.accounts-profile-item .button-item {
  align-items: center;
  display: flex;
}
.accounts-profile-item .user-id {
  font-weight: 500;
}

.accounts-profile-item .user-email {
  font-weight: 300;
  opacity: 0.7;
  font-size: 12px;
}

/* 네비게이션 - 모드 스타일 */
.mode-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 스위치 스타일 */

.switch {
  width: 40px;
  height: 20px;
  /* background-color: #F3f3f3; */
  transition: 0.4s ease;
  border-radius: 34px;
  border: 0;
  background: #f3f3f3 url(../images/icon-sun.svg) left 2px center no-repeat;
  background-size: 18px;
}

.switch.-dark {
  background: #322f35 url(../images/icon-moon.svg) right 4px center no-repeat;
  background-size: 14px;
}

/* ***************************** 
아이콘 스타일
***************************** */
.icon-changes {
  background: url(../images/icon-changes.svg) center no-repeat;
}

.icon-copy {
  background: url(../images/icon-copy.svg) center no-repeat;
}

.icon-share {
  background: url(../images/icon-share.svg) center no-repeat;
}

.icon-reset {
  background: url(../images/icon-reset.svg) center no-repeat;
}

.icon-logout {
  background: url(../images/icon-logout.svg) center no-repeat;
}

.icon-newchat {
  background: url(../images/icon-newChat.svg) center no-repeat;
  height: 24px;
  width: 24px;
  padding-left: 20px;
}

/* ***************************** 
버튼 스타일
***************************** */
.style-btn {
  background-color: #4281ff;
  color: var(--white);
}

/* .style-btn.line-on {
  padding: 8px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  border-radius: 4px;
} */

/* 비활성화 */
.style-btn:disabled {
  color: var(--white);
  background-color: #cecece;
  pointer-events: none;
  cursor: default;
}

.style-btn.disabled {
  background: var(--disabled-color) !important;
  border: var(--disabled-color) !important;
  color: #8b8b8b !important;
  pointer-events: none;
}

.style-btn.disabled:hover {
  opacity: 1;
}

.button-item .style-btn {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
}

.button-item.-flex-gap {
  gap: 5px;
}
.style-btn.-full {
  width: 100%;
  height: 40px;
  border-radius: 5px;
}

.style-btn.full-line {
  width: 100%;
  height: 40px;
}

.full-round {
  padding: 10px 20px;
  border-radius: 40px;
}

.-round {
  padding: 5px 10px;
  border-radius: 40px;
}

.full-line {
  background-color: #fff;
  color: rgb(68, 68, 68);
  border: 1px solid #e4e4e7;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 5px;
}

.style-btn.full-small {
  max-width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}
.style-btn.full-small.active {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white);
}
.add-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/icon-add-white.svg) center no-repeat;
  background-size: 14px;
}

.option-btn {
  width: 40px;
  height: 40px;
  background: url(../images/icon-option.svg) center no-repeat;
  background-size: 16px;
}

.button-list {
  padding: 10px 0;
}

.button-item .arrow-right-btn {
  width: 25px;
  height: 25px;
  background: url(../images/icon-arrow-right.svg) center no-repeat;
  background-size: 25px;
}

.icon-arrow-r {
  width: 25px;
  height: 25px;
  background: url(../images/icon-arrow-right-b.svg) center no-repeat;
  background-size: 20px;
}

.close-btn {
  width: 20px;
  height: 20px;
  background: url(../images/icon-close-white.svg) center no-repeat;
  background-size: 13px;
}

.close-btn.-black {
  width: 20px;
  height: 20px;
  background: url(../images/icon-close.svg) center no-repeat;
  background-size: 13px;
}

/* 리스트 스타일 */
.list-style {
  margin-left: 20px;
}
.list-style-none {
  list-style: none;
}
.list-style.-circle {
  list-style: circle;
}

.list-style.-style-none {
  list-style: none;
}

/* 링크 스타일 */
.text_link {
  color: var(--accent-color);
}

/* 탭 스타일 */
.tabs {
  background: var(--bg-secondary);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabs .tablinks {
  height: 35px;
  width: 50%;
  color: var(--text-secondary-color);
  font-family: "Montserrat";
  font-size: 14px;
}

.tablinks.disabled {
  user-select: none;
  cursor: default;
  opacity: 1;
  color: #ccc;
}

/* 모듈 스타일 */
.module .title-item .title {
  font-weight: bold;
}

.module + .module {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color-primary);
}

/* 라벨 스타일 */
.label-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--secondary-color);
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: flex-start;
}

.label-dot .icon-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #e4f2ff, #4281ff);
  box-shadow: 0 0 0 3px rgba(227, 239, 252, 0.9);
}
/* 체크박스 스타일 */
.-check-item label {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.-check-item label::before {
  content: "";
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #91929f;
  padding: 8px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 5px;
}

.-check-item .checkbox_style:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 6px;
  width: 6px;
  height: 14px;
  border: solid #4281ff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox_style {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.doc-title {
  margin-bottom: 20px;
}

.title-g {
  font-weight: 400;
}

.doc-column {
  height: calc(100% - 52px);
  /* height: 100%; */
  max-width: 768px;
  width: 768px;
  margin-top: 52px;
}

.doc-footer {
  padding: 46px 0 40px;
}

.service-group a.link_service {
  color: #666;
  text-decoration: none;
  position: relative;
  padding: 6px 8px;
  font-size: 0.9em;
}

.service-group a.link_service:first-child::before {
  display: none;
}

.link_service::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.14);
  transform: translateY(-50%);
  content: "";
}

.doc-footer .text-copy {
  margin-top: 10px;
  color: #666;
}

/*teresa added*/
/* Reset */
p {
  margin-bottom: unset !important;
  font-size: 15px;
}
ol,
ul {
  padding-left: unset !important;
}
._dash-loading {
  display: none !important;
}

.markdown-body table {
  border-collapse: collapse;
  width: 90%;
  margin: 20px;
}
.markdown-body th,
.markdown-body td {
  border: 1px solid #ddd;
  padding: 8px;
}
.markdown-body th {
  background-color: #f2f2f2;
  text-align: left;
}

/* div side style */
.h-wrapper {
  height: calc(100% - 45px); /* 상단 close 값 뺀 */
}

.h-item {
  height: calc(100% - 100px); /* 상단 고정 높이 값 유동적 수정 */
}

.h-100per {
  height: 100%;
}
.div-wrapper {
  margin: 0 20px;
}

.w-100per {
  width: 100%;
}

/* position */
.-position-relative {
  position: relative;
}

/* 타이틀 */

.title-article .title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.title-article .sub-text {
  font-size: 14px;
  margin-top: 5px;
}
.text {
  font-size: 15px;
  color: var(--text-primary-color);
}
.text-small {
  font-size: 14px;
}

/* tooltip style */
.tooltip-btn {
  position: relative;
  cursor: pointer;
  z-index: 9999;
}

/* 공통 툴팁 스타일 */
.tooltip-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%; /* 버튼 위에 표시 */
  left: 50%;
  transform: translateX(-50%);
  background: rgb(24, 24, 24);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* hover 시 활성화 */
.tooltip-btn:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}
/* 오른쪽 */
.tooltip-btn.-right::after {
  left: 0;
  transform: translateX(0);
}
/* 왼쪽 */
.tooltip-btn.-left::after {
  left: auto;
  right: 0;
  transform: translateX(0);
}

/* 카드 */
.-card {
  background-color: #f4f4f4;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.-card.-shadow {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.-card.-white {
  background-color: var(--white);
}

/* 차트 */
.chat-wrapper {
  /* padding: 20px 0; */
  border: 1px solid var(--border-color-primary);
  min-height: 300px;
}

/* 스켈레톤  */
.skeleton-loader {
  background: linear-gradient(90deg, #e0e0e0 0%, #f0f0f0 50%, #e0e0e0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  height: 100%;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* form styles */
.input-style {
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-color-primary);
  padding: 0 15px;
  border-radius: 5px;
  color: var(--text-primary-color);
}

/* 모달 */
.modal-content {
  background: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  padding: 15px;
  max-width: 400px;
  width: 80%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.modal-content.chat-search {
  max-width: 680px;
  min-width: 300px;
  width: 500px;
  height: 350px;
}

.chat-search .modal-body {
  height: calc(100% - 50px);
}
.modal-content .top {
  display: flex;
  justify-content: space-between;
}
.modal-content .top .title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary-color);
}
.modal-content .close-btn {
  width: 20px;
  height: 20px;
  background: url(../images/icon-close.svg) center no-repeat;
  background-size: 13px;
}

.modal-content.user {
  width: fit-content;
  max-width: 200px;
}

.popup {
  display: none;
}
.popup.adjacent {
  position: absolute;
  left: 260px; /* 네비게이션 적당한 오른쪽 위치로 조절 */
  top: 40px;
  /* display: none; */
  z-index: 100;
}

.popup.center {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 101;
}
.date-separator {
  padding: 10px 0;
}
.date-separator p.text {
  font-size: 13px;
  color: var(--text-secondary-color);
}

.user .user-email {
  user-select: none;
  color: var(--text-secondary-color);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

/* loading styles */
/* 전체 로딩 오버레이 */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

/* 부분 로딩 사용 */
.loading-overlay.-center {
  position: relative;
  height: 100%;
  background-color: transparent;
}

/* loading 가운데 박스 */
.loading-box {
  padding: 24px 32px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 세 점 로더 */
.loader {
  display: flex;
  gap: 6px;
  height: 30px;
  align-items: center;
}

.loader span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  animation: pulse 1.4s ease-in-out infinite both;
}

/* 각 점에 순차적 딜레이 */
.loader span:nth-child(1) {
  animation-delay: 0s;
}
.loader span:nth-child(2) {
  animation-delay: 0.2s;
}
.loader span:nth-child(3) {
  animation-delay: 0.4s;
}

/* 텍스트 */
.loading-text {
  margin: 0;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

@keyframes pulse {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 스타트 페이지 */
.startPage {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 5vw, 48px);
  color: #fff;
}

.startPage-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.startPage-inner .title {
  font-size: 64px;
  background: linear-gradient(
    135deg,
    var(--white) 0%,
    #cfd8ff 50%,
    #a8b6ff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  user-select: none;
}

.startPage-inner .sub-title {
  font-size: 24px;
  color: #b9c1ff;
  user-select: none;
  opacity: 0.9;
}

.startPage-inner .style-btn.-full-round {
  display: inline-flex;
  align-self: center;
  padding: 16px 32px;
  background: var(--primary-color);
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(79, 91, 255, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.startPage-inner .style-btn.-full-round:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(79, 91, 255, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.startPage-inner .style-btn.-full-round:active {
  transform: translateY(-2px);
}

/* 별 컨테이너 */
.stars-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.star {
  position: absolute;
  background: radial-gradient(circle, var(--star) 60%, transparent 40%);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--star-glow);
  animation: twinkle linear infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}