/* Atorni /cases — 사례 표면.
 * 정본 = _design/outbox/20260802_new_site_migration/site/cases.html <style>
 * 격리: 전 선택자 `.site` 하위. 공통(버튼·크롬·h1/h2·final)은 site_chrome/site_about 재사용.
 */

.site .s-ctop {
  padding: 70px 0 44px; background: var(--s-mist);
  border-bottom: 1px solid var(--s-line);
}
.site .s-ctop h1 { margin-top: 20px; max-width: 16ch; }
.site .s-ctop .s-lede { font-size: 18px; }

/* 사진 + 캡션(사진 위 그라디언트) */
.site .s-cmedia {
  position: relative; border-radius: 10px; overflow: hidden;
  /* [착수 16단계] 고정 44/26 → 이미지 위아래 여백만 responsive clamp(넓은 화면 숨통·모바일 과하지 않게).
   *   /cases 전용 selector — aspect-ratio·src·배경 불변. */
  margin: clamp(40px, 5vw, 56px) 0 clamp(22px, 3vw, 30px); aspect-ratio: 16/9; background: #EDEBE4;
}
.site .s-cmedia img { width: 100%; height: 100%; object-fit: cover; }
.site .s-cmcap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 20px 14px; color: rgba(255,255,255,.9); font-size: 12.5px;
  background: linear-gradient(to top, rgba(10,14,18,.8), rgba(10,14,18,0));
}

/* 사례 카드 */
.site .s-ccard { padding-bottom: 8px; }
.site .s-chead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site .s-ctag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--s-forest);
  border: 1px solid var(--s-sage-line); border-radius: 100px; padding: 5px 11px;
}
.site .s-cwho { font-size: 14px; color: var(--s-ink-45); }
.site .s-ccard h2 { font-size: clamp(25px, 3.2vw, 34px); margin-top: 16px; max-width: 24ch; }
.site .s-cintro { color: var(--s-ink-70); margin-top: 16px; max-width: 66ch; }

.site .s-cblock { margin-top: 30px; }

/* [원본 .cgrid] '왜 어려웠나' + '한 일' 은 나란히. 880px 이상에서 2열. */
.site .s-cgrid { display: grid; gap: 26px; margin-top: 4px; }
@media (min-width: 880px) {
  .site .s-cgrid { grid-template-columns: 1fr 1.15fr; gap: 52px; }
}
/* [원본 .cstand] '현재' 는 2열 아래 한 줄로 떨어진다. */
.site .s-cstand { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--s-line); }

.site .s-cblock h3 {
  font-family: var(--s-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--s-ink-45);
}
.site .s-cblock p { color: var(--s-ink-70); font-size: 16px; margin-top: 12px; max-width: 74ch; }

/* 한 일 = 번호 목록(순서가 곧 논지) */
.site .s-csteps { margin-top: 12px; padding-left: 0; list-style: none; counter-reset: s; }
.site .s-csteps li {
  counter-increment: s; position: relative; padding-left: 28px;
  color: var(--s-ink-70); font-size: 16px; margin-top: 11px; max-width: 74ch;
}
.site .s-csteps li::before {
  content: counter(s); position: absolute; left: 0; top: 1px;
  font-family: var(--s-serif); font-size: 17px; color: var(--s-forest);
}

.site .s-cquote {
  margin: 28px 0 0; padding: 24px 26px; background: var(--s-sage); border-radius: 10px;
  font-family: var(--s-serif); font-size: clamp(19px, 2.3vw, 24px);
  letter-spacing: -.015em; line-height: 1.32; color: var(--s-ink); max-width: 44ch;
}

/* 각주 — 사례는 결과 보장이 아니다(대한변협 광고 규정). 항상 노출. */
.site .s-cnote {
  background: var(--s-sage); border-radius: 10px; padding: 22px 24px;
  margin: 48px 0 0; font-size: 14.5px; color: var(--s-ink-70);
}
.site .s-cnote b { color: var(--s-ink); }

.site .s-final { margin-top: 70px; }