/* tokens.css — 교회 사이트 값 (3-3) 🔴 **이 값은 교회 일반 기본값이 아니라 고산 값이다. 다음 교회 때 여기가 갈린다.** (`R-20`) **모든 것은 다음 교회도 쓴다. 한 교회 전용은 없다.** 이름·말·그림은 설정과 콘텐츠로 들어가 그 규칙을 지키는데, **색은 아직 이 파일에 박혀 있다.** 그것을 **알고 미루는 것**으로 항목 `3-59` 에 세워 뒀다 — 취소가 아니라 미루기다. 다음 교회가 붙는 날 할 일은 둘 중 하나다: · 이 일곱 값을 사이트 설정으로 내린다 (`3-59` 가 묻는 것) · 또는 이 파일만 갈아 끼운다 — ⚠️ **`themes/church` 를 복사하지 않는다** (`R-1`) ⚠️ **모서리도 같다.** 지금은 부모 기본값(`--radius-xs/sm/lg`)을 그대로 쓰는데 **받은 디자인은 셋 다 `0`(각짐)이다** (2026-08-31 실측 · `3-54`). **각진 모서리는 고산 디자인의 선택이지 교회 일반이 아니다** (`R-20`) — 여기서 `0` 으로 덮게 되는 날, 그 값도 「교회 기본값」이 아니라 그 교회 값이다. ⚠️ **이 머리글의 교회 이름은 `check.sh` V-18 의 예외를 탄다** — 좌표(`R-20`)를 단 줄만 면제된다. **좌표를 지우면 자가 운다.** 그것이 이 예외의 값이다. 부모 `tokens.css` 가 **이름과 기본값**을 정하고, 여기서는 **값만** 덮는다. 새 이름을 여기서 만들지 않는다 → design-system.md G-2 · check.sh V-7 브랜드 — 메인 #00B1E8 (밝은 시안) · 서브 #272727 · Pretendard ── ⚠️ 브랜드 색을 그대로 못 얹었다 ────────────── `#00B1E8` 은 **흰 글자와 2.48:1** 이다. 부모 기계는 `--color-primary` 를 「흰 글자를 얹는 어두운 색」으로 전제한다 — 버튼 배경(`base.css` .button)과 흰 배경 위 링크 색(`a`)이 둘 다 그 토큰 하나를 쓴다. 그대로 얹었으면 **두 사이트가 아니라 교회 전체가 `G-115`(4.5:1) 미달**이 됐다. 오류가 안 나서 아무도 모른다 — 대비는 재야 보인다. 같은 색상(H 194.2 · S 100%)에서 명도만 내려 통과 지점을 찾았다. L 36% #008CB8 흰 글자 3.86:1 L 34% #0084AD 흰 글자 4.27:1 L 32% #007DA3 흰 글자 4.73:1 ← 브랜드에 가장 가까운 통과 지점 L 28% #006D8F 흰 글자 5.86:1 ← hover 🔵 **2026-08-31 에 꾸러미 램프 안의 `sky-700 #06769E` 로 갈았다** (`3-55` ㉢ · 흰 글자 **5.13:1**). 아래 램프 표와 그때의 판단은 **지우지 않는다** — 손으로 명도를 내려 찾은 기록이고, 꾸러미가 같은 자리에 이미 `--text-brand`·`--text-link` 를 `sky-700` 으로 두고 있었음을 나중에 재서 알았다. **어긋나 있던 것은 채움뿐이었다.** ⚠️ **순수 `#00B1E8` 은 지금 화면 어디에도 안 나온다.** 그 대가를 알고 골랐다 (`3-3` 갈림 ①). 순수 시안은 **어두운 글자와 함께**(6.01:1)만 설 수 있는데, 그러려면 `--color-on-primary` 를 부모에 더하고 `.button` · `.button:hover` · 페이지 넘김 현재 칸을 함께 유도해야 한다. 특히 **hover 배경에 어두운 글자는 2.3:1** 이라 쌍을 다시 짜야 한다. 쓸 자리(히어로 장식 등)가 정해지면 그때 `--color-accent` 를 **부모에** 이름부터 더한다. 지금 만들면 쓰는 곳 없는 이름이 된다 (`3-37`). ── 안 덮은 것도 판단이다 ──────────────────────── --color-text-muted #6B7280 유지. 흰 배경 4.83:1 · 상자 배경 4.63:1 통과 --color-bg-subtle 유지. 등록 안내 상자는 **강조하지 않기로 했다** (`3-22` ② · `3-3` 갈림 ②) — 누를 것이 없는 상자에 「여기를 봐라」를 걸지 않는다 나머지 회색·크기·간격 브랜드가 정하지 않은 축이다. 부모 값이 그대로 맞다 **덮을 값이 없으면 줄을 만들지 않는다.** 같은 값을 다시 적으면 나중에 부모를 고쳐도 여기가 안 따라온다. */ :root { /* ── 색 — G-10~24 ─────────────────────── */ /* 브랜드 시안을 흰 글자가 서는 명도까지 내린 값 (위 표 L 32%) */ --color-primary: #06769E; --color-primary-hover: #0D5B78; /* 채움·배지. 어두운 글자와 함께 쓴다. ⚠️ 값이 `#CCF3FF` → `#E8F8FE` 로 바뀌며 본문색과 **12.68 → 13.72:1** (2026-08-31). ⚠️ **교회 화면에서 이 토큰을 부르는 자리는 0곳이다** (2026-08-31 전수) — 값만 맞춰 두었다. 강의는 세 곳이 쓴다. */ --color-primary-light: #E8F8FE; /* 서브 컬러가 본문색이다. 흰 배경 14.94:1 (부모 #1F2937 은 14.68). ⚠️ **이 값은 안 바꿨다.** 어두운 바탕(`--color-bg-inverse`)만 갈렸다. */ --color-text: #272727; /* 어두운 표면. 지금 쓰는 곳은 홈 히어로 하나다 (`.hero--image`) — 그림 위에 흰 글자를 얹는 자리라 바탕이 어두워야 한다. ⚠️ ~~**본문색과 같은 값이다.** 기본 글자색이 이 바탕 위에 얹히면 글자가 사라진다.~~ **그 위험이 사라졌다** (2026-08-31 · `3-55` ㉢) — `#272727` 에서 **`#0A2337`(navy-800)** 으로 갈면서 본문색과 **다른 값**이 됐다. 이제 기본 글자색(`#272727`)이 이 바탕에 얹혀도 **1.34:1** 이라 여전히 안 보이지만, **「같은 값이라 사라진다」는 꼴은 아니다.** `.hero--image .hero__body` 가 흰 글자를 명시하는 것은 그대로다 (16.05:1). */ --color-bg-inverse: #0A2337; /* 어두운 바닥 위의 링크 (`G-25` · `3-50` · 2026-08-27). 브랜드색을 그대로 쓰면 위 바탕에서 어두웠다. 흰색을 40% 섞어 올렸다 — 목표 4.5 위에 여유를 둔다. ⚠️ **바탕이 바뀌어 수가 올라갔다** (2026-08-31 · `3-55` ㉢) — `--color-bg-inverse` 가 `#272727` → `#0A2337` 이 되면서 **6.18:1 → 6.64:1** 이다. **이 값(`#66B1C8`)은 안 바꿨다.** (그때 잰 값: `#007DA3` 을 그대로 얹으면 `#272727` 위에서 3.17:1 이었다) ⚠️ **여유가 필요한 까닭**: 히어로는 그림을 `opacity: .55` 로 덮어 실제 바탕이 이 값보다 **밝을 수 있다.** 밝아지면 대비가 내려간다. ⚠️ **밝은 배경에 쓰지 않는다** — 흰 바탕에서는 2.42:1 이다. */ --color-link-invert: #66B1C8; /* ── 글꼴 — G-30~32 ───────────────────── */ /* Pretendard 를 맨 앞에 둔다. 뒤는 부모 스택 그대로 — 글꼴이 아직 안 왔거나 못 받았을 때 떨어질 자리다. ⚠️ **이 값만으로는 안 보인다.** `@font-face` 가 있어야 한다 → `assets/css/fonts.css` (자기 서버에서 낸다 · `3-3` 갈림 ③) */ --font-body: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 제목도 같은 글꼴이다. 부모가 이미 --font-body 를 가리키지만 자식에서 값을 덮었으므로 여기서 다시 가리키지 않아도 따라온다 */ /* ───────────────────────────────────────── ── 모양 · 눈금 — 디자인 꾸러미 반영 1 (`3-54` · 2026-08-31) 🔴 **여기부터는 값만 덮는다. 새 이름을 만들지 않는다** (`G-2`). 부모는 이 회차에 **0줄** 건드렸다. ⚠️ **꾸러미 눈금과 우리 눈금이 세 자리 어긋난다.** 부모에 새 이름을 못 만드는 회차라 **가장 가까운 우리 이름으로 앉히고 어긋남을 적는다:** 꾸러미 11(micro)·13(caption) → --text-xs 를 13 으로 (11 자리도 13 · 2px) 꾸러미 15(ui) → --text-base 16 그대로 (1px) 꾸러미 섹션 80 → --space-16 64 그대로 (16px) 셋 다 **이름이 없어서 생긴 어긋남**이지 값을 잘못 고른 것이 아니다. `--text-caption`·`--text-ui`·`--section-y` 를 부모에 더할지는 사람이 정한다. ───────────────────────────────────────── */ /* ── 모서리 — 전부 각지다 ────────────────── 꾸러미 안내가 한 줄로 적어 뒀다: 「Every rectangle is square (0) — the only curve is a true circle」. 유일한 곡선은 **진짜 원**이다. ⚠️ **각진 모서리는 고산 디자인의 선택이지 교회 일반이 아니다** (`R-20` · `3-59`) */ --radius-xs: 0; --radius-sm: 0; --radius: 0; --radius-lg: 0; /* 🔵 **회차 35 에 뜻을 갈랐다.** 전에는 이 자리에서 `--radius-full` 을 `50%` 로 덮어 「알약」이라는 이름에 「정원」을 넣고 있었다 — 가로가 긴 상자(토글 트랙 42×24)가 **타원**이 됐다. `--radius-full` 이 사이트에서는 **각진다**(0). 「모든 사각형은 각지고 유일한 곡선은 정원」이 시안 규칙이다 `--radius-circle` 정원. 정사각 상자에만 (부모 값과 같지만 **뜻이 여기서도 참**이라 적어 둔다) */ --radius-full: 0; /* 각진다 — 시안 규칙 */ --radius-circle: 50%; /* 아이콘 원판 · 라디오 · 토글 손잡이 — 진짜 원 */ /* ── 판 — 1280 / 20 ─────────────────────── 꾸러미: 1200px max · 20px gutter · 80px section rhythm 🔵 **사람이 1280 으로 정했다** (2026-09-01 회차 21). 시안 수치(1200)에서 **80px 벗어난 자리다 — 왜 갈랐는지 여기 남긴다.** 머리와 바닥은 부모 파트라 `container--wide`(1280)를 쓰고 본문만 `container`(1200)를 써서 **좌우가 40px 씩 어긋나 보였다**(실측: 1440 에서 머리 80–1360 · 본문 120–1320). 사람이 화면에서 잡았고 **「바디를 머리·바닥에 맞춘다」**고 정했다 — 머리·바닥은 안 좁힌다. ⚠️ **시안의 수치(1200)는 못 지키고 성질(폭은 하나)은 지킨다.** 🔴 **그래서 `.container` 와 `.container--wide` 가 이 사이트에서 같은 값이다.** 둘이 같은 것이 **의도**다 — 「왜 둘이 같지」 하고 한쪽을 되돌리지 마라. 마크업의 `container--wide` 도 떼지 마라(부모 파트라 **강의가 그 클래스를 쓴다** — 강의는 부모 값 1024/1280 그대로다). ⚠️ `--container-narrow`(800)는 안 건드렸다 — 긴 글 넷이 그것으로 돈다. */ --container-base: 80rem; /* 1280px — 본문 판 (머리·바닥과 같은 값) */ --container-narrow: 50rem; /* 800px — 읽는 단 */ --container-pad: 1.25rem; /* 20px 거터 */ /* ── 글자 크기 — 꾸러미 눈금에 맞춘 셋 ────── */ --text-xs: 0.8125rem; /* 12 → 13px 캡션 (micro 11 자리도 여기로) */ --text-3xl: 2rem; /* 30 → 32px h1 */ --text-5xl: 2.8125rem; /* 48 → 45px 히어로 */ --logo-height: 4rem; /* G-157 64px 사람 결정 (2026-09-01 둘째) — 192×64 · 헤더 96 과 한 쌍 */ --header-height: 6rem; /* G-158 96px 로고 64 + 위아래 숨통 16 (회차 27 에 이름을 줬다 — 오버레이 머리가 히어로 위를 비울 때 같은 값을 읽는다) */ --header-height-narrow: 4.125rem; /* G-159 66px **좁은 화면 머리 높이 — 실측해서 적었다** (회차 30 · 320·640 둘 다 66): 로고 44(`--logo-height` 좁은 값) + 검색 단추 들어올림 6(`--action-lift`) + 위아래 8×2. ⚠️ 저 셋 중 하나가 바뀌면 **이 값도 다시 재야 한다** — 미디어 조건은 계산식을 못 받아 한 자리에 못 묶는다 */ /* ── 붙어 있는 머리의 반투명 + 흐림 (G-152~153) ── 부모 기본값은 불투명이다. 교회만 반투명으로 간다. ⚠️ **흐림이 없는 브라우저에서도 읽힌다** — 92% 는 거의 불투명하다. */ --color-bg-translucent: rgba(255, 255, 255, .92); --blur-panel: saturate(180%) blur(16px); /* ── 그림자 — navy 를 섞는다 ─────────────── 꾸러미 안내: 「Navy-tinted shadows」. 검정 대신 바탕색 계열을 섞으면 어두운 판 위에서 덜 탁하다 */ --shadow-sm: 0 2px 6px rgba(6, 23, 37, .08); --shadow: 0 8px 24px rgba(6, 23, 37, .10); --shadow-lg: 0 20px 48px rgba(6, 23, 37, .14); } /* 좁은 화면 글자 눈금 — 한 단 내린다 (`3-54` 모바일 회차 ㉢ · 2026-09-01). 꾸러미는 1280 전용이라 모바일 눈금이 없다 — 우리가 정했다: display(5xl) 45→36 · h1(4xl) 36→32 · h2(3xl) 32→24. 본문은 안 줄인다 — 읽는 글자를 줄이는 것은 미봉이다 (G-156 표). */ @media (max-width: 47.9375rem) { :root { --text-5xl: 2.25rem; --text-4xl: 2rem; --text-3xl: 1.5rem; /* * 로고만은 80 을 못 따라간다 — 240×80 은 320 화면에 물리적으로 * 안 들어간다(서랍·검색 88 + 여백 40 만으로 128). 실측 최대가 * 44(헤더 61 유지 · 비율 유지)다. 사람이 다르게 정하면 이 줄이다. */ --logo-height: 2.75rem; } }