/* =========================================================
   sub.css — 서브페이지 공통 스캐폴딩만
   (sub-visual/breadcrumb/tabs 는 common.css / 페이지별 섹션은 pages/*.css)
   ⚠ 페이지 고유 컴포넌트는 여기 넣지 말 것 → assets/css/pages/{slug}.css
   ========================================================= */

.sub-main { padding-top: 0; }
.sub-sec { padding: 110px var(--gutter); }
.sub-sec .inner { max-width: var(--container); margin: 0 auto; }
.sub-sec.tint { background: #f7f7f7; }

/* Figma 실측: 섹션 제목 60px(NanumNeo Heavy), 섹션 인트로/리드 40px(Pretendard Medium) */
.sec-title { font-family: var(--font-head); font-weight: 800; font-size: 60px; color: var(--ink); letter-spacing: -1.5px; line-height: 1.1; }
.sec-lead { margin-top: 32px; font-size: 40px; line-height: 1.25; letter-spacing: -1px; color: var(--ink); font-weight: 500; }
.sec-lead.muted { color: var(--gray); }
.sec-lead.muted b { color: var(--ink); font-weight: 700; }

/* =========================================================
   반응형 — 공통 스캐폴딩만(페이지별 반응형은 pages/*.css)
   ========================================================= */
@media (max-width: 1024px) {
  .sub-sec { padding: 80px var(--gutter); }
  .sec-title { font-size: 48px; }
  .sec-lead { font-size: 32px; }
}
@media (max-width: 768px) {
  .sub-sec { padding: 60px var(--gutter); }
  .sec-title { font-size: 34px; }
  .sec-lead { font-size: 24px; margin-top: 24px; }
}