/* =========================================
   [통합] 결과 페이지 공통 스타일 (1260px 기준)
   ========================================= */

/* --- 기본 레이아웃 설정 --- */

body {
  margin: 0;
  font-size: 1.6rem;
  background-color: #f0f0f0; /* 전체 배경 흰색 */
  display: flex;
  justify-content: center;
  min-height: 100vh;
  font-family: sans-serif; /* 기본 폰트 */
}

/* 전체 감싸는 래퍼 */
.result-wrap {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh; /* 세로 중앙 정렬을 위해 */
}

/* 헤더가 있는 경우 (장바구니 비어있음 페이지용) */
.result-header {
  width: 100%;
  height: 15rem;
  display: flex;
  align-items: center;
  padding: 0 5.2rem;

  border-bottom: 0.2rem solid #e0e3e6;
}
.btn-back {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.btn-back img {
  width: 5.8rem;
  height: auto;
}
.result-header h1 {
  font-size: 5rem;
  font-weight: 700;
  margin-left: 4rem;
}

/* --- 공통 컨텐츠 영역 (중앙 정렬) --- */
.result-content {
  flex: 1; /* 남은 높이 모두 차지 */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 5.2rem;
  padding-top: 43rem; /* 헤더 공간 확보 */
  padding-bottom: 10rem;
  border-top: 3.2rem solid #f0f2f4;
}
.result-content.pt36 {
  padding-top: 36.8rem;
  border-top: none;
}
.result-content.pt5 {
  padding-top: 5.4rem;
  border-top: none;
}
/* 1. 메인 일러스트 이미지 */
.main-illust {
  width: 65rem; /* 곰돌이 크기 조절 */
  height: auto;
  object-fit: contain;
  margin-bottom: 5rem;
}
/* 장바구니 곰돌이는 조금 작게 */
.main-illust.bear-cart {
  width: 50rem;
  margin-bottom: 4.2rem;
}

/* 2. 텍스트 스타일 */
.result-title {
  font-size: 5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 3.6rem;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.result-desc {
  font-size: 3.8rem;
  color: #848484;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 8rem;
}

/* 3. 버튼 공통 스타일 (a태그) */
.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 80rem; /* 버튼 너무 길어지지 않게 제한 */
  height: 15.3rem;
  border-radius: 3rem;
  text-decoration: none; /* 링크 밑줄 제거 */
  font-size: 4.6rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 3.2rem; /* 버튼 사이 간격 */
  gap: 2rem;
  letter-spacing: -0.05em;
}
.result-empty .btn-action {
  width: 42.7rem;
  height: 12.9rem;
  border-radius: 4.8rem;
}
/* 노란색 버튼 */
.btn-yellow {
  background-color: #ffca00;
  color: #333;
}

/* 하늘색 버튼 (주문상세내역) */
.btn-blue {
  background-color: #b8d8e8; /* 이미지와 유사한 파스텔 블루 */
  color: #333;
}

/* 버튼 안 아이콘 */
.btn-icon {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
}

/* --- [Case 3 전용] QR 및 주문번호 박스 --- */

/* 주문번호 박스 (클릭 안됨, div) */
.order-num-box {
  background-color: #ffca00;
  width: 60rem;
  height: 12rem;
  border-radius: 6rem; /* 둥근 알약 모양 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 6rem;
}

/* QR 코드 이미지 */
.qr-code-img {
  width: 50rem;
  height: 50rem;
  object-fit: contain;
  margin-bottom: 23rem;
}

/* 하단 안내 문구 */
.bottom-notice {
  font-size: 3.2rem;
  color: #888;
  text-align: center;
  line-height: 1.4;
}
.result-complete .result-content {
  padding-left: 10.1rem;
  padding-right: 10.1rem;
  padding-top: 35.3rem;
}
.result-complete .main-illust {
  margin-bottom: 7.5rem;
}

.result-complete .result-title {
  font-size: 7.76rem;
  margin-bottom: 5rem;
  letter-spacing: -0.05em;
}
.result-complete .btn-action {
  width: 100%;
  max-width: 100%;
  position: relative;
  font-size: 4.85rem;
  font-weight: 700;
  margin-bottom: 4.8rem;
  height: 17.4rem;
}
.result-complete .btn-icon {
  position: absolute;
  left: 6.2rem;
  width: 9.6rem;
  height: 9.6rem;
}
.result-complete .result-desc {
  font-size: 4.6rem;
  margin-bottom: 20rem;
  letter-spacing: -0.05em;
  color: #565656;
}

.result-qr .main-illust {
  margin-bottom: 1.8rem;
}
.result-qr .result-title {
  font-size: 7.76rem;

  margin-bottom: 4rem;
}
.result-qr .result-desc {
  font-size: 4.4rem;
  color: #565656;
  letter-spacing: -0.05em;
  margin-bottom: 10.3rem;
}
.result-qr .text-xx {
  letter-spacing: -0.05em;
  font-size: 5.8rem;
  color: #272b33;
  font-weight: 700;
  margin-bottom: 2.8rem;
}
.result-qr .order-num-box {
  margin-bottom: 6.2rem;
}
.result-qr .bottom-notice {
  font-size: 3.8rem;
  letter-spacing: -0.05em;
  font-weight: 400;
  color: #565656;
}