/* ============================================================
   layout — wrap · section · 공용 헤더 · 버튼 · 강조 유틸
   ============================================================ */

.wrap { position:relative; z-index:1; width:min(calc(100% - 2 * var(--page-x)), var(--page-max)); margin:0 auto; }
/* 섹션 간격. 구간 구분은 면 색(.band-paper / .band-canvas, base.css)이 맡는다.
   같은 회색 위 1px 선은 경계를 못 만들고 긴 화면의 가독성을 깎는다. */
section { position:relative; padding:var(--section-y) 0; }

/* 섹션 공용 헤더 */
/* 한글 라벨 — mono + 넓은 트래킹은 라틴 대문자 관례다. 한글은 낱자 폭이 이미
   고르기 때문에 자간을 얹으면 낱말이 흩어져 읽힌다(0.08~0.14em 에서 특히).
   디자인 시스템도 mono 를 '데이터·기계값' 으로 한정한다 — 숫자·단위엔 그대로 두고,
   한글 문구는 sans + --ls-wide(0.2px) 로 되돌린다. */
.eyebrow { font:500 var(--fs-label)/1.3 var(--font); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--ink); }
.sec-head { text-align:center; max-width:860px; margin: 0 auto var(--space-7); }
.sec-head h2 { font-family:var(--font); font-weight:600; font-size: var(--fs-h1); line-height:1.24; letter-spacing:var(--ls-tighter); margin: var(--space-4) 0 0; word-break:keep-all; text-wrap:balance; }
.sec-head p { font:400 var(--fs-body-lg)/1.65 var(--font); color:var(--ink); margin: var(--space-4) auto 0; max-width:620px; word-break:keep-all; }

/* 강조어는 공용 레이어 .mk-gradient-word(잉크 히어로 한 곳)를 쓴다. 옛 .grad 는 걷어냈다. */

/* 주 CTA — v3.0.0: 아쿠아 색유리(light.css 주 액션)를 그대로 쓴다. 보조 글래스 버튼과 같은 48px. */
.btn-dark {
  min-height:48px; padding: 0 var(--space-5); gap: var(--space-2);
  font: 600 var(--fs-body)/1 var(--font); text-decoration:none; cursor:pointer;
}
.btn-dark-compact { border-radius: var(--radius-input); }

.btn-glass,.btn-glass.x-btn { --r: var(--r-ctl); min-height:48px; padding:0; cursor:pointer; }
.btn-glass .in { display:inline-flex; align-items:center; gap: var(--space-2); padding: 0 var(--space-5); height:46px; color:var(--ink); font: 600 var(--fs-body)/1 var(--font); }

/* 좁은 화면: clamp() 글자 크기를 DS 토큰 두 단계로 나눈 작은 쪽(DS 준수 이관 2026-10-20) */
@media (max-width: 700px) {
  .sec-head h2 { font-size: var(--fs-h2); }
}