/*
	tokens.css — 디자인 토큰 (이름과 기본값)

	여기가 값을 정의하는 유일한 곳이다.
	다른 CSS 파일에서는 var(--*) 만 쓴다 → check.sh V-6 · design-system.md G-1

	색상과 글꼴은 **자식이 없을 때의 기본값**이다.
	⚠️ 디자인이 확정돼도 **이 파일을 고치지 않는다.** 고치면 두 사이트가 함께
	   바뀐다 — 값은 자식 tokens.css 가 덮는다 (G-2).
	   2026-08-26 현재 두 자식이 모두 덮고 있다 (3-3 교회 · 2-2 강의).
	토큰 이름은 바꾸지 않는다. 이름을 바꾸면 모든 CSS를 고쳐야 한다.

	자식 테마는 <자식>/assets/css/tokens.css 에서 값만 덮어쓴다.
	큐 순서상 자식이 뒤에 실려 값이 이긴다 → base/inc/assets.php

	각 항목의 좌표(G-nn)는 design-system.md 를 가리킨다.
*/

:root {

	/* ─────────────────────────────────────────
	   색상 — G-10~24 · 기본값 (파란색 계열. 두 자식이 덮는다)
	   ───────────────────────────────────────── */

	--color-primary: #2563EB;        /* G-10 주요 버튼, 링크, 강조 */
	--color-primary-hover: #1D4ED8;  /* G-11 호버 */
	--color-primary-light: #DBEAFE;  /* G-12 선택 상태 배경, 배지 */

	--color-text: #1F2937;           /* G-13 본문 */
	--color-text-muted: #6B7280;     /* G-14 날짜, 부가 설명, 캡션 */
	--color-text-invert: #FFFFFF;    /* G-15 어두운 배경 위 */

	/*
		G-25 · 어두운 바닥 위의 **링크** (`3-50` · 2026-08-27).

		🔴 **`--color-primary` 로는 안 됐다.** 어두운 바닥에서 본문은 흰 글자로
		   바뀌는데 링크만 브랜드색으로 남아 **대비가 무너진다** — 실측:
		   교회 3.17:1 · 강의 2.03:1 · 부모 기본값 3.43:1 (전부 4.5 미달).

		⚠️ **밝은 배경에는 쓰지 않는다.** 이 값은 흰 바탕에서 2~3:1 밖에 안 된다.
		   밝은 쪽 링크는 `--color-primary`(`G-10`) 그대로다.

		⚠️ **자식이 값을 준다** (`G-2`). 여기 값은 자식이 없을 때의 기본값이다 —
		   각 사이트의 브랜드색에 흰색을 섞어 만든다.
	*/
	--color-link-invert: #7CA1F3;    /* G-25 어두운 바닥 위 링크 (#111827 위 6.97:1) */

	/*
		G-26~G-29 · 어두운 바닥과 브랜드 색면 **위에 얹는 것들** (`2-38` · 2026-08-28).

		🔴 **`G-25` 하나로는 모자랐다.** 강의 홈이 어두운 바닥(강사 소개·푸터)과
		   브랜드 색면(히어로)을 크게 쓰는데, 그 위에 **링크 말고도** 본문·라벨·선이
		   얹힌다. 이름이 없으면 그 자리에 값이 박히고, 박히면 **교회가 강의 색을 쓴다**
		   (`G-2` · `LS-002`).

		⚠️ **밝은 배경에 쓰지 않는다.** 넷 다 어두운 쪽 전용이다. 밝은 쪽은
		   `--color-text`(`G-13`) · `--color-text-muted`(`G-14`) · `--color-border`(`G-19`).

		⚠️ **자식이 값을 준다** (`G-2`). 여기 값은 자식이 없을 때의 기본값이고
		   부모 `--color-bg-inverse`(`#111827`) 위에서 **계산해서** 잰 것이다.

		⚠️ **`G-28` 에는 `G-117`(3:1)을 걸지 않는다.** 이것은 **장식 구분선**이고
		   그 선이 없어도 무엇을 누르는지·무엇이 무엇인지 알 수 있다. 대비를 3:1 로
		   올리면 어두운 바닥에서 **선이 글자보다 세진다.**
		   ⇒ **테두리가 그 요소를 식별하는 유일한 표시인 자리에는 쓰지 마라.**

		⚠️ **`G-29` 는 디자인 파일보다 한 단계 밝다.** 파일은 `.45` 였는데 브랜드
		   색면(`#2D23F6`) 위에서 **2.57:1** 이라 `G-117`(3:1)을 못 넘겼다. `.55` 로
		   올려 **3.22:1**. 교회 브랜드(`#007DA3`)는 이 알파로도 2.89:1 이라 자식이
		   제 값을 줘야 한다 — **그래서 이름을 부모에 두고 값을 자식에 남긴다.**
		   (`3-3` 이 받은 시안 `#00B1E8` 을 명도 내려 쓴 것과 같은 결이다.)
	*/
	--color-text-invert-soft: #D1D5DB;   /* G-26 어두운 바닥·브랜드 색면 위 본문 (#111827 위 12.04:1) */
	--color-text-invert-muted: #9CA3AF;  /* G-27 어두운 바닥 위 라벨·보조 (#111827 위 6.99:1) */
	--color-border-invert: #374151;      /* G-28 어두운 바닥 위 **장식 구분선** (#111827 위 1.72:1 — 아래 주의) */
	--color-border-on-brand: rgba(255, 255, 255, .55);  /* G-29 브랜드 색면 위 선 */

	--color-bg: #FFFFFF;             /* G-16 기본 배경 */
	--color-bg-subtle: #F9FAFB;      /* G-17 섹션 구분, 카드 */
	--color-bg-inverse: #111827;     /* G-18 푸터 등 */

	--color-border: #E5E7EB;         /* G-19 기본 선 */
	--color-border-strong: #D1D5DB;  /* G-20 강조 선 */

	--color-success: #059669;        /* G-21 완료·통과 */
	--color-warning: #D97706;        /* G-22 주의 */
	--color-danger: #DC2626;         /* G-23 폼 오류, 삭제 */
	--color-disabled: #9CA3AF;       /* G-24 결제 대기 중 수강 신청 버튼 (T-64) */

	/* ─────────────────────────────────────────
	   글꼴 — G-30~32

	   시스템 글꼴만 쓴다. 추가 다운로드가 없어 가장 빠르다.
	   한글 웹폰트는 용량이 커서 도입 여부를 디자인 확정 후 정한다.
	   ───────────────────────────────────────── */

	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;  /* G-30 */
	--font-heading: var(--font-body);                                  /* G-31 */
	--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;       /* G-32 */

	/* ─────────────────────────────────────────
	   글자 크기 — G-40~48

	   본문(--text-base)을 16px 아래로 내리지 않는다.
	   모바일에서 자동 확대가 일어난다.
	   ───────────────────────────────────────── */

	--text-xs: 0.75rem;    /* G-40  12px 캡션, 라벨 */
	--text-sm: 0.875rem;   /* G-41  14px 부가 설명 */
	--text-base: 1rem;     /* G-42  16px 본문 (기준) */
	--text-lg: 1.125rem;   /* G-43  18px 큰 본문 */
	--text-xl: 1.25rem;    /* G-44  20px 소제목 */
	--text-2xl: 1.5rem;    /* G-45  24px h3 */
	--text-3xl: 1.875rem;  /* G-46  30px h2 */
	--text-4xl: 2.25rem;   /* G-47  36px h1 */
	--text-5xl: 3rem;      /* G-48  48px 히어로 (T-50 · T-80) */
	--text-6xl: 3.875rem;  /* G-49  62px 큰 히어로 — 홈 첫 화면 (T-160 · 2-38) */

	/* ─────────────────────────────────────────
	   판 리듬 · UI 크기 · 반투명 — G-149~153 (`3-54` · 2026-08-31 · 회차 2)

	   🔵 **「재기로 정한 안 만든다는 짓기 전까지 잠정이다」** (`R-21`).
	      `--space-5` 와 15px 은 회차 ⑤ 에 **「쓰는 곳 0곳」**이라 안 만들기로 했다.
	      홈 한 장을 지으니 **셋 다 쓰였다.** 판단이 틀렸던 것이 아니라
	      **안 지은 화면은 잴 수 없었던 것**이다.

	   🔴 **이름을 더하는 것만으로는 화면이 안 바뀐다** — 회차 ⑤ 에서 쟀다.
	      번지는 것은 **값을 바꿀 때**다. 여기 값은 **교회 홈이 이미 쓰던 값**이고,
	      부모 기본값은 **지금 두 사이트가 쓰던 것과 같게** 둔다.
	   ───────────────────────────────────────── */

	/*
		섹션 위아래 리듬.

		⚠️ **부모 기본값은 `--space-16`(64) 이다.** 지금 두 사이트가 그 값으로
		   서 있어서다 — 이름을 더하면서 화면을 움직이지 않는다.
		   꾸러미는 80 이고, **그것을 쓸지는 자식이 값을 덮어 정한다.**
	*/
	--section-y: var(--space-16);   /* G-149  섹션 위아래 */

	/*
		20px — 8px 눈금의 반걸음.

		꾸러미 안내가 「8px system with a 4px half-step」이라 적어 뒀다.
		⚠️ 우리 눈금에 20 만 비어 있었다 (`space-4` 16 · `space-6` 24).
	*/
	--space-5: 1.25rem;             /* G-150  20px */

	/*
		UI 글자 — 단추·메뉴·입력칸.

		⚠️ **본문(16)과 부가(14) 사이다.** 꾸러미는 이 크기를 `--text-md` 로
		   부르고 단추·탭·입력칸에 쓴다. 우리 눈금에는 없던 칸이다.
		🔴 **`--text-*` 는 크기 전용이다** — 꾸러미가 같은 이름칸에 색도 섞는
		   것을 우리는 안 따라간다 (`3-54` 결론).
	*/
	--text-md: 0.9375rem;           /* G-151  15px */

	/*
		붙어 있는 머리의 반투명 바탕과 흐림.

		⚠️ **부모 기본값은 불투명이다.** 지금 두 사이트 머리가 불투명이라
		   그대로 둔다 — 자식이 덮어 반투명으로 간다.
		⚠️ **`--blur-panel` 이 없는 브라우저에서도 읽혀야 한다.** 흐림은
		   있으면 좋은 것이지 없으면 못 읽는 것이 아니다.
	*/
	--color-bg-translucent: var(--color-bg);          /* G-152  머리 바탕 */
	--blur-panel: none;                               /* G-153  머리 흐림 */

	/* ─────────────────────────────────────────
	   글자 굵기 — G-136~140 (`3-54` · 2026-08-31)

	   지금까지 `font-weight` 를 37곳에 숫자로 박아 왔다. 이름으로 바꿔 부른다.

	   ⚠️ **눈금은 쪼개지 않는다.** `--weight-light` 는 지금 **강의 한 곳**
	      (`.home-hero__thin`)만 쓰지만 부모에 둔다 — `R-1` 은 **기능을 가르는
	      규칙이지 눈금을 가르는 규칙이 아니다.** 눈금을 반쪽만 두면 다음 사람이
	      「300 은 왜 없지」 하고 숫자를 다시 박는다.
	   ⚠️ **꾸러미 램프에는 300 이 없다** (2026-08-31 · `3-54`). 우리 것을 지킨다.
	      Pretendard Variable 이 `45~920` 이라 300 이 실제로 그려진다.
	   ⚠️ `@font-face` 의 `font-weight: 45 920` 은 **가변 폰트 범위**다.
	      이 눈금과 무관하고 건드리지 않는다.
	   ───────────────────────────────────────── */

	--weight-light: 300;     /* G-136  가늘게 — 히어로 강조 (2-38) */
	--weight-regular: 400;   /* G-137  본문 (기준) */
	--weight-medium: 500;    /* G-138  라벨·부가 */
	--weight-semibold: 600;  /* G-139  소제목 */
	--weight-bold: 700;      /* G-140  제목·단추 */

	/* ─────────────────────────────────────────
	   자간 — G-141~142 (`3-54` · 2026-08-31)

	   한글은 자간을 넓히지 않는다. 제목에서만 살짝 좁힌다.

	   ⚠️ **꾸러미는 넷으로 나눴지만 우리 화면에서 갈리는 단계는 둘이다**
	      (`-0.02em` 8곳 · `-0.01em` 1곳 · 교회는 0곳 · 2026-08-31 전수).
	      꾸러미 값(`-0.025` · `-0.015` · `-0.005` · `0.08`)은 우리 둘과
	      하나도 안 맞는다 — **이름만 빌리고 값은 우리 것이다.**
	   ⚠️ `--tracking-tight` 는 **1곳뿐이지만 접지 않는다** — 접으면 화면이 움직인다.
	   ───────────────────────────────────────── */

	--tracking-heading: -0.02em;  /* G-141  제목 8곳 */
	--tracking-tight: -0.01em;    /* G-142  표 이름 1곳 (2-38) */

	/* ─────────────────────────────────────────
	   포커스 고리 — G-143 (`3-54` · 2026-08-31)

	   지금 5곳이 전부 같은 꼴이었다. 이름으로 가둔다.

	   🔴 **갈리는 값(색)은 `var` 로 밖에 두었다. 두께와 꼴만 가둔다** —
	      그래서 `type-*` 를 거절한 까닭에 안 걸린다. 자식이 색을 바꾸려면
	      `--color-primary` 를 덮으면 되고, **이 값을 다시 적을 일이 없다.**
	      (`type-*` 는 굵기·크기·줄간·글꼴을 한 값에 가둬서, 크기 하나를 바꾸려면
	       자식이 넷을 다 베껴야 했다 — 그것이 거절한 까닭이다.)

	   🔵 **`outline` 꼴을 지킨다** (2026-08-31 사람 결정). 까닭 셋 —
	      `overflow` 에 안 잘린다 · 지금 다섯 곳과 글자가 같아 화면이 안 움직인다 ·
	      **윈도우 고대비 모드에서 `box-shadow` 는 아예 안 그려지는데 `outline` 은 남는다.**
	   ───────────────────────────────────────── */

	--focus-ring: 2px solid var(--color-primary);  /* G-143 */

	/* ─────────────────────────────────────────
	   행간 — G-50~52

	   한글은 영문보다 행간이 넓어야 읽힌다.
	   설교 전문·강의 소개처럼 긴 글은 --leading-loose.
	   ───────────────────────────────────────── */

	--leading-tight: 1.25;   /* G-50 제목 */
	--leading-normal: 1.6;   /* G-51 본문 */
	--leading-loose: 1.8;    /* G-52 긴 글 */

	/* ─────────────────────────────────────────
	   간격 — G-60~68 · 4px 배수
	   ───────────────────────────────────────── */

	--space-1: 0.25rem;   /* G-60   4px */
	--space-2: 0.5rem;    /* G-61   8px */
	--space-3: 0.75rem;   /* G-62  12px */
	--space-4: 1rem;      /* G-63  16px */
	--space-6: 1.5rem;    /* G-64  24px */
	--space-8: 2rem;      /* G-65  32px */
	--space-10: 2.5rem;   /* G-154  40px 공지 상세 본문 위아래 (3-54 회차 5 · 좌표는 지시서 ⑤ 위임) */
	--space-12: 3rem;     /* G-66  48px  섹션 사이 (모바일) */
	--space-16: 4rem;     /* G-67  64px */
	--space-24: 6rem;     /* G-68  96px  섹션 사이 (데스크톱) */

	/* ─────────────────────────────────────────
	   레이아웃 — G-80~83

	   긴 글은 --container-narrow 를 쓴다.
	   한 줄이 너무 길면 읽기 어렵다.
	   ───────────────────────────────────────── */

	--container-narrow: 42rem;          /* G-80  672px  설교 전문 */
	--container-base: 64rem;            /* G-81 1024px  일반 페이지 */
	--container-wide: 80rem;            /* G-82 1280px  목록, 히어로 */
	--container-pad: var(--space-4);    /* G-83 좌우 여백 */

	/* ─────────────────────────────────────────
	   모서리 · 그림자 · 전환 — G-90~97

	   그림자는 절제해서 쓴다. 카드와 떠 있는 요소 정도.
	   ───────────────────────────────────────── */

	--radius-xs: 0.125rem;  /* G-130  2px 인증 화면의 각진 입력칸 (1-111) */

	/* G-133 손가락이 닿는 최소 크기 (G-104). 값을 여러 곳에 적으면 갈린다 (1-111) */
	--touch-target: 44px;

	/* ─────────────────────────────────────────
	   카카오 규격 색 — G-134 · G-135 (1-112)

	   ⚠️ **이 둘만 자식이 안 덮는다.** 다른 색은 부모에 이름, 자식에 값인데
	   이것은 **카카오가 정한 값**이라 사이트마다 다를 수 없다. 부모 값이 곧
	   기본값이라는 규칙(G-2)에 어긋나지 않는다 — 덮을 이유가 없을 뿐이다.
	   ───────────────────────────────────────── */

	--color-kakao: #FEE500;                  /* G-134 */
	--color-kakao-fg: rgba(0, 0, 0, .85);    /* G-135 */
	--radius-sm: 0.25rem;   /* G-90 */
	--radius: 0.5rem;       /* G-91 */
	--radius-lg: 0.75rem;   /* G-92 */
	/*
		🔴 **이름 둘을 가른다** (2026-09-01 회차 35 · 사람이 화면에서 잡았다).

		한 이름이 두 뜻을 가리키고 있었다 — 부모는 `9999px`(**알약**), 교회는
		`50%`(**정원**)로 덮어 놨다. **값이 아니라 뜻이 갈린 것**이라 `G-2`
		(부모는 이름 · 자식은 값)가 안 통했다. 가로가 긴 상자에 `50%` 를 주면
		**타원**이 된다 — 실측: 토글 트랙 42×24 가 가로 21 · 세로 12 로 그려졌다.

		🔴 **정사각형이 아닌 것에 `--radius-circle` 을 쓰면 타원이 된다.**
		   상자가 정사각인지 먼저 보고 고른다.

		  `--radius-full`    양 끝이 반원인 **알약**. 가로가 긴 상자에 쓴다
		                     (강의 커리큘럼 배지 39×21)
		  `--radius-circle`  **정원**. **정사각 상자에만** 쓴다
		                     (검색 단추 44 · 빠른 칸 아이콘 40 · 토글 손잡이 18 …)
	*/
	--radius-full: 9999px;  /* G-93  알약 — 가로가 긴 상자 */
	--radius-circle: 50%;   /* G-160 정원 — **정사각 상자에만** */

	/* G-155  대화상자 뒷막 (3-54 회차 6 · 좌표는 지시서 ⑤ 위임) */
	--color-overlay: rgb(0 0 0 / 0.5);

	/* G-157  로고 높이 — 자식이 값을 얹는다 (교회 34px · 3-54 모바일 회차) */
	--logo-height: 2rem;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);                             /* G-94 */
	--shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);   /* G-95 */
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1), 0 4px 6px rgba(0, 0, 0, .05); /* G-96 */

	--transition: 150ms ease;  /* G-97 */

	/* ─────────────────────────────────────────
	   아이콘 (G-131~132 · 1-111)

	   그림 파일을 안 쓴다 — 요청이 하나 늘고, 무엇보다 **색을 못 따라온다.**
	   마스크로 쓰면 `currentColor` 가 그대로 먹어서 자식 색을 따라간다.
	   ⚠️ 여기 있는 것은 **모양**이지 색이 아니다. 색은 쓰는 쪽에서 준다.
	   ───────────────────────────────────────── */

	/* G-131 눈 — 비밀번호 보기 */
	--icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");

	/* G-132 사선 그은 눈 — 비밀번호 숨기기 */
	--icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.6 6.1A9.7 9.7 0 0 1 12 6c6.4 0 10 6 10 6a17 17 0 0 1-3 3.7M6.6 6.6A17 17 0 0 0 2 12s3.6 7 10 7a9.7 9.7 0 0 0 4.6-1.1'/%3E%3Cpath d='M14.1 14.1a3 3 0 1 1-4.2-4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}

/*
	화면 크기 기준 — G-85~87 은 여기에 없다.

	  G-85  min-width: 640px   큰 휴대폰
	  G-86  min-width: 768px   태블릿
	  G-87  min-width: 1024px  데스크톱

	@media 조건에는 var() 를 쓸 수 없다. CSS 사양의 제약이다.
	미디어 쿼리 값은 base.css 에 직접 쓰고, 바꿀 일이 생기면
	design-system.md G-85~87 과 함께 고친다.

	모바일 우선 (G-3). 위 기준에서 넓혀간다.
*/