/* 상세 페이지(케이스 스터디) — 레퍼런스 원칙: 이미지 먼저, 글은 뒤.
   이미지는 콘텐츠 전체 폭(1120), 글은 가운데 열(720)로 들여 이미지가 넓어 보이게.
   제목은 크고 가늘게, 본문은 작게. 시안은 무대를 꽉 채우지 않는다(폰 한 대 ≈ 무대 폭 30%).
   디바이스 프레임은 한 화면 전체를 폰에서 보는 맥락의 시안에만, 컴포넌트 확대에는 쓰지 않는다.
   .cs 아래에만 적용 — 홈·다른 페이지에 영향 없음. 장식·스크롤 효과 없음. */
.cs { padding-top:48px; }
.cs-col { max-width:720px; margin-left:auto; margin-right:auto; }

/* 대표 이미지 → 제목 */
.cs-hero { margin:0; }
.cs-fig picture { display:block; }
.cs-hero img, .cs-fig img { display:block; width:100%; height:auto; background:#F5F5F5; }
.cs-head { margin-top:72px; }
.cs-kicker { font-size:13px; font-weight:500; color:var(--cap); letter-spacing:.02em; }
.cs h1 { margin-top:12px; font-size:56px; line-height:1.25; font-weight:500; letter-spacing:-.03em; text-wrap:balance; }
.cs-lede { margin-top:24px; font-size:17px; line-height:1.8; color:var(--ink); }
.cs-meta { margin-top:40px; display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:12px 56px; }
.cs-meta dt { font-size:13px; font-weight:500; color:var(--cap); margin-bottom:6px; }
.cs-meta dd { font-size:15px; font-weight:500; }

.cs figcaption { margin-top:12px; font-size:13px; line-height:1.55; color:var(--sub); }
.cs-cap-m { display:none; }

/* 본문 */
.cs-sec { margin-top:96px; }
.cs-sec--tight { margin-top:64px; }
.cs-sec h2 { font-size:20px; line-height:1.5; font-weight:600; letter-spacing:-.01em; margin-bottom:16px; }
.cs-sec p { font-size:16px; line-height:1.8; color:var(--ink); }
.cs-sec p + p { margin-top:20px; }
.cs-sec p.cs-note { margin-top:12px; font-size:13px; line-height:1.6; color:var(--sub); }
.cs-sec p.cs-note + p { margin-top:20px; }


/* 블록: 이미지 → 라벨 → 한 문장 → 본문 (레퍼런스 문법) */
.cs-block { margin-top:136px; }
.cs-head + .cs-block { margin-top:120px; }
.cs-block > .cs-fig, .cs-block > .cs-abc-m { margin-top:0; }
.cs-block > .cs-fig.cs-fig--after { margin-top:24px; }
.cs-block > .cs-pair--block { margin-top:0; }
.cs-block > .cs-sec { margin-top:48px; }
.cs-label { font-size:13px; font-weight:500; color:var(--cap); margin-bottom:8px; }
.cs-block h2 { font-size:22px; line-height:1.45; font-weight:600; letter-spacing:-.015em; margin-bottom:16px; }

/* 본문 사이 이미지 */
.cs-fig { margin:72px 0 0; }
.cs-pair { margin-top:72px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cs-pair figure { margin:0; }
.cs-pair img { display:block; width:100%; height:auto; background:#F5F5F5; }

/* 실험안 비교: 데스크톱은 폰 세 대가 든 한 장 + 폰 위치(이미지 2240px 기준 260·500·110·500·110·500·260)에 맞춘 캡션, 모바일은 칸별 */
.cs-stage { position:relative; margin:0; }
.cs-fig.cs-stage { margin-top:72px; }
.cs-pair img, .cs-stage img { display:block; width:100%; height:auto; background:#F5F5F5; }
/* 라벨은 회색 무대 안, 시안 아래 가운데. 이미지 아래쪽에 라벨 자리를 비워 두고 만든다 */
.cs-stage figcaption { position:absolute; bottom:var(--cb, 24px); left:50%; transform:translateX(-50%); margin:0; white-space:nowrap; font-size:13px; line-height:1.4; font-weight:500; color:var(--sub); }
.cs-abc-m { display:none; }

.cs-link { border-bottom:1px solid var(--ink); }
.cs-link:hover { color:var(--sub); border-color:var(--sub); }

.cs-role-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.cs-role h3 { font-size:13px; font-weight:500; color:var(--cap); margin-bottom:12px; }
.cs-role ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:15px; line-height:1.6; }

.cs .pager { margin-top:120px; }

@media (max-width:820px) {
  .cs { padding-top:0; }
  .cs-hero { margin-left:calc(-1 * var(--gutter, 20px)); margin-right:calc(-1 * var(--gutter, 20px)); }
  .cs-hero figcaption { padding:0 var(--gutter, 20px); }
  .cs figcaption { margin-top:10px; line-height:1.6; }
  .cs-cap-d { display:none; } .cs-cap-m { display:inline; }
  .cs-head { margin-top:40px; }
  .cs h1 { font-size:32px; line-height:1.3; }
  .cs-lede { font-size:16px; }
  .cs-meta { grid-template-columns:1fr; gap:14px; }
  .cs-fig.cs-stage { margin-top:48px; }
  .cs-sec { margin-top:72px; }
  .cs-sec--tight { margin-top:48px; }
  .cs-sec h2 { font-size:18px; }
  .cs-sec p { font-size:15px; line-height:1.8; }
  .cs-fig, .cs-pair { margin-top:48px; }
  .cs-pair { grid-template-columns:1fr; gap:32px; }
  .cs-abc-d { display:none; }
  .cs-abc-m { display:grid; gap:32px; margin-top:48px; }
  .cs-abc-m figure { margin:0; }
  .cs-abc-m img { display:block; width:100%; height:auto; }
  .cs-stage figcaption { bottom:var(--cbm, 16px); font-size:12px; }
  .cs-role-grid { grid-template-columns:1fr; gap:24px; }
  .cs-block { margin-top:96px; } .cs-head + .cs-block { margin-top:80px; }
  .cs-block > .cs-sec { margin-top:32px; }
  .cs-block > .cs-fig.cs-fig--after { margin-top:32px; }
  .cs-block > .cs-pair--block { margin-top:0; }
  .cs-block h2 { font-size:19px; }
  .cs-block > .cs-fig { margin-left:calc(-1 * var(--gutter, 20px)); margin-right:calc(-1 * var(--gutter, 20px)); }
  .cs .pager { margin-top:96px; }
}