/* ==========================================================================
   section5 — divider/quote banner: "시간이 지날수록 돌려받을 수 있는 길이
   좁아집니다." + 3 quick-contact actions (전화 상담 / 상담 신청 / 카톡 상담)
   Figma: PC 153:2567 · TA(768) 153:3174 · MO(375) 153:2937
   Note: this section owns its own dark radial-gradient background (distinct
   from the shared .dark-band used by section11+footer) — see BRIEF.md §3.
   ========================================================================== */

.section5 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-darkblue);
  background-image: radial-gradient(
    ellipse 140% 170% at 50% -70%,
    #4b6cb7 0%,
    #2a4b8c 44%,
    #193a77 66%,
    var(--color-darkblue) 88%,
    var(--color-darkblue) 100%
  );
}

.s5-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  /* quote-to-actions gap: MO 12 -> TA/PC 26 */
  gap: clamp(12px, calc(12px + (26 - 12) * ((100vw - 375px) / (768 - 375))), 26px);
  /* section padding: MO 20/26 -> TA/PC 34/49 */
  padding-top: clamp(20px, calc(20px + (34 - 20) * ((100vw - 375px) / (768 - 375))), 34px);
  padding-bottom: clamp(26px, calc(26px + (49 - 26) * ((100vw - 375px) / (768 - 375))), 49px);
}

.s5-quote {
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap;
  /* MO 18/24 -> TA/PC 28/40 */
  font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 375px) / (768 - 375))), 28px);
  line-height: clamp(24px, calc(24px + (40 - 24) * ((100vw - 375px) / (768 - 375))), 40px);
}

.s5-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* row gap: MO 8 -> TA/PC 18 */
  gap: clamp(8px, calc(8px + (18 - 8) * ((100vw - 375px) / (768 - 375))), 18px);
}

.s5-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  max-width: 220px;
  background: var(--color-white-alpha-12);
  border: 1px solid var(--color-bluegrey-300);
  border-radius: clamp(10px, calc(10px + (15 - 10) * ((100vw - 375px) / (768 - 375))), 15px);
  cursor: pointer;
  transition: background-color 0.25s ease;
  /* icon-to-label gap: MO ~0 -> TA/PC 10 */
  gap: clamp(0px, calc(0px + (10 - 0) * ((100vw - 375px) / (768 - 375))), 10px);
  padding: clamp(6px, calc(6px + (26 - 6) * ((100vw - 375px) / (768 - 375))), 26px)
           clamp(22px, calc(22px + (38 - 22) * ((100vw - 375px) / (768 - 375))), 38px);
}
.s5-action:hover { background: rgba(255, 255, 255, 0.2); }

.s5-action__icon {
  flex-shrink: 0;
  width: clamp(20px, calc(20px + (28 - 20) * ((100vw - 375px) / (768 - 375))), 28px);
  height: clamp(20px, calc(20px + (28 - 20) * ((100vw - 375px) / (768 - 375))), 28px);
}

.s5-action__label {
  font-weight: 700;
  color: var(--color-white);
  white-space: nowrap;
  font-size: clamp(14px, calc(14px + (22 - 14) * ((100vw - 375px) / (768 - 375))), 22px);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .s5-action__label { margin-top: 6px; }
}

/* >=768px: icon and label sit side-by-side instead of stacked (Figma switches
   the button's flex-direction from column to row at the TA breakpoint) */
@media (min-width: 768px) {
  .s5-action {
    flex-direction: row;
  }
}