/* ============================================================================ onae-tokens.css — 오늘과내일 디자인 시스템 v1 정본 토큰 (단일 CSS 파일) ---------------------------------------------------------------------------- 정본 출처 : 0.ceo-info/14.design-mo/03_design-system-v1.md 「부록 — :root 토큰」 생성 : 2026-07-28 버전 : v1.0.0 해시 관리 : tools/token-hash.txt (sha256) · tools/check-tokens.bat 로 사본 검증 ■ 이 파일의 지위 - 디자인 토큰은 더 이상 "문서"가 아니라 "의존물(dependency)"이다. - 각 사이트는 이 파일을 **그대로 복사**해서 자기 배포 루트에 두고 한다. - 값을 사이트에서 고치면 안 된다. 고쳐야 하면 정본(이 파일)을 고치고 token-hash.txt 를 갱신한 뒤 전 사이트에 재배포한다. ■ 적용 방법 (사이트에서) <- 사이트 자체 CSS 보다 "먼저" 그 다음 사이트 CSS 에서 색·radius·spacing 은 var(--brand) 처럼 토큰만 참조한다. ■ 안전 규칙 (중요) - :root 변수는 "추가"만 하고 기존 사이트 변수명을 덮어쓰지 않는다. (사이트별 --accent, --bg 등이 이미 있으면 이 파일이 나중에 로드될 경우 값이 바뀔 수 있으므로, 반드시 사이트 CSS 보다 **먼저** 로드하고 사이트 CSS 에서 명시적으로 var(--brand) 등으로 갈아끼우는 순서로 진행한다.) - 아래 유틸리티 클래스(.onae-*)는 **선택 적용**이다. 링크만 해서는 기존 화면이 절대 바뀌지 않는다(모든 유틸은 onae- 접두사를 강제하므로 기존 사이트의 .btn/.card/.badge/.container 와 충돌하지 않는다). ========================================================================== */ /* --------------------------------------------------------------------------- [폰트] Pretendard 방법 A (권장·간단) — 아래 @import 주석을 해제하거나, HTML 에 로 넣는다. @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); 방법 B (외부망 차단·오프라인 환경) — 폰트 파일을 사이트에 동봉하고 아래 @font-face 사용. @font-face{ font-family:"Pretendard Variable"; src:url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations"); font-weight:45 920; font-style:normal; font-display:swap; } ※ @import 는 CSS 파일 최상단(주석 제외)에만 유효하다. 해제 시 이 블록 위치를 지키자. ※ CSP 를 쓰는 사이트는 font-src / style-src 에 cdn.jsdelivr.net 허용 필요. ------------------------------------------------------------------------- */ /* ===== 1. 정본 토큰 (03_design-system-v1.md 부록과 1:1 동일) ===== */ :root{ /* Brand · Navy — 로고/헤더/제목강조/1차(Secondary)버튼 */ --brand:#143A6B; --brand-strong:#0E2A50; --brand-600:#1E4B8F; --brand-link:#2E5FD0; --brand-tint:#EAF0FA; /* Accent · Coral (CTA/핵심지표 전용 — 한 화면에 주 행동 1개) */ --accent:#E2431F; --accent-strong:#C6371A; --accent-tint:#FDECE7; /* Neutral · Slate */ --bg:#FFFFFF; --surface:#F7F8FA; --surface-2:#EFF1F5; --border:#E2E5EB; --text:#334155; --text-strong:#0F172A; --text-muted:#64748B; /* Status — 오직 피드백에만 */ --success:#0E7A50; --success-tint:#E4F4EC; --warning:#8A5A00; --warning-solid:#E0A100; --warning-tint:#FBF1D9; /* 2026-07-29: --warning-solid 배경 위에는 반드시 이 고정 텍스트색을 쓴다(테마 불문). var(--text-strong) 를 짝지으면 다크모드에서 2.07:1 로 깨진다(docs/대비비_검증표.md). */ --on-warning-solid:#0F172A; --danger:#DC2626; --danger-tint:#FBE9E9; --info:#2563C9; --info-tint:#E7EFFB; /* Radius / Shadow */ --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px; --shadow-1:0 1px 2px rgba(15,23,42,.06); --shadow-2:0 4px 16px rgba(15,23,42,.08); --shadow-3:0 12px 32px rgba(15,23,42,.12); /* Spacing (8px scale) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-8:48px; --sp-10:64px; --sp-12:96px; --container:1200px; /* Motion */ --ease:cubic-bezier(.2,.7,.2,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; } /* ===== 2. 다크 토큰 (내부 운영/백오피스/읽기모드 전용, 외부 판매용은 라이트 고정) ===== */ /* 2026-07-29 AA 보정(docs/대비비_검증표.md 근거, 상대휘도 계산으로 산출): - --border: 1.55:1→3.07:1 (UI 경계 3:1 기준 미달 수정, #2A3852→#5774A9) - --success/--warning/--danger/--info(+tint) 4종은 원래 다크 블록에 재선언이 없어 라이트 값을 그대로 물려받았고, 다크 배경(#0E1524)에서 3.0~3.8:1로 전부 4.5:1 미달이었다. 아래는 --bg 및 각자의 -tint 배경 모두에서 4.5:1 이상이 되도록 다시 계산한 다크 전용 값이다(계산 근거·조합별 수치는 검증표 참고). - --accent/--accent-strong 은 의도적으로 유지한다: 이 파일 안에서 --accent 의 유일한 실사용처는 .onae-metric(텍스트색, 다크 배경 대비 7.11:1로 이미 충분)이며, .onae-btn--primary(배경+흰 텍스트 조합)는 라이트 모드에서도 4.15:1로 이미 미달인 기존 결함이라 다크모드가 새로 만든 문제가 아니다. 코럴 브랜드색 자체를 바꾸면 6개 사이트 전체 CTA 톤에 영향을 주므로 이번 다크모드 보정 범위에 넣지 않고 검증표에 별도 항목으로 남겨 승인을 받는다. */ [data-theme="dark"]{ --bg:#0E1524; --surface:#161F32; --surface-2:#1E2A40; --border:#5774A9; --text:#D7DEE8; --text-strong:#F1F5FB; --text-muted:#93A2B8; --brand:#22467E; --brand-link:#7FA8F0; --accent:#FF7A5C; --accent-strong:#FF9276; --success:#129A65; --success-tint:#0E1825; --warning:#B87800; --warning-tint:#111723; --danger:#E35252; --danger-tint:#121625; --info:#4D84DE; --info-tint:#0F1728; } /* ===== 3. 파생 토큰 (정본 표의 타이포·헤더 규격을 변수화 — 정본 값과 동일) ===== */ :root{ --font-sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont, "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",system-ui,sans-serif; --lh-body:1.7; /* 한글 가독성 고정값 */ --header-h:64px; /* 데스크톱 헤더 높이 */ --header-h-mobile:56px; /* 모바일 헤더 높이 */ --tap-min:44px; /* 터치 타깃 최소 */ --content-w:720px; /* 읽기 중심 본문 컬럼 상한 */ --bp-sm:640px; --bp-md:1024px; --bp-lg:1440px; } /* ===== 4. 접근성 — 모션 최소화 존중 ===== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .onae-card:hover{ transform:none !important; } } /* ============================================================================ ===== 5. 최소 유틸리티 (⚠ 선택 적용) ===== 여기부터는 "쓰고 싶은 사이트만" 클래스를 붙여서 쓰는 영역이다. - 모든 클래스는 onae- 접두사를 강제한다. 접두사 없는 클래스는 절대 추가하지 않는다. (기존 사이트의 .btn / .card / .badge / .container 스타일을 깨지 않기 위함) - 이 파일을 만 해서는 기존 화면이 바뀌지 않는다. 클래스를 붙여야만 적용된다. - 새 컴포넌트를 만들 때만 쓰고, 기존 컴포넌트를 무리하게 교체하지 않는다. ========================================================================== */ /* --- 5-1. 버튼 : 모양은 각진 라운드(radius 12px) 전사 통일. 알약형 혼용 금지 --- */ .onae-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--tap-min); padding:0 var(--sp-5); border:1.5px solid transparent; border-radius:var(--radius); font-family:var(--font-sans); font-size:15px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .onae-btn:focus-visible{ outline:3px solid var(--brand-link); outline-offset:2px; } .onae-btn:active{ transform:scale(.98); } .onae-btn--lg{ min-height:52px; font-size:16px; } .onae-btn--sm{ min-height:36px; padding:0 var(--sp-4); font-size:14px; } /* Primary(CTA) — 화면의 주 행동 1개에만. 코럴은 여기와 핵심지표에만 쓴다. */ .onae-btn--primary{ background:var(--accent); color:#fff; font-weight:700; } .onae-btn--primary:hover{ background:var(--accent-strong); } /* Secondary — 보조 주요 행동(자세히·로그인) */ .onae-btn--secondary{ background:var(--brand); color:#fff; } .onae-btn--secondary:hover{ background:var(--brand-strong); } /* Tertiary(Outline) — 부가 행동 */ .onae-btn--outline{ background:transparent; border-color:var(--border); color:var(--text-strong); } .onae-btn--outline:hover{ background:var(--surface); } /* Ghost — 텍스트성 링크 버튼 */ .onae-btn--ghost{ background:transparent; color:var(--brand-link); padding:0 var(--sp-3); } .onae-btn--ghost:hover{ background:var(--brand-tint); } .onae-btn[disabled],.onae-btn--disabled{ background:var(--surface-2); color:var(--text-muted); border-color:transparent; cursor:not-allowed; pointer-events:none; } /* --- 5-2. 카드 : 기본 그림자 없음 → hover 시 shadow-2 + translateY(-2px) --- */ .onae-card{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-5); transition:box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .onae-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); } .onae-card--flat:hover{ box-shadow:none; transform:none; } /* --- 5-3. 배지 : pill, 높이 24px, 상태색 tint 배경 + 진한 텍스트 --- */ .onae-badge{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--radius-pill); font-family:var(--font-sans); font-size:13px; font-weight:700; line-height:1; background:var(--surface-2); color:var(--text-strong); } .onae-badge--brand { background:var(--brand-tint); color:var(--brand-strong); } .onae-badge--accent { background:var(--accent-tint); color:var(--accent-strong); } .onae-badge--success{ background:var(--success-tint); color:var(--success); } .onae-badge--warning{ background:var(--warning-tint); color:var(--warning); } .onae-badge--danger { background:var(--danger-tint); color:var(--danger); } .onae-badge--info { background:var(--info-tint); color:var(--info); } /* --- 5-4. 컨테이너 : 최대폭 1200px, 좌우 여백 16/24 --- */ .onae-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-4); } @media (min-width:641px){ .onae-container{ padding-inline:var(--sp-5); } } .onae-container--narrow{ max-width:var(--content-w); } /* --- 5-5. 보조 : 지표 숫자(코럴 허용 지점), 스크린리더 전용 --- */ .onae-metric{ font-family:var(--font-sans); font-variant-numeric:tabular-nums; font-weight:800; color:var(--accent); letter-spacing:-.01em; } .onae-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }