@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

body { 
  font-family: 'Montserrat', sans-serif; 
  background-color: #f4f7f9; 
  color: #333; 
  margin: 0; 
  padding: 0; 
}

h2, h3 { color: #05141f; font-weight: 700; letter-spacing: -0.5px; }

.container { 
  max-width: 1050px; 
  margin: 50px auto; 
  padding: 40px; 
  background: white; 
  border-radius: 16px; 
  box-shadow: 0 10px 40px rgba(0,0,0,0.06); 
  box-sizing: border-box;
}

.step-section { display: none; animation: fadeIn 0.4s ease-in-out; }
.step-section.active { display: block; }

@keyframes fadeIn { 
  from { opacity: 0; transform: translateY(15px); } 
  to { opacity: 1; transform: translateY(0); } 
}

.carousel-wrapper { position: relative; display: flex; align-items: center; margin-top: 25px;}
/* style.css 약 40번째 줄 근처 */

.carousel-track { 
  display: flex; 
  overflow-x: auto; 
  scroll-snap-type: x mandatory; 
  gap: 25px; 
  scroll-behavior: smooth; 
  
  /* 🌟 천재적인 해결책 1: 트랙 내부에 상하좌우 '절대 안전 구역' 확보 */
  /* 카드가 커지거나 그림자가 퍼져도 절대 잘리지 않도록 넉넉한 공간을 줍니다. */
  padding: 25px 20px; 
  
  /* 🌟 천재적인 해결책 2: 스크롤 스냅 자석 기능 보정 */
  /* 모바일에서 스와이프할 때 카드가 화면 끝(0px)이 아니라 패딩이 있는 곳(20px)에서 딱 멈추게 강제합니다. */
  scroll-padding-left: 20px; 
  scroll-padding-right: 20px;
  
  /* 패딩 때문에 전체 넓이가 틀어지는 것을 막아줌 */
  width: 100%;
  box-sizing: border-box; 
  
  /* 스크롤바 숨김 */
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}
.carousel-track::-webkit-scrollbar { display: none; }

/* 🌟 기본 카드 디자인 (Apple 스타일 베이스) */
.card { 
  min-width: 260px; flex-shrink: 0; scroll-snap-align: start; 
  border: none; border-radius: 14px; 
  padding: 25px; 
  text-align: center; cursor: pointer; background: #fff; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.02), 0 15px 50px rgba(0,0,0,0.04); 
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); 
  box-sizing: border-box;
}

/* 🌟 복구된 호버(Hover) 효과: 마우스 올리면 살짝 떠오르며 그림자가 깊어짐 */
.card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 10px 20px rgba(0,0,0,0.04), 0 20px 60px rgba(0,0,0,0.08); 
}

/* 카드 이미지 */
.card img { 
  width: 100%; height: 160px; object-fit: cover; 
  border-radius: 8px; margin-bottom: 15px; pointer-events: none; 
}

/* 🌟 선택되었을 때: 진하고 두꺼운 3px 테두리(Focus Ring) */
.card.selected { 
  box-shadow: 0 0 0 3px #05141f, 0 15px 50px rgba(5, 20, 31, 0.1); 
  background-color: #fff; 
  transform: scale(1.02); /* 선택 시 살짝 더 커지게 하여 확실한 피드백 제공 */
}

/* 카드 내부 타이틀 */
.card h3 { 
  font-size: 15px; font-weight: 600; margin-top: 18px; color: #1d1d1f; 
  letter-spacing: -0.2px; 
}
/* style.css 파일의 화살표 버튼 섹션 */

/* 🌟 고급스러운 매트 블랙 완벽 원형 화살표 */
.arrow-btn { 
  position: absolute; z-index: 10; 
  top: 50%; transform: translateY(-50%); /* 수직 중앙 정렬 */
  
  /* 🌟 색상 변경: 고급스러운 진한 검은색 (#1d1d1f - Apple식 검정) */
  background-color: #060D0D; 
  border: none; /* 테두리 없이 깔끔하게 */
  
  /* 🌟 완벽한 원형 강제 고정 */
  border-radius: 50%; 
  width: 48px; height: 48px; /* 크기를 살짝 키워 터치감 개선 */
  
  /* 🌟 내부 화살표 색상: 흰색 */
  color: white; 
  /* 🌟 타원형 박멸 3대장 코드 추가 🌟 */
  padding: 0;                 /* 브라우저가 몰래 넣은 기본 여백 싹 다 초기화 */
  aspect-ratio: 1 / 1;        /* 무조건 가로:세로 비율을 1:1로 멱살 잡고 고정! */
  flex-shrink: 0;             /* 어떤 레이아웃에서도 절대 찌그러지지 않게 강제 */
  cursor: pointer; 
  display: flex; justify-content: center; align-items: center; 
  
  /* 부드러운 입체감을 위한 은은한 그림자 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
  
  /* 애니메이션 속도 */
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-sizing: border-box; /* 패딩이 크기에 영향 안 주도록 */
}

/* 마우스 올렸을 때 (Hover) */
.arrow-btn:hover { 
  background-color: #3a3a3c; /* 살짝 밝은 회색으로 변함 */
  transform: translateY(-50%) scale(1.05); /* 살짝 커짐 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.2); 
}

/* 비활성화 상태 (더 이상 스크롤 할 곳이 없을 때 JS가 처리) */
.arrow-btn:disabled {
  background-color: #e1e1e3;
  color: #a1a1a6;
  cursor: not-allowed;
  box-shadow: none;
  transform: translateY(-50%) scale(1);
}

/* 🌟 화살표 아이콘 자체 스타일 (SVG 사용 시) */
.arrow-btn svg { 
  width: 20px; height: 20px; 
  fill: none; 
  stroke: currentColor; /* .arrow-btn의 color(흰색)를 상속받음 */
  stroke-width: 2.5; /* 선 두께를 도톰하게 해서 고급스럽게 */
  stroke-linecap: round; 
  stroke-linejoin: round; 
}

/* 화살표 위치 미세 조정 */
.arrow-left { left: -24px; }
.arrow-right { right: -24px; }

.spec-group { margin-bottom: 30px; }
.spec-group h3 { font-size: 15px; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.spec-group label { 
  display: inline-block; padding: 12px 24px; margin: 5px 8px 5px 0; border: 1px solid #ddd; 
  border-radius: 8px; cursor: pointer; transition: 0.2s; font-weight: 600; box-sizing: border-box;
}
.spec-group input[type="radio"] { display: none; }
.spec-group input[type="radio"]:checked + label { background-color: #05141f; color: white; border-color: #05141f; }
.spec-group input[type="radio"]:disabled + label { background-color: #f8f9fa; color: #ccc; border-color: #eee; cursor: not-allowed; text-decoration: line-through; }

.nav-buttons { margin-top: 40px; text-align: right; border-top: 1px solid #eee; padding-top: 25px; display: flex; justify-content: flex-end; }
button { padding: 14px 28px; font-size: 15px; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; transition: 0.2s; }
.btn-prev { background-color: transparent; color: #555; margin-right: 15px; }
.btn-prev:hover { background-color: #f0f0f0; }
.btn-next, .btn-submit { background-color: #05141f; color: white; box-shadow: 0 4px 12px rgba(5, 20, 31, 0.2); }
.btn-next:hover, .btn-submit:hover { background-color: #1a2a36; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(5, 20, 31, 0.3); }

.split-layout { display: flex; gap: 50px; }
.summary-panel { flex: 1; background: #f8f9fa; padding: 30px; border-radius: 12px; }
.summary-panel p { margin-bottom: 12px; font-size: 15px; }
.form-panel { flex: 1; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: #666; text-transform: uppercase; }
.form-group input, .form-group textarea { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-family: inherit; transition: 0.2s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #05141f; box-shadow: 0 0 0 3px rgba(5, 20, 31, 0.1); }
.price-display { font-size: 26px; font-weight: 700; color: #b20838; margin-top: 25px; border-top: 1px solid #ddd; padding-top: 20px; }

/* 📱 모바일 환경 완벽 대응 (Mobile UI/UX + 테두리 잘림 해결) */
@media (max-width: 768px) {
  body { background-color: white; } /* 모바일에선 배경 꽉 차게 */
  .container { margin: 0; padding: 20px; border-radius: 0; box-shadow: none; width: 100%; box-sizing: border-box; }
  
  /* 🌟 카드가 다 안 보이고 살짝 잘리게 해서 스와이프 유도 */
  .card { min-width: 70%; padding: 20px; } 
  .card img { height: 140px; }


  
  /* 모바일에선 스와이프가 직관적이므로 화살표 숨김 */
  .arrow-btn { display: none !important; } 
  
  /* 4단계 좌우 분할 해제 -> 위아래 배치 */
  .split-layout { flex-direction: column; gap: 30px; }
  .summary-panel, .form-panel { width: 100%; padding: 20px; box-sizing: border-box; }
  
  /* 라디오 버튼 터치 영역 극대화 */
  .spec-group label { display: block; text-align: center; margin: 0 0 10px 0; width: 100%; box-sizing: border-box; }
  
  /* 하단 버튼 위아래 꽉 차게 배치 (Next가 위로, Back이 아래로) */
  .nav-buttons { flex-direction: column; }
  button { width: 100%; margin: 0 0 12px 0; padding: 16px; font-size: 16px; box-sizing: border-box; }
  .btn-prev { order: 2; margin-right: 0; background-color: #f4f7f9; }
  .btn-next, .btn-submit { order: 1; }
}