/* ============================================================
   10. 기본 뼈대 (리셋 · 타이포 · 컨테이너 · 유틸)
   ------------------------------------------------------------
   여기서부터는 색·크기를 직접 쓰지 않고 반드시 토큰(var)만 씁니다.
   ============================================================ */

/* ─────────── 글꼴 : 프리텐다드 ───────────

   ★★ 처음에 다른 글꼴로 떴다가 바뀌는 현상(깜빡임)을 없앤 구조입니다.
     아래 두 가지를 건드리면 그 현상이 그대로 되돌아옵니다.
       ① 글꼴은 "한 벌"만 쓴다  ② font-display 는 block 으로 둔다

   ─ 왜 깜빡였는가 ─
     글꼴을 외부 서버(CDN)에서 받아왔습니다.
       ① CDN 에서 글꼴 CSS 받기        (인터넷 왕복 1회)
       ② 그 CSS 에 적힌 글꼴 파일 받기   (인터넷 왕복 1회)
     ②가 끝나기 전에 글자가 먼저 그려지니, 시스템 기본 글꼴(맑은 고딕 등)로
     한 번 보였다가 프리텐다드로 바뀌었습니다. 그게 눈에 띈 깜빡임입니다.

   ─ 어떻게 고쳤는가 ─
     ① CDN 을 아예 뺐습니다. 이 폴더 안 파일 한 벌만 씁니다.
        ★★ 글꼴을 두 벌 두면(내 파일 + CDN) 늦게 온 쪽이 나중에 끼어들며
          또 한 번 글자가 바뀝니다. 실제로 그렇게 만들었다가 다시 뺐습니다.
     ② HTML head 의 preload 로 페이지를 읽는 즉시 글꼴을 받기 시작합니다.
     ③ font-display: block — 글꼴이 도착할 때까지 그 글자를 잠깐 안 보여줍니다.
        "바뀌는 장면" 자체가 없어집니다. preload 덕분에 이 잠깐은 보통 안 보입니다.

   ─ 지금 쓰는 파일 ─
     font/Pretendard-subset.woff2 · 1,072자 · 206KB
     ★ 이 사이트 5개 페이지에 실제로 쓰인 글자를 전부 담고 있습니다 (검사 완료).
       단 ☰ 와 ✕ 두 기호는 프리텐다드 원본에도 없어 시스템 글꼴로 나옵니다.
     ★★ 문구를 크게 고치면 반드시 _TOOLS/글꼴_줄이기.py 를 다시 돌리세요.
       안 돌리면 새로 넣은 글자만 시스템 글꼴로 나와 그 글자만 모양이 다릅니다. */
@font-face {
  font-family: "Pretendard Subset";
  /* ★★ 주소 끝의 ?v= 는 "글꼴 파일이 바뀌었다"고 알리는 표시입니다.
     _TOOLS/글꼴_줄이기.py 로 글꼴을 다시 만들면 이 번호도 반드시 올리세요.
     안 올리면 브라우저가 옛 글꼴을 계속 써서 새 글자가 안 나옵니다.
     ★ 아래 주소와 HTML 의 preload 주소는 글자 하나까지 똑같아야 합니다.
       다르면 같은 글꼴을 두 번 내려받습니다. */
  src: url("../font/Pretendard-subset.woff2?v=20260724-67") format("woff2");
  font-weight: 45 920;      /* 가변 글꼴이라 굵기를 범위로 적습니다 */
  font-style: normal;
  /* ★★ block 을 swap 이나 optional 로 바꾸지 마세요.
     swap    = 시스템 글꼴로 먼저 보여주고 나중에 바꿈  → 깜빡임 발생
     optional = 제때 못 받으면 그냥 시스템 글꼴로 확정   → 프리텐다드가 안 나옴
     block   = 글꼴이 올 때까지 그 글자만 잠깐 안 보임   → 바뀌는 장면이 없음
     preload 로 미리 받고 있어서 이 "잠깐"은 보통 눈에 안 띕니다. */
  font-display: block;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: keep-all;      /* 한글 단어 중간에서 안 끊기게 */
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}
/* ★ 부드러운 스크롤은 어지럼증을 유발할 수 있어 반드시 꺼주어야 합니다.
   위의 --dur 토큰들과 달리 이것은 시간이 아니라 방식이라 따로 껐습니다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  padding-top: var(--header-h);   /* 고정 헤더만큼 밀어주기 */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* 키보드 사용자용 포커스 표시 — WCAG 2.4.7(포커스 보임) + 1.4.11(비텍스트 대비 3:1)
   ★ 브랜드색 한 겹으로는 안 됩니다.
     밝은 주황(carrot-600)은 흰 배경에서 2.9:1 이라 잘 안 보입니다.
   그래서 '검정 테두리 + 브랜드색 바깥 링' 두 겹으로 만듭니다.
     - 밝은 배경에서는 검정 테두리가 보이고 (15:1)
     - 어두운 배경에서는 바깥 주황 링이 보입니다 */
:focus-visible {
  outline: 3px solid var(--ink-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--brand-500);
  border-radius: var(--radius-sm);
}

/* ---------- 제목 ---------- */
h1, h2, h3, h4 {
  color: var(--ink-900);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

/* ---------- 레이아웃 ---------- */
/* 바깥 틀 — 당근 실측 1280px */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-x);
}

/* 안쪽 콘텐츠 — 당근은 1280px 틀 안에서 960px 로 한 번 더 좁힙니다.
   이 이중 폭이 당근 특유의 여유로운 느낌을 만듭니다. */
.content {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

.section        { padding-block: var(--section-y); }
.section--alt   { background: var(--surface-alt); }
.section--brand { background: var(--brand-50); }
.section--dark  { background: var(--brand-700); color: var(--ink-invert); }
.section--dark h2, .section--dark h3 { color: var(--ink-invert); }

/* 카드 그리드 — 열 수는 토큰(--grid-cols)이 화면 크기별로 정합니다 */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--gap-grid);
}

/* ---------- 섹션 머리말 ----------
   ★ 당근의 핵심 반복 패턴 ★

     광고 상품            ← 주황 라벨 (17px / 700)
     당근이라서 가능한     ← 큰 제목 (42px / 700, 줄간 1.35)
     동네 기반 광고         2줄로 끊어 씁니다

   왼쪽 정렬이 기본입니다. 히어로만 가운데 정렬합니다. */
.section-head {
  text-align: left;
  margin-bottom: var(--space-12);
}

/* 섹션 위 주황 라벨 — POINT 01 처럼 영문+숫자를 씁니다.
   제목과 같은 말을 반복하지 않으려고 번호로 바꿨습니다. */
.section-label {
  display: block;
  margin-bottom: var(--space-3);  /* 당근 실측: 라벨→제목 12px */
  color: var(--brand-ink);        /* 흰 배경 대비 5.0:1 */
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  /* ★ 자간을 넓히는 것은 영문 대문자에만 해당합니다.
     당근이 자간을 건드리지 않는 이유는 한글이 좁히면 읽기 어려워서인데,
     영문 대문자는 반대로 조금 벌려야 낱자가 뭉치지 않습니다. */
  letter-spacing: .06em;
  text-transform: none;           /* 이미 대문자로 적혀 있어 변환하지 않습니다 */
  font-variant-numeric: tabular-nums;  /* 번호 폭을 고르게 */
}

.section-desc {
  margin-top: var(--space-5);
  color: var(--ink-500);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  max-width: 34em;
}
.section-head--center .section-desc { max-width: 36em; }

/* 가운데 정렬이 필요한 섹션에만 붙입니다 */
.section-head--center { text-align: center; }
.section-head--center .section-desc { margin-inline: auto; }

/* ---------- 읽기 좋은 문단 ----------
   가이드 1-3: 한 줄은 한글 25~40자.
   긴 문단에는 반드시 .prose 를 붙여 줄 길이를 제한합니다. */
.prose {
  max-width: 34em;
  text-align: left;          /* 가이드 1-4: 3줄 이상 문단은 왼쪽 정렬 */
}
.prose--center { margin-inline: auto; }

/* ---------- 글자 유틸 ---------- */
.lead      { font-size: var(--fs-lead); color: var(--ink-500); }
.text-sm   { font-size: var(--fs-sm); }
.text-xs   { font-size: var(--fs-xs); }
.text-muted{ color: var(--ink-500); }
.text-brand{ color: var(--brand-500); }
.text-center { text-align: center; }

/* 밝은 배경 위 강조 글씨는 --brand-ink 를 씁니다 (--brand-500 은 대비 부족) */
.text-brand-ink { color: var(--brand-ink); }
.highlight { color: var(--brand-ink); font-weight: var(--fw-black); }

/* 화면에는 안 보이고 검색엔진·스크린리더에만 읽히는 텍스트 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 스크롤 등장 애니메이션 ----------
   ★ 안전장치 ★
   .js 클래스는 <head>의 인라인 스크립트가 붙입니다.
   자바스크립트가 꺼져 있거나 site.js 로드에 실패하면 .js 가 없으므로
   숨김 규칙 자체가 적용되지 않아 내용이 정상적으로 보입니다.
   (이 안전장치가 없으면 JS 실패 시 페이지 대부분이 백지가 됩니다) */
.js .reveal {
  opacity: 0;
  /* 위로 22px + 아주 살짝 작게.
     ★ 크기까지 같이 변해야 "다가온다"는 느낌이 납니다.
       위치만 움직이면 미끄러지는 느낌이라 밋밋합니다.
     ★ .985 는 눈에 안 띌 만큼만입니다. 더 낮추면 뽁뽁 튀어 유치해집니다. */
  transform: translateY(26px) scale(.99);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
  /* ★ 줄줄이 나타나기(stagger).
     같은 줄에 있는 형제들에게 js/site.js 가 --i 를 0,1,2… 로 붙여줍니다.
     그래서 카드 세 장이 한꺼번에 튀어나오지 않고 차례로 도착합니다.
     --i 가 없으면 0 이라 지금까지와 똑같이 동작합니다. */
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ── 목록 안 항목이 한 장씩 차례로 도착하기 ──
   카드가 여러 장 들어 있는 묶음에는 js/site.js 가 data-stagger 를 붙입니다.
   그러면 묶음이 통째로 나타나는 대신 카드가 한 장씩 도착합니다.

   ★ 묶음보다 짧게(18px) 움직입니다. 안쪽 것이 바깥 것보다 크게 움직이면
     따로 노는 것처럼 보입니다.
   ★ 어느 묶음에 붙일지는 js/site.js 의 STAGGER_LISTS 목록에서 정합니다.
     아무 데나 붙이면 문단 글씨까지 한 줄씩 떠올라 어지럽습니다. */
.js .reveal[data-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal[data-stagger].is-visible > * { opacity: 1; transform: none; }

/* 새로고침 시 첫 화면 요소는 페이드 없이 즉시 표시(잔상 방지).
   js 가 로드 순간에만 잠깐 붙였다 다음 프레임에 떼므로, 이후 스크롤 등장은 정상입니다. */
.js .reveal.is-instant,
.js .reveal.is-instant > * { transition: none !important; }

/* PC/모바일 문구 토글 유틸 — 같은 자리에 화면 크기별로 다른 글을 보여줍니다. */
.only-mo { display: none; }
@media (max-width: 768px) {
  .only-pc { display: none; }
  .only-mo { display: inline; }
}

/* 손으로 순서를 지정하고 싶을 때 쓰는 옛 방식 — 그대로 둡니다.
   새로 만드는 곳에서는 위의 --i 자동 방식이 알아서 처리합니다. */
.delay-1 { transition-delay: calc(var(--stagger) * 2); }
.delay-2 { transition-delay: calc(var(--stagger) * 4); }
.delay-3 { transition-delay: calc(var(--stagger) * 6); }