/* ==========================================================================
   section4 — "지금 알아야 지킬 수 있는 네 번의 골든타임" (4-step procedure cards)
   Figma: PC 153:2579 · TA(768) 153:3167 · MO(375) 153:2949
   Cards reuse the shared .case-card component (Frame197/198/199/200 (PC),
   Frame398 - 401 (TA), Frame286 - 289 (MO) — matches BRIEF.md's own mapping of
   .case-card to these exact frame names, confirmed by measured content/sizes).
   ========================================================================== */

.section4 {
  background: var(--color-bluegrey-100);
}

.section4__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* title-to-list gap: MO 28 -> TA 30 -> PC 50 */
  gap: clamp(30px, calc(30px + (50 - 30) * ((100vw - 768px) / (1440 - 768))), 50px);
  /* section padding-top: MO 30 -> TA 40 -> PC 50 */
  padding-top: clamp(40px, calc(40px + (50 - 40) * ((100vw - 768px) / (1440 - 768))), 50px);
  /* section padding-bottom: MO 60 -> TA 80 -> PC 100 */
  padding-bottom: clamp(80px, calc(80px + (100 - 80) * ((100vw - 768px) / (1440 - 768))), 100px);
}
@media (max-width: 767px) {
  .section4__inner {
    gap: clamp(28px, calc(28px + (30 - 28) * ((100vw - 375px) / (768 - 375))), 30px);
    padding-top: clamp(30px, calc(30px + (40 - 30) * ((100vw - 375px) / (768 - 375))), 40px);
    padding-bottom: clamp(60px, calc(60px + (80 - 60) * ((100vw - 375px) / (768 - 375))), 80px);
  }
}

.s4-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 18px; /* TA and PC both measure 18px between cards */
}
@media (max-width: 767px) {
  /* MO measures 10px between cards, ramping up to the 18px TA value */
  .s4-list {
    gap: clamp(10px, calc(10px + (18 - 10) * ((100vw - 375px) / (768 - 375))), 18px);
  }
}

/* ---- Mobile-only layout switch for the shared .case-card compare row -----
   PC (900px card / 822px content) and TA (688px card) both keep the
   "놓치면 / 지금 하면" columns side-by-side with a vertical divider.
   MO (343px card) stacks them with a horizontal divider instead
   (Figma "Frame283" asset — reproduced here as a plain 1px rule for
   crisp scaling instead of an embedded line SVG).
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .section4 .case-card__compare {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .section4 .case-card__divider {
    width: 100%;
    height: 1px;
    align-self: stretch;
  }
}