body {
  font-family: "Noto Sans KR", sans-serif;
  background-color: #1b1b1b;
  color: #fff;
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 30px;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url(img/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.8;
  filter: grayscale(100%);
}

.intro-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.chat-container {
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  width: 80%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  margin-top: 5%;
  z-index: 1;
  position: relative;
  padding-bottom: 20px;
  min-width: 240px;
}

.chat-content {
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 240px;
}

.messages {
  flex-grow: 1;
  overflow-y: auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  min-height: 20px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 20px;
  max-width: 80%;
  word-wrap: break-word;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.message.me {
  align-self: flex-end;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  /* background-color: #8d6aff; */
  /* color: #fff; */
}

.message.bot {
  align-self: flex-start;
  background-color: orange;
  /* background-color: #fff; */
  color: #333;
}

input[type="text"] {
  padding: 10px;
  border-radius: 20px;
  border: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
  width: calc(100% - 70px);
  margin-right: 10px;
}

input:focus {
  outline: 1px solid gray;
}

button {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  /* background-color: #8d6aff;
  color: #fff; */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s ease;
  align-self: flex-end;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button:hover {
  /* background-color: #4b2f91; */
  background-color: #4f95ff;
}

button:disabled,
button[disabled] {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

.message.me:before {
  content: "";
  position: absolute;
  border-width: 20px 20px 20px 0;
  border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent
    transparent;
  top: 0;
  left: -20px;
}

.message.bot:before {
  content: "";
  position: absolute;
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
  top: 0;
  right: -20px;
}

h1 {
  font-size: 28px;
  text-shadow: 2px 2px #000;
  text-align: center;
  margin-bottom: 3px;
}

p {
  font-size: 24px;
  margin-bottom: 30px;
  text-align: center;
}

#introduction {
  font-size: 12px;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 3px;
}

#copyright {
  font-size: 12px;
  color: #f73737;
  text-decoration: underline;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 10px;
}

#loading {
  padding-bottom: 10px;
  display: none;
}

#intro-message {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center;
}

#intro-question {
  display: flex;
  flex-direction: column;
}

#start-btn {
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 20px;
  width: 100%;
  border-radius: 20px;
}

label {
  font-size: 20px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
}

#chat {
  display: none;
}

#kakao-ad {
  min-width: 280px;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 5px;
}

.adfit__border {
  position: absolute;
}
.adfit__border--left {
  height: 100%;
  left: 0;
  top: 0;
  width: 1px;
}
.adfit__border--right {
  height: 100%;
  right: 0;
  top: 0;
  width: 1px;
}
.adfit__border--top {
  height: 1px;
  left: 0;
  top: 0;
  width: 100%;
}
.adfit__border--bottom {
  bottom: 0;
  height: 1px;
  left: 0;
  width: 100%;
}

.adfit__swipeable {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.adfit__a11y-layer {
  pointer-events: none;
}
.adfit__a11y-layer__hint {
  background-image: url("data:image/png;base64,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");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 158px 58px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.adfit__tag-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-box-direction: normal;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  border: 1px solid transparent;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-family: sans-serif;
  font-size: 10px;
  font-variant: tabular-nums;
  height: auto;
  letter-spacing: 0;
  line-height: 18px;
  list-style: none;
  margin: 4px 4px 0 0;
  opacity: 0.9;
  padding: 0 7px;
  white-space: nowrap;
}
.adfit__tag-button,
.adfit__tag-button--yellow {
  background-color: #fa8c16;
}
.adfit__tag-button--purple {
  background-color: #722ed1;
}
.adfit__tag-button--blue {
  background-color: #108ee9;
}
.adfit__tag-button--orange {
  background-color: #f50;
}
.adfit__tag-button--green {
  background-color: #8bc34a;
}
.adfit__tag-button--gray {
  background-color: #a9a9a9;
}

.adfit__debug-toolbar {
  height: 100%;
  line-height: normal;
  max-height: inherit;
  overflow: visible;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
}
.adfit__debug-toolbar__top {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
}
.adfit__debug-toolbar__bottom {
  bottom: 4px;
  position: absolute;
  right: 0;
  white-space: nowrap;
}
.adfit__debug-toolbar--show-on-hover {
  display: none;
  pointer-events: none;
}
.adfit__debug-toolbar-container:hover .adfit__debug-toolbar--show-on-hover {
  display: block;
}

.adfit__banner__outer {
  max-height: inherit;
  position: relative;
}
.adfit__banner__inner,
.adfit__banner__inner iframe {
  border: 0;
  height: 100%;
  left: 0;
  max-height: inherit;
  position: absolute;
  top: 0;
  width: 100%;
}