/* ============================================================================= * base-tokens — 전 서비스 공통 기본 골격의 **값** * 원칙 5("CSS는 간결하고 통일해서 재사용한다") 집행 · 계약 contracts/token-schema.md * 2026-09-17 수확 2a 신설. * * ── 이 파일이 무엇인가 ─────────────────────────────────────────────────────── * 이름만 공통이던 계약을 **기본값 공통**으로 격상한 실물이다. radius·스페이싱·타입 스케일· * 컨테이너 폭·브레이크포인트·버튼 위계·터치 타깃의 **값 자체**를 여기가 소유한다. * 여기 1곳을 고치면 전 서비스가 같이 움직인다. 그것이 목적이다. * * ── 레이어 규약 (사이트는 이 파일을 고치지 않는다) ────────────────────────── * 층 1 base-tokens.css ← 이 파일. 골격 값. **사이트가 이 값을 덮지 않는다.** * 층 2 /tokens.css ← 브랜드 색 슬롯만 재정의 + 사이트 고유 토큰(접두사 `---*`) * 층 3 컴포넌트 CSS ← 층 1·2의 var() 만 쓴다. 스케일 밖 생 px 금지(원칙 6) * * 무엇을 덮어도 되는가: * 덮어도 된다 — 색 슬롯 7개(아래 §3 "브랜드 오버라이드 슬롯"에 표시된 것만) * 덮으면 안 된다 — radius·스페이싱·타입 스케일·컨테이너 폭·브레이크포인트·터치 타깃 * (= 골격. 사이트마다 다르면 "들쭉날쭉"이 되고 원칙 1·3·6이 동시에 깨진다) * 모자라면 — **추가**한다(사이트 접두사 토큰). 골격 값을 바꾸지 않는다. 발산=추가만. * * ── 이름 축 ───────────────────────────────────────────────────────────────── * 이름은 contracts/token-schema.md 의 역할 이름 규약을 그대로 따른다(`--s1~--s6` · `--t1~--t6` · * `--r1`/`--r2` · `--bg`/`--surface`/`--ink`/`--ink-2`/`--line`/`--accent`/`--accent-ink`/ * `--good`/`--warn`/`--bad`). 시안(strategy2026/research/mockup-semku-naljja-h2.html)이 쓴 * 이름과의 대응은 §5 표에 적었다 — **별칭은 만들지 않는다**(같은 역할·두 이름 = 계약 위반이고 * 크로스레포 grep 이 죽는다). 시안 쪽 철자를 정본 철자로 고치는 것은 그 화면을 시공할 때 한다. * ============================================================================= */ :root { /* ── §1 골격 — 모양 ────────────────────────────────────────────────────── * radius 는 **1종**이다(--r1). --r2 는 스케일의 두 번째 단계가 아니라 "완전 원형"이라는 * 다른 모양이다(칩·토글·필). 중간 radius 를 새로 만드는 것이 값 종수가 늘어나는 첫 걸음이다. */ --r1: 10px; /* 카드·입력·버튼·패널 — 모서리는 이 하나뿐 */ --r2: 999px; /* 완전 원형(칩·토글·배지). 스케일 아님 */ /* ── §2 골격 — 공간(원칙 6: 배치는 스케일 위에서만) ─────────────────────── * 6단계 고정. margin·padding·gap 은 **전부** 이 중 하나다. 스케일 밖 생 px = 적색. * 4의 배수축을 유지하는 이유: 24 → 32 처럼 두 단계를 건너뛰어도 격자가 안 깨진다. */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; /* 기본 거터(본문 좌우 여백) */ --s5: 24px; --s6: 32px; /* ── §2-0 수직 밀도 4단 (원칙 6-1: 역할별 간격 1값 — 벙벙함 금지) ───────── * 세로 간격은 역할이 정한다. 같은 역할인데 화면·섹션마다 다른 값 = 적색. * 스케일(--s*)의 별칭이므로 새 값이 아니다 — 역할 이름으로만 쓰게 해 종수를 잠근다. */ --v-line: var(--t3-lh); /* 본문 행간(연속 읽기) — §3 본문 행간의 역할 별칭(값 정본은 --t3-lh 하나, 중복 정의 금지) */ --v-item: var(--s2); /* 항목 간(리스트·폼 행) */ --v-block: var(--s4); /* 블록 간(같은 섹션 안 덩어리) */ --v-section: var(--s6); /* 섹션 간(주제 전환) — 이보다 넓은 세로 여백은 정당 사유 필요 */ /* 앵커 착지 여유 — 고정 헤더가 생겨도 착지 제목이 가려지지 않게(09-17 semku #tools-* 점검에서 예방 박음). * 값은 스케일 별칭. 고정 헤더 도입 사이트는 층 2에서 헤더 높이+--s2 로 올린다. */ --anchor-top: var(--s4); /* ── §2-1 컨테이너·거터·터치 ─────────────────────────────────────────────── */ --maxw: 760px; /* 본문 컨테이너 최대 폭 — 헤더 안쪽과 main 이 **같은 값**을 쓴다(원칙 1) */ --gutter: var(--s4); --touch: 44px; /* 최소 터치 타깃. 손가락으로 누르는 것은 전부 이 이상(높이·폭) */ /* ── §3 골격 — 글자(개수 상한 6) ───────────────────────────────────────── * **6단계를 넘기지 않는다.** 시안 실물이 이 상한이 필요한 이유의 증거다: 스케일 4종을 * 선언해 놓고 17px·18px·28px·11px 를 생 px 로 더 썼다(= 실질 8종). 화면마다 글자 크기가 * 제각각이면 아마추어로 보인다(원칙 3). 새 크기가 필요하면 먼저 기존 6종으로 안 되는지 본다. */ --t1: 11px; /* 배지·주석 */ --t2: 13px; /* 보조 문구·라벨·네비 */ --t3: 15px; /* 본문 기준 */ --t4: 22px; /* 소제목 */ --t5: 28px; /* 페이지 제목 h1 */ --t6: 44px; /* 화면 최대 숫자(결과 위계 1위) */ --t3-lh: 1.6; /* 본문 행간 */ --t5-lh: 1.2; /* 제목류 행간 */ --t6-lh: 1.05; /* ── §4 브레이크포인트 ─────────────────────────────────────────────────── * **2개뿐이다.** 값을 여기 적어 두지만 `@media` 는 var() 를 못 읽는다(W3C 현행) — * 미디어 쿼리에는 아래 값을 **그대로** 적는다. 다른 숫자가 나타나면 그 자리가 발산이다. * --bp-sm: 560px 1열 접힘(2열 그리드 → 1열) * --bp-md: 860px 컨테이너 폭보다 넓은 레이아웃(사이드·2단)이 있는 사이트만 사용 * 선언은 문서용이다(도구가 읽는 자리이기도 하다 — frame-invariance 게이트). */ --bp-sm: 560px; --bp-md: 860px; /* ── §5 색 — 중립 슬롯 ─────────────────────────────────────────────────── * 여기 값은 **중립 자리표시자**다. 브랜드 색은 층 2(사이트 tokens.css)에서 같은 이름을 * 재정의한다 — 새 이름을 만들지 않는다. 층 2 를 안 깔아도 화면이 읽히는 것이 이 값들의 몫이다. * 덮어도 되는 슬롯: --accent · --accent-ink · --accent-soft · --good · --warn · --bad * (+ 브랜드 배경이 있는 사이트는 --bg · --surface 까지) * 덮으면 안 되는 것: 글자/경계 대비를 무너뜨리는 --ink · --ink-2 · --line 의 임의 조정. * 대비가 필요해 바꿔야 하면 층 2 에서 **쌍으로**(배경+글자) 바꾼다. */ --bg: #f7f7f8; /* 바탕 */ --surface: #ffffff; /* 카드·헤더 면 */ --ink: #1b1b1f; /* 글자 1 */ --ink-2: #6b6b73; /* 글자 2(보조) */ --line: #e3e3e7; /* 경계 */ --accent: #3a3a42; /* 강조 — **사이트가 반드시 덮는 자리**(중립 회색은 브랜드가 아니다) */ --accent-ink: #ffffff; /* 강조 위 글자 */ --accent-soft: #eeeef1; /* 강조 옅은 면(결과 패널 등) */ --good: #2e6b52; --warn: #8a6100; --bad: #9a2f2f; --shadow-1: 0 1px 2px rgba(0, 0, 0, .06); --shadow-2: 0 6px 24px rgba(0, 0, 0, .10); } /* 다크는 **같은 이름을 재정의만** 한다(새 이름 금지 — token-schema 이름 규약). * 골격(§1·§2·§3·§4)은 다크에서도 그대로다: 어두워진다고 여백·글자 크기가 변하면 그것이 발산이다. */ @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1c; --surface: #242427; --ink: #ececef; --ink-2: #a2a2aa; --line: #37373c; --accent: #c9c9d2; --accent-ink: #1e1e21; --accent-soft: #303036; --good: #7fc0a4; --warn: #d8ab4a; --bad: #e08b8b; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5); --shadow-2: 0 6px 24px rgba(0, 0, 0, .55); } } /* ============================================================================= * §6 컴포넌트 층 — 버튼 위계 **3종만** (원칙 9: 같은 역할은 같은 모양) * * 주(채움) · 보조(외곽선) · 텍스트. 화면마다 새 모양을 발명하지 않는다. * 한 화면에 같은 역할·다른 모양이 2개 있으면 적색이다. 네 번째 위계가 필요하다고 느껴지면 * 그것은 대개 **위계 설계가 잘못된 것**이지 새 버튼이 필요한 것이 아니다. * * 상태 정합(원칙 8): 대상이 없으면 버튼도 없다. 있는데 아직 못 누르는 것은 `disabled` 로 * **모양이 말하게** 둔다(안내 문장으로 설명하지 않는다 — 글 안 읽는 사람에겐 문장 상자=빈 상자). * ============================================================================= */ .btn { font: 600 var(--t3) / 1 inherit; font-family: inherit; min-height: var(--touch); padding: var(--s3) var(--s4); border-radius: var(--r1); cursor: pointer; border: 1.5px solid transparent; background: transparent; } .btn-pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } /* 주 — 화면당 1개 */ .btn-sec { background: transparent; color: var(--accent); border-color: var(--accent); } /* 보조 */ .btn-txt { background: transparent; color: var(--ink-2); border-color: transparent; padding-inline: var(--s2); } /* 텍스트 */ .btn:disabled { opacity: .35; cursor: default; } /* 누를 수 있는 것은 전부 터치 타깃 이상이다(버튼만이 아니다 — 토글·칩·아이콘 링크 포함). */ .tap { min-height: var(--touch); min-width: var(--touch); } /* ============================================================================= * §7 시안 ↔ 정본 이름 대응 (strategy2026/research/mockup-semku-naljja-h2.html) * 시안 정본 비고 * --r --r1 시안은 원형에 생 99px 를 썼다 → --r2 * --fs-sm --t2 * --fs-md --t3 * --fs-lg --t4 * --fs-xl --t6 * (없음) --t1 --t5 시안이 생 px 로 쓰던 11px·28px 를 스케일로 흡수 * --card --surface * --sub --ink-2 * --ok --good * --maxw --maxw 동일 * --s1~--s6 --s1~--s6 동일(값도 동일: 4/8/12/16/24/32) * 시안에서 값이 바뀐 것: 없음(골격 값 전부 보존). 색은 semku 브랜드색이라 중립 슬롯으로 내렸다 — * semku 층 2 가 시안의 `#6d3a5d` 계열을 다시 올린다. * ============================================================================= */