/* 데스크톱 1440: 페이지 좌우 여백 80 + 컨테이너 패딩 48 = 콘텐츠 x=128
   모바일 375: 좌우 24 = 콘텐츠 327 */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(24px, 15.5493px + 2.25352vw, 48px);
}

/* 상세 페이지 본문 컬럼 740px (데스크톱 1440에서 좌우 350) */
.container--narrow {
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 1024px) {
  .container--narrow { padding-inline: 0; }
}

/* 섹션 상하 패딩: 데스크톱 160 / 모바일 56 */
.section        { padding-block: clamp(56px, 19.39px + 9.77vw, 160px); }
.section--sm    { padding-block: clamp(56px, 53.1831px + 0.75117vw, 64px); }
/* 하단 clamp 모바일 하한 56 — Contact(73:195 pb56)와 404(전용 프레임 없음, 다른 페이지와
   동일하게 56 기대) 둘뿐인 현재 사용처 모두 56을 원한다(과거 Work 히어로 pb40 흔적이던
   40은 Work가 자체 .work-hero로 분리되며 무의미해짐 — Task 14 §3 실측). */
.section--hero  { padding-block: clamp(56px, 30.65px + 6.76vw, 128px)
                              clamp(56px, 53.1831px + 0.75117vw, 64px); }
/* Home CTA / About Quote 공용 — 모바일만 64로 확장, 데스크톱은 기본 섹션(160)과 동일
   (인벤토리 §4 모바일 예외 "CTA·Quote 64"). 64(375) → 160(1440) 연속 보간. */
.section--emphasis { padding-block: clamp(64px, 30.20px + 9.014vw, 160px); }

/* 그리드 — 데스크톱 1184 기준. 모바일은 전부 1열 */
.grid-2col, .grid-3col, .grid-4col { display: grid; gap: var(--space-md); }
@media (min-width: 1024px) {
  .grid-2col { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
  .grid-3col { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
  .grid-4col { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
}
/* ProjectCard 그리드(Selected Work 등) 모바일 카드 간격 실측 32 — grid-3col/4col은
   아직 모바일 실측이 없으므로 기본 --space-md(24)를 그대로 둔다 */
@media (max-width: 1023px) {
  .grid-2col { gap: var(--space-lg); }
}

/* 조직도는 4열 gap 34 (인벤토리 §4) */
.grid-org { display: grid; gap: var(--space-md); }
@media (min-width: 1024px) {
  .grid-org { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
}

.stack   { display: flex; flex-direction: column; }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* 모바일 간격 스케일 — Figma 375 프레임 실측(전용 토큰 없음, 데스크톱 24/32/48 스케일이
   모바일에서는 균일하게 28로 수렴한다: Home 히어로 label→H1/H1→서브/서브→버튼,
   Statement 제목→본문 전부 28). .gap-md/.gap-lg/.gap-xl로 중첩 .stack을 구성하는
   페이지는 이 기본값을 그대로 상속한다. 다른 값이 필요한 인스턴스(CTA 등)는 더
   구체적인 선택자로 오버라이드한다 — 예: pages.css의 `.cta .gap-lg`. */
@media (max-width: 1023px) {
  .gap-md { gap: 28px; }
  .gap-lg { gap: 28px; }
  .gap-xl { gap: 28px; }
}