@import url(../css/icon.css);

/* ***************************** 
라이트-모드 스타일
***************************** */

/*********************************
메인 스타일
*********************************/
.main-content-columns {
  width: 100%;
}

.main-content-columns.-type2 {
  background: rgba(0, 0, 0, 0.02);
}

.banner-inner {
  padding: 20px 10px;
  width: 780px;
  display: flex;
  justify-content: space-between;
}

.banner-01 .style-btn {
  font-size: 15px;
}

.banner-upToData {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-upToData-item {
  padding: 10px 15px;
  padding-right: 40px;
  /* 플러스 아이콘 공간 확보 때문에 적용 */
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  min-width: 380px;
}

/* .banner-upToData-item::after {
    content: '\002B';
    position: absolute;
    right: 15px;
    color: #4281FF;
    font-weight: bold;
    font-size: 15px;
} */

.banner-upToData-item-plus {
  content: "\002B";
  position: absolute;
  right: 15px;
  color: #4281ff;
  font-weight: bold;
  font-size: 15px;
}

.banner-upToData-item + .banner-upToData-item {
  margin-top: 10px;
}

.banner-h2 {
  font-size: 36px;
  line-height: 1.3em;
}

.banner-h2 .name {
  font-weight: 800;
  font-size: 50px;
  font-family: "Montserrat" !important;
  color: #3d3d3d;
}

.banner-h6 {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
}

.banner-01 .style-btn {
  align-self: end;
}

.banner-01 .w-size {
  width: 420px;
}

.banner-02 .w-size {
  width: 360px;
}

/* 
배너 - 최신 특허검색 리스트 예시 스타일
*/
.upToData-text .num-text {
  display: inline-flex;
  flex: none;
  width: 25px;
  height: 25px;
  color: #3d3d3d;
  justify-content: center;
  line-height: 25px;
  background: #f7f7f8;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  margin-right: 5px;
}

.upToData-text {
  font-size: 15px;
  color: #26262c;
}

/*********************************
챗봇 스타일
*********************************/
.chatbot-section {
  width: 100%;
}

.chatbot-section.-chat {
  height: calc(100% - 62px);
  /* height: 100%; */
  max-width: 768px;
  min-width: 260px;
  margin-top: 62px;
  overflow-y: auto;
}

/* 채팅 히스토리 */
.chat-container {
  display: flex;
  justify-content: center;
  /* margin-left: 5px; */
  /* padding: 0 20px; */
}

.chat-history-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 144px);
}

.chat-messages {
  max-width: 768px;
  min-width: 300px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 15px;
  /* margin-top: 52px; */
}

.message-article {
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

/* 캔버스 버튼 */
.message .canvas-button {
  margin-bottom: 5px;
  margin-top: 5px;
}

/* 채팅 메시지 스타일 */
.chat-messages .chat-date {
  text-align: center;
  font-size: 12px;
  color: #91929f;
  margin-bottom: 10px;
}

.message {
  margin: 20px;
}

.message.received {
  display: flex;
}

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

.bubble {
  padding: 10px 20px;
  max-width: 75%;
  min-width: 200px;
  /* word-break: keep-all; */
}

.bubble p + p {
  margin-top: 5px;
}

.message .bubble {
  font-size: 16px; /* 16px*/
}
.message.sent .bubble {
  border-radius: 10px 0 10px 10px;
  background-color: var(--bubble-bg-user);
}
.message.received .bubble {
  border-radius: 0 10px 10px 10px;
  background-color: #f4f4f4;
}
.message .button-item {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.message .button-item .style-btn {
  padding: 8px 10px;
  background-color: #0f0f11;
  font-size: 15px;
}

.message .msg-bottom {
  flex-wrap: wrap;
}

.btn {
  cursor: pointer;
}

/* 채팅 반응 버튼 스타일 */

.msg-bottom {
  margin: 5px 0;
}

.reaction-buttons {
  background-color: #ffffff33;
  border: 1px solid #eeeeee;
  display: inline-flex;
  padding: 5px;
  border-radius: 20px;
  display: none; /* 미사용 기능 숨김처리 */
}

.reaction-buttons button {
  width: 25px;
  height: 25px;
  border-radius: 25px;
  background-color: #ededed;
  border: 1px solid #eeeeee;
}

.reaction-buttons .reaction-item {
  margin-right: 5px;
  display: flex;
}

.reaction-buttons button + button {
  margin-left: 5px;
}

.more-btn {
  background: url(../images/icon-more.svg) center no-repeat;
  background-size: 17px;
}

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

.like-btn {
  background: url(../images/icon-like.svg) center no-repeat;
  background-size: 17px;
}

.dislike-btn {
  background: url(../images/icon-dislike.svg) center no-repeat;
  background-size: 17px;
}

.like-on-btn {
  background: url(../images/icon-like-on.svg) center no-repeat;
  background-size: 17px;
}

.dislike-on-btn {
  background: url(../images/icon-dislike-on.svg) center no-repeat;
  background-size: 17px;
}

.canvas-btn {
  background: url(../images/icon-canvas.svg) center no-repeat;
  background-size: 15px;
}

/* 채팅 입력 스타일 */
.chat_input-columns {
  max-width: 700px;
  /* min-width: 380px; */
  width: 100%;
  display: flex;
}

.chat_input-item {
  width: 100%;
  /* border-radius: 40px; */
  border-radius: 20px;
  padding: 15px;
  /* padding-left: 50px; */
  padding-left: 30px;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: #fff;
  /* background: #fff url(../images/icon-search.svg) left 15px center no-repeat; */
  /* margin: 5px; */
  align-items: end;
}

.chat_input {
  border: 0;
  background-color: transparent;
  resize: none;
  width: calc(100% - 80px);
  overflow-y: scroll;
  scrollbar-width: none;
  color: #999;
  /* height: 26px; */
  height: 71.75px;
  font-size: 15px;
  line-height: 1.15;
}

/* 검색 버튼 */
.search-btn {
  display: block;
  background: #3a3d44;
  padding: 0 15px;
  border-radius: 20px;
  font-size: 15px;
  font-weight: 600;
  height: 40px;
  line-height: 40px;
}

.message-btn-columns {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.messages-items {
  margin-top: 10px;
  max-width: 700px;
  /* min-width: 380px; */
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* 검색바 하단 기능버튼 숨김 [기능 구현되면 삭제해도 됩니다.] */
.messages-items .message-btn:nth-child(n + 2):nth-child(-n + 6) {
  display: none;
}

.message-btn {
  font-size: 15px;
  height: 40px;
  padding: 0 12px;
  border-radius: 40px;
  color: #91929f;
  background-color: #f7f7f8;
  margin: 5px;
}

.message-btn:hover {
  background-color: #3a3d44;
  color: #ffffff;
}

/* 검색창 옵션 스타일 */
.message-btn.option-btn:hover {
  background-color: #f7f7f8;
  animation: rotateOption 1s linear infinite;
  opacity: 1;
}

/* 옵션 회전 애니메이션 스타일 */
@keyframes rotateOption {
  0% {
    transform: none;
  }

  100% {
    transform: rotateZ(360deg);
  }
}

/* 팝업 */
.popup-columns {
  margin-top: 15px;
  max-width: 530px;
  min-width: 260px;
  width: 95%;
  background: #252b3b;
  border-radius: 16px;
  display: none;
}

.popup-columns.show {
  display: block;
  position: absolute;
  bottom: 50px;
  border: 1px solid rgba(255, 255, 255, 0.102);
}

.title-columns {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-left: 15px;
  font-weight: 300;
}

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

.content-article {
  padding: 10px;
  display: flex;
}

.content-article .list-button {
  display: flex;
  align-items: center;
  border-radius: 40px;
  padding: 0 5px 0 10px;
  height: 30px;
  font-size: 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.102);
  margin: 2px;
  word-break: keep-all;
}

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

.search-input {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.102);
  padding: 5px 5px 5px 15px;
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-input-text {
  width: calc(100% - 50px);
}

.search-column .style-btn {
  /* display: flex; */
  padding: 0px 15px;
  font-size: 12px;
  height: 30px;
  align-self: center;
}

.search-column .reset-btn {
  width: 30px;
  height: 30px;
  background-color: #fff;
  background-size: 16px;
  border-radius: 20px;
}

/* 특허리스트 스타일 */
.side-open .side-area {
  display: flex;
  padding-bottom: 20px;
  padding-top: 62px;
  padding-left: 15px;
  width: 100%;
  height: 100%;
  flex: 1;
}
.side-top {
  padding: 15px 10px 10px;
}
.side-open .side-area .side-article {
  /* width: 500px; */
  width: 100%; /* teresa modified */
  height: 100%;
  border-radius: 10px 0 0 10px;
  background-color: var(--background-fill-secondary);
  padding-bottom: 20px;
}

.side-open.detail-open .side-article {
  width: 100%;
}

.list-column {
  /* height: calc(100% - 45px); */
  height: 100%;
  align-items: self-start;
}

.side-open .patentList-column {
  min-width: 270px;
  max-width: 350px;
}

.side-open .patent-fullText-column {
  display: flex;
  min-width: 300px;
}

.patent-fullText-column .button-item {
  gap: 5px;
  display: flex;
  flex-wrap: wrap;
}

.side-article.-row {
  display: flex;
  justify-content: space-between;
}

.patent-fullText-column .button-item.-flex-end {
  margin-bottom: 10px;
}

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

/* 특허리스트 컨텐츠 스타일 */
.patentList-column {
  width: 100%;
  height: 100%;
  margin-right: 20px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.patentList-column .title-article .title {
  padding-left: 10px;
}

.patentList-column .tabs {
  width: calc(100% - 10px);
  margin: 0 5px;
}

.tabs .tablinks.active {
  background: var(--primary-color);
  box-shadow: 0px 0px 10px 0px rgba(83, 83, 83, 0.302);
  border-radius: 999px;
  color: var(--white);
  font-weight: 600;
}

.input-article {
  width: 100%;
}
.input-article .input-style {
  width: 100%;
  height: 40px;
  padding: 10px 15px;
  background: #eeeef0;
  border-radius: 4px;
  border: 0;
  color: #4a4458;
}

.patentList-column .content-item {
  height: calc(100% - 157px); /* teresa modified */
  border-top: 1px solid #e7e5e5;
  padding-top: 10px;
}

.patent-list {
  list-style: none;
  margin: 0 5px;
}

.patent-list-item {
  padding: 10px;
  height: 90px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.patent-list-item:hover,
.patent-list-item:focus {
  background-color: #eeeef0;
}
.patent-list-item + .patent-list-item {
  border-top: 1px solid var(--border-color-secondary);
}
.patent-list-item .patent-list-item-wrap + .label-text {
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 24px;
}
.patent-list-item .patent-num-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
.patent-list-item .patent-num-container .label-text {
  display: inline-flex;
  font-size: 12px;
  padding: 0px 10px;
  border-radius: 4px;
  flex: none;
}

/* 공개 */
.patent-list-item .patent-num-container .label-text.-type1 {
  background-color: #cce8fc;
  color: #0095d4;
  border: 1px solid #cce8fc;
}
/* 등록 */
.patent-list-item .patent-num-container .label-text.-type2 {
  background-color: #ccf0fb;
  color: #008eb9;
  border: 1px solid #ccf0fb;
}

.patent-list-item .patent-num {
  font-size: 16px;
  font-weight: bold;
}

.patent-list-item .patent-info {
  font-size: 15px;
  color: #4e5057;
}

.patent-list-item.active {
  /*teresa added*/
  background-color: #eeeef0;
}

.content-item .-scroll_Y {
  overflow-y: auto;
  height: 100%;
}

/* 리스트 카드 스타일 */
.list-card {
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 5px;
}

.list-card-item {
  background-color: #fff;
  border-radius: 16px;
  list-style: none;
  padding: 25px 30px;
  max-height: 530px;
}

.list-card-item.active {
  /*teresa added*/
  border: 2px solid #333;
}

.list-card-item + .list-card-item {
  margin-top: 15px;
}

.list-card .button-item .full-round {
  padding: 8px 20px;
  font-size: 15px;
  border-radius: 999px;
}

.list-card-item .images {
  width: 100%;
  height: 190px;
  background-size: contain !important;
}

/* 카드 대표도면 */
.list-card-item .images-01 {
  background: url(../images/img-plan-1.png) center no-repeat;
}

.list-card-item .images-02 {
  background: url(../images/img-plan-2.png) center no-repeat;
}

.list-card-item .images-03 {
  background: url(../images/img-plan-3.png) center no-repeat;
}

.list-card-item .nodata-img {
  background: url(../images/nodata-img.svg) center no-repeat;
}

/* 카드 정보 */

.list-card-item .patent-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.list-card-item .num-text {
  font-size: 20px;
  font-weight: bold;
}

.list-card-item .state_text {
  color: #4e4e5f;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
}
.list-card .state_text .state,
.list-card .state_text .expired {
  display: inline-flex;
  font-size: 14px;
}
.list-card-item .button-item {
  margin-top: 10px;
}

/* 특허전문 리스트 오픈시 레이아웃 변경 */
.side-open .chat-container {
  padding: 0;
  /* padding-left: 20px; */
}

/* 삭제 */
/* .side-open.detail-open .content-area {
    width: 30%;
} */

.side-open.detail-open .side-area {
  width: 70%;
}

/* 전문보기 */
.patent-fullText-column {
  padding: 20px;
  border-radius: 20px 0 0 20px;
  border: 1px solid #e7e5e5;
  background-color: var(--bg-color);
  flex: 1;
  display: none;
  height: 100%;
}

.patent-fullText-column .tabs .tablinks {
  font-family: "Noto Sans KR", "Noto Sans JP", sans-serif;
  width: 33.3%;
  height: 25px;
}

.patent-fullText-column .tabs .tablinks.on {
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  color: #26262c;
  font-weight: 600;
}

.patent-fullText-column .content-item {
  height: 100%;
  width: 100%;
}

.sub-view-wrap.-scroll_Y {
  padding-right: 5px;
}

.sub-view-module .item {
  margin-left: 10px;
  padding-left: 10px;
  position: relative;
}

.sub-view-module .item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background-color: #ccc;
}

.sub-view-module .item:first-child {
  margin: 0;
  padding: 0;
}

.sub-view-module .item:first-child::before {
  display: none;
}

.sub-view-module .sub-title {
  margin-right: 10px;
}

.sub-view-title {
  margin-bottom: 15px;
}

.sub-view-title .patent-num {
  font-size: 20px;
  font-weight: 600;
}

.sub-view-title .patent-info {
  color: var(--text-secondary-color);
  font-size: 14px;
}

.sub-view-module + .sub-view-module {
  margin-top: 15px;
}

.sub-view-module.-header {
  background-color: #f1f1f1;
  padding: 2px 10px;
  font-size: 14px;
}

.sub-view-layout .module.-first {
  margin-top: 10px;
}

.sub-view-layout .title-item.-button {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 5px;
}

.sub-view-layout .title-item.-button .title {
  margin-right: 10px;
}

.text-item .title {
  font-weight: 500;
  font-size: 14px;
}

.sub-view-layout + .sub-view-layout {
  margin-top: 20px;
}

.sub-view-wrap .style-btn {
  background-color: var(--secondary-color);
  color: var(--primary-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sub-view-wrap .style-btn.point {
  background-color: var(--primary-color);
  color: var(--white);
}
.sub-view-wrap .module .text-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* 전문 - 전문이미지 */
.sub-view-layout .img-item {
  width: 100%;
  height: 200px;
  background-size: contain !important;
  margin: 15px 0;
  border-radius: 5px;
}

.sub-view-layout .img-item-01 {
  background: #fff url(../images/img-plan-1.png) center no-repeat;
}

.slider-wrapper {
  width: 100%;
  background-color: var(--bg-secondary);
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 5px;
}

.slider-item {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px;
  scrollbar-color: #a8a8a8 transparent;
  /* scrollbar-width: thin; */
  margin: 0;
  width: 100%; /* 👈 추가 */
  box-sizing: border-box; /* 👈 추가 */
}

.slider-item .slider-img {
  min-width: calc(100% - 0.5px);
  /* 한 화면에 3개 */
  height: 180px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
}

.slider-item .slider-img-01 {
  background: #fff url(../images/img-slider01.png) center no-repeat;
}

.slider-item .slider-img-02 {
  background: #fff url(../images/img-slider02.png) center no-repeat;
}

.slider-item .slider-img-03 {
  background: #fff url(../images/img-slider03.png) center no-repeat;
}

.slider-item .slider-img-04 {
  background: #fff url(../images/img-slider04.png) center no-repeat;
}

.slider-item .slider-img-05 {
  background: #fff url(../images/img-slider05.png) center no-repeat;
}

.text-item.-button {
  margin-top: 10px;
}

.text-item.-button .title {
  font-weight: bold;
  margin-right: 10px;
}

/* 특허리스트 페이지 */
.pagination-article {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border-color-primary);
  padding-top: 10px;
  /* margin-top: auto; */
}

.pagination {
  display: flex;
  list-style: none;
  font-size: 14px;
  flex-wrap: wrap;
  gap: 4px;
}

.pagination .page-item.active > .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--text-active-color);
}

.pagination .page-item.disabled > .page-link {
  background-color: transparent;
  color: rgba(33, 37, 41, 0.75);
  border-color: transparent;
  cursor: default;
}

.pagination .page-link {
  position: relative;
  min-width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--border-color-primary);
  padding: 0.375rem 0.75rem;
  background-color: var(--bg-color);
  color: var(--text-primary-color);
  border-radius: 99px;
}

.pagination .page-link.disabled {
  color: #ccc;
  pointer-events: none;
  background-color: #eeeeee;
  border-color: #eee;
}

.pagination .paging_move {
  display: flex;
  align-items: center;
  margin: 0 5px !important;
}

.pagination .paging_move .page-num-input {
  width: 40px;
  height: 35px;
  padding: 5px;
  text-align: right;
  margin-right: 5px;
  border: 1px solid #dee2e6;
  border-radius: 2px;
}

.pagination .paging_move .bar {
  margin-right: 5px;
}

/* 로그인 스타일 */
.login-section {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-column {
  background: #f7f7f8;
  padding: 20px;
  width: 40%;
  max-width: 450px;
  border-radius: 5px;
}

.top-btn-item {
  margin-bottom: 10px;
}

.login-recovery .button-column.-bar .button-itme {
  position: relative;
}

.login-recovery .button-column.-bar .button-itme::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background-color: #4d4d4d;
}

.login-recovery .button-column.-bar .button-itme:first-child:before {
  display: none;
  padding-left: 0;
  margin-left: 0;
}

.login-recovery .button-column.-bar .button-itme + .button-itme {
  margin-left: 10px;
  padding-left: 10px;
}

.input-item .input-style {
  border: 0;
  width: 100%;
  height: 45px;
  padding: 0 10px;
  border-radius: 5px;
  color: #91929f;
  border: 1px solid #eee;
}

.input-item + .style-btn {
  margin-top: 10px;
}

.input-item .input-style + .input-style {
  margin-top: 10px;
}

.input-item.-check-item {
  margin: 10px 0;
  font-size: 0.9em;
}

.login-section .style-btn {
  font-size: 1em;
  height: 45px;
}

.login-section .style-btn + .style-btn {
  margin-top: 10px;
}

.button-item.-color-w .style-btn.full-line {
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #9c9c9c;
  color: #4c4c57;
}

.button-item.-color-w .style-btn.-full {
  background-color: #fff;
  color: #4c4c57;
  border: 1px solid #eee;
}

.info-text-item {
  padding: 40px 0;
  text-align: center;
  position: relative;
}

.info-text-item::before {
  content: "";
  position: absolute;
  left: 0;
  width: 60px;
  height: 1px;
  background-color: #ccc;
}

.info-text-item::after {
  content: "";
  position: absolute;
  right: 0;
  width: 60px;
  height: 1px;
  background-color: #ccc;
}

.info-text {
  width: 60%;
  color: #91929f;
  font-size: 0.9em;
  word-break: break-all;
}

.link_style {
  color: #4281ff;
}

/* 회원가입 */
.cont-sign .-font-s .lab_choice p {
  font-size: 1.5em;
}

.cont-sign .-check-item.-font-s .checkbox_style:checked + label:after {
  top: 8px;
}

.tit_service {
  text-align: center;
  font-size: 2em;
}

.tit_service.-logo {
  font-family: "Montserrat" !important;
}

.check_all {
  margin: 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.txt_info {
  color: #999;
}

.cont-sign {
  width: 100%;
}

.cont-sign .list-style {
  margin-left: 0;
}

.cont-sign .list-style.-scroll_Y {
  height: calc(100vh - 550px);
  margin-bottom: 10px;
}

.cont-sign .list-style > li {
  margin-bottom: 25px;
}

.cont-sign .list-style > li:last-child {
  margin-bottom: 0;
}

.cont-sign .list-style .item {
  display: none;
}

.cont-sign .list-style .item.-scroll_Y {
  height: 200px;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.aboutCon_subTit {
  font-size: 1.5em;
}

.aboutCon_subTit h5 {
  margin-bottom: 10px;
}

h4.txtpart_title {
  font-size: 1.3em;
  margin-bottom: 10px;
}

h5.txtpart_title {
  font-size: 1.1em;
  font-weight: 500;
  margin-top: 10px;
}

.aboutCon_subTxt {
  font-size: 0.7em;
}

.about_txtpart {
  margin-bottom: 20px;
}

.aboutTerms_tab {
  margin-bottom: 10px;
}

.aboutTerms_tab,
.txt02,
.txt03 {
  padding-left: 20px;
}

.aboutTerms_tab li a {
  color: #000;
}

/* id 찾기 */
.content-article.-find-id {
  height: calc(100% - 230px);
  overflow-y: auto;
}

.id-form {
  margin-top: 30px;
}

.id-form .input-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.id-form .input-item + .input-item {
  margin-top: 0.75rem;
}

.id-form .label-tit {
  font-weight: 500;
}

.id-form .input-item .input-text {
  background-color: rgb(249 250 252);
  border: 1px solid rgb(239 239 240);
  border-radius: 0.5rem;
  height: 45px;
  padding: 1rem;
}

.info-t {
  color: #999;
  font-size: 0.9em;
}

.info-t.error {
  color: #e65f3e;
}

.justify-end {
  margin-top: 4rem;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.justify-end .style-btn.-full {
  height: 45px;
}

.acc-user-data {
  padding: 20px 0;
  margin-top: 20px;
  border: 1px solid #eeeeee;
}

.acc-user-data .user-email {
  color: #333;
  opacity: 1;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.text-g {
  font-size: 11px;
}

.msg-box {
  margin-top: 0.75rem;
}

.msg-box p {
  opacity: 0.7;
}

.-list-row {
  height: calc(100% - 45px);
}

/* 특허리스트 div 하나씩 나올때 */
.side-open .-default.patent-fullText-column {
  display: block;
  border: none;
  background: transparent;
  padding-left: 30px; /* teresa added */
}

.side-open .side-article.-default {
  width: calc(100% - 509px);
}
.default-column {
  padding: 0 20px;
  /* margin-top: 15px; */
  margin: 0;
  width: 100%;
  height: calc(100% - 60px);
}
.side-open .side-article.-default .button-item.-flex-end {
  display: none;
}

/*  teresa added */
.modebar-group {
  background-color: unset !important;
}

.chart-block {
  padding: 15px !important;
  overflow: visible !important;
  position: relative; /* 필요시 추가 */
  z-index: 1;
}

.chart-rendering {
  width: 100%;
  /* height:450px; */
  /* border: 1px solid #d9d9d9; */
  padding: 10px;
  display: inline-grid;
}

.chart-rendering.expanded {
  height: 900px;
}

.chart-rendering .chart-title {
  font-size: 15px;
  font-weight: bold;
  margin: 10px 0;
  text-align: center;
}

.js-plotly-plot .plotly .main-svg {
  cursor: pointer !important;
  background: transparent !important;
}

.js-plotly-plot .main-svg .xy .nsewdrag.drag {
  fill: var(--background-fill-secondary) !important;
  stroke: var(--text-primary-color) !important;
  stroke-width: 1px !important;
}

.js-plotly-plot .plotly .cursor-crosshair {
  cursor: pointer !important;
}

.js-plotly-plot .plotly .modebar {
  top: -20px !important;
}

.js-plotly-plot .plotly .user-select-none {
  width: 100% !important;
}

.toggle-container {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.toggle-container.show {
  max-height: 20000px;
  opacity: 1;
  visibility: visible;
}

.div-empty {
  all: unset;
  display: content;
}

.button-group {
  display: inline-flex;
}

.btn-c {
  padding: 0.5em 1em;
  border: 1px solid #999;
  background-color: #e9eaed;
  cursor: pointer;
  font-size: 1rem;
}

.btn-C.active {
  background-color: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.btn-c.left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-c.right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none; /* 중복 테두리 제거 */
}

/* Tooltip 배경색, 글자색, 테두리 등 커스텀 */
.tooltipCC.show {
  background-color: #fffa99 !important;
  color: #333 !important;
  border: 1px solid #333 !important;
  padding: 10px !important;
  border-radius: 5px !important;
  font-size: 0.9em !important;
  /* font-size: 1.1em; */
}

/* Tooltip 화살표 색상 */
.tooltipCC .arrow::before {
  border-top-color: #222 !important;
}

.loading {
  /* position: fixed; */
  /* top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  opacity: 0.2;
}

.flex-container {
  display: flex;
  flex-direction: column; /* 자식 요소들을 세로로 정렬 */
  /* 이 컨테이너 자체의 높이가 필요할 수 있음 (예: height: 500px 또는 height: 50vh) */
}

/* firstclaims_view에 적용할 클래스 */
.flex-item-grow {
  flex-grow: 1; /* 남은 수직 공간을 모두 차지 */
  min-height: 0; /* flex-grow가 축소될 때 발생하는 문제를 방지 */
}

.main-container.side-open .content-area {
  width: 525px;
}

.main-container.side-open .active-nav .content-area {
  width: 750px;
}

.container.side-open .side-area,
.main-container.side-open .side-area {
  width: calc(100% - 750px);
}

.dash-graph {
  height: calc(100dvh - 350px);
  width: 100%;
  padding: 30px 0px;
}

.side-open .patentList-column.w100 {
  width: 100% !important;
}

.wordcloud_camera {
  background: url(../images/icon-camera.svg) center no-repeat;
  height: 20px;
  margin-left: 90%;
}

.field-settings {
  margin-left: auto;
  padding-left: 10px;
}

.result-count {
  font-size: 14px;
  color: #333;
  margin-left: auto;
  padding-right: 10px;
}

.classdesc-container {
  width: 100%;
  /* height: calc(100% - 60px); */
  height: 100%; /* 20251215 수정사항 */
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.classdesc-container .title-article {
  margin-bottom: 15px;
}

.classdesc-container .title {
  font-size: 16px;
  color: #26262c;
  padding-left: 10px;
  align-items: center;
}

.classdesc-container .code {
  font-size: 1.4px;
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 20px;
}

.classdesc-item {
  margin-bottom: 13px;
  line-height: 1.7em;
  font-size: 15px;
  padding-left: 10px;
}

.classdesc-tree-container {
  height: calc(100dvh - 150px);
  overflow-y: auto;
  margin-bottom: 20px;
}

.classdesc-checkbox {
  /* width : 7% !important; */
  width: 25px;
  height: 30px;
}

.classdesc-upToData {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 30px;
}

.clustering-container {
  padding: 20px;
}

.clusters-toolbar {
  margin-bottom: 20px;
}
.clusters-desc-text {
  padding: 10px;
}

.prior-art-container {
  padding: 20px 50px;
  height: calc(100% - 60px);
  overflow-y: auto;
}

.new_chat_link {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  display: block;
  line-height: 35px;
}

/* ui */
.cluster-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 5px 0;
}
.content-top,
.content-bottom {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.content-top {
  flex: 0;
}
.content-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* select box 스타일 */
.select-menu {
  width: 270px;
}

.select-menu .select-btn {
  display: flex;
  width: 270px;
  min-width: 120px;
  height: 35px;
  background: #fff;
  padding: 0 15px 0 20px;
  font-size: 15px;
  font-weight: 400;
  border-radius: 4px;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  border: 1px solid var(--border-color-primary);
}

.select-menu.-small {
  width: 130px !important;
}
.select-menu.-small .select-btn {
  width: 130px !important;
}
.select-menu.-small .options {
  width: 200px !important;
}

.select-menu .select-btn .select-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.select-menu .options {
  position: absolute;
  width: 270px;
  overflow-y: auto;
  max-height: 295px;
  margin-top: 5px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border-color-primary);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  display: none;
}

.select-menu .options.-right {
  right: 40px;
}

.select-menu .options .option {
  display: flex;
  height: 42px;
  cursor: pointer;
  padding: 0 16px;
  align-items: center;
  gap: 10px;
}
.select-menu .options .option:hover {
  background: #f2f2f2;
}
.select-menu .options .option .option-text {
  font-size: 15px;
  color: var(--text-primary-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.select-menu .options .option i.icon {
  width: 10px;
  height: 10px;
  background-color: #ccc;
}
.select-menu .options .option i.icon.-item-01 {
  background-color: #9787ff;
}
.select-menu .options .option i.icon.-item-02 {
  background-color: #fdb600;
}
.select-menu .options .option i.icon.-item-03 {
  background-color: #ff6d92;
}
.select-menu .options .option i.icon.-item-04 {
  background-color: #70c396;
}

.select-btn i {
  font-size: 25px;
  transition: 0.3s;
  flex: none;
}

.select-menu.active .select-btn i {
  transform: rotate(-180deg);
}
.select-menu.active .options {
  display: block;
  opacity: 1;
  z-index: 10;
  transition: 0.4s ease-in-out;
}

.select-menu.-field .select-btn {
  background: var(--primary-color);
  border-color: var(--primary-color);
}
.select-menu.-field .select-btn .select-text {
  color: var(--white);
}
.select-menu.-field .arrow-down {
  background: url(../images/icon-arrow-down-white.svg) center no-repeat;
}

/* 버전 조정 select ui */

.model-switcher .model-dropdown-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  height: 42px;
  margin-left: 20px;
}

/* 모델 변환 ui - 닫힌 상태 + 기본 ui*/
.model-switcher .model-dropdown-menu-inner {
  position: absolute;
  width: 270px;
  overflow-y: auto;
  margin-top: 5px;
  left: 5px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--border-color-primary);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 10px;
  /* display: none; */
}

/* 열린 상태 */
.model-switcher.is-open .model-dropdown-menu-inner {
  display: block;
}

.model-switcher .model-dropdown-menu {
  display: flex;
  flex-direction: column;
}

.model-switcher .model-dropdown-menu .model-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-radius: 4px;
}
.model-switcher .model-dropdown-menu .model-dropdown-item:hover {
  cursor: pointer;
  background: var(--bg-secondary);
}

.model-switcher .model-dropdown-menu .model-dropdown-item .model-dropdown-content {
  /* width: 70%; */
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.2em;
}
.model-switcher .model-dropdown-menu .model-dropdown-item .model-dropdown-content .select-desc {
  font-size: 12px;
  max-width: 60%;
  display: inline-flex;
  color: var(--text-secondary-color);
}

.model-switcher .model-dropdown-menu .model-dropdown-item .model-dropdown-content .btn.-upgrade {
  border: 1px solid var(--border-color-primary);
  background-color: var(--bg-color);
  padding: 0px 10px;
  height: 30px;
  display: flex;
  flex: none;
  align-items: center;
  border-radius: 15px;
  font-size: 12px;
}
.model-switcher .model-dropdown-menu .model-dropdown-item .model-dropdown-content .icon.checkmark {
  display: flex;
  align-items: center;
}
/* 사이드메뉴 */
.side-menu {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #eee;
  border-radius: 4px;
  height: 42px;
  /* min-width: 35px; */
  padding: 0 7px;
}

.side-menu .side-menu-item {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.side-menu.-small {
  height: 35px;
  padding: 5px;
}
.side-menu.-small .side-menu-item {
  height: 25px;
  width: 25px;
}

/* toggle */
.toggle-switch-wrapper {
  width: 300px;
  margin: 20px auto;
}

.toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex: none;
}

.toggle-switch-btn {
  position: relative;
  width: 36px;
  height: 16px;
  background-color: #d9d9d9;
  border-radius: 13px;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.toggle-switch-slider {
  position: absolute;
  top: -14px;
  left: 0px;
  width: 22px;
  height: 22px;
  background-color: var(--primary-color);
  border-radius: 50%;
  transition: left 0.3s ease-in;
  transform: translateY(50%);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.toggle-switch-container.active .toggle-switch-btn {
  background-color: #d9d9d9;
}

.toggle-switch-container.active .toggle-switch-slider {
  left: 14px;
}
/* switch disabled */
.toggle-switch-container.disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.toggle-switch-container.disabled .toggle-switch-btn {
  background-color: #999;
}

.toggle-switch-container.disabled .toggle-switch-slider {
  background-color: #ccc;
}

.toggle-switch-container.disabled .toggle-switch-text {
  user-select: none;
}

.toggle-switch-text {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary-color);
  white-space: nowrap;
}

.toggle-content {
  /* display: none; */
  padding: 20px 0 0;
  gap: 15px;
  color: var(--text-primary-color);
}
.toggle-content .title-item {
  display: flex;
  justify-content: center;
  width: 30%;
  padding-right: 30px;
}
.toggle-content .title-item .title {
  font-size: 20px;
  font-weight: 600;
  word-break: keep-all;
}
.toggle-content .content-item {
  width: 70%;
  position: relative;
  padding-left: 30px;
}

.left-rod::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 6px;
  height: 80%;
  background-color: var(--primary-color);
  border-radius: 5px;
}

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

.toggle-cont-bottom {
  gap: 20px;
}
.toggle-cont-bottom .-card {
  width: 300px;
  min-width: 130px;
  min-height: 108px;
  border-radius: 10px;
  align-items: end;
  display: flex;
  justify-content: end;
}
.toggle-cont-bottom .-card .left-rod {
  width: 100%;
}

.toggle-cont-bottom .number-text {
  font-size: 46px;
  color: var(--primary-color);
}
.toggle-cont-bottom .unit-text {
  font-size: 18px;
  color: var(--text-secondary-color);
  margin-top: 5px;
}

.keyword-column .title {
  font-weight: 600;
  font-size: 16px;
}
.keyword-list {
  list-style: none;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.keyword-list .keyword-item .style-btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  max-width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

.keyword-column .-scroll_Y {
  height: 75px;
}

.cluster-select-container {
  width: calc(100% - 40px);
}

.cluster-select-container.-fulltext {
  width: 100%;
}
.cluster {
  height: 100%;
}
.title-article > p {
  color: var(--text-primary-color);
}

/* 탭 스크롤 */
.tab-scroll {
  display: flex;
  align-items: center;
  padding: 0 3px;
  border-radius: 5px;
  border: 1px solid #eee;
}
.tab-scroll .-scroll_Y {
  height: 30px;
  display: flex;
}
.tab-scroll .-scroll_Y .keyword-item .style-btn {
  height: 28px;
  display: flex;
  align-items: center;
}
.tab-scroll .keyword-list {
  gap: 5px;
}
.tab-scroll .keyword-list .keyword-item .style-btn.active {
  background-color: var(--primary-color);
  color: var(--white);
  height: 28px;
}

/* 선행기술 관련 */
.prior-art-report hr {
  margin: 10px 0;
  border: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color-primary);
}
.prior-art-report ol,
.prior-art-report ul {
  padding-left: 20px !important;
  margin-top: 10px;
  color: var(--text-primary-color);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prior-art-report p {
  font-size: 15px;
  line-height: 1.7;
  margin-top: 5px;
}
.prior-art-report h1,
.prior-art-report h2,
.prior-art-report h3,
.prior-art-report h4,
.prior-art-report h5,
.prior-art-report h6 {
  color: var(--text-primary-color);
}
.prior-art-report h1 {
  font-size: 24px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.prior-art-report h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-top: 10px;
}

.prior-art-report h3 {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 10px;
}

.prior-art-report h4 {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}

.prior-art-report h5 {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}

.prior-art-report h6 {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 10px;
}
.prior-art-report table {
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
}
.prior-art-report table tr th,
.prior-art-report table tr td {
  border: 1px solid var(--border-color-primary);
  padding: 5px 10px;
  font-size: 15px;
  color: var(--text-primary-color);
}
.prior-art-report table tr th {
  background-color: var(--bubble-bg-user);
  font-weight: 500;
}

.prior-art-report strong {
  font-weight: 500;
}
/* 특허분류 */
.tab-button-group {
  height: 26px;
}

/* 특허분류 트리 */
.tree-container {
  margin-top: 10px;
  height: calc(100% - 125px);
  padding: 10px;
  border: 1px solid var(--border-color-primary);
  border-radius: 5px;
  background-color: var(--bg-color);
}
.tree-container .tree,
.tree-container .tree ul {
  list-style: none;
}
.tree-container .tree {
  list-style: none;
  padding: 0;
}

.tree-container .tree li {
  padding-left: 14px;
  position: relative;
}

.tree-container .tree .toggle {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  color: #666;
}

.tree-container .tree .node-label {
  padding-left: 14px;
  display: block;
  cursor: pointer;
}
.tree-container .tree .node-label > b {
  color: #4281ff;
  font-weight: 400;
  font-size: 13px;
}
.tree-container .tree .child {
  display: none;
  margin-left: 0;
}

.tree-container .tree li.expanded > .child {
  display: block;
}

/* 검색결과없음 페이지 */
.state-content .-card {
  background-color: var(--bg-color);
}

.state-content .title {
  color: var(--text-primary-color);
}

.state-text,
.session-text {
  font-size: 16px;
}
.state-search-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 세션만료페이지 */
.session-card-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
.session-card {
  max-width: 520px;
  padding: 24px 22px 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: var(--bg-color);
}

.session-card .title,
.session-card .session-text {
  color: var(--text-primary-color);
}

.state-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.state-btn-wrap .state-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
}
.state-btn-wrap .state-btn .icon {
  background-size: 16px;
  width: 20px;
  height: 20px;
}

.state-btn-wrap .state-btn .icon.chat {
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.state-btn-wrap .state-btn.-primary {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}
.state-btn-wrap .state-btn.-primary .icon.search {
  background: url(../images/icon-search-white.svg) center no-repeat;
  background-size: 16px;
  width: 20px;
  height: 20px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3);
}
.state-btn-wrap .-primary .icon.reLogin {
  background: url(../images/icon-reLogin-white.svg) center no-repeat;
  background-size: 16px;
  width: 20px;
  height: 20px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.3);
}

.hint-list {
  margin-left: 20px;
  font-size: 15px;
  color: var(--text-secondary-color);
}

.hint {
  border-top: 1px dashed var(--border-color-primary);
  padding-top: 10px;
  margin-top: 10px;
}
.hint p.text {
  font-size: 13px;
  color: var(--text-secondary-color);
}