/* ========================================================================== 오너클랜 디자인 토큰 원장 (Design Tokens) v0.3 — 2026-07-14 ========================================================================== · 이 파일은 :root CSS 변수 선언만 포함합니다. 로드해도 기존 화면의 시각적 변화는 전혀 없습니다. (토큰을 참조하는 곳에서만 효과 발생) · 모든 페이지에서 다른 CSS보다 먼저 로드됩니다. (_header.htm 참고) · 값 변경은 디자인팀 합의 후 이 파일에서만 수정합니다. 신규/수정 화면은 hex 직접 입력 대신 var(--oc-*) 를 사용합니다. · v0.3: 디자인팀 컬러 가이드 확정 반영 (2026-07 역할 기반 재구성). - 브랜드 #0062A6 / CTA(primary) #247CF5, hover=브랜드 / 보조 #4DB3DE - 포인트(가격·알림) #D60020 신설 - 상태 5종은 "뱃지 형태로만" 사용 (배경 10% 틴트 + 동색 보더 + 글자색) - 테이블 행 고정높이 폐기 → 셀 상하 패딩 8px · Figma 미러: docs/design/figma/oc-tokens.json (Tokens Studio) · 근거 데이터: docs/design/ownerclan-design-system-token-inventory.md (ownerclan_v2 커스텀 CSS 68개 파일 · hex 색상 2,268건 분석) ========================================================================== */ /* Pretendard 기본 폰트 (디자인팀 확정) — 로컬 woff2, _css/font/ 탑재. style.css 에도 선언돼 있으나, tokens.css 가 더 광범위하게 로드되므로 중복 선언(브라우저가 src로 dedup). */ @font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("font/Pretendard-Regular.woff2") format("woff2"); } @font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url("font/Pretendard-Medium.woff2") format("woff2"); } @font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("font/Pretendard-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; src: url("font/Pretendard-Bold.woff2") format("woff2"); } :root { /* ---------------------------------------------------------------------- 1. 브랜드 / 액션 컬러 (디자인팀 확정 2026-07) 현행 파란색 10종 이상 혼재를 역할 기반 4종으로 수렴. ---------------------------------------------------------------------- */ --oc-color-brand: #0062a6; /* 브랜드 컬러 (아이덴티티·헤더·진한 강조) */ --oc-color-primary: #247cf5; /* CTA, 주요 액션버튼, 중요 상호작용 */ --oc-color-primary-hover: #0062a6; /* primary hover/pressed = 브랜드 컬러 */ --oc-color-brand-sub: #4db3de; /* 브랜드 보조 컬러 */ --oc-color-point: #d60020; /* 가격, 알림 등 포인트 강조 */ --oc-color-link: var(--oc-color-primary); /* 텍스트 링크 = CTA 색 */ /* ---------------------------------------------------------------------- 2. 상태 컬러 — ★뱃지 형태로만 사용★ (디자인팀 확정) 패턴: color=글자 / border=동색 1px / background=베이스 10% 틴트. 글자색은 WCAG AA(4.5:1↑) 검증값: 주의 4.73:1, 오류 4.57:1, 완료 6.16:1, 진행중 7.01:1, 해당없음 5.36:1 (틴트 배경 기준). ---------------------------------------------------------------------- */ --oc-color-success: #116600; /* 정상 등록·완료 글자 */ --oc-color-success-border: #116600; --oc-color-success-bg: rgba(17, 102, 0, .1); --oc-color-info: #0000ff; /* 진행중 글자 — 뱃지 전용, 본문 텍스트·링크 사용 금지 */ --oc-color-info-border: #0000ff; --oc-color-info-bg: rgba(0, 0, 255, .1); --oc-color-warning: #cc3300; /* 주의·확인필요 글자 */ --oc-color-warning-border: #ff7f00; /* 주의 보더·배경 베이스 */ --oc-color-warning-bg: rgba(255, 127, 0, .1); --oc-color-danger: #d60020; /* 오류·차단·경고 글자. 솔리드 위험 버튼에도 사용 */ --oc-color-danger-hover: #af001a; /* danger 버튼 hover (danger 82% 어둡게). 흰 글자 대비 7.40:1 */ --oc-color-danger-border: #ff0000; /* 오류 보더·배경 베이스 */ --oc-color-danger-bg: rgba(255, 0, 0, .1); --oc-color-neutral: #666666; /* 미처리·제외·해당없음 글자 */ --oc-color-neutral-border: #cccccc; --oc-color-neutral-bg: #f7f7f7; /* ---------------------------------------------------------------------- 3. 텍스트 컬러 ---------------------------------------------------------------------- */ --oc-color-text-heading: #000000; /* 기본 제목 텍스트 (신설) */ --oc-color-text: #333333; /* 본문 기본 */ --oc-color-text-secondary: #666666; /* 보조 설명·캡션 */ --oc-color-text-muted: #999999; /* 비활성·플레이스홀더 */ --oc-color-text-inverse: #ffffff; /* 진한 배경 위 흰색 텍스트 */ /* ---------------------------------------------------------------------- 4. 보더 / 구분선 — 2단계로 수렴 (#DDD·#CCC, 디자인팀 확정) ---------------------------------------------------------------------- */ --oc-color-border: #cccccc; /* 기본 입력창·버튼 테두리 */ --oc-color-border-light: #dddddd; /* 연한 구획 테두리 */ --oc-color-divider: #dddddd; /* (별칭) 영역 구분선 = border-light */ /* ---------------------------------------------------------------------- 5. 배경 ---------------------------------------------------------------------- */ --oc-color-bg: #ffffff; --oc-color-bg-muted: #f7f7f7; /* 안내 박스·은은한 강조 배경 */ --oc-color-bg-disabled: #eeeeee; /* 비활성 입력창 배경 (신설) */ --oc-color-bg-field: #eeeeee; /* (별칭) 입력 필드 배경 = disabled */ --oc-color-bg-table-header: #fafafa; /* 테이블 헤더 행 배경 */ /* ---------------------------------------------------------------------- 6. 타이포그래피 디자인팀 확정(2026-06): Pretendard 전환 (웹·모바일 최적, 자간·행간 안정, 굵기 세분화). woff2는 _css/font/ 에 탑재, @font-face는 이 파일 상단 + style.css 에 선언됨. ---------------------------------------------------------------------- */ --oc-font-base: "Pretendard", "NanumBarunGothic", nbg, "Malgun Gothic", dotum, sans-serif; --oc-font-modern: var(--oc-font-base); /* 하위호환 별칭 */ /* 현행 분포: 14px(178회) 12px(167) 13px(96) 11px(70) 15px(59) 18px(34) … */ --oc-font-size-xs: 11px; /* 캡션, 보조 표기 */ --oc-font-size-sm: 12px; /* 고밀도 테이블/필터 (Dense) */ --oc-font-size-md: 13px; /* 운영 화면 본문 */ --oc-font-size-base: 14px; /* 사용자 화면 본문 */ --oc-font-size-lg: 16px; /* 소제목 */ --oc-font-size-xl: 18px; /* 섹션 제목 */ --oc-font-size-2xl: 20px; /* 페이지 제목 */ --oc-font-size-3xl: 24px; /* 대제목 */ --oc-line-height-base: 1.5; --oc-line-height-dense: 1.35; /* 테이블/필터 고밀도 영역 */ /* ---------------------------------------------------------------------- 7. 간격 (v0 추진안 스케일: 4 / 8 / 12 / 16 / 20 / 24 / 30) ---------------------------------------------------------------------- */ --oc-space-1: 4px; --oc-space-2: 8px; --oc-space-3: 12px; --oc-space-4: 16px; --oc-space-5: 20px; --oc-space-6: 24px; --oc-space-7: 30px; /* ---------------------------------------------------------------------- 8. 모서리 / 그림자 ---------------------------------------------------------------------- */ --oc-radius-sm: 3px; /* 체크박스, 작은 컨트롤, 탭 */ --oc-radius-md: 5px; /* 버튼, 입력, 카드 (btn 0.3em) */ --oc-radius-lg: 8px; /* 모달·큰 패널 */ --oc-radius-pill: 999px; /* 뱃지, 라운드 버튼 */ --oc-shadow-overlay: 0 2px 8px rgba(0, 0, 0, 0.2); --oc-overlay-bg: rgba(0, 0, 0, 0.5); /* 모달/팝업 딤 배경 */ /* ---------------------------------------------------------------------- 9. 컨트롤 높이 (OcButton/입력 공통 스케일 — P0-P2 컴포넌트 정의서 기준) 현행 input 높이가 20/22/24/25/26/28/40px 7종 혼재 → 4단계로 수렴. ---------------------------------------------------------------------- */ --oc-control-height-xs: 24px; --oc-control-height-sm: 30px; /* admin 기본 */ --oc-control-height-md: 34px; /* admin 기본 */ --oc-control-height-lg: 40px; /* 테이블 셀: 행 고정높이 대신 상하 패딩 (디자인팀 확정 — 줄바꿈 대응) */ --oc-table-cell-padding-y: 8px; /* 탭/선택형 필터 최소 너비 (디자인팀 확정 2026-07). 높이는 control-height-md(34px), 간격 space-1(4px), 라운드 radius-sm(3px)를 그대로 쓴다. */ --oc-tab-min-width: 66px; /* ---------------------------------------------------------------------- 10. z-index 사다리 현행: popup-component 101 / modal 1000 / popup.css 1001~1002 / vender_join 9999 혼재 → 아래 사다리로 수렴. ---------------------------------------------------------------------- */ --oc-z-dropdown: 100; --oc-z-sticky: 500; --oc-z-overlay: 1000; /* 딤 배경 */ --oc-z-modal: 1010; /* 모달/팝업 본체 */ --oc-z-toast: 1100; /* 알림, 최상위 레이어 */ /* ---------------------------------------------------------------------- 11. 아이콘 (디자인팀 합의: Material Symbols, Apache-2.0 / SVG·currentColor) · 형식: SVG(인라인 또는 스프라이트). 래스터(PNG) 금지 — SVG가 더 가볍고 11~24px 어디서나 또렷, currentColor로 텍스트 색 토큰을 그대로 상속. · 크기: 본문 옆 인라인은 1em(자동 정렬), 독립 아이콘은 폰트 스케일 토큰 사용. · ‹ › « » × 처럼 텍스트로 충분한 건 텍스트(유니코드)로 대체 가능. ---------------------------------------------------------------------- */ --oc-icon-size: 1em; /* 텍스트 옆 아이콘 기본(자동 정렬) */ --oc-icon-gap: var(--oc-space-1); /* 아이콘-텍스트 간격 */ }