* {
  font-family:"Pretendard", "맑은 고딕", "Malgun Gothic", sans-serif, "돋움", "Dotum", "굴림", "Gulim";
}

a {
  text-decoration: none;
}

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bot-layer {
  position: fixed; top: 0; bottom: 0; right: 0; width: 1px; z-index: 999999; display: flex; align-items: flex-end; justify-content: flex-end;
}

/* 기본 상태 */
.bot-layer-button {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  overflow: hidden; 
  border-radius: 100px; 
  width: 100%; 
  height: 100%; 
  font-size: 0; 
  background: #fff; 
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px, rgba(0, 0, 0, 0.15) 0 8px 30px; 
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  cursor: pointer;
  width: 60px;
  height: 60px;
  display: none; 
}
/* 기본: 닫혀있는 상태 */
.bot-layer .open-button { display: flex; }
.bot-layer .open-button img { width: 100%; }
/* 열려있는 상태 */
.bot-layer.active .open-button { display: none; }
.bot-layer.active .close-button { display: flex; }
.chatbox { 
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 1;  
  height: 0;
  max-height: 100%;
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px, rgba(0, 0, 0, 0.15) 0 8px 30px;
  transition: all 0.3s;
  opacity: 0;
  flex-direction: column;
  justify-content: space-between;  
  display: none; 
  width: 390px;
}
.bot-layer.active .chatbox { 
  display: flex;   
  opacity: 1; 
  height: 630px;  
}

/* 상단 */
.chat-header {
  height: 12.7%;
  background: #2c3e8f;
  color: white;
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
.chat-header .header-logo { height: 45%; aspect-ratio: 1 / 1; padding-right: 20px; }
.chat-header .header-title { flex: 1; }
.chat-header .header-title .ko {
  font-size: 17px;
  font-weight: 700;
}
.chat-header .header-title .en {
  font-size: 10px;
  color: #fff;
  opacity: 0.5;
}
.chat-header .header-close { height: 25%; aspect-ratio: 1 / 1; cursor: pointer; }

/* 중간 (핵심) */
.chat-body {
  flex: 1;              /* 남은 영역 다 먹음 */
  overflow-y: auto;     /* 스크롤 */
  padding: 10px;
  background-color: #F8F9FA;
}

.divider {
  display: flex;
  align-items: center;
  color: #C8C9C9;
  font-size: 10px;
  margin: 10px 0px 20px 0px;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #ddd;
}

.divider::before {
  margin-right: 10px;
}

.divider::after {
  margin-left: 10px;
}

.chat-body .chat-logo {
  margin: 10px 0px;
}

.chat-body .left, .chat-body .right {
  display: flex;
  align-items: end;
  margin-bottom: 10px;
}

.chat-body .message {
  background-color: #FFFFFF;
  border-radius: 0px 10px 10px 10px;
  font-size: 13px;
  color: #253E8E;
  max-width: 70%;
  padding: 10px 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  
}

.chat-body .time {
  font-size: 10px;
  color: #AAAEB4;
  margin-left: 5px;
}
.chat-body .left .time {
  margin-left: 5px;
}
.chat-body .right .time {
  margin-right: 5px;
}
.chat-body .right {
  justify-content: right;
}

.chat-body .right .message {
  background-color: #1A3686;
  border-radius: 10px 10px 0px 10px;
  color: #fff;
}

.chat-body .buttons {
  display: flex;
}
.chat-body .buttons li {
  border-radius: 20px;
  border: 1px solid #4E6FCE;
  background-color: #fff;
  font-size: 13px;
  padding: 5px 20px;
  margin: 10px 5px 10px 0px;
  color: #707070;
  cursor: pointer;
}

.chat-body .big-button {
  width: 70%;
  background-color: #1A3686;  
  padding: 10px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  margin: 10px 0px;
  cursor: pointer;
}
.chat-body .big-button img {
  margin-right: 10px;
}
.chat-body .big-button .button-text {
  font-size: 13px;
  color: #fff;
}

/* 하단 */
.chat-input {
  height: 10%;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: center;  
  align-items: center;
}

.chat-input .chat-input-box { background-color: #F3F4F6; margin-left: 20px; margin-right: 20px; display: flex; justify-content: center; align-items: center; margin: 0px 20px; border-radius: 50px; width: 100%; height: 60%;}
.chat-input .chat-input-box:focus-within {border: 1px solid #1A3686; }
.chat-input .chat-input-box .icn { margin-left: 10px; margin-right: 10px; cursor: pointer;}    
.chat-input .chat-input-box .icn img:first-child { display: block; }
.chat-input .chat-input-box .icn img:last-child { display: none; }
.chat-input .chat-input-box:focus-within .icn img:first-child { display: none; }
.chat-input .chat-input-box:focus-within .icn img:last-child { display: block; }

.chat-input .chat-input-box input { background: transparent; border: 0px; flex: 1; color: #101726; font-size: 16px; width: 80%;}
.chat-input .chat-input-box input:focus { outline: none; }
.chat-input .chat-input-box input::placeholder { color: #B0B2B5; font-size: 12px; }

.chatbox .popup {
  width: 100%;height: 100%;position: absolute;left: 0px;top: 0px; 
  background: rgba(0, 0, 0, 0.3); /* dim */ 
  backdrop-filter: blur(5px);     /* 블러 */
  display: none;
}
.chatbox .popup.active {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chatbox .popup .popup-contents {
  width: 73%;
  height: 62%;
  background-color: #FFFFFF;  
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
.chatbox .popup .popup-contents header {
  height: 13%;
  background-color: #1A3686;
  border-radius: 20px 20px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chatbox .popup .popup-contents header div {
  font-size: 15px;
  color: #FFFFFF;
  margin-left: 20px;
}
.chatbox .popup .popup-contents header img {
  width: 7%;
  aspect-ratio: 1 / 1;
  margin-right: 15px;
  cursor: pointer;
}

.chatbox .popup .popup-contents main {
  flex: 1;
      display: flex;
    flex-direction: column;
    align-items: center;
}

.chatbox .popup .popup-contents main .info {
  display: flex;
  flex-direction: column;
  width: 80%;
  padding-top: 25px;
}

.chatbox .popup .popup-contents main .info .item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.chatbox .popup .popup-contents main .info .item .icn {
  width: 36px;  
}
.chatbox .popup .popup-contents main .info .item .item-text {
  margin-left: 10px;
}
.chatbox .popup .popup-contents main .info .item .item-text .column-text {
  font-size: 10px;
  color: #707070;
}
.chatbox .popup .popup-contents main .info .item .item-text .item-value {
  font-size: 13px;
  color: #0B205B;
  margin-top: 5px;
}
.chatbox .popup .popup-contents main .phone {
  width: 100%;
  font-size: 13px;
  color: #fff;
  width: 80%;
  aspect-ratio: 253 / 48;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chatbox .popup .popup-contents main .phone img {
  width: 100%;
  height: 100%;
}

.chatbox .recording-popup {
  width: 100%;height: 100%;position: absolute;left: 0px;top: 0px; 
  background: rgba(0, 0, 0, 0.3); /* dim */ 
  backdrop-filter: blur(5px);     /* 블러 */
  display: none;
}
.chatbox .recording-popup.active {
  display: flex;
  justify-content: center;
  align-items: end;
}
.chatbox .recording-popup .recording-popup-contents {
  width: 87%;
  height: 50%;
  background-color: #FFFFFF;  
  border-radius: 20px 20px 0px 0px;
  display: flex;
  flex-direction: column;
}

.chatbox .recording-popup .recording-popup-contents header {
  display: flex;
  justify-content: end;
  padding: 10px 10px 0px 0px;  
}

.chatbox .recording-popup .recording-popup-contents header img {
  cursor: pointer;
}

.chatbox .recording-popup .recording-popup-contents .introduction {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;  
}

.chatbox .recording-popup .recording-popup-contents .introduction .title {
  font-size: 22px;
  color: #404040;
  font-weight: 700;
}

.chatbox .recording-popup .recording-popup-contents .introduction .desc {
  font-size: 13px;
  color: #707070;
  margin-top: 10px;;
}

.chatbox .recording-popup .recording-popup-contents footer {
  flex: 1;
  display: flex;
  align-items: end;
  justify-content: center;
}

.chatbox .recording-popup .recording-popup-contents footer .stop-button {
  width: 15%;
  aspect-ratio: 1 / 1;
  background-color: #1A3686;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  align-items: center;
  color: #fff;
  margin-bottom: 18px;
}

.chatbox .recording-popup .recording-popup-contents .bg-effect {
  position: absolute;
  bottom: 0px;
  pointer-events: none;
}


/* 모바일 */
@media (max-width: 768px) {
  .bot-layer {
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .chatbox {
    width: 80%;
    aspect-ratio: 390 / 630;
    display: flex;
    right: auto;
  }
}