/* PAVLO 리뷰어 랜딩 — 모바일 우선.
   375px 폭에서 먼저 완성하고, 768px(태블릿)·1024px(PC)에서 단을 나눈다.
   모서리는 전부 직각이다(CLAUDE.md 디자인 규칙). */

:root {
  --blue: #3182f6;        /* 브랜드컬러 — 흰 배경 대비 3.71. 19px 굵은 글씨 이상과 면적에만 쓴다 */
  --blue-text: #2457d6;   /* 작은 파란 글씨 — 흰 배경 6.16, 따뜻한 바탕 5.57 */
  --blue-press: #1b64da;  /* 작은 버튼 바탕 — 흰 글씨 5.41 */
  --blue-night: #8fb9fa;  /* 남색 바탕 위 파란 글씨 — 8.89 */
  --ink: #191f28;
  --sub: #4e5968;
  --muted: #5f6b78;       /* #6b7684 는 따뜻한 바탕에서 4.17 로 AA 미달이라 한 단계 진하게 쓴다 */
  --line: #e5e8eb;
  --rule: rgba(25, 31, 40, .12);
  --paper: #f7f4ef;       /* 리뷰어 바탕톤. 웹툰의 양피지·노을빛에서 가져온 따뜻한 흰색 */
  --night: #0b1730;
  --night-sub: #b7c3d4;
  --header-h: 56px;
  --gutter: 24px;
  --wrap: 1120px;
  --pad: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --sec: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* 이 페이지는 스크롤 스냅을 쓰지 않으므로 smooth 와 충돌할 일이 없다. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
html.is-sheet-open { overflow: hidden; }

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.012em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 3px; }
main:focus { outline: none; }

/* 키보드 사용자가 헤더를 건너뛰고 본문으로 가게 한다 (WCAG 2.4.1). */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  background: var(--blue-press);
  transform: translateY(-110%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: none; }

/* ── 공통 요소 ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font: inherit;
  /* #3182F6 위 흰 글씨는 3.71 이라 19px 굵게(WCAG "큰 글씨")여야 통과한다. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: scale(.98); }
.btn .arrow { font-weight: 400; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { color: #fff; background: var(--blue); }
.btn-primary:hover { background: var(--blue-press); }
.btn-block { width: 100%; }
/* 작은 버튼은 19px 를 못 쓰므로 바탕을 한 단계 진하게 해 대비를 맞춘다. */
.btn-sm { min-height: 40px; padding: 0 16px; color: #fff; font-size: 15px; background: var(--blue-press); }
.btn-sm:hover { background: #1650b8; }
.btn-line { color: #fff; font-size: 17px; font-weight: 600; background: transparent; border-color: rgba(255, 255, 255, .38); }
.btn-line:hover { border-color: #fff; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--blue-text);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(3px); }

.label {
  margin-bottom: 16px;
  color: var(--blue-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
}
/* 01~04 장은 프롤로그의 네 가지 짐과 짝을 이룬다. 번호를 도장처럼 찍어 '이야기의 장'으로 읽히게 한다. */
.chapter-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--blue-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.chapter-label b {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 6px;
  color: #fff;
  font-size: 13px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  background: var(--blue-press);
}

/* 제목은 두 줄 두 굵기 — 광고주 랜딩과 같은 문법이지만, 리뷰어는 300 대신 400 으로 조금 더 부드럽게 간다. */
.display,
.title,
.climax-title { font-weight: 400; letter-spacing: -.05em; }
.display span,
.display strong,
.title span,
.title strong,
.climax-title span,
.climax-title strong { display: block; }
.display strong,
.title strong,
.climax-title strong { font-weight: 700; }

.display { font-size: clamp(40px, 11vw, 52px); line-height: 1.18; }
.display strong { color: var(--blue); }
.title { font-size: clamp(31px, 8.4vw, 40px); line-height: 1.24; letter-spacing: -.045em; }
.lead { margin-top: 20px; color: var(--sub); font-size: 17px; line-height: 1.7; }
.lead b { color: var(--ink); }

.sec { padding: var(--sec) var(--pad); }
.sec--paper { background: var(--paper); }

.source { margin-top: 16px; color: var(--muted); font-size: 13px; }
/* 전화번호·사업자번호가 줄 끝에서 하이픈 기준으로 쪼개지지 않게 한다. */
.nw { white-space: nowrap; }

/* 웹툰 컷. 휴대폰에서는 화면 끝까지 채워 그림책을 넘기는 느낌을 준다. */
.art { margin: 44px calc(var(--gutter) * -1) 0; }
.art img { display: block; width: 100%; height: auto; }
.art figcaption { margin-top: 12px; padding: 0 var(--gutter); color: var(--muted); font-size: 13px; }
.art figcaption span { margin-left: 6px; opacity: .8; }

/* 문단·목록을 그림 앞뒤로 재배치하기 위한 틀.
   휴대폰: 제목 → 그림 → 본문 순서. PC: 글(제목+본문) | 그림 두 단. */
.split { display: grid; grid-template-areas: "head" "art" "body"; }
.split-text { display: contents; }
.split-head { grid-area: head; }
.split-body { grid-area: body; margin-top: 36px; }
.split > .art { grid-area: art; }

/* ── 헤더 ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding: 0 var(--pad);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(25, 31, 40, .07);
}
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { display: block; width: auto; height: 34px; }
.header-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--sub); font-size: 15px; font-weight: 600; }
.header-link:hover { color: var(--ink); }
.header-actions .btn { display: none; }

/* ── 첫 화면 ───────────────────────────────────────────────── */

.hero { display: grid; padding: 36px var(--pad) 0; }
.eyebrow { margin-bottom: 16px; color: var(--blue-text); font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.hero-lead { max-width: 30em; margin-top: 20px; color: var(--sub); font-size: 17px; line-height: 1.7; }
.hero-actions { display: grid; margin-top: 32px; }
.hero-helper { margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }
.hero-actions .text-link { justify-self: center; margin-top: 6px; }
/* 항목을 flex 로 두면 "2014년"과 "부터" 사이 공백이 사라져 간격으로 메워야 하고, 그 간격이 띄어쓰기처럼 보인다. 그냥 글줄로 흘린다. */
.hero-proof { margin-top: 20px; color: var(--muted); font-size: 14px; }
.hero-proof li { display: inline; }
.hero-proof li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; vertical-align: middle; background: #c5ccd4; }
.hero-proof strong { color: var(--ink); font-weight: 700; }
/* 잘못 들어온 사장님의 출구. CTA 와 경쟁하지 않게 작게 두되, '모집'은 굵게 둬서 훑어볼 때 걸리게 한다. */
.hero-switch { margin-top: 12px; color: var(--muted); font-size: 14px; }
.hero-switch b { color: var(--ink); }
.hero-switch a { display: inline-block; margin: -12px 0; padding: 12px 0; color: var(--blue-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hero-art { margin: 44px calc(var(--gutter) * -1) 0; }
.hero-art img { display: block; width: 100%; height: auto; }

/* ── 프롤로그 ─────────────────────────────────────────────── */

.prologue { color: #fff; background: var(--night); }
.prologue .label { color: var(--blue-night); }
.prologue .art figcaption { color: #8a97ab; }
.burdens { display: grid; gap: 14px; margin-top: 36px; }
.burdens li { font-size: clamp(19px, 5.4vw, 24px); font-weight: 600; line-height: 1.45; letter-spacing: -.035em; }
/* 취소선은 인라인 배경으로 긋는다. 줄이 바뀌어도 첫 줄 끝에서 다음 줄로 이어서 그어진다.
   스크립트가 없으면 처음부터 그어진 상태(결론)로 보인다. */
.burdens span {
  color: #8a97ab;
  background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 58% / 100% 3px;
  transition: background-size .7s var(--ease), color .7s ease;
}
.motion-ready .burdens span { color: #eef2f7; background-size: 0 3px; }
.motion-ready .burdens.is-visible span { color: #8a97ab; background-size: 100% 3px; }
.motion-ready .burdens.is-visible li:nth-child(1) span { transition-delay: .35s; }
.motion-ready .burdens.is-visible li:nth-child(2) span { transition-delay: .65s; }
.motion-ready .burdens.is-visible li:nth-child(3) span { transition-delay: .95s; }
.motion-ready .burdens.is-visible li:nth-child(4) span { transition-delay: 1.25s; }
.prologue-turn { margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14); }
.prologue-turn p { color: var(--night-sub); font-size: 17px; line-height: 1.7; }
.prologue-turn .turn-strong { margin-top: 14px; color: #fff; font-size: clamp(23px, 6.4vw, 30px); font-weight: 700; line-height: 1.42; letter-spacing: -.04em; }
.turn-strong span { display: block; color: var(--blue-night); }

/* ── 01 기다림: 시간 막대 ─────────────────────────────────── */

.timebars { display: grid; gap: 30px; margin: 44px 0 0; }
.tb-name { margin-bottom: 10px; color: var(--sub); font-size: 15px; font-weight: 700; }
.tb--fast .tb-name { color: var(--blue-text); }
.tb-track { position: relative; height: 16px; background: #f2f4f6; }
.tb-bar { position: absolute; top: 0; bottom: 0; left: 0; display: block; transform-origin: left center; }
/* 7일까지 진하게, 14일까지 옅게 — 모집 기간이 7~14일 '범위'라는 걸 그대로 보인다. */
.tb--slow .tb-bar { width: 100%; background: linear-gradient(90deg, #aab3bf 0 50%, #d3d9e0 50% 100%); }
.tb--fast .tb-bar { width: 7.143%; min-width: 14px; background: var(--blue); }
.tb-value { margin-top: 10px; color: var(--sub); font-size: 15px; }
.tb-value strong { color: var(--blue-text); }
.tb-axis { position: relative; display: flex; justify-content: space-between; padding-top: 8px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.tb-axis span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); }
.motion-ready .timebars .tb-bar { transform: scaleX(0); transition: transform 1.2s var(--ease) .2s; }
.motion-ready .timebars .tb--fast .tb-bar { transition-duration: .5s; transition-delay: 1.1s; }
.motion-ready .timebars.is-visible .tb-bar { transform: none; }

.notes { display: grid; gap: 10px; color: var(--sub); font-size: 15px; line-height: 1.65; }
.notes li { position: relative; padding-left: 14px; }
.notes li::before { content: ""; position: absolute; top: .72em; left: 0; width: 4px; height: 4px; background: var(--blue); }
.split-body .text-link { margin-top: 16px; }

/* ── 02 누구나 ─────────────────────────────────────────────── */

.kinds { border-top: 1px solid var(--ink); }
.kinds li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.kinds h3 { font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.kinds p { color: var(--sub); font-size: 15px; line-height: 1.6; }
.tip { margin-top: 20px; padding: 16px 18px; color: var(--sub); font-size: 15px; line-height: 1.6; background: #fff; }
.tip b { display: block; margin-bottom: 2px; color: var(--blue-text); font-size: 14px; }
.tip--line { margin-top: 0; background: var(--paper); }

/* ── 04 혼자라는 걱정 ─────────────────────────────────────── */

.care { display: grid; gap: 12px; margin-top: 40px; }
.care li { padding: 24px 22px 20px; background: #fff; }
.care h3 { font-size: 19px; font-weight: 700; letter-spacing: -.035em; }
.care p { margin-top: 8px; color: var(--sub); font-size: 15px; line-height: 1.6; }
.care .text-link { margin-top: 6px; margin-bottom: -8px; }

/* ── 체험 둘러보기 ─────────────────────────────────────────── */

.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 44px; }
.cats a {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 136px;
  height: 100%;
  padding: 18px 16px 16px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.cats a:hover { border-color: var(--blue); transform: translateY(-2px); }
.cats a::after { content: "→"; position: absolute; top: 15px; right: 14px; color: var(--blue-text); font-weight: 700; }
.cat-kind { color: var(--muted); font-size: 12px; font-weight: 700; }
.cats h3 { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -.045em; }
.cats p { margin-top: auto; padding-top: 10px; color: var(--sub); font-size: 14px; line-height: 1.45; }
.map-more { margin-top: 36px; padding-top: 24px; color: var(--sub); font-size: 16px; border-top: 1px solid var(--line); }
.map-more b { color: var(--ink); }
.map-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px; }

/* ── 배낭 속 도구 ─────────────────────────────────────────── */

.tools { margin-top: 44px; border-top: 1px solid var(--ink); }
.tools a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.tools h3 { font-size: 18px; font-weight: 700; letter-spacing: -.035em; }
.tools p { grid-column: 1; color: var(--sub); font-size: 15px; line-height: 1.55; }
.tools .go { grid-column: 2; grid-row: 1 / span 2; color: var(--blue-text); font-size: 20px; transition: transform .2s ease; }
.tools a:hover h3 { color: var(--blue-text); }
.tools a:hover .go { transform: translateX(3px); }
.tools-more { margin-top: 12px; }

/* ── 숫자와 한눈에 보기 ───────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--ink); }
.stats div { padding: 22px 12px 24px 0; border-bottom: 1px solid var(--line); }
.stats dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.stats dd { margin-top: 6px; color: var(--blue); font-size: clamp(34px, 9.6vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stats small { font-size: .5em; letter-spacing: -.02em; }
.facts { margin-top: 72px; }
.facts h3 { font-size: 20px; font-weight: 700; letter-spacing: -.035em; }
.facts dl { margin-top: 18px; border-top: 1px solid var(--ink); }
.facts dl div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 15px 0; font-size: 15px; line-height: 1.6; border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 700; }
.facts dd { color: var(--sub); }

/* ── 시작하는 법 ───────────────────────────────────────────── */

.steps { margin-top: 44px; }
.steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding-bottom: 30px; }
.steps li::before { content: ""; position: absolute; top: 40px; bottom: 0; left: 19.5px; width: 1px; background: rgba(25, 31, 40, .18); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::before { display: none; }
.steps b { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; font-size: 15px; background: #fff; border: 1px solid var(--ink); }
.steps li:first-child b { color: #fff; background: var(--blue-press); border-color: var(--blue-press); }
.steps h3 { padding-top: 7px; font-size: 19px; font-weight: 700; letter-spacing: -.035em; }
.steps p { margin-top: 4px; color: var(--sub); font-size: 15px; line-height: 1.6; }
.steps-cta { display: grid; gap: 8px; margin-top: 44px; }
.steps-cta .text-link { justify-self: center; }

/* ── 반전: 사실 이건, 당신의 이야기 ───────────────────────── */

/* 웹툰 7화의 노을을 배경 빛으로만 옮긴다. 가장자리는 흰색이라 위아래 섹션과 경계선이 생기지 않는다. */
.climax {
  padding: 120px var(--pad) 128px;
  text-align: center;
  background: radial-gradient(90% 62% at 50% 56%, #ffe9c6 0%, #fff4e3 46%, #fff 82%);
}
.climax-pre { color: var(--sub); font-size: 16px; font-weight: 600; }
.climax-title { margin-top: 14px; font-size: clamp(38px, 10.4vw, 48px); line-height: 1.2; }
.climax-body { max-width: 26em; margin: 26px auto 0; color: var(--sub); font-size: 17px; line-height: 1.75; }
.climax-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; margin-top: 24px; }

/* ── 자주 묻는 질문 ───────────────────────────────────────── */

.faq-head .text-link { margin-top: 12px; }
.faq-list { margin-top: 36px; border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  display: block;
  padding: 21px 44px 21px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.03em;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(var(--blue-text), var(--blue-text)) center / 14px 2px no-repeat,
    linear-gradient(var(--blue-text), var(--blue-text)) center / 2px 14px no-repeat;
  transition: transform .25s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 22px; color: var(--sub); font-size: 16px; line-height: 1.75; }

/* ── 에필로그 ─────────────────────────────────────────────── */

.final { display: grid; color: #fff; background: var(--night); padding: 0 var(--pad) var(--sec); }
/* 그림 아래 가장자리를 남색 바탕으로 녹여 경계선이 보이지 않게 한다. */
.final-art {
  margin: 0 calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.final-art img { display: block; width: 100%; height: auto; }
.final .label { color: var(--blue-night); }
.final .lead { color: var(--night-sub); }
.final-copy { margin-top: -8px; }
.final-actions { display: grid; gap: 10px; margin-top: 36px; }
.final-contact { margin-top: 28px; color: var(--night-sub); font-size: 14px; line-height: 1.9; }
.final-contact a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── 푸터 ─────────────────────────────────────────────────── */

/* 하단 고정 버튼은 푸터가 보이면 숨으므로 그만큼 비워 둘 필요가 없다. */
.site-footer { padding: 40px var(--pad) calc(40px + env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; line-height: 1.8; border-top: 1px solid var(--line); }
.footer-biz { font-style: normal; }
.footer-biz a { text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 10px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sub); font-weight: 600; }
.copyright { margin-top: 6px; }

/* ── 하단 고정 버튼 (휴대폰·태블릿) ───────────────────────── */

.sticky-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(25, 31, 40, .08);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
/* 숨어 있을 때 visibility 까지 끄는 건 키보드 포커스가 안 보이는 버튼으로 들어가지 않게 하려는 것. */
.sticky-cta.is-shown { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
.sticky-cta .btn { min-height: 54px; }

/* ── 가입 시트 ─────────────────────────────────────────────── */

.join-sheet {
  width: 100%;
  max-width: 100%;
  max-height: 100dvh;
  margin: auto 0 0;
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: #fff;
  border: 0;
}
.join-sheet::backdrop { background: rgba(11, 23, 48, .56); }
.join-sheet[open] { animation: sheet-up .34s var(--ease); }
@keyframes sheet-up { from { transform: translateY(100%); } }
.join-inner { position: relative; padding: 28px 24px calc(20px + env(safe-area-inset-bottom)); }
.join-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--sub); background: transparent; border: 0; cursor: pointer; }
.join-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
/* 첫 화면과 같은 그림을 얼굴만 잘라 쓴다. 이미 받아 둔 파일이라 추가로 내려받지 않는다. */
.join-face { display: block; width: 64px; height: 64px; object-fit: cover; object-position: 44% 22%; }
.join-title { margin-top: 16px; font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.045em; }
.join-desc { margin-top: 8px; color: var(--sub); font-size: 15px; }
.join-actions { display: grid; gap: 10px; margin-top: 24px; }
.join-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; font-size: 17px; font-weight: 700; letter-spacing: -.03em; border: 1px solid transparent; transition: border-color .2s ease, filter .2s ease; }
.join-btn svg { flex: none; width: 18px; height: 18px; }
/* 네이버 초록(#03C75A) 위 흰 글씨는 대비 2.25 로 큰 글씨 기준(3.0)에도 못 미친다.
   흰 바탕 + 초록 N 로고 방식으로 네이버라는 걸 알리면서 글자는 읽히게 한다. */
.join-btn--naver { color: var(--ink); background: #fff; border-color: #d5dae1; }
.join-btn--naver:hover { border-color: #03c75a; }
.join-btn--kakao { color: rgba(0, 0, 0, .85); background: #fee500; }
.join-btn--kakao:hover { filter: brightness(.97); }
.join-btn--mail { color: var(--sub); font-weight: 600; background: #fff; border-color: #d5dae1; }
.join-btn--mail:hover { border-color: var(--ink); color: var(--ink); }
.join-foot { margin-top: 16px; color: var(--sub); font-size: 15px; text-align: center; }
.join-foot a { display: inline-block; margin: -10px 0; padding: 10px 4px; color: var(--blue-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.join-note { margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }
.join-note a { text-decoration: underline; text-underline-offset: 2px; }

/* ── 등장 효과 ─────────────────────────────────────────────── */

.motion-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ── 태블릿 768px~ ─────────────────────────────────────────── */

@media (min-width: 768px) {
  :root { --gutter: 40px; --sec: 128px; }
  .art,
  .hero-art,
  .final-art { max-width: 640px; margin-right: 0; margin-left: 0; }
  .art figcaption { padding: 0; }
  .hero-actions { max-width: 400px; }
  .hero-helper,
  .hero-actions .text-link { justify-self: start; text-align: left; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .care { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats div { padding-right: 24px; }
  .steps-cta { display: flex; align-items: center; gap: 28px; }
  .final-actions { grid-template-columns: auto auto; justify-content: start; }
}

/* ── PC 1024px~ ────────────────────────────────────────────── */

@media (min-width: 1024px) {
  :root { --header-h: 64px; --sec: 168px; }

  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .logo img { height: 38px; }
  .header-nav { display: flex; gap: 32px; }
  .header-nav a { color: var(--sub); font-size: 15px; font-weight: 500; transition: color .2s ease; }
  .header-nav a:hover { color: var(--ink); }
  .header-actions { justify-self: end; }
  .header-actions .btn { display: inline-flex; }

  .display { font-size: clamp(60px, 5.4vw, 76px); line-height: 1.12; }
  .title { font-size: clamp(42px, 3.8vw, 54px); line-height: 1.2; }
  .lead { margin-top: 28px; font-size: 19px; }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 80px;
    min-height: min(860px, calc(100svh - var(--header-h)));
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .hero-lead { font-size: 19px; }
  .hero-art { margin: 0; }

  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text art"; align-items: center; column-gap: 96px; }
  .split--flip { grid-template-areas: "art text"; }
  .split-text { display: block; grid-area: text; }
  .split-body { margin-top: 40px; }
  .split > .art { margin: 0; }

  .prologue-turn { max-width: 720px; margin-top: 96px; }

  .timebars { gap: 36px; padding: 40px; background: #fff; border: 1px solid var(--line); }

  .care { gap: 16px; margin-top: 64px; }
  .care li { padding: 32px 28px 26px; }

  .cats { gap: 16px; margin-top: 72px; }
  .cats a { min-height: 164px; padding: 24px 22px 22px; }
  .cats h3 { font-size: 26px; }
  .cats p { font-size: 15px; }

  .tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; margin-top: 72px; }

  .stats { margin-top: 64px; }
  .stats div { padding: 30px 24px 32px 0; }
  .stats dd { font-size: 56px; }
  .facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; margin-top: 112px; }
  .facts dl { margin-top: 0; }
  .facts dl div { grid-template-columns: 140px 1fr; padding: 18px 0; font-size: 16px; }

  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 72px; }
  .steps li { grid-template-columns: 1fr; padding-bottom: 0; }
  .steps li::before { top: 19.5px; right: -28px; bottom: auto; left: 40px; width: auto; height: 1px; }
  .steps li:last-child::before { display: none; }
  .steps b { grid-row: auto; }
  .steps h3 { padding-top: 22px; }
  .steps-cta { margin-top: 64px; }

  .climax { padding: 200px var(--pad); }
  .climax-title { font-size: clamp(56px, 5vw, 72px); }
  .climax-body { font-size: 19px; }

  .faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; gap: 64px; }
  .faq-head { position: sticky; top: calc(var(--header-h) + 40px); }
  .faq-list { margin-top: 0; }

  .final { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 80px; padding-top: var(--sec); }
  .final-art { max-width: none; -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent); mask-image: radial-gradient(closest-side, #000 78%, transparent); }
  .final-copy { margin-top: 0; }

    .sticky-cta { display: none; }

  .join-sheet { width: 440px; margin: auto; }
  .join-sheet[open] { animation: sheet-in .25s var(--ease); }
  .join-inner { padding: 40px 36px 32px; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }

/* 서핑하는 파블로만 살짝 떠 있게 한다. 움직임을 줄인 기기에서는 멈춘다. */
@media (prefers-reduced-motion: no-preference) {
  .final-art img { animation: surf 6s ease-in-out infinite; }
}
@keyframes surf {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn,
  .cats a,
  .sticky-cta { transition: none; }
  .join-sheet[open] { animation: none; }
}