/* ============================================================
   layout.css — 레이아웃 시스템 (2026-11 · 레이아웃 시스템 지침서 반영)
   기준: 콘텐츠 1280 + 좌우 거터 80 단일 컨테이너, 섹션 상하 120.
   거터·섹션 패딩만 브레이크포인트별로 줄이고, 나머지 간격은 고정 스케일을 반복한다.
   - 이 파일은 각 페이지 </head> 직전에 로드된다(site.css·refine.css·인라인 <style> 뒤).
     → 같은 선택자는 순서로, 일부 페이지 고유 규칙은 한 단계 높은 선택자로 덮는다.
   - 서체: 지침서의 Outfit(영문 디스플레이·아이브로)은 브랜드 계약(unitlab-design:
     Pretendard 단일)에 따라 쓰지 않고, 크기·행간·자간·굵기 위계만 적용한다.
   ============================================================ */

:root{
  /* 컨테이너 */
  --content:1280px;
  --gutter:80px;
  --container:calc(var(--content) + var(--gutter) * 2);   /* 1440 / 1376 / 1320 */
  /* 섹션 리듬 */
  --sec-y:120px;          /* 일반 섹션 상하 */
  --sec-y-tight:96px;     /* 같은 배경이 이어질 때 뒤 섹션 상단 */
  --sec-head-gap:48px;    /* 섹션 헤드 → 본문 */
  /* 섹션 안 간격 스케일 — 새 값을 만들지 않는다 */
  --sp-xl:64px; --sp-l:48px; --sp-m:24px; --sp-s:16px; --sp-xs:12px;
  /* 그리드 gap 은 16 / 20 / 24 중 하나 */
  --gap-s:16px; --gap-m:20px; --gap-l:24px;
  /* 텍스트 측정 폭 */
  --measure-lead:640px;
  --measure-title:600px;
  /* 헤더 */
  --header-h:88px;
  /* 타입 스케일 (Pretendard) */
  --fs-display:56px; --lh-display:1.2;
  --fs-h2:48px;      --lh-h2:1.25;
  --fs-h3l:28px;
  --fs-h3:22px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-body-s:15px;
  --fs-eyebrow:13px;
}
@media (max-width:1279px){
  :root{
    --gutter:48px;
    --sec-y:96px; --sec-y-tight:80px;
    --sp-xl:48px;
    --fs-display:44px;
  }
}
@media (max-width:767px){
  :root{
    --gutter:20px;
    --sec-y:72px; --sec-y-tight:56px;
    --sec-head-gap:24px;
    --sp-xl:32px; --sp-l:24px;
    --header-h:64px;
    --fs-display:30px; --lh-display:1.3;
    --fs-h2:30px; --lh-h2:1.3;
    --fs-h3l:24px;
    --fs-h3:17px;
    --fs-lead:15px;
    --fs-body:15px;
    --fs-body-s:14px;
    --fs-eyebrow:12px;
  }
}
@media (max-width:359px){ :root{ --gutter:16px; } }

/* ---------- 컨테이너: 전 페이지 같은 .container 하나 ---------- */
.container,
.container.container{
  width:100%;
  max-width:var(--container);
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  margin-left:auto;margin-right:auto;
}
/* 헤더 바·히어로 텍스트·하단 CTA 바도 같은 거터 → 로고·본문 왼쪽 선이 한 줄 */
.header{height:var(--header-h);transition:height .2s ease;}
.header .header-inner,
.header-inner{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter);}
.sub-hero .inner{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter);}
.hero .hero-content,.hero .hero-nav{padding-left:var(--gutter);padding-right:var(--gutter);}
.pagecta-in{max-width:var(--container);padding-left:var(--gutter);padding-right:var(--gutter);}
/* 스크롤 후 고정 상태: 88 → 72 (site.js 가 html.is-scrolled 를 단다) */
@media (min-width:768px){ html.is-scrolled .header{height:72px;} }
.mobile-nav{top:var(--header-h);}

/* ---------- 섹션: margin 없이 패딩 + 배경 전환으로 끊는다 ---------- */
section,
section:not(.uh-x){padding-top:var(--sec-y);padding-bottom:var(--sec-y);margin-top:0;margin-bottom:0;}
/* 히어로 바로 뒤 섹션은 상단을 줄인다(같은 흐름이 이어지는 경우) */
:is(.lp-hero,.pr-hero,.story-hero,.co-hero,.gd-hero,.sub-hero,.hero) + section:not(.uh-x){padding-top:var(--sec-y-tight);}
/* 띠(스트립)형 섹션은 자체 높이를 유지한다 */
.trust-strip:not(.uh-x),.story-filter:not(.uh-x),.stats-strip:not(.uh-x){padding-top:0;padding-bottom:0;}
.story-numbers:not(.uh-x),.fix3:not(.uh-x){padding-top:var(--sec-y-tight);padding-bottom:var(--sec-y-tight);}
:is(.lp-hero,.pr-hero,.story-hero,.co-hero,.gd-hero,.sub-hero) + :is(.story-filter,.stats-strip,.trust-strip) + section:not(.uh-x){padding-top:var(--sec-y-tight);}
/* 인라인 style 로 padding-top:0 을 준 연속 섹션은 그대로 둔다(같은 배경 이어짐) */
section[style*="padding-top:0"]{padding-top:0 !important;}
section[style*="padding:0"]{padding-top:0 !important;padding-bottom:0 !important;}
section[style*="padding:80px 0"]{padding-top:var(--sec-y) !important;padding-bottom:var(--sec-y) !important;}

/* ---------- 타이포그래피 위계 ---------- */
body{font-size:var(--fs-body);line-height:1.6;}
/* 섹션 제목 H2 — 700 / 48 / 1.25 / −1% · 측정 폭 600 */
.sec-title,
section h2:not(.uh-x){
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
}
/* 서브 히어로 헤드라인 */
.sub-hero h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.02em;font-weight:700;max-width:16em;text-wrap:balance;}
/* 아이브로(영문 키커) — 13 / 1.3 / +6% · 대문자 · 아이브로 → 제목 16 */
.kicker,.eyebrow{
  font-size:var(--fs-eyebrow);line-height:1.3;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;
}
:is(.kicker,.eyebrow) + :is(h1,h2,.sec-title){margin-top:var(--sp-s);}
/* 카드 제목 H3 — 700 / 22 / 1.3 / −0.5% */
section h3:not(.uh-x){font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.005em;font-weight:700;}
/* 리드(설명문) — 400 / 18 / 1.65 · 측정 폭 640 */
section .lead,section .desc,section .sub,section .sec-sub{font-size:var(--fs-lead);line-height:1.65;max-width:var(--measure-lead);}
section .center .lead,section .center .desc,.center > .sub{margin-left:auto;margin-right:auto;}
/* 버튼 라벨 — 600 / 15 */
.btn-pill{font-size:15px;font-weight:600;}

/* ---------- 섹션 헤드 → 본문 48 ---------- */
section .head + *,
section :is(h2,.sec-title) + :is(.grid,[class*="-grid"],.cards,ul,ol){margin-top:var(--sec-head-gap);}

/* ---------- 컬럼 그리드 패턴 (콘텐츠별 repeat(n,1fr), gap 16/20/24) ---------- */
.g-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-m);}
.g-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-l);}
.g-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-l) var(--gap-l);}
.g-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap-s);}
.g-split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:80px;align-items:start;}
@media (max-width:1279px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .g-split{gap:48px;}
}
@media (max-width:1023px){
  .g-3{grid-template-columns:minmax(0,1fr);max-width:560px;}
  .g-2{grid-template-columns:minmax(0,1fr);gap:var(--gap-l);}
  .g-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-split{grid-template-columns:minmax(0,1fr);gap:32px;}
}
@media (max-width:767px){
  .g-4{grid-template-columns:minmax(0,1fr);gap:32px;}
  .g-5{grid-template-columns:minmax(0,1fr);gap:12px;}
  .g-split{gap:24px;}
}

/* ---------- 기존 그리드를 같은 규칙에 맞춤 ---------- */
/* 3열 카드: gap 24, ≤1023 세로 스택 */
.pain-grid{gap:var(--gap-l);margin-top:var(--sec-head-gap);}
.service-grid{gap:var(--sp-xl);}
@media (max-width:1279px){
  .pain-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:1023px){
  .pain-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---------- 푸터: 상 72 / 좌우 거터 / 하 48 ---------- */
.footer .container,footer .container{padding-left:var(--gutter);padding-right:var(--gutter);}
.footer,footer.footer{padding-top:72px;padding-bottom:48px;}

/* ---------- 앵커 오프셋은 새 헤더 높이를 따른다 ---------- */
[id]{scroll-margin-top:calc(var(--header-h) + 18px);}