/* =================================================================
   집잘알 챗봇 - 최적화된 순수 CSS
   ================================================================= */

/* CSS 변수 시스템 */
:root {
  /* 집잘알 브랜드 컬러 팔레트 */
  --color-primary: #0166FF;
  --color-primary-hover: #0052CC;
  --color-primary-light: #E6F3FF;
  --color-primary-dark: #003D99;
  --color-blue-400: #0166FF;
  --color-blue-500: #0052CC;
  --color-blue-600: #003D99;
  
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  --color-green-100: #d1fae5;
  --color-green-600: #059669;
  --color-yellow-500: #f59e0b;
  
  /* 간격 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  
  /* 크기 */
  --size-xs: 24px;
  --size-sm: 40px;
  --size-md: 48px;
  
  /* 테두리 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;
  
  /* 그림자 */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(1, 102, 255, 0.1);
  
  /* 폰트 */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  
  /* 레이아웃 */
  --container-width: 500px;
  --chat-bubble-width: 320px;
}

/* 기본 리셋 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: white;
  line-height: 1.6;
}

/* =================================================================
   앱 컨테이너
   ================================================================= */
.app-container {
  max-width: var(--container-width);
  margin: 0 auto;
  background-color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =================================================================
   헤더 섹션
   ================================================================= */
.header {
  background-color: white;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-100);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 헤더 네비게이션 */
.header-nav {
  display: grid;
  grid-template-columns: var(--size-sm) 1fr var(--size-sm);
  align-items: center;
  margin-bottom: var(--spacing-md);
  position: relative;
  min-height: var(--size-sm);
}

/* 뒤로가기 버튼 */
.back-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--size-sm);
  height: var(--size-sm);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s ease;
  z-index: 1;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

.back-btn:hover {
  background-color: var(--color-gray-100);
}

.back-btn img {
  width: var(--size-xs) !important;
  height: var(--size-xs) !important;
  object-fit: contain;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 로고 중앙 정렬 */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container img {
  height: var(--size-md);
}

.logo-container .summary-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

/* 우측 공간 (대칭) */
.nav-spacer {
  width: var(--size-sm);
  height: var(--size-sm);
}

/* 진행률 섹션 */
.progress-section {
  margin-top: var(--spacing-xs);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-label {
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--color-gray-700);
}

.progress-text {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-primary);
}

.progress-bar-container {
  width: 100%;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  height: 6px;
  margin-top: var(--spacing-xs);
}

.progress-bar-fill {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-hover));
  height: 6px;
  border-radius: var(--radius-full);
  transition: width 0.5s ease-out;
}

/* =================================================================
   서비스 배너
   ================================================================= */
.service-banner {
  padding: var(--spacing-lg);
  background: linear-gradient(to bottom right, var(--color-primary-light), #e0e7ff);
  border-bottom: 1px solid var(--color-gray-100);
}

.service-content {
  text-align: center;
}

.service-title {
  font-size: var(--font-base);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 2px;
}

.service-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.check-icon {
  width: 16px
}

.subtitle-text {
  color: #2563eb;
  font-size: var(--font-xs);
  font-weight: 500;
}

/* =================================================================
   채팅 영역
   ================================================================= */
.chat-area {
  flex: 1;
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  overflow-y: auto;
  background-color: #Fbfbfb;
}

/* 스크롤바 스타일링 */
.chat-area::-webkit-scrollbar {
  width: 8px;
}

.chat-area::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.chat-area::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.chat-area::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox 스크롤바 */
.chat-area {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

/* 채팅 메시지 래퍼 */
.chat-message-wrapper {
  display: flex;
}

.chat-message-wrapper.user-message {
  justify-content: flex-end;
  margin-top: -8px;
}

.chat-message-wrapper.bot-message {
  justify-content: flex-start;
  margin-bottom: 20px;
}

/* 채팅 버블 */
.chat-bubble {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  max-width: 92%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;
}

.chat-bubble.user {
  background: #0166FF;
  color: white;
  margin-left: auto;
  margin-right: 0;
  padding: 16px 20px;
}

.chat-bubble.bot {
  background: #ffffff;
  color: #374151;
  margin-left: 0;
  margin-right: auto;
  min-height: 120px;
  min-width: 400px; /* PC에서 최소 크기 보장 */
  width: auto; /* 내용에 따라 자동 조절 */
  max-width: 85%; /* 최대 85% 제한 유지 */
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 20px;
  font-weight: 700;
  padding: 16px 18px;
  max-width: 95%;
}

/* 답변된 질문은 최소 높이 제거 */
.chat-bubble.bot.answered {
  min-height: auto !important;
  min-width: auto !important;
  gap: 0 !important;
}

/* Bot 말풍선 내용 영역과 버튼 영역을 분리 */
.chat-bubble.bot .content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-bubble.bot .button-area {
  margin-top: auto;
  padding-top: 12px;
}

/* 선택지 옵션 */
.chat-bubble .options-container {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  padding: 4px;
}

/* 3개 옵션 중 마지막 옵션을 전체 너비로 설정 */
.chat-bubble .options-container .option-button:nth-child(3):nth-last-child(1) {
  grid-column: 1 / -1;
}

/* 답변된 질문의 옵션 버튼들 숨기기 */
.chat-bubble.answered .options-container {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .custom-calendar {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .address-picker-container {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .counter-container {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .memo-input-form {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .phone-input-form {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .text-input-form {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .next-button {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.chat-bubble.answered .date-next-button {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 답변된 질문의 봇 메시지 패딩 조정 */
.chat-bubble.answered {
  padding-bottom: 20px !important;
  min-height: auto !important;
}

/* 답변된 질문의 모든 하위 요소 여백 완전 제거 */
.chat-bubble.answered > * {
  margin-bottom: 0 !important;
}

.chat-bubble.answered .counter-input-container,
.chat-bubble.answered .mt-3,
.chat-bubble.answered .mt-2,
.chat-bubble.answered .space-y-3,
.chat-bubble.answered .space-y-2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 특정 질문들을 위한 단일 컬럼 레이아웃 */
.chat-bubble .options-container.single-column {
  grid-template-columns: 1fr;
}

.chat-bubble .option-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 20px 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: #475569;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  height: 56px; /* 모든 버튼 높이 통일 */
  position: relative;
}

.chat-bubble .option-button:hover {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 102, 255, 0.15);
  color: var(--color-primary);
}

/* 모바일 터치 효과 */
.chat-bubble .option-button:active,
.chat-bubble .option-button.option-active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(1, 102, 255, 0.2);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #ffffff 100%);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 견적 전송 확인 "네" 버튼 특별 스타일 */
.chat-bubble .option-button.primary-submit-option {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 
    0 8px 25px rgba(1, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  margin-top: 0;
}

.chat-bubble .option-button.primary-submit-option:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(1, 102, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.chat-bubble .option-button.primary-submit-option:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(1, 102, 255, 0.25);
}

/* 텍스트 입력 폼 */
.text-input-form {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.text-input-form input {
  flex: 1;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  color: #1e293b;
  transition: all 0.3s ease;
  position: relative;
}

.text-input-form input::placeholder {
  color: #94a3b8;
}

.text-input-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 
    0 0 0 3px rgba(1, 102, 255, 0.1),
    0 8px 25px rgba(1, 102, 255, 0.15);
  transform: translateY(-1px);
}

.text-input-form button {
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 8px 25px rgba(1, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  position: relative;
}

/* 텍스트 입력 폼 버튼 터치 효과 */
.text-input-form button:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(1, 102, 255, 0.25);
}

.text-input-form button:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(1, 102, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 수정 버튼 */
.edit-button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.edit-button {
  font-size: var(--font-xs);
  color: #6b7280;
  background-color: var(--color-gray-100);
  padding: 4px 8px;
  border-radius: var(--radius-full);
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.edit-button:hover {
  background-color: var(--color-gray-100);
}

/* 요약 페이지 */
.summary-page {
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-width: var(--container-width);
  width: 90%;
  margin: 0 auto;
  background-color: white;
  min-height: 100vh;
}

/* PC 화면에서 너무 넓어지지 않도록 제한 */
@media (min-width: 1024px) {
  .summary-page {
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
  }
}

.summary-page .text-center {
  text-align: center;
  margin-bottom: 24px;
}

.summary-page .success-icon {
  width: var(--size-md);
  height: var(--size-md);
  background-color: var(--color-green-100);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
}

.summary-page .success-icon svg {
  width: var(--size-xs);
  height: var(--size-xs);
  color: var(--color-green-600);
}

.summary-page .summary-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.summary-page .summary-subtitle {
  color: var(--color-gray-600);
  font-size: var(--font-sm);
}

.summary-page .summary-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.summary-page .summary-item {
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
}

.summary-page .item-label {
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.summary-page .item-value {
  color: var(--color-gray-900);
  font-size: var(--font-sm);
}

.summary-page .button-group {
  padding-top: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.summary-page button {
  width: 100%;
  padding: 16px 20px; /* 모바일에서도 충분한 높이 유지 */
  border-radius: 16px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  position: relative;
  display: block;
}

.summary-page .primary-submit-button {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  box-shadow: 
    0 8px 25px rgba(1, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.summary-page .primary-submit-button:hover {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(1, 102, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.summary-page .secondary-button {
  background-color: var(--color-gray-100);
  color: var(--color-gray-700);
  font-weight: 500;
}

.summary-page .secondary-button:hover {
  background-color: var(--color-gray-200);
}

/* =================================================================
   유틸리티 클래스
   ================================================================= */
.hidden {
  display: none !important;
}

.text-primary {
  color: var(--color-primary);
}

.bg-primary {
  background-color: var(--color-primary);
}

.bg-primary:hover {
  background-color: var(--color-primary-hover);
}

/* =================================================================
   반응형 디자인
   ================================================================= */
/* =================================================================
   새로운 입력 타입 스타일
   ================================================================= */

/* 그리드 레이아웃 */
.grid {
  display: grid;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

/* 여백 */
.space-y-2 > * + * {
  margin-top: 8px;
}

.space-y-3 > * + * {
  margin-top: 12px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 8px;
}

/* 플렉스 */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

/* 크기 */
.w-full {
  width: 100%;
}

.w-8 {
  width: 32px;
}

.h-8 {
  height: 32px;
}

/* 텍스트 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-xs {
  font-size: 0.75rem !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.text-sm {
  font-size: 0.875rem;
}

.font-medium {
  font-weight: 500;
}

/* 숨김 */
.hidden {
  display: none;
}

/* 크기 조절 */
.resize-none {
  resize: none;
}

/* 둥근 모서리 */
.rounded-full {
  border-radius: 9999px;
}

.rounded-xl {
  border-radius: 12px;
}

/* 커스텀 캘린더 스타일 */
.custom-calendar {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  margin-top: -16px; /* 질문 텍스트와의 간격 제거 */
  box-sizing: border-box;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 20px 0;
  padding: 0;
  height: 40px; /* 내부 요소에 맞춘 고정 높이 */
  width: 100%;
  box-sizing: border-box;
}

.calendar-title {
  font-weight: 600;
  font-size: 20px;
  color: #374151;
  line-height: 1; /* 위쪽 공간 제거 */
  margin: 20px;
  padding: 0; /* 기본 패딩 제거 */
  display: flex;
  align-items: center;
  height: 40px; /* 헤더 높이와 일치 */
  flex: 1;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-nav {
  width: 40px;
  height: 40px;
  border: none;
  background-color: #f3f4f6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #6b7280;
  transition: all 0.2s ease;
  flex-shrink: 0; /* 크기 고정 */
}

.calendar-nav:hover {
  background-color: #e5e7eb;
  color: #374151;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}

.weekday {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: #6b7280;
  padding: 8px 4px;
  overflow: hidden;
}

.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}

.calendar-date {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #374151;
  background-color: white;
  min-height: 42px;
  overflow: hidden;
  box-sizing: border-box;
}

.calendar-date:hover:not(.empty):not(.past) {
  background-color: #f3f4f6;
}

.calendar-date.empty {
  cursor: default;
  color: transparent;
}

.calendar-date.past {
  color: #d1d5db;
  cursor: not-allowed;
}

.calendar-date.today {
  background-color: #dbeafe;
  color: #1d4ed8;
  border: 2px solid #3b82f6;
}

.calendar-date.selected {
  background-color: var(--color-primary) !important;
  color: white !important;
  font-weight: 600;
}

.calendar-date.sunday {
  color: #dc2626;
}

.calendar-date.saturday {
  color: #2563eb;
}

.calendar-date.sunday.past,
.calendar-date.saturday.past {
  color: #d1d5db;
}

/* 시간 선택 스타일 */
.time-selector {
  margin-bottom: 24px;
}

.time-label {
  font-weight: 600;
  font-size: 16px;
  color: #374151;
  margin-bottom: 16px;
}

.time-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.time-option {
  padding: 16px 20px;
  background-color: white;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.time-option:hover {
  border-color: #d1d5db;
  background-color: #f9fafb;
}

.time-option.selected {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 102, 255, 0.15);
  color: var(--color-primary);
}

/* 모든 확인/다음 버튼들 통일 스타일 */
.next-button,
.date-next-button,
.counter-submit,
#counter-submit,
#address-submit {
  width: 100%;
  max-width: 100%;
  margin-top: 20px;
  padding: 18px 24px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 8px 25px rgba(1, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  display: block;
  position: relative;
}

/* Phone input form 내부의 confirm-btn 스타일 (인라인) */
.confirm-btn {
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  border: 2px solid transparent;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 8px 25px rgba(1, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  flex-shrink: 0;
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Next 버튼 터치 효과 */
.next-button:active:not(:disabled),
.date-next-button:active:not(:disabled),
.counter-submit:active:not(:disabled),
#counter-submit:active:not(:disabled),
#address-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(1, 102, 255, 0.25);
}

.next-button:hover:not(:disabled),
.date-next-button:hover:not(:disabled),
.counter-submit:hover:not(:disabled),
#counter-submit:hover:not(:disabled),
#address-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(1, 102, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.next-button:disabled,
.date-next-button:disabled,
.counter-submit:disabled,
#counter-submit:disabled,
#address-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  box-shadow: none;
  transform: none;
}

/* Memo form 내부의 confirm-btn 완전 재정의 */
.memo-input-form .flex .confirm-btn {
  padding: 16px 22px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: white;
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 
    0 8px 25px rgba(1, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: 0;
  white-space: nowrap;
}

/* Confirm 버튼 별도 효과 */
.confirm-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(1, 102, 255, 0.25);
}

.confirm-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-dark) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(1, 102, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  box-shadow: none;
  transform: none;
}

/* 주소 선택 컨테이너 */
.address-picker-container {
  padding: 0;
  margin: 0;
}

/* 카운터 컨테이너 */
/* ========================================
   Counter 입력 컨테이너 (상위 래퍼)
   ======================================== */

.counter-input-container {
  margin-top: 12px;         /* 기존 mt-3 (0.75rem) 대체 */
  margin-bottom: 0;
  padding: 0;
  /* 📝 수정 가이드:
     - 상단 간격: margin-top
     - 전체 패딩: padding
     - 배경/테두리 등 추가 가능
  */
}

.counter-container {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.counter-item {
  padding: 12px 16px;
  background-color: white;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-gray-200);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.counter-container button[type="button"]:not(.counter-btn) {
  margin-top: 1px;
  margin-bottom: 0;
}

.counter-btn {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background-color: rgba(1, 102, 255, 0.1);
  color: var(--color-primary);
  border-radius: 6px;
  padding: 2px 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin: 0;
}

.counter-btn:hover {
  background-color: rgba(1, 102, 255, 0.15);
  transform: scale(1.05);
}

.counter-value {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 16px;
  min-width: 28px;
  text-align: center;
  padding: 0 4px;
  line-height: 1;
  margin: 0;
}

.counter-option-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-gray-700);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

/* ========================================
   Counter 레이아웃 전용 클래스들
   ======================================== */

/* 버튼과 텍스트가 있는 한 줄 그룹 */
.counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 12px;
}

/* 카운터 버튼들 그룹 */
.counter-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ========================================
   Counter 수정 가이드
   ======================================== */
/*
  📝 Counter 수정 가이드:
  
  1. 박스 간격 조정: .counter-container { gap: 8px; }
  2. 박스 내부 여백: .counter-item { padding: 8px 12px; }
  3. 텍스트-버튼 간격: .counter-row { gap: 12px; }
  4. 버튼들 간격: .counter-controls { gap: 6px; }
  5. 옵션 텍스트 크기: .counter-option-text { font-size: 15px; }
  6. 카운터 숫자 크기: .counter-value { font-size: 16px; }
  7. 버튼 크기: .counter-btn { width: 28px; height: 28px; }
*/

/* 메모 입력 */
.memo-input-form {
  margin-top: 20px;
  padding: 0;
}



/* 건너뛰기 버튼 스타일 개선 */
#memo-skip {
  padding: 16px 22px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #e2e8f0;
  color: #64748b;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 60px;
}

#memo-skip:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 102, 255, 0.15);
}

#memo-skip:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(1, 102, 255, 0.2);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #e2e8f0 100%);
}

/* 전화번호 입력 클래스 */
.phone-input {
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.phone-input::placeholder {
  color: #94a3b8;
}

.phone-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 
    0 0 0 3px rgba(1, 102, 255, 0.1),
    0 8px 25px rgba(1, 102, 255, 0.15);
  transform: translateY(-1px);
}

/* 메모 입력 텍스트영역 클래스 */
.memo-textarea {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  resize: none;
  transition: all 0.3s ease;
  min-height: 100px;
  line-height: 1.5;
}

.memo-textarea::placeholder {
  color: #94a3b8;
}

.memo-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 
    0 0 0 3px rgba(1, 102, 255, 0.1),
    0 8px 25px rgba(1, 102, 255, 0.15);
  transform: translateY(-1px);
}

/* Multi-Select Styles */
.option-button {
  transition: background-color 0.2s, color 0.2s;
}

.option-button.selected {
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-light) 100%) !important;
  border-color: var(--color-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 102, 255, 0.15);
  color: var(--color-primary) !important;
  position: relative;
}

.option-button.selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.option-button.selected:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #ffffff 100%) !important;
  border-color: var(--color-primary-hover) !important;
  box-shadow: 0 6px 20px rgba(1, 102, 255, 0.2);
  transform: translateY(-1px);
}

/* 반응형 디자인 */
@media (max-width: 768px) {
  .chat-bubble.bot {
    width: 95%;
    max-width: none;
    min-width: unset; /* 모바일에서는 최소 크기 제한 해제 */
  }
  
  .chat-bubble .options-container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 2px;
  }
  
  /* 모바일에서도 single-column 클래스는 동일하게 1fr */
  .chat-bubble .options-container.single-column {
    grid-template-columns: 1fr;
  }
  
  .chat-bubble .option-button {
    padding: 18px 16px;
    font-size: 15px;
    height: 52px;
  }
  
  /* 모바일 견적 전송 확인 "네" 버튼 */
  .chat-bubble .option-button.primary-submit-option {
    padding: 16px 20px;
    font-size: 15px;
    height: 52px;
    margin-top: 0;
  }
  
  /* 모바일 Counter 입력 컨테이너 */
  .counter-input-container {
    margin-top: 12px;       /* 모바일에서 약간 더 넓은 간격 */
  }
  
  .counter-container {
    padding: 0;
    gap: 12px;
  }
  
  .counter-item {
    padding: 12px 16px;
    line-height: 1;
  }
  
  /* 모바일에서도 동일한 레이아웃 유지 */
  .counter-row {
    gap: 10px;
  }
  
  .counter-controls {
    gap: 4px;
  }
  
  /* 모바일 환기 멘트 최적화 */
  .chat-bubble.bot.transition {
    min-height: auto;
    min-width: auto;
    gap: 0;
    padding: 10px 12px;
    width: fit-content;
    max-width: none;
    white-space: nowrap;
    margin-right: 0;
    margin-left: 0;
  }
  
  /* 모바일 환기 멘트 텍스트 크기 조정 */
  .chat-bubble.bot.transition .bot-question-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }
  
  .next-button {
    max-width: 100%;
    padding: 16px 20px;
    font-size: 15px;
  }
  
  .chat-bubble.bot .next-button {
    margin-top: auto;
  }
  
  /* 캘린더 모바일 최적화 */
  .custom-calendar {
    padding: 16px 0px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .calendar-header {
    margin: 8px 0 12px 0;
    padding: 0;
  }
  
  .calendar-title {
    font-size: 18px;
  }
  
  .calendar-nav {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .weekday {
    font-size: 12px;
    padding: 8px 4px;
  }
  
  .calendar-date {
    min-height: 38px;
    font-size: 15px;
    margin-bottom: 12px;
  }
  
  .calendar-dates {
    margin-bottom: 12px;
  }

  .time-selector {
    margin-bottom: 16px;
  }

  .time-options {
    gap: 10px;
  }
  
  .time-option {
    padding: 14px 16px;
    font-size: 15px;
    min-height: 46px;
  }
  
  /* Summary Page 모바일 최적화 */
  .summary-page {
    width: 95%;
    padding: 16px;
    gap: 16px;
  }
  
  .summary-page .summary-title {
    font-size: 18px;
  }
  
  .summary-page .summary-subtitle {
    font-size: 14px;
  }
  
  .summary-page .summary-items {
    gap: 12px;
  }
  
  .summary-page .summary-item {
    padding: 12px;
  }
  
  .summary-page .item-label {
    font-size: 13px;
  }
  
  .summary-page .item-value {
    font-size: 14px;
  }
  
  .summary-page button {
    padding: 12px 16px;
    font-size: 14px;
  }
  
  .summary-page .button-group {
    gap: 12px;
  }
  
}

/* 380px 이하 초소형 모바일 최적화 */
@media (max-width: 380px) {
  .custom-calendar {
    padding: 12px 8px;
    margin-top: -12px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .calendar-header {
    margin: 4px 0 8px 0;
    padding: 0 4px;
  }
  
  .calendar-title {
    font-size: 16px;
    margin: 0;
  }
  
  .calendar-nav {
    width: 30px;
    height: 30px;
    font-size: 16px;
    flex-shrink: 0;
  }
  
  .calendar-weekdays {
    gap: 2px;
    margin-bottom: 16px;
  }
  
  .weekday {
    font-size: 11px;
    padding: 6px 2px;
  }
  
  .calendar-dates {
    gap: 2px;
    margin-bottom: 16px;
  }
  
  .calendar-date {
    min-height: 32px;
    font-size: 13px;
    border-radius: 8px;
  }
  
  .time-selector {
    margin-bottom: 12px;
  }
  
  .time-label {
    font-size: 14px;
    margin-bottom: 12px;
  }
  
  .time-options {
    gap: 8px;
  }
  
  .time-option {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 40px;
    border-radius: 10px;
  }
  
  /* 휴대폰 번호 입력 최적화 */
  .phone-input {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 10px;
    min-width: 0;
    flex-shrink: 1;
  }
  
  .confirm-btn {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 10px;
    min-width: 60px;
    height: 48px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .flex.gap-2.mt-3 {
    gap: 6px;
    margin-top: 16px;
  }
}

/* 320px 이하 극소형 모바일 최적화 */
@media (max-width: 320px) {
  .custom-calendar {
    padding: 10px 6px;
    margin-top: -10px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  .calendar-header {
    margin: 2px 0 6px 0;
    padding: 0 2px;
  }
  
  .calendar-title {
    font-size: 15px;
  }
  
  .calendar-nav {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .calendar-weekdays {
    gap: 1px;
    margin-bottom: 12px;
  }
  
  .weekday {
    font-size: 10px;
    padding: 4px 1px;
  }
  
  .calendar-dates {
    gap: 1px;
    margin-bottom: 12px;
  }
  
  .calendar-date {
    min-height: 28px;
    font-size: 12px;
    border-radius: 6px;
  }
  
  .time-label {
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .time-options {
    gap: 6px;
  }
  
  .time-option {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 36px;
    border-radius: 8px;
  }
  
  /* 휴대폰 번호 입력 극소형 화면 최적화 */
  .phone-input {
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 8px;
    min-width: 0;
    flex-shrink: 1;
  }
  
  .confirm-btn {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 8px;
    min-width: 55px;
    height: 44px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .flex.gap-2.mt-3 {
    gap: 4px;
    margin-top: 14px;
  }
}

/* 주소 검색 버튼 */
.address-search-btn {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #e2e8f0;
  color: #475569;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  text-align: left;
}

.address-search-btn:hover {
  background: linear-gradient(135deg, #e2e8f0 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(1, 102, 255, 0.15);
}

.address-search-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(1, 102, 255, 0.2);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #e2e8f0 100%);
}

/* 주소 입력 필드들 */
.address-input,
.address-input-readonly {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  color: #1e293b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition: all 0.3s ease;
}

.address-input::placeholder,
.address-input-readonly::placeholder {
  color: #94a3b8;
}

.address-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 
    0 0 0 3px rgba(1, 102, 255, 0.1),
    0 8px 25px rgba(1, 102, 255, 0.15);
  transform: translateY(-1px);
}

.address-input-readonly {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  cursor: not-allowed;
}

/* Next 버튼 특별 스타일 - Bot 말풍선에서만 맨 아래 고정 */
.chat-bubble.bot .next-button {
  margin-top: auto;
  flex-shrink: 0;
}

/* 버튼 그룹 스타일 */
.memo-input-form .flex {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}



/* =================================================================
   기본 텍스트 스타일 (필수 유지)
   ================================================================= */

/* 봇 질문 텍스트 */
.bot-question-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  white-space: pre-line;
  color: var(--color-primary);
  margin: 0;
  padding: 0;
}

/* 환기 멘트 텍스트 최적화 */
.chat-bubble.bot.transition .bot-question-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-primary);
  text-align: center;
  margin: 0;
  padding: 0;
}

/* 사용자 답변 텍스트 */
.user-answer-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
  color: white;
  margin: 0;
  padding: 0;
}

/* 환기 멘트용 스타일 */
.chat-bubble.bot.transition {
  background: #f0f9ff;
  border: 2px solid var(--color-primary);
  animation: fadeInSlide 0.6s ease-out;
  /* 📏 크기 문제 해결 */
  min-height: auto;
  min-width: auto;
  gap: 0;
  padding: 16px 20px;
  /* 📏 마진 제약 완전 해제 */
  margin-right: 0;
  margin-left: 0;
  width: fit-content;
  max-width: none;
}

@keyframes fadeInSlide {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Counter 세부 스타일 정리
   ======================================== */

.counter-item span {
  line-height: 1;
  margin: 0;
  padding: 0;
}

.counter-item div {
  margin: 0;
  line-height: 1;
}

.counter-container * {
  line-height: 1 !important;
}