:root {
  --navy: #0b1f3a;
  --cobalt: #2457d6;         /* 작은 텍스트용 — 흰 배경 대비 6.16 (AA 통과) */
  --cobalt-bright: #3182f6;  /* 큰 면적용 — 대비 3.71 이라 작은 글씨에는 쓰지 않는다 */
  --cobalt-soft: #a9c4f4;
  --white: #ffffff;
  --line: #d9e1ea;
  --muted: #5e6b7b;
  --header-h: 82px;
}

* { box-sizing: border-box; }
/* html 에 scroll-behavior:smooth 를 걸면 스크롤 스냅과 매 휠 이벤트마다 서로를 취소시켜
   휠 20번에 103px 밖에 안 내려가는 스크롤 잠김이 생긴다.
   앵커 이동의 부드러움은 main.js 가 스냅을 잠깐 끄고 처리한다. */
/* 고정 헤더가 가리는 만큼 스냅 도착점을 내린다. 이게 없으면 섹션 윗머리가 헤더에 잘린다. */
html { scroll-padding-top: var(--header-h); }
/* 앵커로 직접 뛰어드는 제목은 헤더 높이만큼만 띄우면 헤더에 딱 붙어 숨 쉴 공간이 없다.
   스냅 위치는 건드리지 않고 앵커 도착점에만 여유를 더한다. */
#evidence-title,
#contact-title,
#pavlo-title { scroll-margin-top: calc(var(--header-h) + 76px); }
/* 이 여유분을 스냅 대상 섹션에 주면 안 된다. 앵커는 158px 지점에 세우는데
   스냅은 scroll-padding-top(82px) 지점으로 되당겨 244px 를 튕긴다.
   "이런 고민"이 02 하단에 갔다가 상단으로 뛰던 버그의 원인이었다.
   스냅 대상은 scroll-padding-top 하나만 따르게 둔다. */
body {
  margin: 0;
  color: var(--navy);
  background: var(--white);
  font-family: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }
/* 키보드로 들어온 사람이 헤더 링크를 5번 지나지 않고 본문으로 뛰게 한다 (WCAG 2.4.1).
   평소엔 화면 밖에 두고 포커스를 받을 때만 내려온다. 모서리는 직각 유지. */
.skip-link { position: fixed; top: 0; left: 0; z-index: 100; padding: 12px 18px; color: var(--white); font-size: 14px; font-weight: 700; background: var(--cobalt); transform: translateY(-110%); transition: transform .15s ease; }
.skip-link:focus { transform: translateY(0); }

/* 페이지가 9,500px 라 헤더가 흘러가 버리면 중간에 문의 접점이 사라진다.
   전 구간에 고정해 카카오톡 상담을 항상 손에 닿게 둔다. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding-right: max(48px, calc((100vw - 1344px) / 2));
  padding-left: max(48px, calc((100vw - 1344px) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
/* 브랜드컬러 #3182F6 은 흰 배경 대비 3.71 이라 18px/700 에서는 AA(4.5) 를 못 넘는다.
   19px 로 올리면 WCAG "굵은 큰 글씨"(18.66px 이상) 기준이 적용돼 3:1 로 통과한다.
   1px 올리는 것만으로 브랜드컬러를 쓰면서 접근성도 지킨다. */
.wordmark { font-size: 19px; font-weight: 700; letter-spacing: -.055em; color: var(--cobalt-bright); }
.header-nav { display: flex; gap: 28px; justify-self: center; }
.header-nav a { color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: -.02em; transition: color .2s ease; }
.header-nav a:hover { color: var(--cobalt); }
.header-link { justify-self: end; font-size: 13px; font-weight: 500; white-space: nowrap; }
.header-link span { margin-left: 7px; color: var(--cobalt); font-size: 16px; }
/* 번호는 헤더에서 읽히는 게 목적이라 본문보다 한 단계 굵게 간다. 폭은 tabular 로 고정해 스크롤 중 흔들리지 않게. */
.header-link b { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* 번호만 두면 무슨 번호인지 한 번 생각해야 한다. 용도를 앞에 작게 붙여 훑어도 읽히게 한다. */
.header-link-num i { margin-right: 8px; color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 500; }
.header-link-act { display: none; }

.hero,
.statement-section,
.pavlo-intro,
.evidence-section,
.process,
.pricing,
.contact-cta,
.site-footer {
  padding-right: max(48px, calc((100vw - 1344px) / 2));
  padding-left: max(48px, calc((100vw - 1344px) / 2));
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  padding-top: 112px;
  padding-bottom: 112px;
}
.eyebrow,
.section-label,
.section-index {
  margin: 0;
  color: var(--cobalt);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.hero h1,
.statement-section h2,
.pavlo-intro h2,
.evidence-heading h2 {
  margin: 0;
  font-size: clamp(50px, 5.55vw, 86px);
  font-weight: 300;
  letter-spacing: -.088em;
  line-height: 1.12;
}
.hero h1 { margin-top: 38px; max-width: 900px; }
h1 strong, h2 strong { font-weight: 700; }
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 236px;
  min-height: 56px;
  margin-top: 56px;
  padding: 0 18px 0 21px;
  color: var(--white);
  background: var(--navy);
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}
.cta:hover { background: var(--cobalt-bright); transform: translateY(-2px); }
.cta span { font-size: 20px; font-weight: 300; }
.hero-proof { display:flex; align-items:center; gap:9px; margin:20px 0 0; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.02em; }
.hero-proof strong { color:var(--cobalt); font-size:13px; letter-spacing:-.04em; }
.hero-proof span { color:var(--line); }
/* 잘못 들어온 리뷰어의 탈출구. CTA 와 경쟁하면 안 되므로 무게를 낮추되,
   "참여"라는 단어는 굵게 둬서 훑어볼 때 자기 것이 눈에 걸리게 한다. */
.hero-switch { margin:14px 0 0; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:-.02em; }
.hero-switch b { color:var(--navy); font-weight:700; }
.hero-switch a { margin-left:4px; color:var(--cobalt); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.hero-switch a span { font-size:13px; }

.statement-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* 02~06 과 07 이 88 / 100 / 92vh 로 제각각이라 03 만 화면이 덜 찼다.
     고정 헤더를 뺀 실제 가시 영역으로 전부 통일한다. */
  min-height: calc(100vh - var(--header-h));
  border-top: 1px solid var(--line);
}
.statement-section h2 { max-width: 1000px; }
.statement-proof { max-width: 640px; margin: 22px 0 0; color: var(--cobalt); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.statement-section--dark .statement-proof { color: var(--cobalt-soft); }
.statement-section--dark { color: var(--white); background: var(--navy); border-color: rgba(255,255,255,.18); }
.statement-section--dark .section-index { color: var(--cobalt-soft); }
.statement-section .section-index { position: absolute; top: 56px; left: max(48px, calc((100vw - 1344px) / 2)); }
/* 05 만 우측 정렬이라 의도가 안 읽히고 실수처럼 보였다 → 왼쪽 통일, 강조는 여백으로 준다. */
.statement-section--space { padding-bottom: 16vh; }

.pavlo-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
  color: var(--white);
  background: var(--navy);
}
.pavlo-intro .section-label { color: var(--cobalt-soft); }
.pavlo-intro h2 { margin-top: 46px; }

.evidence-section { padding-top: 180px; padding-bottom: 0; }
.evidence-heading { display: grid; grid-template-columns: minmax(200px, .7fr) 1.3fr; gap: 10vw; align-items: start; }
.evidence-heading h2 { max-width: 620px; }
.evidence-list { margin: 168px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--navy); }
.evidence-item {
  display: grid;
  /* 이미지 칸을 고정폭으로 둔다. .evidence-item--split 이 다른 비율(.6fr)을 썼던 탓에
     같은 360px 상한이어도 실제 화면에서 서로 다른 픽셀값으로 줄어들어 사진 폭이 들쑥날쑥했다. */
  grid-template-columns: 72px minmax(240px, 1fr) minmax(0, 480px);
  align-items: center;
  gap: 24px;
  min-height: 228px;
  padding: 27px 0;
  border-bottom: 1px solid var(--line);
}
.evidence-order { align-self: start; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
.evidence-item strong { display: block; font-size: clamp(44px, 5.2vw, 78px); font-weight: 300; letter-spacing: -.085em; line-height: .92; }
.evidence-item--number strong { font-size: clamp(68px, 9.3vw, 142px); letter-spacing: -.105em; }
.evidence-item p { margin: 14px 0 0; color: var(--cobalt); font-size: 12px; font-weight: 700; letter-spacing: -.035em; line-height: 1.2; }
.evidence-item--number > div { display: inline-flex; flex-direction: column; align-items: flex-start; }
.evidence-item--number p { margin-top: 9px; font-size: 14px; letter-spacing: -.045em; }

/* 15.8만이라는 절대값은 비교 대상이 없으면 크기 감이 안 잡힌다. 순위를 같이 보여 준다. */
.evidence-rank { width: min(100%, 340px); margin: 26px 0 0; padding: 0; color: var(--muted); list-style: none; }
.evidence-rank li { display: grid; grid-template-columns: 16px 1fr auto; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; letter-spacing: -.02em; }
.evidence-rank li:first-child { color: var(--navy); font-weight: 700; border-top-color: var(--navy); }
.evidence-rank b { color: var(--muted); font-size: 11px; font-weight: 500; }
.evidence-rank li:first-child b { color: var(--cobalt); font-weight: 700; }
.evidence-rank em { font-style: normal; font-variant-numeric: tabular-nums; }
/* 01 만 순위표 아래에 붙어서 340px 안에 한 줄로 떨어져야 한다 — 공통 small(12.5px)보다 작게 간다.
   클래스를 두 번 겹쳐 특정도를 올려 둔다. 뒤에 오는 공통 규칙에 밀리지 않게. */
.evidence-item.evidence-item--number small { width: min(100%, 340px); max-width: none; margin-top: 14px; font-size: 11px; letter-spacing: -.02em; line-height: 1.5; }
/* 폭이 184~360px 로 제각각이라 오른쪽 끝이 들쑥날쑥했다.
   세로 길이는 사진 비율에 맡기고 가로만 하나로 맞춘다. */
.evidence-proof { justify-self:end; width:min(100%, 480px); margin:0; }
.evidence-proof img { display:block; width:100%; height:auto; }
.evidence-item--portrait { min-height:320px; }
.evidence-proof--office img { aspect-ratio:1.45; object-fit:cover; }
.evidence-proof--lecture { min-width:0; }
.evidence-item--lecture { min-height: 318px; }
/* 78px 짜리와 같은 굵기(300)를 34px 에 쓰면 유독 힘이 빠져 보인다. 작은 만큼 굵기를 올린다. */
.evidence-item--lecture strong { font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; }
/* 증빙 이미지 없이 숫자와 설명만 있는 항목 — 오른쪽에 빈 열을 남기지 않는다. */
.evidence-item--text { grid-template-columns: 72px minmax(0, 1fr); }
/* small 은 근거 항목의 공통 보조 설명이다. 전에는 --text/--split 에만 규칙이 있어서
   변형 클래스가 없는 02·03·05 가 브라우저 기본값(inline · 13.3px · 네이비)으로 떨어졌고,
   06 만 블록으로 떠서 위아래 간격이 있는 것처럼 보였다. 기준을 여기로 올린다. */
.evidence-item small { display: block; max-width: 520px; margin-top: 16px; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: -.025em; line-height: 1.6; }
.evidence-item small b { color: var(--navy); font-weight: 700; }
.evidence-item small span { color: var(--line); }

.evidence-item--system { grid-template-columns: 72px minmax(0, 1fr); }
.evidence-item--system strong { display:block; font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; }
/* 항목마다 하단 구분선이 이미 있어서, 여기에 border-top 까지 두면 10·11 만 가로선이 두 줄이 된다. */
.evidence-system-list { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; max-width:none; margin: 34px 0 0; padding: 0; color: var(--muted); font-size: 13.5px; font-weight: 500; letter-spacing: -.02em; line-height: 1.55; list-style: none; }
.evidence-system-list b { display:block; margin-bottom:10px; color: var(--cobalt); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.evidence-proof--lecture img { aspect-ratio: 1.5; object-fit: cover; }
.evidence-item--split {
  grid-template-columns: 72px minmax(220px, 1fr) minmax(0, 480px);
  align-items: center;
}
.evidence-item--split .evidence-copy { min-width: 0; padding-right: 24px; }
.evidence-item--split strong { display:block; font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
.evidence-item--split .evidence-proof { min-width: 0; }
.evidence-proof--media img { aspect-ratio:1.5; object-fit:cover; }

.contact-cta { padding-top:116px; padding-bottom:108px; }
/* 두 그리드의 비율이 다르면 우측 열 시작점이 어긋나 안내문과 연락 카드가 47px 틀어진다.
   같은 값을 공유해 한 줄로 맞춘다. */
/* 가격·문의 안내·폼이 서로 다른 비율을 쓰면 우측 열 시작점이 제각각으로 어긋난다.
   하단 세 블록이 같은 값을 공유해 한 줄로 선다. */
.pricing-body,
.contact-cta-heading,
.contact-actions { display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, .56fr); gap:56px; }
/* end(하단) 정렬이면 좌측(h2+1분 문구, 202px)과 우측(안내문 1줄, 26px) 높이 차가 커질수록
   두 블록의 시작선(top)이 벌어져 "정렬이 안 맞다"는 인상을 준다.
   바로 아래 폼·카드 구간(align-items:start)과 같은 방식으로 시작선을 맞춘다. */
.contact-cta-heading { align-items:start; margin-top:34px; }
.contact-cta-heading h2 { margin:0; font-size:clamp(48px, 5.15vw, 78px); font-weight:300; letter-spacing:-.088em; line-height:1.1; }
.contact-cta-heading h2 strong { font-weight:700; }
.contact-cta-heading p { margin:0 0 4px; color:var(--muted); font-size:16px; font-weight:500; letter-spacing:-.04em; line-height:1.6; }
/* 헤드라인 바로 아래 붙는 짧은 안내문 — 우측 칸으로 시선을 옮기지 않아도 한눈에 읽히게 한다.
   .contact-cta-heading p 보다 특정도를 높여서 그 기본값(16px)을 자연스럽게 덮는다. */
.contact-cta-heading .contact-cta-note { margin:16px 0 0; font-size:14px; }
.contact-actions { margin-top:64px; align-items:start; }

/* 문의 폼 ---------------------------------------------------------------- */
/* display 를 지정한 요소는 명시도가 같아서 브라우저 기본 [hidden]{display:none} 을 눌러 버린다.
   hidden 속성을 쓰는 요소는 여기서 명시적으로 다시 숨긴다. */
[hidden] { display: none !important; }

.lead-form { display:grid; gap:26px; }
.field { display:grid; }
.field label { color:var(--navy); font-size:14px; font-weight:700; letter-spacing:-.03em; }
.field label i { color:var(--cobalt); font-style:normal; }
/* 왜 묻는지 한 줄을 붙이면 캐묻는 질문이 아니라 컨설팅의 일부로 읽힌다. */
.field-hint { margin:5px 0 0; color:var(--muted); font-size:12px; font-weight:500; letter-spacing:-.025em; }
.field input,
.field select { width:100%; margin-top:11px; padding:14px 2px; color:var(--navy); font-family:inherit; font-size:16px; font-weight:500; letter-spacing:-.03em; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; appearance:none; transition:border-color .2s ease; }
.field select { padding-right:24px; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%232457d6' stroke-width='1.4'/></svg>") no-repeat right 2px center; }
.field input::placeholder { color:#aab4c0; }
.field input:focus,
.field select:focus { outline:none; border-bottom-color:var(--cobalt); border-bottom-width:2px; padding-bottom:13px; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border-bottom-color:#c0392b; }

.field { position:relative; }

.field-agree { display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; padding-top:6px; cursor:pointer; }
.field-agree input { width:19px; height:19px; margin:2px 0 0; accent-color:var(--cobalt); cursor:pointer; }
.field-agree span { color:var(--muted); font-size:12.5px; font-weight:500; letter-spacing:-.025em; line-height:1.6; }
.field-agree b { display:block; margin-bottom:3px; color:var(--navy); font-size:13.5px; font-weight:700; }
.field-agree b i { color:var(--cobalt); font-style:normal; }
.field-agree a { color:var(--cobalt); text-decoration:underline; text-underline-offset:3px; }

/* 봇만 채우는 칸. 화면에서 완전히 숨기되 display:none 은 피한다(일부 봇이 걸러낸다). */
.lf-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.lead-submit { position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:132px; margin-top:8px; padding:28px 32px; color:var(--white); font-family:inherit; text-align:left; background:var(--navy); border:0; cursor:pointer; transition:background .2s ease, transform .2s ease; }
.lead-submit:hover { background:var(--cobalt-bright); transform:translateY(-2px); }
.lead-submit:disabled { opacity:.55; cursor:progress; transform:none; }
.lead-submit strong { font-size:clamp(24px, 2.3vw, 32px); font-weight:500; letter-spacing:-.06em; line-height:1.1; }
.lead-submit em { margin-top:9px; color:var(--cobalt-soft); font-size:14px; font-style:normal; font-weight:500; letter-spacing:-.025em; }
.lead-submit b { position:absolute; right:30px; bottom:28px; color:var(--cobalt-soft); font-size:27px; font-weight:300; }
.lead-error { margin:0; color:#c0392b; font-size:13px; font-weight:700; letter-spacing:-.03em; }

.lead-done { display:flex; flex-direction:column; align-items:flex-start; min-height:280px; padding:38px 36px; color:var(--white); background:var(--navy); }
.lead-done .section-label { color:var(--cobalt-soft); }
.lead-done strong { margin-top:26px; font-size:clamp(30px, 3vw, 44px); font-weight:500; letter-spacing:-.07em; line-height:1.1; }
.lead-done p { margin:16px 0 0; color:var(--cobalt-soft); font-size:15px; font-weight:500; letter-spacing:-.03em; line-height:1.65; }
.lead-done a { margin-top:auto; padding-top:26px; color:var(--white); font-size:16px; font-weight:700; letter-spacing:-.035em; border-bottom:1px solid rgba(255,255,255,.3); }

/* 보조 연락 — 폼과 동등이 아니라 명확히 아래 위계다.
   카카오·전화·FAQ 제목·질문까지 이 우측 칼럼 전체가 하나의 목록처럼 보이도록
   22px 여백 하나로 통일한다(전엔 18/24/22/14/16/15px 가 섞여 있어 줄마다 간격이 들쑥날쑥했다).
   gap 대신 각 행이 스스로 padding+border 를 갖는 방식(FAQ 항목과 동일)으로 맞춘다. */
.contact-secondary { display:grid; gap:0; border-top:1px solid var(--navy); }
.contact-secondary a { display:block; padding:22px 0; border-bottom:1px solid var(--line); transition:color .2s ease; }
.contact-secondary a:hover { color:var(--cobalt); }
.contact-secondary span { display:block; color:var(--muted); font-size:11.5px; font-weight:700; letter-spacing:-.01em; }
.contact-secondary strong { display:block; margin-top:9px; font-size:23px; font-weight:500; letter-spacing:-.055em; }
.contact-secondary em { display:block; margin-top:7px; color:var(--muted); font-size:13px; font-style:normal; font-weight:500; letter-spacing:-.03em; }
.contact-secondary .is-copied strong::after { margin-left:9px; color:var(--cobalt); font-size:12px; font-weight:700; letter-spacing:-.02em; content:"복사됐습니다"; }

/* 자주 묻는 질문 — 우측 빈 칸을 채우면서 결정 직전의 마지막 의심을 없앤다.
   전체 목록을 복제하면 /biz/ FAQ 페이지와 중복 콘텐츠가 되므로 6개만 두고 링크로 넘긴다.
   .section-label(10px 라벨)은 큰 H2 옆의 보조 태그로 쓰는 스타일이라,
   짝이 되는 큰 제목 없이 여기 혼자 쓰면 아래 질문(14px)보다 작아져 위계가 뒤집힌다.
   FAQ 전용 제목을 따로 둔다. */
.contact-faq { padding-top:22px; }
/* 큰 제목(H2) 옆 보조 라벨용 10px 스타일을 여기 혼자 쓰면 질문(14px)보다 작아져 위계가 뒤집힌다.
   위계를 위해 크기는 키우고, 이 페이지가 라벨에 쓰는 코발트 색을 그대로 입혀 눈에 띄게 한다. */
.faq-title { margin:0; color:var(--cobalt); font-size:15px; font-weight:700; letter-spacing:-.02em; }
.faq-list { margin-top:16px; }
.faq-item { border-top:1px solid var(--line); }
.faq-item:last-of-type { border-bottom:1px solid var(--line); }
/* 패딩을 summary 자체에 줘서, 보이는 여백 전체가 실제 탭 영역이 되게 한다(약 50px, 44px 기준 충족).
   좌측 카카오·전화 행과 같은 22px 리듬을 쓴다. */
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:22px 0; color:var(--navy); font-size:14px; font-weight:700; letter-spacing:-.035em; line-height:1.4; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { flex:none; color:var(--cobalt); font-size:19px; font-weight:300; content:"+"; transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { margin:0; padding:0 0 22px; color:var(--muted); font-size:13px; font-weight:500; letter-spacing:-.03em; line-height:1.6; }
.contact-faq > a { display:inline-block; margin-top:22px; color:var(--cobalt); font-size:13px; font-weight:700; letter-spacing:-.03em; }

/* 동의 문구는 법정 고지 항목이라 라벨을 눈으로 구분되게 둔다. */
.field-agree u { color:var(--navy); font-weight:700; text-decoration:none; }
.field-agree span > span { color:var(--line); }

.site-footer { display:grid; grid-template-columns:auto 1fr auto; gap:32px; align-items:start; padding-top:34px; padding-bottom:38px; border-top:1px solid var(--line); font-size:12.5px; font-weight:500; }
.footer-brand { display:flex; gap:18px; align-items:baseline; }
.footer-brand > span { font-size:14px; font-weight:700; letter-spacing:-.05em; }
.footer-brand a { color:var(--cobalt); }
.footer-biz { color:var(--muted); font-size:11.5px; font-style:normal; letter-spacing:-.02em; line-height:1.85; }
.footer-biz a { color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.footer-biz span { color:var(--line); }
.footer-biz b { color:var(--navy); font-weight:700; }
.footer-links { display:flex; gap:20px; white-space:nowrap; }
.footer-links a { color:var(--cobalt); }

/* 계약 절차 — 계약 후 뭐가 일어나는지 모르면 그 불확실성 자체가 이탈 요인이 된다. */
.process { margin-top:150px; padding-top:92px; border-top:1px solid var(--navy); }
.process h2 { margin:30px 0 0; font-size:clamp(40px, 4.3vw, 64px); font-weight:300; letter-spacing:-.085em; line-height:1.1; }
.process h2 strong { font-weight:700; }
.process-list { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:34px; margin:72px 0 0; padding:0; list-style:none; }
.process-list li { padding-top:22px; border-top:1px solid var(--navy); }
.process-list b { display:block; color:var(--cobalt); font-size:11px; font-weight:700; letter-spacing:.1em; }
.process-list strong { display:block; margin-top:16px; font-size:20px; font-weight:700; letter-spacing:-.05em; line-height:1.25; }
.process-list span { display:block; margin-top:12px; color:var(--muted); font-size:13.5px; font-weight:500; letter-spacing:-.03em; line-height:1.6; }

/* 가격 — 근거를 다 본 뒤 CTA 직전에 둔다. 신뢰 전에 나오면 비싸다/싸다 판단만 남는다. */
.pricing { margin-top:150px; padding-top:92px; border-top:1px solid var(--navy); }
.pricing-body { align-items:end; margin-top:34px; }
.pricing-body h2 { margin:0; font-size:clamp(40px, 4.3vw, 64px); font-weight:300; letter-spacing:-.085em; line-height:1.1; }
.pricing-body h2 strong { font-weight:700; }
.pricing-notes { margin:0 0 6px; padding:0; list-style:none; }
.pricing-notes li { padding:11px 0; color:var(--muted); font-size:14px; font-weight:500; letter-spacing:-.03em; border-bottom:1px solid var(--line); }
.pricing-notes li:first-child { padding-top:0; color:var(--cobalt); font-weight:700; }

@media (max-width: 760px) {
  :root { --header-h: 70px; }
  .site-header { grid-template-columns: 1fr auto; padding-right: 20px; padding-left: 20px; }
  .header-nav { display: none; }
  /* 모바일에서는 이 링크가 헤더의 유일한 전환 지점이다 — 손가락 탭 최소 44px 확보. */
  /* 모바일은 번호를 읽을 게 아니라 바로 누르는 자리다. 헤더 폭도 좁아 11자리가 들어가지 않는다. */
  .header-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .header-link-num { display: none; }
  .header-link-act { display: inline; }
  .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
  .hero,
  .statement-section,
  .pavlo-intro,
  .evidence-section,
  .site-footer { padding-right: 20px; padding-left: 20px; }
  .hero { min-height: calc(76svh - var(--header-h)); padding-top: 58px; padding-bottom: 58px; }
  .hero h1,
  .statement-section h2,
  .pavlo-intro h2,
  .evidence-heading h2 { font-size: clamp(45px, 12vw, 62px); line-height: 1.14; }
  .hero h1 { margin-top: 30px; }
  .statement-proof { margin-top: 20px; font-size: 15px; }
  .cta { width: 100%; margin-top: 42px; }
  .hero-switch { margin-top:12px; font-size:11.5px; }
  /* 글자 높이가 14px 라 그대로 두면 손가락으로 못 누른다.
     패딩으로 탭 영역을 44px 로 키우고 같은 크기의 음수 마진으로 보이는 간격은 유지한다. */
  .hero-switch a { display:inline-block; padding:15px 0; margin:-15px 0; }
  .hero-proof { margin-top:16px; font-size:10px; }
  .hero-proof strong { font-size:12px; }
  .statement-section { min-height: 74svh; }
  .statement-section .section-index { top: 34px; left: 20px; }
  .statement-section--space { min-height: 84svh; padding-bottom: 12svh; }
  .pavlo-intro { min-height: 74svh; }
  .pavlo-intro h2 { margin-top: 35px; }
  .evidence-section { padding-top: 88px; padding-bottom: 0; }
  .evidence-heading { display: block; }
  .evidence-heading h2 { margin-top: 32px; }
  .evidence-list { margin-top: 72px; }
  .evidence-item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; min-height: 146px; padding: 20px 0; }
  .evidence-item strong { font-size: clamp(40px, 10vw, 52px); }
  .evidence-item--number strong { font-size: clamp(64px, 17vw, 88px); }
  .evidence-item p { margin-top: 10px; font-size: 11px; }
  .evidence-item--number p { margin-top: 7px; font-size: 13px; }
  /* 데스크톱과 같은 원칙 — 가로만 맞추고 세로는 사진 비율에 맡긴다. */
  .evidence-proof { grid-column:2; justify-self:start; width:100%; margin-top:14px; }
  .evidence-item--portrait,
  .evidence-item--lecture { min-height:0; }
  .evidence-item--system,
  .evidence-item--text { grid-template-columns: 36px minmax(0, 1fr); }
  .evidence-item small { margin-top: 12px; font-size: 12px; }
  .evidence-system-list { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; font-size:13px; }
  .evidence-item--split { grid-template-columns:36px minmax(0, 1fr); gap:12px; padding:28px 0; }
  .evidence-item--split .evidence-copy { padding-right: 0; }
  .evidence-item--split strong { font-size: clamp(26px, 8vw, 34px); }
  .evidence-item--split .evidence-proof { grid-column:2; justify-self:start; width:100%; margin-top:16px; }
  .process,
  .pricing,
  .contact-cta { padding-right:20px; padding-left:20px; }
  .process { margin-top:84px; padding-top:60px; }
  .process h2 { font-size:clamp(38px, 10.5vw, 52px); line-height:1.14; }
  .process-list { grid-template-columns:1fr; gap:0; margin-top:40px; }
  .process-list li { padding:20px 0; border-top:1px solid var(--line); }
  .process-list li:first-child { border-top-color:var(--navy); }
  .process-list strong { margin-top:12px; font-size:18px; }
  .pricing { margin-top:84px; padding-top:60px; }
  .pricing-body { display:block; margin-top:26px; }
  .pricing-body h2 { font-size:clamp(38px, 10.5vw, 52px); line-height:1.14; }
  .pricing-notes { margin-top:30px; }
  .pricing-notes li { font-size:13.5px; }
  .contact-cta { padding-top:76px; padding-bottom:52px; }
  .contact-cta-heading { display:block; margin-top:28px; }
  .contact-cta-heading h2 { font-size:clamp(44px, 11.5vw, 60px); line-height:1.13; }
  .contact-cta-heading p { margin-top:24px; font-size:15px; }
  .contact-actions { display:block; margin-top:42px; }
  /* iOS 는 16px 미만 입력칸에 자동 확대를 건다. 폼 전체를 16px 이상으로 유지한다. */
  .field input,
  .field select { font-size:16px; }
  .lead-submit { min-height:118px; padding:24px 24px; }
  .lead-submit strong { font-size:26px; }
  .lead-submit b { right:22px; bottom:24px; }
  .lead-done { min-height:0; padding:30px 24px; }
  .lead-done strong { font-size:30px; }
  /* 데스크톱과 같은 22px 리듬을 그대로 쓴다. 예전엔 여기서 18/20px 로 다시 깨졌었다. */
  .contact-secondary { margin-top:38px; }
  .contact-secondary strong { font-size:21px; }
  .site-footer { display:block; padding-top:26px; padding-bottom:30px; font-size:12px; }
  .footer-brand { justify-content:space-between; }
  .footer-brand a { display:inline-flex; align-items:center; min-height:44px; }
  .footer-biz { margin-top:8px; font-size:11px; }
  .footer-links { margin-top:14px; }
  .footer-links a { display:inline-flex; align-items:center; min-height:44px; }
}

/* 스크롤 스냅은 "섹션이 화면에 다 들어갈 때"만 켠다.
   섹션이 뷰포트보다 길면 브라우저가 계속 섹션 시작점으로 되당겨 스크롤이 갇힌다
   (1366x650 노트북에서 휠 40번에 94px 밖에 안 내려가던 원인). */
@media (min-width: 761px) and (min-height: 820px) {
  html { scroll-snap-type: y proximity; }
  .hero,
  .statement-section,
  .pavlo-intro { scroll-snap-align: start; }
}

.motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
/* 스냅 대상은 올려 띄우지 않는다. transform 이 스냅 지점까지 22px 밀어서,
   나타나는 0.7초 동안 스크롤하면 딸깍이 어긋난다. 이 구간은 페이드만 준다. */
.motion-ready .hero[data-reveal],
.motion-ready .statement-section[data-reveal],
.motion-ready .pavlo-intro[data-reveal] { transform: none; transition: opacity .7s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .cta { transition: none; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}