/* ─────────────────────────────────────────────────────────────
   layout.css — 컨테이너 · 섹션 리듬 · page-head (B안)
   brand.css 다음에 로드
   ───────────────────────────────────────────────────────────── */

/* ── Container ──
   shell.css의 .container(1200 / 24px)를 마케팅 기준으로 재정의.
   .container 1200 / -wide 1240 / -table 1280 / -narrow 760 */
.container {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.container-wide {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.container-table {
  max-width: var(--wrap-table);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
.container-narrow {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

@media (max-width: 1000px) {
  .container, .container-wide, .container-table, .container-narrow { padding: 0 24px; }
}
@media (max-width: 600px) {
  .container, .container-wide, .container-table, .container-narrow { padding: 0 20px; }
}

/* ─────────────────────────────────────────────────────────────
   page-head — B안 (밝은 브랜드 그라데이션, 좌측 정렬)
   services / pricing / trial / inquiry 상단 공통.
   홈(index)은 별도 임팩트 히어로를 쓰므로 적용하지 않음.
   ───────────────────────────────────────────────────────────── */
.page-head {
  background: linear-gradient(160deg, var(--brand-050) 0%, #fff 78%);
  border-bottom: 1px solid var(--brand-line);
  padding: 58px 0;
  text-align: left;
  /* 설명문이 1줄이든 2줄이든 상단 배너 높이는 같게 유지한다 */
  min-height: 276px;
  display: flex;
  align-items: flex-start;
}
.page-head > .container { width: 100%; }
.page-head .ph-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(200, 17, 90, .09);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  margin: 0 0 14px;
}
.page-head h1 {
  font-size: 36px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0 0 10px;
}
.page-head h1 em { font-style: normal; color: var(--brand); }
/* 브랜드명이 세미콜론에서 갈라지지 않게 */
.page-head .nb { white-space: nowrap; }
.page-head p {
  font-size: 15.5px;
  color: var(--ink-3);
  line-height: 1.7;
  margin: 0;
  max-width: 660px;
}

@media (max-width: 900px) {
  .page-head { padding: 48px 0; min-height: 224px; }
  .page-head h1 { font-size: 30px; }
}
@media (max-width: 600px) {
  .page-head { padding: 42px 0; min-height: 0; }
  .page-head h1 { font-size: 26px; }
  .page-head p { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────
   Section rhythm
   ───────────────────────────────────────────────────────────── */
.section        { padding: var(--sec-y) 0; }
.section-tight  { padding: var(--sec-y-tight) 0; }
.section-alt    { background: var(--bg-2); }

@media (max-width: 900px) {
  .section       { padding: 64px 0; }
  .section-tight { padding: 48px 0; }
}
@media (max-width: 600px) {
  .section       { padding: 48px 0; }
  .section-tight { padding: 36px 0; }
}