/* ============================================================
   유니베라 이야기 (회사소개)
   · 공통 제목 · 여백 · 대표 사진은 ../research/research.css 를 씀
   · 제목 자리 헤드라인 / 믿을 수 있는 이유 카드 5개 / 이야기마다 사진 · 글 좌우 번갈아
   ============================================================ */

/* 마무리 사진 띠가 없어 푸터 위 여백을 따로 둠 */
.st-body .r-main { padding-bottom: 140px; }
@media (max-width: 1920px) { .st-body .r-main { padding-bottom: 120px; } }
@media (max-width: 1024px) { .st-body .r-main { padding-bottom: 80px; } }

/* 대표 사진 위 카피.
   배너 비율은 연구·품질 페이지와 동일하게 공통값(데스크톱 32:11 / 모바일 4:3)을 그대로 씁니다. */
.st-hero .r-hero__copy .r-hero__logo { width: 104px; }
.st-hero .r-hero__ttl { margin-top: 24px; font-size: clamp(36px, 3vw, 54px); line-height: 1.22; }
.st-hero .r-hero__desc { max-width: 900px; margin-top: 22px; font-size: 19px; line-height: 1.75; }
@media (max-width: 1024px) {
  .st-hero .r-hero__copy .r-hero__logo { width: 84px; }
  .st-hero .r-hero__ttl { margin-top: 19px; font-size: clamp(28px, 8.5vw, 34px); line-height: 1.2; }
  .st-hero .r-hero__desc { margin-top: 20px; font-size: clamp(16px, 4.19vw, 18px); }
}

/* 페이지 제목 자리에 헤드라인 */
.st-body .page-title { line-height: 1.35; word-break: keep-all; }
.st-body .page-title b { color: var(--r-g); }

/* ---------- 믿을 수 있는 이유 ---------- */
.sta-reasons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; }
.sta-reason { padding: 36px 28px 40px; border-radius: 24px; background: var(--r-soft); }
.sta-reason__no { font-size: 18px; font-weight: 700; line-height: 1; color: var(--r-g); }
.sta-reason__ttl { margin-top: 16px; font-size: 21px; font-weight: 700; line-height: 1.45; color: var(--r-ink); word-break: keep-all; }
.sta-reason__txt { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--r-txt); word-break: keep-all; }

/* ---------- 세 개의 이야기 ----------
   stretch 라서 사진 높이가 글 높이를 따라가고 위아래 끝선이 맞습니다.
   그래서 사진 칸에는 고정 비율을 주지 않고(모바일만 4:3), 사진은 절대배치로 채웁니다.
   사진이 낮아져 블록이 짧아지므로 이야기 사이 간격은 넉넉히 둡니다. */
.sta-stories { display: grid; gap: 180px; }
.sta-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: stretch; }   /* 사진 칸을 조금 좁게 */
.sta-story--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sta-story--rev .sta-story__img { order: 2; }
.sta-story__img { position: relative; border-radius: 24px; overflow: hidden; background: var(--r-soft); }
.sta-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sta-story__no { font-size: 18px; font-weight: 700; color: var(--r-g); }
.sta-story__ttl { margin-top: 12px; font-size: 38px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: var(--r-ink); word-break: keep-all; }
.sta-story__txt { margin-top: 20px; font-size: 18px; line-height: 1.8; color: var(--r-txt); word-break: keep-all; }
.sta-story__txt + .sta-story__txt { margin-top: 12px; }
.sta-story__quote { margin-top: 36px; padding: 0 0 0 24px; border-left: 3px solid var(--r-g); font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--r-ink); word-break: keep-all; }

@media (max-width: 1920px) {
  .sta-story { gap: 64px; }
}
@media (max-width: 1024px) {

  .sta-reasons { grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); }
  .sta-reason { display: block; padding: var(--card-pad); border-radius: var(--card-r); }
  .sta-reason__no { display: block; font-size: var(--card-no); }
  .sta-reason__ttl { margin-top: 10px; font-size: var(--card-ttl); line-height: 1.4; }
  .sta-reason__ttl br { display: inline; }
  .sta-reason__txt { margin-top: 10px; font-size: var(--card-txt); line-height: var(--card-lh); }
  .sta-stories { gap: 64px; }
  .sta-story, .sta-story--rev { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sta-story--rev .sta-story__img { order: 0; }
  .sta-story__img { border-radius: 16px; aspect-ratio: 4 / 3; }
  .sta-story__no { font-size: 15px; }
  .sta-story__ttl { font-size: 22px; }
  .sta-story__txt { margin-top: 14px; font-size: 15px; }
  .sta-story__quote { margin-top: 24px; padding: 0 0 0 16px; font-size: 17px; }
}

/* 태블릿 (601~1024) */
@media (min-width: 601px) and (max-width: 1024px) {
  /* 사진 위 카피도 품질 페이지 배너와 같은 크기로 */
  .st-hero .r-hero__ttl { font-size: 40px; line-height: 1.15; }
  .st-hero .r-hero__desc { margin-top: 16px; font-size: 18px; }
}

/* ===== 휴대폰 — 모서리 둥글기를 한 단계 줄임 =============================
   화면이 작아지면 같은 반지름도 상대적으로 더 둥글어 보입니다.
   24→18 · 20→16 · 18→14 · 16→13 · 14→12 · 12→10 · 10→8 로 한 단계씩.
   태블릿(601px 이상)과 PC 는 그대로입니다. */@media (max-width: 600px) {
  .sta-story__img { border-radius: 13px; }
}

/* ===== 본문은 휴대폰 · 태블릿에서 최소 16px ==============================
   읽는 글(문장)이 15px 이하로 내려가 있던 곳을 16px 로 올립니다.
   분류 · 번호 · 안내문 같은 '라벨'은 본문이 아니라 그대로 둡니다. */@media (max-width: 1024px) {
  .sta-story__txt { font-size: 16px; line-height: 1.7; }
}