/* ==========================================================================
   section9 — "시작 방법" (전국 무방문 접수 / 변호사 직접 상담 / 방문 상담 가능)
   Figma: PC 153:2423 · TA(768) 153:3315 "Frame 412" · MO(375) 153:2782
   ========================================================================== */
.section9 {
  background: var(--color-bluegrey-100);
  padding-top: clamp(30px, calc(30px + (50 - 30) * ((100vw - 375px) / (1440 - 375))), 50px);
  padding-bottom: clamp(30px, calc(30px + (50 - 30) * ((100vw - 375px) / (1440 - 375))), 50px);
}

.s9-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, calc(28px + (50 - 28) * ((100vw - 375px) / (1440 - 375))), 50px);
}

/* ---- Feature card row ---------------------------------------------------- */
.s9-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}

.s9-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 10px;
  width: 100%;
  background: var(--color-white);
  border: 1px solid var(--color-bluegrey-300);
  border-radius: 10px;
  padding: 18px 7px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.s9-feature__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s9-feature__icon img { width: 22px; height: auto; display: block; }

.s9-feature__title {
  flex: 0 0 auto;
  margin: 0;
  font-weight: 700;
  color: var(--color-darkblue);
  font-size: 18px;
  line-height: 1.33;
  white-space: nowrap;
}

.s9-feature__desc {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
  font-weight: 400;
  color: var(--color-grey-900);
  font-size: 12px;
  line-height: 1.33;
  text-align: center;
}

/* ---- Tablet / PC: cards side-by-side, icon on top, centered column ------- */
@media (min-width: 768px) {
  .s9-features {
    flex-direction: row;
    justify-content: center;
    max-width: none;
    width: auto;
    column-gap: clamp(12px, calc(12px + (18 - 12) * ((100vw - 768px) / (1440 - 768))), 18px);
    row-gap: 0;
  }

  .s9-feature {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: clamp(221px, calc(221px + (288 - 221) * ((100vw - 768px) / (1440 - 768))), 288px);
    height: clamp(178px, calc(178px + (208 - 178) * ((100vw - 768px) / (1440 - 768))), 208px);
    border-radius: clamp(15px, calc(15px + (20 - 15) * ((100vw - 768px) / (1440 - 768))), 20px);
    padding: 0;
    gap: 0;
  }

  .s9-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(9, 41, 98, 0.08);
  }

  /* icon is a fixed-geometry asset at TA/PC (same px value both breakpoints) —
     drop the mobile 22px override so each <img> falls back to its own
     width/height HTML attributes (42/41, 42/42, 36/38) */
  .s9-feature__icon img { width: auto; height: auto; }

  .s9-feature__title {
    margin-top: 16px;
    white-space: nowrap;
    font-size: clamp(22px, calc(22px + (24 - 22) * ((100vw - 768px) / (1440 - 768))), 24px);
    line-height: clamp(32px, calc(32px + (40 - 32) * ((100vw - 768px) / (1440 - 768))), 40px);
  }

  .s9-feature__desc {
    /* mobile's flex:0 0 100% resolves to a full 100%-of-card HEIGHT once
       .s9-feature switches to flex-direction:column, blowing the card up —
       reset it back to a natural content-based size here */
    flex: 0 0 auto;
    margin-top: clamp(4px, calc(4px + (9 - 4) * ((100vw - 768px) / (1440 - 768))), 9px);
    max-width: 230px;
    font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 768px) / (1440 - 768))), 16px);
    line-height: clamp(20px, calc(20px + (24 - 20) * ((100vw - 768px) / (1440 - 768))), 24px);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .s9-feature { padding: 16px; }
}

/* Mobile-only line break in the heading (desktop keeps it on one line) */
.s9-break { display: inline; }
@media (min-width: 768px) {
  .s9-break { display: none; }
}