@charset "utf-8";

/* ==========================================================================
   뽈락 (ballrock) — ball-rock.com
   디자인 정본: ../../app/DESIGN.md ("사이드라인의 장부")
   색 토큰은 앱과 1:1 동일. 타이포 스케일만 웹 읽기 거리에 맞춰 재조정.
   라이트 모드 전용 — 다크 대응을 넣지 않는다(앱 userInterfaceStyle: light 고정).
   ========================================================================== */

@import url("../fonts/pretendard.css");

/* --------------------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* 색 — app/DESIGN.md 정본(OKLCH)의 sRGB 변환값. 앱 tailwind.config.js와 일치 */
  --bg: #ffffff;           /* oklch(1 0 0)          순백 배경 */
  --surface: #f1f4f7;      /* oklch(0.965 0.005 245) 카드·패널 */
  --ink: #151b21;          /* oklch(0.22 0.015 245)  본문 — bg 대비 17.35:1 */
  --muted: #5f6469;        /* oklch(0.50 0.01 245)   보조 — bg 대비 5.98:1 */
  --primary: #007ac1;      /* oklch(0.56 0.141 245)  행동·선택·링크 */
  --primary-deep: #00629d; /* oklch(0.48 0.121 245)  눌림 전용 */
  --grass: #25873e;        /* oklch(0.55 0.14 148)   완료 상태 솔리드 */
  --grass-deep: #035e23;   /* oklch(0.42 0.12 148)   틴트 위 텍스트 */
  --grass-tint: #e0f5e2;   /* oklch(0.95 0.035 148)  성공 콜아웃 배경 */
  --red: #c92f33;          /* oklch(0.55 0.19 25)    불참·오류 */
  --red-tint: #feebe9;     /* oklch(0.955 0.02 25)   오류 콜아웃 배경 */
  --line: #d0d5d9;         /* 누를 수 있는 것의 테두리 */
  --line-soft: #e3e7ea;    /* 목록 구분선 */
  --disabled: #9fa6ac;

  /* 히어로 전용 — 채워진 코발트 면 위. 텍스트는 항상 순백(4.61:1) */
  --on-primary: #ffffff;

  /* 타이포 — 단일 패밀리("한 가족 규칙"), 웨이트 400·600·700만 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    system-ui, Roboto, "Noto Sans KR", sans-serif;

  --text-xs: 0.8125rem;    /* 13 — 메타·캡션 */
  --text-sm: 0.9375rem;    /* 15 — 보조 */
  --text-base: 1.0625rem;  /* 17 — 본문 */
  --text-lg: 1.25rem;      /* 20 — 리드 문단 */
  --text-xl: 1.5rem;       /* 24 — 소제목 */
  --text-2xl: clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem);  /* 28 → 36 */
  --text-3xl: clamp(2.125rem, 1.6rem + 2.6vw, 3rem);     /* 34 → 48 */
  /* 한글은 글자마다 em을 꽉 채워 같은 px에서 라틴보다 크게 읽힌다. 68px까지 올리면
     9글자 한 줄이 컬럼을 넘겨 헤드라인이 3줄로 깨졌다. 56px가 상한. */
  --text-hero: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);   /* 36 → 56 */

  /* 여백 — 섹션은 유동, 컴포넌트는 고정 */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --measure: 68ch;         /* 산문 최대 폭 */
  --page: 68rem;           /* 레이아웃 최대 폭 */

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;

  /* 그림자 — 평평함이 기본. 상태 응답에만 등장 */
  --shadow-raised: 0 1px 2px rgb(21 27 33 / 0.06), 0 8px 24px rgb(21 27 33 / 0.08);
  --shadow-device: 0 2px 6px rgb(21 27 33 / 0.10), 0 24px 60px rgb(0 40 70 / 0.28);

  /* 모션 — 150~250ms, 전달용만 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;

  /* z 스케일 */
  --z-sticky: 100;
  --z-skip: 200;
}

/* --------------------------------------------------------------------------
   2. 리셋 & 기본
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover { color: var(--primary-deep); }

img, svg { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

.skip-link {
  position: absolute;
  z-index: var(--z-skip);
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--bg);
}

/* --------------------------------------------------------------------------
   3. 레이아웃 유틸
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }

.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
}

.lede {
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.section-head { max-width: 46ch; }

.section-head p {
  margin-top: 0.875rem;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

/* 챕터 라벨 — 한 경기의 생애(경기 전·날·후)를 스캔 가능하게 만드는 장치.
   h2 밖 형제로 두면 스크린리더에서 맥락이 끊기므로 제목 안에 넣고 block으로 편다. */
.kicker {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* 앱 안 실제 문자열을 그대로 인용한다 — 이 페이지에서 감정을 만드는 건
   색·사진·모션이 아니라 "내 자리" / "선발 · 수비수 · 2번" 같은 실제 기록이다.
   숫자를 크게 자랑하던 옛 .stat을 대체한다. 자랑이 아니라 인용이라 왼쪽에 인용선을 둔다. */
.evidence {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--ink);
}

.evidence__label {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.evidence__value {
  display: block;
  margin-top: 0.125rem;
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 규칙 공개 — 콜아웃이되 경고가 아니다. 그린(완료 상태)·레드(오류) 틴트를 쓰지 않는다.
   흰 섹션에서는 서피스로, 서피스 섹션에서는 순백으로 뒤집어 항상 한 단계 떠 보이게 한다. */
.rule-line {
  margin-top: 1.25rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.section--surface .rule-line { background: var(--bg); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. 헤더
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}

/* 앱 아이콘 자체에 "뽈락" 워드마크가 들어 있어(2026-08-02 변경) 헤더에 아이콘을 함께
   놓으면 이름이 두 번 나온다. 28px에서는 아이콘 속 글자도 읽히지 않는다.
   헤더·푸터는 텍스트 워드마크만 쓰고, 아이콘은 파비콘·홈화면 아이콘 용도로만 둔다. */
.wordmark {
  display: inline-block;
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 0.4rem + 1.6vw, 1.75rem);
  flex: none;              /* 축소되면 "개인정보처리방침"이 잘린다 */
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 좁은 화면에서는 워드마크와 네비가 한 줄에 들어가지 않는다. 정책·기능 링크는
   푸터에 있으므로 내리되, 다운로드 버튼은 남긴다 — 유입 다수가 카톡 링크로 들어온
   모바일이고, 히어로를 지나면 최하단까지 받을 경로가 사라진다. */
@media (max-width: 34rem) {
  .site-header .site-nav a:not(.site-nav__cta) { display: none; }
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }

/* 헤더의 유일한 행동 — 코발트는 행동에만 쓴다는 규칙에 맞춘 자리.
   `.site-nav a:hover`(0,2,1)와 특정성을 맞추려고 a를 선택자에 포함한다. */
.site-nav a.site-nav__cta {
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  transition: background-color var(--dur) var(--ease-out);
}

.site-nav a.site-nav__cta:hover {
  background: var(--primary-deep);
  color: var(--on-primary);
}

/* --------------------------------------------------------------------------
   5. 히어로 — 순백
   옛 버전은 코발트 풀블리드였다. 그 문법(채워진 색 면 + 흰 글자 + 스토어 버튼 두 개)이
   이 페이지를 "아무 SaaS 랜딩"으로 읽히게 만든 첫 번째 이유였고, 하단 CTA까지 같은 밴드라
   코발트가 한 페이지에 두 번 반복됐다. 색은 앱 스크린샷 안에서만 나온다.
   코발트는 이제 버튼·링크·단계 번호에만 남는다(DESIGN.md "행동에만, ≤10%").
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--bg);
  color: var(--ink);
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 1rem + 7vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 2rem + 6vw, 6rem);
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* 배지를 대체한다. 배지는 테두리와 점으로 존재감만 만들고 정보를 안 줬다. */
.hero__label {
  margin-bottom: 1.125rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.hero__sub {
  max-width: 38ch;
  margin-top: 1.375rem;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

/* 가격·플랫폼 사양 한 줄. 옛 메타 필 3개를 흡수했다.
   ⚠️ 이 줄이 페이지에 남은 유일한 가격 진술이다. 약속·선언형으로 늘리지 말 것
   ("지금은 전부"·"앞으로도"·"광고 없음"·"결제 없음" 전부 금지). */
.hero__spec {
  margin-top: 1.125rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 선수 분기 — 이 사이트 방문자의 절반은 회장이 뿌린 링크를 받고 온 선수다.
   그들에게 필요한 건 스토어 버튼이 아니라 "코드 받았는데 이제 뭐하지"의 답이다. */
.hero__route {
  max-width: 44ch;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.hero__route a { font-weight: 600; white-space: nowrap; }

/* --------------------------------------------------------------------------
   6. 스크린샷 프레임 · 앱 컴포넌트 인용
   이 페이지의 이미지는 스크린샷 3장뿐이고, 나머지는 앱과 같은 컴포넌트 어휘로 그린다.
   옛 .device(코발트 면 위 전제의 반투명 테두리)는 히어로가 흰 배경이 되면서 폐기했다.
   -------------------------------------------------------------------------- */

/* 기기 프레임 — 흰 배경 위에 놓인다. 앱 본문이 14pt라 230px 안팎으로 줄이면
   화면 속 글자가 읽히지 않고, 읽히지 않는 스크린샷은 "앱이 있다"만 전달하고 설득은 못 한다. */
.shot {
  width: min(320px, 90%);
  margin-inline: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--bg);
  box-shadow: var(--shadow-raised);
}

@media (min-width: 52rem) {
  .shot { width: min(300px, 92%); }
}

.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

/* 히어로 — 첫 화면의 유일한 이미지라 한 단계 크게 잡는다 */
.shot--hero {
  width: min(340px, 82vw);
  padding: 8px;
  border-radius: 34px;
}

.shot--hero img { border-radius: 27px; }

/* 화면 일부만 잘라낸 가로 카드 — 기기 프레임을 씌우면 잘린 화면이 기기처럼
   읽혀 어색하다. 판독성이 목적인 크롭이므로 카드로 둔다. */
.shot--card {
  width: min(460px, 100%);
  margin-inline: 0;
  padding: 6px;
  border-radius: 14px;
}

.shot--card img { border-radius: 9px; }

/* 통산 카드 — 앱 CareerCard를 그대로 옮긴 것(스크린샷 아님).
   숫자가 카드에서 가장 큰 글자인 것이 이 카드가 하는 말이다.
   도움·MOM은 쌓인 사람에게만 있는 값이라 한 단계 작고 muted다.
   파생 지표(경기당 평균)·등급·상위 %는 앱에 없고 여기에도 없다. */
.career-card {
  width: min(340px, 100%);
  margin-inline: auto;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.career-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
}

.career {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;   /* 28px과 22px이 한 줄에 서므로 밑선을 맞춘다 */
  gap: 1rem 2.25rem;
  margin-top: 0.875rem;
}

.career li { list-style: none; }

.career b {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.career span {
  display: block;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

.career--thin b {
  font-size: 1.375rem;
  color: var(--muted);
}

/* 포지션별 출전(v1.5) — 카피가 "어느 포지션으로 몇 경기"를 말하는데 카드에 그 줄이 없었다 */
.career-card__pos {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.career-card__note {
  margin-top: 0.625rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* 경기 카드 — 앱 홈의 다음 경기 카드를 그대로 인용 */
.match-card {
  margin-top: 1.5rem;
  padding: 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.match-card__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.match-card__when {
  margin-top: 0.125rem;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.match-card__where {
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 13px;
}

/* flex를 쓰면 gap이 <b>와 뒤따르는 텍스트 노드 사이에 끼어 "14 명"으로 벌어진다 */
.tally {
  margin-top: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--grass-tint);
  color: var(--grass-deep);
  font-size: 13px;
  font-weight: 600;
}

.tally b {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reply-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.reply-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.reply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0.5625rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.reply--on {
  border-color: var(--grass);
  background: var(--grass);
  color: #ffffff;
}

.reply__icon { width: 13px; height: 13px; flex: none; }

/* 상태 칩 — 색 단독 금지 규칙: 색 + 아이콘 + 라벨 셋을 항상 같이.
   아이콘은 인라인 SVG다(DESIGN.md "유니코드 글자를 아이콘 대신 쓰지 않는다"). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.chip--go { background: var(--grass-tint); color: var(--grass-deep); }
.chip--no { background: var(--red-tint); color: var(--red); }
.chip--wait { background: var(--surface); color: var(--muted); }

.chip__icon { width: 12px; height: 12px; flex: none; }

/* --------------------------------------------------------------------------
   7. 버튼
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

/* 버튼 안 아이콘 — 글자 크기를 따라가고 줄바꿈에 눌리지 않는다 */
.btn__icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  margin-top: -0.1em;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover { background: var(--primary-deep); color: var(--on-primary); }
.btn--primary:active { background: var(--primary-deep); }

.btn--ghost {
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
}

.btn--ghost:hover { background: var(--surface); color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   8. 문제 진술 — 카톡의 혼란 vs 뽈락의 기록
   -------------------------------------------------------------------------- */

.contrast {
  display: grid;
  gap: clamp(1.5rem, 0.8rem + 3vw, 2.5rem);
  margin-top: 2.75rem;
}

@media (min-width: 48rem) {
  .contrast { grid-template-columns: 1fr 1fr; align-items: start; }
}

.contrast__col h3 {
  font-size: var(--text-base);
  font-weight: 700;
}

.contrast__col--before h3 { color: var(--muted); }
.contrast__col--after h3 { color: var(--primary); }

.chat {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 말풍선 — 폭을 대사 길이에 맞춰 묶지 않으면 입력 필드처럼 읽힌다.
   꼬리 쪽 모서리만 좁혀 대화임을 드러낸다. */
.chat li {
  max-width: min(88%, 20rem);
  padding: 0.625rem 0.875rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  list-style: none;
}

.chat li:nth-child(even) {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
}

.ledger {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.ledger li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem 1rem;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-size: var(--text-sm);
}

.ledger li:first-child { border-top: 0; }

.ledger__label { flex: 1; font-weight: 600; }

.ledger__value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.contrast__close {
  max-width: 52ch;
  margin-top: 1.75rem;
  color: var(--ink);
  font-size: var(--text-lg);
  line-height: 1.6;
}

/* 병행 선언 — 이 페이지에서 가장 load-bearing한 자리.
   대비를 보여준 직후 "그럼 단톡방을 버리라고?"라는 반론이 생기고, 그게 회장의
   최대 이탈 지점이다. 반론이 생기는 바로 그 자리에서 받는다. */
.parallel {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  align-items: center;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 52rem) {
  .parallel { grid-template-columns: minmax(0, 1fr) auto; }
}

.parallel__text h3 { font-size: var(--text-xl); }

.parallel__text p {
  max-width: 44ch;
  margin-top: 0.875rem;
  color: var(--muted);
  line-height: 1.7;
}

.parallel__note {
  font-size: var(--text-sm);
}

/* 카톡 카드 목업 — 스크린샷이 아니라 실제 카드 명세(피드 A형: 제목 / 설명 2줄 /
   버튼 1개 / 이미지 없음)를 HTML로 조판한 것이다.
   ⚠️ 누를 수 있어 보이는데 안 눌리면 접근성 결함이다. 버튼 역할·호버·커서를 주지 않고,
   카드 전체를 role="img" + aria-label로 감싸 "예시 그림"으로 전달한다. */
.kcard {
  width: min(340px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.kcard__body { padding: 1rem 1.125rem; }

.kcard__title {
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.kcard__desc {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.kcard__code {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.kcard__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 700;
}

.kcard--step { margin-top: 1.125rem; }

/* --------------------------------------------------------------------------
   9. 기능 — 동일 카드 반복 대신 교차 배치
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  gap: clamp(1.75rem, 0.9rem + 3.5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px solid var(--line-soft);
}

/* :first-of-type은 형제 div 전체를 기준으로 세므로 .section-head가 먼저 걸린다.
   인접 선택자로 "헤드 바로 다음 feature"를 정확히 집는다.
   '우리 구단'처럼 섹션 헤드 없이 feature 하나만 있는 경우도 위 선이 뜬다. */
.section-head + .feature,
.wrap > .feature:first-child { border-top: 0; }

@media (min-width: 52rem) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .feature--flip .feature__visual { order: -1; }
}

.feature__body {
  max-width: 42ch;
  margin-top: 0.875rem;
  color: var(--muted);
  line-height: 1.7;
}

/* 보조 한 줄 — 본문보다 한 단계 작고, 권한·범위처럼 알아야 하지만 자랑은 아닌 사실 */
.feature__aside {
  max-width: 42ch;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

/* (소) 비트 — 좌우 2열을 세 번 반복하면 그 자체가 템플릿 리듬이 된다.
   세 번째 비트는 2열을 벗어나 가로 카드로 눕는다. */
.minor {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
  border-top: 1px solid var(--line-soft);
}

.minor__text { max-width: 46ch; }

.minor h3 { font-size: var(--text-lg); }

.minor .shot--card { margin-top: 1.75rem; }

/* 선수 → 회장 다리. 두 독자를 잇는 한 문장이라 섹션 밖으로 나와 있다. */
.bridge {
  max-width: 46ch;
  margin-top: 0.5rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.6;
}

/* 시작하기 3단계 — 이 제품의 진짜 채택 장벽은 기능 설득이 아니라
   "우리 구단 열댓 명을 다 깔게 만들기"다. 그 경로를 한 화면에 둔다. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 1.75rem;
  margin-top: 2.75rem;
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

.steps li {
  padding-top: 1.25rem;
  border-top: 2px solid var(--line);
  list-style: none;
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.875rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* sticky 헤더(60px)에 제목이 가리지 않게 */
#join { scroll-margin-top: 5rem; }

.steps h3 { font-size: var(--text-base); }

.steps p {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.join__friction {
  max-width: 56ch;
  margin-top: 2.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* 채택 문단 — 자기 변호가 아니라 회장의 최대 이탈 지점("애들이 깔까")에 대한 답이다.
   ⚠️ 제작 의도 1인칭을 되돌리지 말 것("먼저 만들었어요"·"그게 증거고요"·"정직하게"). */
.join__adoption {
  max-width: 52ch;
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
}

.join__adoption p { color: var(--muted); line-height: 1.8; }

.join__adoption p + p { margin-top: 1.125rem; }

.join__adoption p:first-child {
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.6;
}

/* 회장 파트 — 폰 목업을 네 번 더 쓰면 진단 ②(대칭 반복)로 되돌아간다.
   여기서는 앱 화면을 사진으로 보여주는 대신 장부·패널로 그린다. */
.panel-grid {
  display: grid;
  gap: clamp(2.25rem, 1.2rem + 3.5vw, 3.5rem);
  margin-top: 3rem;
}

@media (min-width: 52rem) {
  .panel-grid { grid-template-columns: 1fr 1fr; }
}

.duty h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
}

.duty__body {
  margin-top: 0.75rem;
  color: var(--muted);
  line-height: 1.7;
}

.duty__aside {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: var(--text-sm);
}

.duty .panel,
.duty .match-card { margin-top: 1.5rem; }

.panel {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-raised);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.panel__title {
  font-size: var(--text-base);
  font-weight: 700;
}

.panel__meta {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.rows { border-top: 1px solid var(--line-soft); }

.rows li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line-soft);
  list-style: none;
  font-size: var(--text-sm);
}

.rows li:last-child { border-bottom: 0; }

.rows__name { flex: 1; font-weight: 600; }

/* 등번호 — 오른쪽 정렬로 자릿수가 달라도 이름 시작선이 흔들리지 않는다 */
.rows__num {
  min-width: 1.5rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex: none;
}

.rows__value { font-weight: 600; }

.rows__amount {
  color: var(--muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 700;
}

.summary-line span { color: var(--muted); font-weight: 600; }

.summary-line b {
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

/* 카풀 */
.ride {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8125rem 0;
  border-bottom: 1px solid var(--line-soft);
  list-style: none;
}

.ride:last-child { border-bottom: 0; }

.ride__info { flex: 1; min-width: 0; }

/* span이라 기본 인라인 — block으로 바꾸지 않으면 이름과 출발지가 한 줄에 붙는다 */
.ride__driver {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
}

.ride__from {
  display: block;
  margin-top: 0.0625rem;
  color: var(--muted);
  font-size: var(--text-xs);
}

/* 좌석 점은 aria-hidden이고, 상태는 이 텍스트가 말한다(색 단독 금지) */
.ride__status {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
  flex: none;
}

.seats {
  display: flex;
  gap: 0.25rem;
  flex: none;
}

.seat {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--primary);
}

.seat--free { background: var(--line); }

/* --------------------------------------------------------------------------
   10. CTA
   -------------------------------------------------------------------------- */

/* 섹션 하나가 빠지면서(옛 "먼저 답할게요") 흰 배경이 셋 연속(시작하기 → CTA → 푸터)이
   되어 페이지가 끝나는 지점이 흐려진다. 없던 걸 채우는 대신 배경 교대만 되돌린다.
   ⚠️ 코발트가 아니다. 섹션 2·4가 이미 쓰는 서피스 회색이다. --primary 배경을 다시 넣지 말 것. */
.cta {
  background: var(--surface);
  border-block: 1px solid var(--line-soft);
  color: var(--ink);
  text-align: center;
}

/* 서피스 밴드의 아래 선과 푸터의 위 선이 붙어 2px로 보인다 */
.cta + .site-footer { border-top: 0; }

.cta h2 { font-size: var(--text-2xl); }

.cta p {
  max-width: 42ch;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

.cta .btn-row { justify-content: center; }

.cta__note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* 좁은 화면에서 스토어 버튼 두 개가 반쪽으로 찌그러지지 않게 */
@media (max-width: 30rem) {
  .cta .btn-row { flex-direction: column; }
  .cta .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. 푸터
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  font-size: var(--text-sm);
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
}

.site-footer__brand { max-width: 30ch; }

.site-footer__brand p {
  margin-top: 0.625rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
  font-weight: 600;
}

.footer-nav li { list-style: none; }

/* gap만으로는 링크 높이가 44px에 못 미쳐 한 손 조작에서 잘 안 눌린다 */
.footer-nav a {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--ink);
  text-decoration: none;
}

.footer-nav a:hover { color: var(--primary); text-decoration: underline; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: var(--text-xs);
}

/* --------------------------------------------------------------------------
   12. 문서 페이지 (개인정보처리방침 · 이용약관 · 계정 삭제)
   -------------------------------------------------------------------------- */

.doc-header {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

/* 헤더와 본문이 같은 좌측 축에 서도록 폭을 맞춘다.
   .wrap의 좌우 패딩이 gutter이므로 내부 텍스트 폭이 정확히 measure가 되게 더해준다. */
.doc-header .wrap,
.doc {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

.doc-header h1 {
  max-width: 22ch;
  letter-spacing: -0.03em;
}

.doc-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 1rem;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.doc-header__meta li { list-style: none; }

.doc {
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}

.doc > * + * { margin-top: 1.125rem; }

.doc h2 {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
}

.doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.doc h3 {
  margin-top: 2rem;
  font-size: var(--text-base);
  font-weight: 700;
}

.doc p { line-height: 1.75; }

.doc ul, .doc ol {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-left: 1.375rem;
}

.doc li { line-height: 1.7; }

.doc ul li { list-style: disc; }
.doc ol li { list-style: decimal; }
.doc li::marker { color: var(--muted); }

.doc strong { font-weight: 700; }

.doc-note {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.doc-note--action {
  border-color: var(--primary);
  background: var(--bg);
}

.doc-note > * + * { margin-top: 0.75rem; }

.doc-note ul { padding-left: 1.25rem; }

.doc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.doc-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.doc-table th,
.doc-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.6;
}

.doc-table thead th {
  background: var(--surface);
  font-weight: 700;
  white-space: nowrap;
}

.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td { border-bottom: 0; }

/* `.doc ol li`(0,1,2)가 `.doc-steps li`(0,1,1)를 이겨 기본 번호가 함께 그려졌다.
   ol을 선택자에 포함해 특정성을 맞춘다. */
.doc ol.doc-steps {
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding-left: 0;
}

.doc ol.doc-steps li {
  position: relative;
  padding-left: 2.5rem;
  list-style: none;
  line-height: 1.7;
}

.doc-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.doc-toc {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.doc-toc h2 {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}

.doc-toc ol {
  display: grid;
  gap: 0.4375rem 1.5rem;
  padding-left: 1.25rem;
  font-size: var(--text-sm);
}

@media (min-width: 40rem) {
  .doc-toc ol { grid-template-columns: 1fr 1fr; }
}

.doc-toc a { text-decoration: none; }
.doc-toc a:hover { text-decoration: underline; }

.contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: var(--text-base);
}