::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
::-webkit-scrollbar-track {
 background: none;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.5);
}
::-webkit-scrollbar-thumb:active {
background: rgba(0,0,0,.5);
}

.body-2 {
  background-color: white;   
  background-position: center;
}

.send-icon {
    background-color: #F7528A;
}

.image-167 {
    min-height: 40px;
}

.input {
    display: flex;
  }
.input input[type="text"] {
    flex: 1; /* 부모 컨테이너의 남은 공간을 차지하도록 설정 */
    border: none; /* 기본 테두리 제거 */
    outline: none; /* 포커스 시 기본 outline 제거 */
    padding: 10px; /* 내부 여백 설정 */
    border-radius: 20px; /* 라운드 코너 설정 */
    font-size: 14px; /* 폰트 크기 설정 */
    background-color: transparent; /* 배경색을 투명하게 설정 */
    padding-left: 18px;
}

.avatalk-link-image {
  width: 20px;
}

.chat-button {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 14px;
  border: none;
  max-width: 70%;
  width: auto;
}
.chat-button-copy {
  padding-top: 5px;
  padding-bottom: 5px;
  max-width: 70%;
}
.image-168 {
  border-radius: 20px;
  margin-right: 0px;
}
.chat-wrapper {
  overflow:hidden;
  width: 500px;
}
.send-icon img {
  width: 18px
}

.chat-area {
  height: 100%;
  width: 90%;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-bottom: 60px;
  overflow: auto;
  overflow-x: hidden;
}

.chat-area .image-area {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}

.chat-area .image-area > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}  

.character-area {
  width: 200px;
  max-height: 200px;
  margin: 0 auto;
  bottom: 60px;
  left: 50%;
  transition: position 0.3s; 
  display: none;
  order: 2; 
  margin-top: auto; 
  display: flex;
  position: absolute;
  transform: translateX(-50%);
}

.image-placeholder {
  min-height: 180px;
}

.parenthetical {
  font-style: italic;
  opacity: 0.7;
  margin-right: 4px;
}

.dimmed-left {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: calc(50% + 480px);
  background: rgba(40, 40, 40, .7);
}

.dimmed-right {
  position: fixed;
  top: 0;
  left: calc(50% + 480px);
  right: 0;
  bottom: 0;
  background: rgba(40, 40, 40, .7);
}

.bottom-fix-area {
  right: unset;
  left: unset;
}
.input {
  width: 80%;
}
.badge-area {
  width: 90%;
}

.badge-area-story {
  left: 20px;
}

.badge-area-share {
  right: 20px;
}

.badge-area {
  right: 67px;
}

.story-icon {
  display: flex;
}

.badge-area-story {
  justify-content: flex-start;
  align-items: flex-start;
}

.tooltiptext {
  display: none;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  background-color: #423f3f;
  font-family: "Noto sans kr 400", sans-serif;
  font-size: 10px;
  line-height: 12px;
  font-weight: 400;
  padding: 6px 10px;
  position: absolute;
  z-index: 1;
  right: 2px;
  top: 62px;
}

.avatalk-icon {
  cursor: pointer;
}

.avatalk-share-icon {
  cursor: pointer;
}

.charachat-wrapper {
  justify-content: center;
  align-items: center;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.chat-wrapper {
  padding-top: 20px;
}

.w-button {
  cursor: auto;
}

.ai-x-button {
  display: none;
}

.chat-button:active, .chat-button:focus {
  background-color: none;
}

.chat-button {
  overflow: hidden;
}

.bold-text-11 {
  word-break: break-all;
}

.avatalk-icon {
  z-index: 1;
}

.avatalk-share-icon {
  z-index: 2;
}

.conversation-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  width: 430px;
  background: #fff;
  padding: 20px 45px 20px 15px;
  border-top: 1px solid #e9e9e9;
}

.conversation-bottom .conversation-btn {
  position: relative;
  margin: 0;
}

.badge-area-story {
  display: none;
}

.bold-text-15 {
  font-weight: 500;
}

.pingpong2 {
  display: none;
}

.list-ul-wrapper {
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
}

.list-li-wrapper {
  margin-top: 6px;
}
.interactive-text {
    cursor: pointer; /* 클릭 가능한 손 모양 커서 */
}
.interactive-text > strong {
    
    text-decoration: underline; /* 밑줄 추가 */
}

.chat-dots {
    width: 28px;
    height: 14px;
}
.chat-dots-wrapper > .chat-button {
    padding-left: 12px;
    padding-right: 12px;
}

.left-google-ad-wrapper {
  max-height: 600px;
  width: 160px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: calc(50% + 500px);
}

.right-google-ad-wrapper {
  max-height: 600px;
  width: 160px;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50% + 500px);
}

.top-google-ad-wrapper {
  width: 320px;
  height: 50px;
  position: fixed;
  top: 100%;
}

@media screen and (min-width: 991px) {
  .tooltiptext {
    right: 2px;
    top: 70px;
  }
  
}
@media screen and (min-width: 959px) {
  .story-icon {
    display: none;
  }
}
@media screen and (max-width: 991px) {
  .ai-chat-con-cc {
    width: 460px;
    margin-right: auto;
  }
  .ai-x-button {
    display: flex;
  }
  .charachat-wrapper {
    width: auto;
  }
  .avatalk-icon { 
    width: 36px;
    height: 36px;
  }
  .avatalk-share-icon {
    width: 36px;
    height: 36px;
  }

  .top-google-ad-wrapper {
    top: 0;
  }
}

@media screen and (max-width: 959px) {
  .badge-area-story {
    display: flex;
  }

  .ai-chat-con-cc {
      position: fixed;
      top: 0;
      left: -100%;
      height: 100vh;
      margin-right: auto;
      transition: left 0.2s ease-out;
      z-index: 10;
  }
  .mobile-active .ai-chat-con-cc {
    left: 0;  
  }
}

@media screen and (max-width: 767px) {
    .badge-area { 
      right: 63px;
    }
    .charachat-wrapper {
      width: auto;
    }
    .conversation-bottom {
      left : -100%;
    }
    .mobile-active .conversation-bottom {
      left: 0;
      transition: left 0.2s ease-out;
    }
    .bold-text-11 {
      font-size: 14px;
    }
    .chat-button-copy {
      font-size: 14px;
    }
}

@media screen and (max-width: 479px) {

  .chat-wrapper {
      width: 100%;
  }
  .bold-text-15 {
      font-size: 14px;
  }
  .ai-x-button {
    margin-right: 10px;
    top: 3%;
    right: 2.5%;
  }
  
  .ai-chat-con-cc {
    width: 320px;
  }
  .conversation-bottom {
    left : -100%;
  }
  .mobile-active .conversation-bottom {
    left: 0;
    width: 100%;
    padding: 20px 45px;
    display: block;
    transition: left 0.2s ease-out;
  }
}