/* ───────────────────────────────────────────────────────────── ★이 파일은 디자인팀 산출물 «_디자인_tokens.css» 를 그대로 옮겨 온 것이다. (원본 : E:\클로드\_runin\_디자인_tokens.css · 2026-08-18) 퍼블리싱팀은 원본을 «고치지 않는다». 값이 바뀌면 이 파일을 다시 덮어쓴다. 아래 「퍼블 보강」 블록만 퍼블리싱팀 소관이다. ───────────────────────────────────────────────────────────── */ /* ============================================================================ 런닝인사이드 — 디자인 토큰 디자인팀 · 2026-08-18 · 짝 문서 : _디자인_시스템.md ★규칙 ① 총괄 브리프 §6 의 «계약 토큰» 은 이름을 바꾸지 않는다. 값만 여기서 정한다. ② 색은 «전부» 이 파일에만 있다. 화면 파일에 색 리터럴(#xxxxxx)을 쓰지 마라. ③ 접수상태 색은 «아직 결정 전» 이라 두 벌을 다 실어 두었다. 바꾸는 법 : ← 이 한 곳만 고친다 (기본값 = a = 기획서안. 속성이 없으면 a 가 적용된다) ④ 다크모드는 1차 범위 밖이다. prefers-color-scheme 블록을 «두지 않았다». 나중에 넣더라도 이 파일 «한 곳» 만 늘리면 되게 색을 전부 여기 모아 두었다. ★대비율은 눈으로 고르지 않았다. 파이썬으로 전 조합을 계산했고 본문 4.5:1 · 큰글자/비텍스트 3:1 «실패 0건» 이다. 표는 _디자인_시스템.md §3. ============================================================================ */ :root { /* ── 1. 계약 토큰 : 중립 ────────────────────────────────────────────── 대비율 (계산값) text / bg 16.61:1 text / surface 17.96:1 text-sub / bg 6.25:1 text-sub / surface 6.76:1 */ --ri-bg: #F5F6F8; /* 페이지 바탕 — 카드를 떠 보이게 하는 아주 옅은 회색 */ --ri-surface: #FFFFFF; /* 카드·시트·입력 바탕 */ --ri-line: #DCE0E6; /* 헤어라인. ★장식용이다(1.33:1). 이것«만»으로 경계를 만들지 마라 — 카드 경계는 그림자와 함께 쓴다 */ --ri-text: #14171C; /* 본문·제목 */ --ri-text-sub: #545C68; /* 날짜·지역·거리 같은 메타. 4.5:1 을 넘는 «읽는» 회색 */ /* ── 2. 계약 토큰 : 브랜드 ──────────────────────────────────────────── brand-ink / brand 9.76:1 · brand / surface 9.76:1 ★왜 짙은 청록인가 — 상태색이 파랑·초록·주황·보라·빨강·회색을 «전부» 쓴다. 브랜드가 그중 어느 색을 잡아도 상태와 싸운다. 그래서 색상(hue)이 아니라 «명도» 로 비켜섰다. 짙어서 상태 배지와 절대 헷갈리지 않고, 버튼으로 쓰면 흰 글자가 9.76:1 로 얹힌다. */ --ri-brand: #0D4A5C; --ri-brand-ink: #FFFFFF; /* 브랜드색 «위에» 올라가는 글자 */ /* ── 3. 계약 토큰 : 접수상태 6색 ────────────────────────────────────── 아래 --ri-st-* 여섯 개가 화면이 실제로 읽는 이름이다. 값은 §3-A / §3-B 두 세트에서 골라 꽂는다(파일 아래쪽 스위치 블록). 플러그인 쪽 대응 : runin_status_colors() 의 option 'runin_status_colors' scheduled 접수예정 / open 접수중 / closing 마감임박 / extra 추가접수 / closed 접수마감 / finished 종료 */ /* 세트 A — 기획서안 (초록 접수중) · 기본값 */ --ri-a-scheduled: #1D4ED8; /* 파랑 흰글자 6.70 · 페이지 6.20 */ --ri-a-open: #15803D; /* 초록 흰글자 5.02 · 페이지 4.64 */ --ri-a-closing: #C2410C; /* 주황 흰글자 5.18 · 페이지 4.79 */ --ri-a-extra: #A21CAF; /* 보라 흰글자 6.32 · 페이지 5.85 */ --ri-a-closed: #374151; /* 진회색 흰글자 10.31 · 페이지 9.53 */ --ri-a-finished: #646B78; /* 연회색 흰글자 5.36 · 페이지 4.96 */ /* 세트 B — 사장님안 (빨강 접수중 · 파랑 마감) */ --ri-b-scheduled: #475569; /* 슬레이트 흰글자 7.58 · 페이지 7.01 */ --ri-b-open: #C81E1E; /* 빨강 흰글자 5.74 · 페이지 5.31 */ --ri-b-closing: #854D0E; /* 진한주황 흰글자 6.85 · 페이지 6.34 */ --ri-b-extra: #A21CAF; /* 보라 흰글자 6.32 · 페이지 5.85 (두 안 공통) */ --ri-b-closed: #1D4ED8; /* 파랑 흰글자 6.70 · 페이지 6.20 */ --ri-b-finished: #646B78; /* 연회색 흰글자 5.36 · 페이지 4.96 */ /* ── 4. 계약 토큰 : 치수 ───────────────────────────────────────────── */ --ri-radius: 12px; --ri-gap: 12px; --ri-container: 1120px; /* ── 5. 계약 토큰 : 글꼴 ────────────────────────────────────────────── ★웹폰트를 «싣지 않는다». 근거는 _디자인_시스템.md §4 (200KB 예산 계산). 한글 웹폰트는 1 weight 만 실어도 목록 화면 예산의 절반 이상을 먹는다. 기기에 Pretendard 가 깔려 있으면 그걸 쓰고, 없으면 OS 기본 한글꼴로 내려간다. 내려가도 «글자가 깨지지 않는다» — 이게 시스템 스택의 요점이다. */ --ri-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", /* iOS · macOS 한글 */ "Pretendard Variable", Pretendard, /* 사용자 기기에 «이미» 있으면 사용 */ "Noto Sans KR", /* Android 기본 한글(Noto Sans CJK KR) */ "Malgun Gothic", "맑은 고딕", /* Windows */ system-ui, "Segoe UI", Roboto, sans-serif; /* ══════════════════════════════════════════════════════════════════════ 6. 확장 토큰 — «계약 밖» 이다. 디자인팀이 추가했다. 총괄 승인 전이므로 §6 계약에 넣을지는 ★결정 요청에 올려 두었다. 퍼블팀은 이 이름들도 그대로 쓰면 된다(값만 여기서 바뀐다). ══════════════════════════════════════════════════════════════════════ */ /* 6-1 중립 보강 */ --ri-surface-2: #EDEFF3; /* 칩 바탕·표 줄무늬. text 15.60 · text-sub 5.87 */ --ri-line-strong: #818A99; /* ★입력칸·체크박스 테두리 전용. 3.48:1 로 3:1 통과. --ri-line 은 1.33:1 이라 «폼에 쓰면 위반» 이다 */ --ri-text-inv: #FFFFFF; /* 짙은 면 위 글자 */ --ri-brand-weak: #E2EFF3; /* 브랜드 연한 면. brand 글자가 8.31:1 로 얹힌다 */ --ri-brand-hover: #0A3B49; /* 버튼 hover/active */ --ri-danger: #B91C1C; /* 오류 문구 전용. 상태색과 «무관» 하다 (흰글자 6.47) */ /* 6-2 간격 — 4px 배수 한 줄기 */ --ri-space-1: 4px; --ri-space-2: 8px; --ri-space-3: 12px; --ri-space-4: 16px; --ri-space-5: 20px; --ri-space-6: 24px; --ri-space-7: 32px; --ri-space-8: 40px; --ri-space-9: 48px; /* 6-3 라운드 */ --ri-radius-sm: 8px; --ri-radius-lg: 16px; --ri-radius-pill: 999px; /* 6-4 그림자 — 두 단계뿐이다. 늘리면 화면이 지저분해진다 */ --ri-shadow-1: 0 1px 2px rgba(20,23,28,.06), 0 1px 1px rgba(20,23,28,.04); --ri-shadow-2: 0 4px 16px rgba(20,23,28,.10); /* 6-5 글자 크기 — 모바일 기준. 768px 이상에서 base 가 한 칸 올라간다 */ --ri-fs-xs: 12px; /* 캡션·배지 */ --ri-fs-sm: 13px; /* 메타(날짜·지역) */ --ri-fs-base: 15px; /* 본문 */ --ri-fs-lg: 17px; /* 카드 제목 */ --ri-fs-xl: 20px; --ri-fs-2xl: 24px; --ri-fs-3xl: 28px; /* 상세 페이지 대회명 */ /* 6-6 행간 — 한글은 라틴보다 «넓게» 잡아야 읽힌다 */ --ri-lh-tight: 1.35; /* 제목 */ --ri-lh-base: 1.6; /* 본문 */ /* 6-7 터치 타깃 — iOS 44 · Android 48 권장의 하한 */ --ri-tap: 44px; /* 6-8 포커스 링 — 키보드 사용자에게 «반드시» 보여야 한다 */ --ri-focus-w: 2px; --ri-focus-o: 2px; } /* ══════════════════════════════════════════════════════════════════════════ ★ 접수상태 색 스위치 — «여기 한 곳» 만 바뀐다 기본(속성 없음) = 세트 A. 세트 B 로 가려면 ══════════════════════════════════════════════════════════════════════════ */ :root, :root[data-ri-status-set="a"] { --ri-st-scheduled: var(--ri-a-scheduled); --ri-st-open: var(--ri-a-open); --ri-st-closing: var(--ri-a-closing); --ri-st-extra: var(--ri-a-extra); --ri-st-closed: var(--ri-a-closed); --ri-st-finished: var(--ri-a-finished); } :root[data-ri-status-set="b"] { --ri-st-scheduled: var(--ri-b-scheduled); --ri-st-open: var(--ri-b-open); --ri-st-closing: var(--ri-b-closing); --ri-st-extra: var(--ri-b-extra); --ri-st-closed: var(--ri-b-closed); --ri-st-finished: var(--ri-b-finished); } /* 768px 이상에서 본문 한 칸 키움 — 모바일이 기준, 데스크톱이 «확장» 이다 */ @media (min-width: 768px) { :root { --ri-fs-base: 16px; --ri-fs-lg: 18px; --ri-fs-3xl: 32px; } } /* 애니메이션을 꺼 달라고 한 사용자 존중 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ══════════════════════════════════════════════════════════════════════════ 7. 상태 → 화면에 꽂는 헬퍼 카드/배지에 .ri-st-open 같은 클래스 하나만 붙이면 --ri-st 가 정해진다. 덕분에 화면 파일에 색 이름이 «한 번도» 나오지 않는다. ══════════════════════════════════════════════════════════════════════════ */ .ri-st-scheduled { --ri-st: var(--ri-st-scheduled); } .ri-st-open { --ri-st: var(--ri-st-open); } .ri-st-closing { --ri-st: var(--ri-st-closing); } .ri-st-extra { --ri-st: var(--ri-st-extra); } .ri-st-closed { --ri-st: var(--ri-st-closed); } .ri-st-finished { --ri-st: var(--ri-st-finished); } /* ══════════════════════════════════════════════════════════════════════════ ★퍼블 보강 — 디자인팀 계약 «밖» 의 이름을 app.css 가 쓰기 위한 이음매. 새 색을 만들지 않는다. 위에서 정한 값을 «다른 이름으로» 가리키기만 한다. 디자인팀이 이 이름들을 정식 채택하면 이 블록은 통째로 지운다. ══════════════════════════════════════════════════════════════════════════ */ :root { --ri-shadow: var(--ri-shadow-1); --ri-focus: var(--ri-brand); /* 포커스 링 색 = 브랜드 */ }