@charset "UTF-8";
/* ==========================================================================
   tokens.css — 좋은나무교회 v4 디자인 토큰 (DESIGN_v4 §2)
   - 2단 토큰: PRIMITIVE(원시 5색 · hex 는 :root 블록 안에만) → SEMANTIC
   - 다크 모드는 시맨틱 재지정만 (prefers-color-scheme)
   - 빌더 규칙: 이 파일 밖에서 hex 리터럴 금지 (check_v4 C16)
   ========================================================================== */

:root {
  /* --- PRIMITIVE (v4 — 5색 · DESIGN_v4 §2-1) --- */
  --c-paper: #FAF8F5;   /* 캔버스(웜 페이퍼) */
  --c-ink:   #2C241E;   /* 본문 잉크 (14.37:1 on paper) */
  --c-green: #3A552F;   /* CI 딥 리프 그린 — 주 버튼·링크·아이브로우 */
  --c-fruit: #FCD514;   /* CI 열매 옐로우 — 포인트(밑줄·라벨 배경·포커스 링) */
  --c-dark:  #161513;   /* 다크 캔버스 — 히어로 오버레이·숫자 띠·다크모드 */
  --c-white: #FFFFFF;   /* 카드 면(= paper 100% 혼합 상한) */
  --c-dark-brand: #74B86F; /* 다크 모드 전용 파생 1색 (7.67:1 on dark) — 라이트 화면에 나타나지 않음 */

  /* --- SEMANTIC (라이트) --- */
  --bg-canvas: var(--c-paper);
  --bg-surface: var(--c-white);
  --bg-soft: color-mix(in srgb, var(--c-paper) 92%, var(--c-ink));
  --bg-strip: var(--c-dark);
  --line: color-mix(in srgb, var(--c-paper) 86%, var(--c-ink));
  --line-strong: color-mix(in srgb, var(--c-paper) 70%, var(--c-ink));

  --text: var(--c-ink);
  --text-muted: color-mix(in srgb, var(--c-ink) 70%, var(--c-paper));
  --text-inverse: var(--c-paper);
  --text-on-brand: var(--c-paper);

  --brand: var(--c-green);
  --brand-hover: color-mix(in srgb, var(--c-green) 82%, var(--c-dark));
  --accent: var(--c-fruit);
  --focus: var(--c-fruit);

  --overlay-top: rgba(22, 21, 19, 0.15);
  --overlay-bottom: rgba(22, 21, 19, 0.72);
  --scrim-top: rgba(22, 21, 19, 0.45);
  --scrim-bottom: rgba(22, 21, 19, 0.60);

  --shadow-1: 0 1px 2px rgba(22, 21, 19, 0.06);
  --shadow-2: 0 8px 24px rgba(22, 21, 19, 0.10);

  /* --- 서체 (DESIGN_v4 §2-2) --- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif;   /* gt4-F8: "Noto Sans KR" 대체 글꼴 제거 — 웹폰트가 Thin(100)만 받으므로 Pretendard 실패 시 본문이 Thin 으로 바뀌는 것 방지 */
  /* gt4-F8 (오너 2026-10-24): 정의·인용 서체 = Noto Sans KR Thin(100 · Google Fonts wght@100) — gt4-F6 D 마루부리 Light 대체.
     다른 서체로 바꿀 때는 이 2줄 + 7페이지 HTML <link> 를 함께 교체 */
  --font-quote: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --fw-quote: 100;
  --font-serif: var(--font-quote);

  /* --- 타입 스케일 (DESIGN_v4 §2-3) --- */
  --fs-hero: clamp(2.6rem, 6vw, 5.2rem);      /* B1b-A: 에디토리얼 대형 · 2줄 이내 */
  --fs-h1: clamp(1.9rem, 5vw, 2.8rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);          /* B1b-B: 섹션 제목 상향 */
  --fs-h3: clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.25rem);  /* B1b-B: 리드 1.125~1.25rem */
  --fs-body: 1rem;                              /* B1b-B: 본문 1rem */
  --fs-num: clamp(2.2rem, 4vw, 3.4rem);          /* 5열에서 '1,200명' 한 줄 */
  --fs-eyebrow: 0.8rem;
  --fs-small: 0.88rem;

  --lh-title: 1.15;
  --ls-label: 0.02em;                            /* B1b-B: 한글 라벨 자간 */
  --lh-body: 1.65;

  /* --- 간격 · 반경 · 레이아웃 (DESIGN_v4 §2-4 · §6) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --section-pad: var(--sp-7);
  --container-max: 1120px;
  --gutter: 20px;
  --header-h: 56px;
  --bottombar-h: 56px;

  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-motif: 48px;   /* 둥근 사각 + 한쪽 모서리만 48px (P10 반복 모티프) */

  /* --- 모션 (DESIGN_v4 §5-3) --- */
  --dur-fast: 200ms;
  --dur-reveal: 500ms;
  --dur-bar: 240ms;
  --dur-kenburns: 14s;                           /* B1b-A: 루프(alternate) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --touch: 48px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-pad: var(--sp-8);
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 32px;
    --section-pad: var(--sp-9);
  }
}

/* --- 다크 모드: 시맨틱만 재지정 (DESIGN_v4 §2-1 표) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: var(--c-dark);
    --bg-surface: color-mix(in srgb, var(--c-dark) 90%, var(--c-paper));
    --bg-soft: color-mix(in srgb, var(--c-dark) 84%, var(--c-paper));
    --bg-strip: color-mix(in srgb, var(--c-dark) 80%, var(--c-paper));
    --line: color-mix(in srgb, var(--c-dark) 78%, var(--c-paper));
    --line-strong: color-mix(in srgb, var(--c-dark) 60%, var(--c-paper));
    --text: var(--c-paper);
    --text-muted: color-mix(in srgb, var(--c-paper) 75%, var(--c-dark));
    --text-inverse: var(--c-paper);
    --text-on-brand: var(--c-dark);
    --brand: var(--c-dark-brand);
    --brand-hover: color-mix(in srgb, var(--c-dark-brand) 85%, var(--c-paper));
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg-canvas: var(--c-dark);
  --bg-surface: color-mix(in srgb, var(--c-dark) 90%, var(--c-paper));
  --bg-soft: color-mix(in srgb, var(--c-dark) 84%, var(--c-paper));
  --bg-strip: color-mix(in srgb, var(--c-dark) 80%, var(--c-paper));
  --line: color-mix(in srgb, var(--c-dark) 78%, var(--c-paper));
  --line-strong: color-mix(in srgb, var(--c-dark) 60%, var(--c-paper));
  --text: var(--c-paper);
  --text-muted: color-mix(in srgb, var(--c-paper) 75%, var(--c-dark));
  --text-inverse: var(--c-paper);
  --text-on-brand: var(--c-dark);
  --brand: var(--c-dark-brand);
  --brand-hover: color-mix(in srgb, var(--c-dark-brand) 85%, var(--c-paper));
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);
}