@font-face {
  font-family: "Pretendard-Regular";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "Pretendard-Regular", sans-serif;
  background-color: #f7f7f7;
}

/* ---------- 배너 ---------- */
.banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* 스텝 컨테이너 */
.step-container {
  font-family: "Pretendard-Medium";
  font-style: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.step-container.active {
  opacity: 1;
}

/* 스텝 버튼 */
.step-item {
  width: 100px;
  height: 40px;
  background-color: #f7f7f7;
  border: 1.5px solid #ffd700;
  border-radius: 30px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 15px;
  transition: background-color 0.3s ease-in-out;
}

.step-item.active {
  background-color: #ffd700;
  color: #333;
}

/* 스텝 설명 텍스트 */
.step-text {
  font-size: 14px;
  color: #5c5c5c;
  margin-top: 8px;
  text-align: center;
}

/* 스텝 연결 라인 */
.step-line {
  width: 60px;
  height: 1px;
  border-top: 1px dotted #917800;
  align-self: center;
}

/* 버튼 공통 디자인 (지역, 인원, 여행 기간, 테마 선택) */
.selection-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  justify-content: center;
  max-width: 720px;
  margin: auto;
}

.selection-btn {
  width: 100%;
  height: 38px;
  border-radius: 30px;
  background-color: #f7f7f7;
  border: 1.5px solid #ddb900;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 5px 15px;
  transition: all 0.3s ease-in-out;
}

.selection-btn.active {
  background-color: #ddb900;
  color: #fff;
}

/* 반응형: 화면이 작아지면 3개씩 표시 */
@media (max-width: 768px) {
  .selection-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .selection-btn {
    font-size: 16px;
  }
}

/* 입력 폼 숨김 처리 */
.step-form {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.step-form.active {
  display: block;
  opacity: 1;
}
/* ====================작업할 css====================== */
/* 다음 버튼 */
.next-btn {
  font-family: "Pretendard-Medium";
  font-style: normal;
  background-color: #ffd700;
  color: #1a1a1a;
  font-size: 18px;
  /* font-weight: 600; */
  padding: 10px 60px; /* 수평 패딩을 늘려 버튼 가로 크기 증가 */
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* 호버 시 색상 변경 */
.next-btn:hover {
  background-color: #ddb900;
}

/* 비활성화 상태 */
.next-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
  background-color: lightgray;
  cursor: not-allowed;
}

/* ==============================스타일 추가=================================== */
/* 전체 화면을 덮는 로딩 오버레이 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 로딩 텍스트 스타일 */
.loading-text {
  margin-top: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

.hidden {
  display: none;
}
.location-buttons {
  font-family: "Pretendard-Medium";
  font-style: normal;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
  max-width: 720px; /* 최대 너비 고정 */
  width: 100%; /* 전체 너비 사용 */
  margin-left: auto; /* 중앙 정렬 */
  margin-right: auto; /* 중앙 정렬 */
}

.ai-btn {
  padding: 15px 20px; /* 안쪽 여백으로 크기 조정 */
  font-size: 16px;
  border-radius: 30px;
  border: 2px solid lightgray;
  background-color: #f7f7f7;
  color: gray;
  cursor: pointer;
  transition: all 0.3s ease;
  width: auto; /* 버튼 너비를 내용 크기에 맞게 조정 */
  display: inline-block; /* 블록 요소가 되지 않도록 설정 */
  white-space: nowrap; /* 텍스트가 여러 줄로 줄바꿈되지 않도록 설정 */
}

.ai-btn.selected {
  border-color: #f7f7f7;
  color: #1a1a1a;
  /* font-weight: bold; */
  background-color: #ffd700;
}

.ai-btn:hover {
  border-color: #ffd700;
  transition: border-color 0.3s ease;
}

/* 이전 버튼 */
/* 기존 스타일에 추가 */

.back-btn {
  font-family: "Pretendard-Medium";
  font-style: normal;
  background-color: #ffd700;
  color: #1a1a1a;
  font-size: 18px;
  /* font-weight: 600; */
  padding: 10px 60px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.back-btn:disabled {
  background-color: #f7f7f7;
  cursor: not-allowed;
}

/* 호버 시 색상 변경 */
.back-btn:hover {
  background-color: #ddb900;
}

/* 결과 영역을 위한 스타일 */
#result {
  display: none; /* 기본적으로 숨겨둠 */
  margin-top: 20px;
}

#resultText {
  max-height: 500px; /* 원하는 높이 설정 */
  overflow-y: auto;
  border-radius: 8px;
  /* background-color: #f9f9f9; */
  background-color: #f7f7f7;
}

/* Step 6 컨테이너 */
.map-container {
  width: 80%; /* 전체 너비 사용 */
  height: 500px; /* 지도 컨테이너 높이 지정 */
  border: 1px solid #ffd700;
  border-radius: 8px;
  background-color: #f7f7f7;
}

/* 채팅 컨테이너 */
.chat-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 85%;
  height: auto;
  margin: auto;
}

/* 채팅 버블과 캐릭터 정렬 */
.chat-row {
  display: flex;
  align-items: flex-end; /* 말풍선과 캐릭터 하단 정렬 */
  gap: 20px; /* 캐릭터와 말풍선 간격 */
  margin-bottom: 15px;
}

/* 배나낭 캐릭터 스타일 */
.character-avatar {
  width: 50px; /* 캐릭터 크기 */
  height: auto;
}

/* 채팅 말풍선 공통 */
.chat-bubble {
  max-width: 80%;
  padding: 20px;
  border-radius: 15px;
  background-color: #f7f7f7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start; /* 내부 요소를 왼쪽 정렬 */
  text-align: left; /* 텍스트 왼쪽 정렬 */
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.3s forwards;
}

/* Day 전용 말풍선 */
.day-bubble {
  background-color: #ffd700;
}

/* Day 텍스트 스타일 */
.day-text {
  font-family: "Pretendard-Medium";
  font-weight: 600;
  font-size: 18px;
  color: #1a1a1a;
}

/* 말풍선 꼬리 효과 */
.chat-bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f7f7f7;
}

.day-bubble::before {
  border-right-color: #ffd700;
}

/* 말풍선 애니메이션 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 결과 컨테이너 */
.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 20px auto;
  width: 100%;
  height: auto;
  max-width: 1500px;
}

.result-text {
  width: 100%;
  padding: 20px;
  border: 1px solid #f7f7f7;
  border-radius: 8px;
  background-color: #f7f7f7;
}

#map {
  width: 100%;
  height: 100%;
  /* background-color: #eaeaea; */
  border-radius: 8px;
  /* 지도 컨테이너 스타일링 */
}

.day-title {
  font-weight: 800; /* bold에서 800으로 변경 */
  font-size: 18px;
  margin-top: 10px;
  color: #1a1a1a;
}

/* 마커 버튼에 대한 css */
.day-buttons-container {
  font-family: "Pretendard-Medium";
  font-style: normal;
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center;
}

.day-buttons-container button {
  padding: 18px 25px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 30px;
  border: 2px solid lightgray;
  background-color: #f7f7f7;
  color: gray;
}
.day-buttons-container button:focus {
  background-color: #ffd700;
  color: #333333;
  border-color: #f7f7f7;
}

#step1,
#step2,
#step3,
#step4,
#step5 {
  height: 650px;
  overflow: hidden;
}

#step6 {
  min-height: 650px; /* 최소 높이만 설정 */
  height: auto; /* 내용에 따라 자동으로 높이 조절 */
  overflow: visible; /* 내용이 넘치더라도 보이게 설정 */
  padding-bottom: 40px; /* 하단 여백 추가 */
}

#characterImage {
  width: 100px; /* 캐릭터 이미지 크기 조정 */
  height: auto;
}

p {
  font-family: "Pretendard-Medium";
  font-style: normal;
  font-size: medium;
}

/* resultText 내부 스크롤바 커스텀 */
#resultText::-webkit-scrollbar {
  width: 10px; /* 스크롤바 너비 */
}

/* 스크롤바 트랙 (배경) */
#resultText::-webkit-scrollbar-track {
  background: #f0f0f0; /* 연한 배경 */
  border-radius: 30px; /* 둥근 모서리 */
}

/* 스크롤바 핸들 (움직이는 부분) */
#resultText::-webkit-scrollbar-thumb {
  background: #ffd700; /* 테마 색상 */
  border-radius: 30px; /* 둥근 모서리 */
  transition: background 0.3s ease-in-out;
}

/* 마우스 호버 시 스크롤바 */
#resultText::-webkit-scrollbar-thumb:hover {
  background: #ddb900; /* 더 진한 색상 */
}

/* Firefox 지원 (얇은 스크롤바 적용) */
#resultText {
  scrollbar-width: thin; /* 얇은 스크롤바 */
  scrollbar-color: #ffd700 #f0f0f0; /* (스크롤바 핸들 / 트랙) */
}