* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: #fff;
  font-family: sans-serif;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.banner-container {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  position: relative;
  z-index: 1000;
  isolation: isolate;
}

.banner-container .banner-form {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 10px;
  background: rgba(99, 93, 93, 0.85);
  z-index: 10;
  backdrop-filter: blur(5px);
}

.banner-container .form-row {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.banner-container .banner-form input[type="text"],
.banner-container .banner-form input[type="tel"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ccc;
  color: gray;
  font-size: 16px;
  min-width: 0;
  border-radius: 0;
}

.banner-container .banner-form input[name="이름"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  background: #fff !important;
}

.banner-container .banner-form input[type="tel"] {
  background-color: #fff;
}

.banner-container .checkbox-wrapper {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #fff;
}

.banner-container .checkbox-wrapper label {
  color: #fff !important;
  margin-right: 0 !important;
  font-size: 13px !important;
  font-weight: normal !important;
  transform: none !important;
  letter-spacing: normal !important;
  font-family: sans-serif !important;
  cursor: default !important;
}

.banner-container .checkbox-wrapper input {
  margin-right: 6px;
  width: 16px;
  height: 16px;
}

.banner-container .select-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  color: gray;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  min-width: 0;
}

.banner-container .select-button img {
  width: 16px;
  height: auto;
  flex-shrink: 0;
}

.banner-container .btn-submit-image {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.banner-container .btn-submit-image img {
  width: 120px;
  height: auto;
  display: block;
}

.banner-container .bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* 팝업 */
.banner-container .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(90%, 360px);
  transform: translate(-50%, -50%);
  z-index: 999;
  display: none;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.banner-container .option-list {
  position: static;
  width: 100%;
  padding: 16px 20px;
  list-style: none;
  color: #000;
  font-size: 15px;
}

.banner-container .option-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 0;
  cursor: pointer;
  font-size: 22px;
}

.banner-container .option-list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/landing/bast/event_form_49/images/49event_5.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
  flex-shrink: 0;
}

.banner-container .option-list li.selected::before {
  background-image: url("/landing/bast/event_form_49/images/49event_4.jpg");
}

/* 딤드 */
.banner-container .dimmed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
  display: none;
}

/* 이름 input만 너비 조정 */
.banner-container .form-row input[name="이름"] {
  flex: 0 0 80px;
}

/* PC */
@media screen and (min-width: 961px) {
  .banner-container {
    width: 960px;
    max-width: 960px;
  }

  .banner-container .banner-form {
    width: 960px;
    max-width: 960px;
  }
}

/* 폼 컨테이너 설정 */
.banner-container .banner-form {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible; /* 버튼이 폼 위로 튀어나와야 하므로 필수 */
}

/* 세로 정렬 컨테이너 */
.vertical-consult-wrap {
  position: absolute;
  right: 10px; /* 우측 여백 */
  bottom: 100%; /* 폼 바로 위에서 시작 */
  margin-bottom: 10px; /* 폼과 버튼 사이 간격 */

  display: flex;
  flex-direction: column; /* 세로 정렬 핵심 */
  align-items: flex-end; /* 우측 정렬 */
  gap: 5px; /* 버튼 사이의 세로 간격 */
}

/* 이미지 크기 조절 (버튼이 너무 크면 조절하세요) */
.vertical-consult-wrap img {
  width: 60px; /* 버튼 가로 크기 */
  height: auto;
  display: block;
}

/* AI 말풍선이 있다면 위치 조정 */
.gf-bubble {
  position: absolute;
  right: 70px; /* 버튼 왼쪽에 말풍선이 오도록 설정 */
  bottom: 0;
  white-space: nowrap;
}

/* 말풍선 기본 스타일 및 위치 */
.gf-bubble {
  position: absolute;
  bottom: 100%; /* 버튼 바로 위에 위치 */
  right: 0;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  transform: translateY(10px); /* 처음에 살짝 아래에 배치 */
}

/* 스크립트에 의해 활성화되는 상태 */
.gf-bubble.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gf-bubble.is-hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
}

/* 텍스트 래퍼 및 라인 설정 */
.gf-text-wrap {
  display: block;
  position: relative;
  height: 18px; /* 텍스트 한 줄 높이 */
  overflow: hidden;
}

.gf-text-line {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  color: #333;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}

/* 첫 등장 애니메이션 (아래에서 위로) */
.is-first-prep .gf-text-line {
  transform: translateY(100%);
  opacity: 0;
}

.is-first-in .gf-text-line {
  transform: translateY(0);
  opacity: 1;
}

/* 롤링 애니메이션 (현재 문구는 위로 사라지고, 다음 문구는 아래에서 올라옴) */
.is-rolling .is-current {
  transform: translateY(-100%);
  opacity: 0;
}

.is-rolling .is-next {
  transform: translateY(
    -100%
  ); /* .is-next가 기본적으로 아래에 위치한다고 가정 */
  opacity: 1;
}

/* 차기 문구 대기 위치 */
.gf-text-line.is-next {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

#sc301AiTalk {
  position: relative;
  display: inline-block;
}

/* AI 말풍선 위치 조정 (버튼의 왼쪽으로) */
.gf-bubble {
  position: absolute;
  /* 버튼의 세로 중앙 근처로 맞춤 */
  top: 50%;
  transform: translateY(-50%) translateX(10px); /* 세로 중앙 정렬 + 애니메이션 준비 */

  /* 버튼의 왼쪽 끝에서 시작하도록 설정 */
  right: 100%;
  margin-right: 15px; /* 버튼과 말풍선 사이의 간격 */

  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  bottom: auto; /* 기존에 설정된 bottom: 100% 해제 */
}

/* 스크립트에 의해 활성화되는 상태 (좌측으로 살짝 밀리며 나타남) */
.gf-bubble.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

.gf-bubble.is-hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-5px);
}

/* 말풍선 꼬리표 (필요하다면 오른쪽에 뾰족한 삼각형 추가) */
.gf-bubble::after {
  content: "";
  position: absolute;
  right: -6px; /* 말풍선 오른쪽 끝에 배치 */
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff; /* 말풍선 배경색과 동일하게 */
}