/* s4.css — 4 다섯 단계(#how-we-work · #trust-proof · #principles) · 갈래 steps(r7 · r8 수리: 1180 = 3+2 · 줄바꿈 다듬기 · 카드 그림 = 진한 같은 계열 웅덩이). 모든 규칙은 .s4 아래(다른 갈래와 이름 충돌 0).
   tines 강점 카드 문법(숫자만 빌림): 머리 2열(왼쪽 제목 · 오른쪽 이야기 문장 아래 정렬 · r8 2차: 회색 눈썹 0) → 카드 5
   (1360 = 253×5 + 24×4 · 높이 360 · 반경 16 · 1px 단색 테 = 크림 14% 섞은 #c25a2f · 안쪽 24 · 굵은 720 한 구절 + 400 설명 20 · 아래 왼쪽 작은 그림 110~136).
   폰 = 주황 판 하나(반경 24 · 화면 끝까지) 안에 줄 5(그림 0.71배 = 96 + 글 18) · 줄 사이 1px 크림 선(단색). 움직임 0. */
.s4 { max-width: 1440px; margin: 156px auto 0; padding: 0 40px; }
.s4 .anchor { position: absolute; top: 0; }
.s4 .head4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
.s4 .head4 .t-story { max-width: 540px; padding-bottom: 4px; }
.s4 .cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.s4 .card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 360px; padding: 24px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--brand-edge); }
.s4 .card .t-card { color: var(--cream); font-weight: 400; text-wrap: balance; }   /* r8 2차: balance — 8폭(1440·1280·1180·1024·960·768·390·360) 마지막 줄·가운데 줄 한 낱말 0 실측(pretty 는 1440 '기록해요.' 남음) */
.s4 .head4 .t-h { text-wrap: balance; }
.s4 .card .t-card b { font-weight: 720; }
.s4 .nw { white-space: nowrap; }
/* 그림 자리: 그림 1배 상자(--w × --h)가 들어가는 높이 136 · 왼쪽 아래 붙임. 정지 그림(실패 판·JS 꺼짐)도 같은 1배 크기 */
.s4 .card .ill { --k: 1; flex: none; width: 100%; height: 136px; display: flex; align-items: flex-end; justify-content: flex-start; }
.s4 .card .ill img { display: block; width: calc(var(--w) * var(--k) * 1px); max-width: 100%; height: auto; }
/* 운영 원칙(접힘 DOM) — 카드 아래 한 줄(윗선 + 눈썹 + 제목 + '+'), 펼치면 넷 */
.s4 .prin { margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.s4 .prin summary { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.s4 .prin .ph { margin: 0; flex: 1; font-size: 20px; font-weight: 720; letter-spacing: -.02em; line-height: 1.35; }
.s4 .prin .plead { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--sub); }
.s4 .prin4 { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.s4 .prin4 li { padding-top: 14px; border-top: 1.5px solid var(--ink); }
.s4 .prin4 h3 { margin: 0 0 6px; font-size: 16px; font-weight: 720; letter-spacing: -.015em; line-height: 1.4; }
.s4 .prin4 h4 { margin: 12px 0 4px; font-size: 15px; font-weight: 720; }
.s4 .prin4 p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.s4 .plus::before { content: '+'; }
.s4 i.plus { font-style: normal; }

@media (min-width: 768px) and (max-width: 1180px) {
  /* 3 + 2(r8: 1180 포함 — 5열이면 카드 201 폭에 굵은 구절이 끊김): 여섯 칸 격자 — 위 셋은 두 칸씩, 아래 둘은 세 칸씩 */
  .s4 .head4 { grid-template-columns: 1fr; row-gap: 18px; }
  .s4 .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
  .s4 .card { grid-column: span 2; height: auto; min-height: 0; }   /* r8 2차: 높이 = 내용(줄마다 같은 높이 · 1180·1024 위 셋의 빈 가운데 0) */
  .s4 .card:nth-child(n + 4) { grid-column: span 3; min-height: 0; }
  .s4 .prin4 { grid-template-columns: 1fr 1fr; row-gap: 20px; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  /* r8 2차(반박 5번 '아래 두 카드 540×260 주황 면 75% 빔'): 넓은 아래 두 카드는 글 왼쪽 · 그림 오른쪽 아래(한 줄) — 빈 판 0, 높이 약 −70
     r8 재수리: 768~959 도 같은 줄 배치(768 아래 두 카드 334×289 의 빈 주황 면 → 글 폭 150~160 = 위 세 카드 글 폭 168 과 같은 결) */
  .s4 .card:nth-child(n + 4) { flex-direction: row; align-items: flex-end; }
  .s4 .card:nth-child(n + 4) .t-card { flex: 1; align-self: flex-start; }
  .s4 .card:nth-child(n + 4) .ill { width: calc(var(--w) * 1px); justify-content: flex-end; }
}
@media (max-width: 767px) {
  .s4 { margin-top: 96px; padding: 0 16px; }
  .s4 .head4 { grid-template-columns: 1fr; row-gap: 12px; }
  .s4 .head4 .t-story { padding: 0; }
  /* 주황 판 하나(화면 끝까지 · 반경 24) — 따로 떨어진 카드 0 */
  .s4 .cards { margin: 20px -16px 0; gap: 0; grid-template-columns: 1fr; padding: 2px 20px; background: var(--card); border-radius: 24px; }
  .s4 .card { height: auto; flex-direction: row; align-items: center; gap: 14px; padding: 12px 0; border: 0; border-radius: 0; background: none; }
  .s4 .card + .card { border-top: 1px solid #cd7854; }
  .s4 .card .t-card { order: 2; flex: 1; font-size: 18px; line-height: 1.42; }
  .s4 .card .ill { --k: .706; order: 1; width: 96px; height: 96px; align-items: center; justify-content: center; }
  .s4 .prin { margin-top: 16px; }
  .s4 .prin summary { gap: 10px; min-height: 56px; }
  .s4 .prin .ph { font-size: 18px; }
  .s4 .prin .plead { font-size: 15px; }
  .s4 .prin4 { grid-template-columns: 1fr; row-gap: 14px; }
}