/* ==========================================================================
   Section11 — 최하단 CTA (상담신청)
   Figma: wkpZQC5BlTHneflMUkEuwz
     PC 153:2693 · TA(768) 153:3351 · MO(375) 153:2739

   주의: 이 섹션은 최종 조립 시 footer와 함께 .dark-band(짙은 그라디언트)로
   감싸진다. 따라서 섹션 자체에는 배경색을 지정하지 않는다(투명 유지).
   텍스트는 어두운 배경 위에서 보이도록 흰색 계열로 작성.
   ========================================================================== */

.section11 {
  background: transparent; /* .dark-band가 배경을 담당 — 여기서 지정 금지 */
}

.section11__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* padding-bottom: 28(375) -> 80(768) -> 100(1440) */
  padding-bottom: clamp(80px, calc(80px + (100 - 80) * ((100vw - 768px) / (1440 - 768))), 100px);
  /* padding-top: 28(375) -> 40(768) -> 50(1440) */
  padding-top: clamp(40px, calc(40px + (50 - 40) * ((100vw - 768px) / (1440 - 768))), 50px);
  /* gap(title -> card): 16(375) -> 30(768) -> 50(1440) */
  gap: clamp(30px, calc(30px + (50 - 30) * ((100vw - 768px) / (1440 - 768))), 50px);
}
@media (max-width: 767px) {
  .section11__inner {
    padding-top: clamp(28px, calc(28px + (40 - 28) * ((100vw - 375px) / (768 - 375))), 40px);
    padding-bottom: clamp(28px, calc(28px + (80 - 28) * ((100vw - 375px) / (768 - 375))), 80px);
    gap: clamp(16px, calc(16px + (30 - 16) * ((100vw - 375px) / (768 - 375))), 30px);
  }
}

/* ---- Repeated main title override (다크 배경용 색상 재정의) -------------- */
.section11 .section-title__heading {
  color: var(--color-white);
  text-align: center;

  /* font-size: 18(375) -> 34(768) -> 34(1440) / line-height: 24 -> 46 -> 46 */
  font-weight: 700; /* Bold (768/1440 실측) */
  font-size: 34px;
  line-height: 46px;
}
@media (max-width: 767px) {
  .section11 .section-title__heading {
    font-weight: 600; /* SemiBold (375 실측) */
    font-size: clamp(18px, calc(18px + (34 - 18) * ((100vw - 375px) / (768 - 375))), 34px);
    line-height: clamp(24px, calc(24px + (46 - 24) * ((100vw - 375px) / (768 - 375))), 46px);
  }
}

/* 375~768 구간: "보증금은" 뒤에서 줄바꿈 (br--a) / 768px+: "기다린다고" 뒤에서 줄바꿈 없음 유지
   PC·TA 실측: "보증금은" / "기다린다고 돌아오지 않습니다." 2줄
   MO 실측:    "보증금은 기다린다고" / "돌아오지 않습니다." 2줄 */
.section11__br--a { display: none; }
.section11__br--b { display: none; }
@media (min-width: 768px) {
  .section11__br--a { display: inline; }
}
@media (max-width: 767px) {
  .section11__br--b { display: inline; }
}

/* ---- Card (전화번호 + CTA 버튼) ------------------------------------------- */
.section11__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px; /* PC 800px 고정, TA/MO는 100% (800px보다 좁으므로 자연히 풀폭) */

  background: var(--color-white-alpha-12);
  border: 1px solid var(--color-bluegrey-300);
  border-radius: 20px;

  /* padding-y: 30(375) -> 43(768) -> 43(1440) */
  padding-top: 43px;
  padding-bottom: 43px;
  /* gap(info -> button): 22(375) -> 34(768) -> 34(1440) */
  gap: 34px;
}
@media (max-width: 767px) {
  .section11__card {
    border-radius: clamp(10px, calc(10px + (20 - 10) * ((100vw - 375px) / (768 - 375))), 20px);
    padding-top: clamp(30px, calc(30px + (43 - 30) * ((100vw - 375px) / (768 - 375))), 43px);
    padding-bottom: clamp(30px, calc(30px + (43 - 30) * ((100vw - 375px) / (768 - 375))), 43px);
    gap: clamp(22px, calc(22px + (34 - 22) * ((100vw - 375px) / (768 - 375))), 34px);
  }
}

.section11__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: var(--color-white);
  /* gap: 10(375) -> 18(768) -> 18(1440) */
  gap: 18px;
}
@media (max-width: 767px) {
  .section11__info {
    gap: clamp(10px, calc(10px + (18 - 10) * ((100vw - 375px) / (768 - 375))), 18px);
  }
}

.section11__label {
  font-weight: 600;
  /* font-size: 18 -> 22 -> 22 / line-height: 22 -> 26 -> 26 */
  font-size: 22px;
  line-height: 26px;
}
@media (max-width: 767px) {
  .section11__label {
    font-size: clamp(18px, calc(18px + (22 - 18) * ((100vw - 375px) / (768 - 375))), 22px);
    line-height: clamp(22px, calc(22px + (26 - 22) * ((100vw - 375px) / (768 - 375))), 26px);
  }
}

.section11__phone {
  display: block;
  font-weight: 700;
  /* font-size: 34 -> 46 -> 46 / line-height: 32 -> 46 -> 46 */
  font-size: 46px;
  line-height: 46px;
}
@media (max-width: 767px) {
  .section11__phone {
    font-size: clamp(34px, calc(34px + (46 - 34) * ((100vw - 375px) / (768 - 375))), 46px);
    line-height: clamp(32px, calc(32px + (46 - 32) * ((100vw - 375px) / (768 - 375))), 46px);
  }
}

.section11__note {
  font-weight: 400;
  /* font-size: 14 -> 16 -> 16 / line-height: 24 (동일) */
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 767px) {
  .section11__note {
    font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 375px) / (768 - 375))), 16px);
  }
}

/* ---- CTA button sizing override ------------------------------------------
   색상/hover 반전은 .btn .btn-blue .btn--cta (공용 CSS)가 담당하므로
   여기서는 크기(padding/font-size/line-height/radius)만 재정의한다. -------- */
.section11__cta {
  border-radius: 50px;
  /* padding: 22/10(375) -> 27/13(768) -> 27/13(1440) */
  padding: 13px 27px;
  /* font-size: 16 -> 24 -> 24 / line-height: 28 -> 40 -> 40 */
  font-size: 22px;
  line-height: 40px;
  background: var(--color-white);
  color: var(--color-darkblue);
}
/* default is now white/darkblue, so invert the shared .btn--cta:hover
   (white bg / darkblue text) back to darkblue bg / white text on hover */
.section11__cta:hover {
  background: var(--color-darkblue) !important;
  color: var(--color-white) !important;
}
@media (max-width: 767px) {
  .section11__cta {
    padding: clamp(10px, calc(10px + (13 - 10) * ((100vw - 375px) / (768 - 375))), 13px)
             clamp(22px, calc(22px + (27 - 22) * ((100vw - 375px) / (768 - 375))), 27px);
    /* match the shared .btn font sizing instead of this component's own
       (desktop-only) 22px/40px override */
    font-size: clamp(15px, calc(15px + (22 - 15) * ((100vw - 375px) / (1440 - 375))), 22px);
    line-height: 1.45;
  }
}