/* ============================================================================ brand-tokens.css — SKKU 시설 공통 브랜드 토큰(디자인 토큰 파일) ---------------------------------------------------------------------------- 운영자 결정(2026-07-24) — 방향 "한 가족, 다른 방": · 성균 그린 #00843D = 전 앱 공통 액션색(버튼·링크·활성 상태) · 파인 #0B2616 = 헤더·권위 표면(어두운 상단바·히어로) · Pretendard = 전 앱 단일 폰트 · 앱별 액센트 1색은 "보조 식별자"로 강등(레일·탭밑줄 등 정해진 자리 전용) 이 결정은 아래 2026-07-21 결정을 재검토·대체한다. [이력] 2026-07-21 결정(대체됨): "성균 그린" 3개 앱(포털·FMS·DASH)만 #00843D 로 수렴하고 나머지는 각 앱 소관으로 둔다는 방침이었다. 당시 각 앱이 렌더 중이던 값: · 포털 style.css .skip-link:focus 배경 = #00843D (액션/헤더는 라임 #7ec31a·파인 #0b2616 계열) · FMS styles.css --green / --brand = #00843D · DASH index.html --green (인라인) = #00843D · CMS css/styles.css --skkuNavy = #003a78 (그린 --skkuGreen #1b8e5a 병용) · ADA index.html --accent (인라인) = #38bdf8 (다크 테마 #0c0f14) · HAJA index.html --green (인라인) = #00543C (은행잎 --ginkgo #8DC63F 병용) ── 적용 범위(중요) ────────────────────────────────────────────────────────── 본 파일은 현재 "포털만" 로드한다(index.html, style.css 보다 먼저). 따라서 여기 추가되는 토큰은 아직 아무 앱의 렌더에도 소비되지 않으며(포털도 자기 style.css 의 기존 변수로 렌더) 시각 결과는 무변경이다. 다른 앱으로의 로드 확산·실제 소비는 로드맵 2단계 이후 과제다. 이 파일은 그때 쓸 "단일 출처(source of truth)"를 미리 정의해 둘 뿐이다. ── 값의 출처(실측) ───────────────────────────────────────────────────────── 아래 값은 새로 발명한 것이 아니라 현재 6개 앱이 이미 렌더 중인 대표값을 채택했다: · 파인 계열 ← 포털 style.css --deep/--deep2/--pine · 상태색 ← HAJA --blue(#2563c9)·포털/FMS/DASH danger·gold 계열의 대표값 · 앱 액센트 ← CMS #003a78 · ADA #38bdf8 · HAJA 은행잎 #8DC63F · 반경/그림자 ← FMS radius 스케일 · 포털 --shadow/--shadow-up(파인틴트 그림자) · 폰트 ← 포털·FMS Pretendard 우선 스택 병합 ============================================================================ */ :root { /* 성균 그린 — 포털·FMS·DASH 공통 프라이머리 */ --skku-green: #00843D; /* 파생(실사용 기반) */ --skku-green-dark: #006B31; /* hover/pressed — FMS --green-dark, DASH --green-d */ --skku-green-tint: #E8F5E9; /* 밝은 배경 필(뱃지·pill) — FMS --green-light, DASH --green-l */ --skku-green-wash: rgba(0, 132, 61, .08);/* 미묘한 hover wash — FMS proc-dialog/staff-detail hover */ --skku-on-green: #ffffff; /* green 표면 위 텍스트/아이콘 — skip-link·활성 탭 */ /* ── 파인 계열(헤더·권위 표면) ──────────────────────────────────────────── 포털이 상단바·히어로·챗봇 FAB 에 이미 렌더 중인 값. 4단계에서 라이트 앱들의 헤더 표면에 확산(ADA 다크는 제외). */ --skku-pine: #0B2616; /* 헤더/히어로 최심부 — 포털 --deep */ --skku-pine-soft: #123A22; /* 파인 그라디언트 파트너·버튼 pressed — 포털 --deep2 */ --skku-pine-line: #1C5433; /* 밝은 파인 — 링크·아이콘 텍스트 강조(포털 a{color}·h3 i) 포털 --pine */ --skku-on-pine: #ffffff; /* 파인 표면 위 텍스트/아이콘 */ /* ── 다크 표면용 그린(ADA 완전 다크 테마 #0c0f14 전용) ────────────────────── 성균그린과 동일 색조(hue ≈ 148°)를 유지하되 명도를 올려 ADA 다크 배경 위에서 본문 대비를 확보한 변형. WCAG 대비 = 7.7:1(#0FBD60 on #0c0f14) — 일반 텍스트 AA(4.5:1)·AAA(7:1) 동시 충족. ADA 기존 --green(#34d399)은 청록 쪽으로 치우쳐 있어(hue ≈ 156°) 성균 색조에서 이탈 → 색조 보존한 이 값으로 대체 후보. */ --skku-green-on-dark: #0FBD60; /* hue 148°, 대비 7.7:1 on #0c0f14 */ /* ── 앱 액센트(강등된 보조 식별자) ───────────────────────────────────────── 레일·탭밑줄·아이콘칩 등 "정해진 자리" 전용. 프라이머리(주 버튼·주 링크) 금지 — 그 역할은 성균그린이 가져간다. */ --accent-cms: #003a78; /* CMS 네이비 — 현 --skkuNavy */ --accent-ada: #38bdf8; /* ADA 스카이블루 — 현 --accent(다크 유지·강등) */ --accent-haja: #8DC63F; /* HAJA 은행잎 — 현 --ginkgo. HAJA 딥그린 #00543C 는 성균그린 흡수 후 이 색으로 식별 */ /* ── 상태색(공통 상태 어휘) ──────────────────────────────────────────────── 완료/지연/반려/통보 4상태 + 각 tint 배경. tint 는 기존 앱 뱃지 배경 실사용 톤(포털 --red-t #faeae8·--gold-t #faf3dc·--navy-t #e9eff8, FMS/DASH #FEF3C7, HAJA err #fbe9e9)을 참고한 저채도 라이트 톤. */ --status-done: #177A43; --status-done-bg: #E7F4EC; /* 완료 — 그린 계열. #1D8A4E 는 자기 틴트 위 3.92:1(순백 4.38)로 AA 미달이라 어둡게 조정(2026-07-24 키트 검산): on tint 4.73:1·on white 5.40:1 */ --status-delay: #96600F; --status-delay-bg: #FBF0DA; /* 지연 — 앰버/브론즈. #B0721A 는 틴트 위 3.53:1 AA 미달이라 조정: on tint 4.71:1 */ --status-reject: #C0392B; --status-reject-bg: #FAEAE8; /* 반려 — 레드(포털 --red #b03a2e·HAJA --red 계열, bg=포털 --red-t) */ --status-notify: #2563C9; --status-notify-bg: #E8EEFA; /* 통보 — 블루(HAJA --blue #2563c9 채택, bg=포털 --navy-t 톤) */ --status-ing: #1B3A5C; --status-ing-bg: #E9EFF8; /* 진행중 — 네이비(CMS --ing·포털 desk ack 실사용, bg=포털 --navy-t 톤) */ /* [진행색 매핑 원칙] 진행은 앱 컨텍스트 의존 — 통보(블루)와 공존하는 앱(HAJA)은 앰버 유지, 지연(앰버)과 공존하는 앱(desk)은 네이비. 강제 단일화 금지(충돌 제약이 앱마다 다름). --status-ing 은 후자(네이비 진행) 소비처용 단일 출처일 뿐이다. */ /* ── 타이포 ─────────────────────────────────────────────────────────────── Pretendard 우선. 포털("Pretendard Variable" 우선)·FMS(-apple-system 폴백) 스택을 병합해 OS 폴백까지 폭넓게 커버. */ --skku-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --skku-font-display: 800; /* 히어로·지표 대형 숫자 굵기 — 포털 --font-display */ /* ── 반경(radius) ───────────────────────────────────────────────────────── 대표값 = 14px(FMS·DASH·CMS 카드 공통). FMS 의 완결된 스케일을 채택. */ --skku-radius-sm: 10px; /* 입력·작은 버튼 — FMS --radius-sm */ --skku-radius: 14px; /* 기본 카드 — FMS/DASH/CMS --radius */ --skku-radius-lg: 20px; /* 큰 카드·시트 — FMS --radius-lg */ --skku-radius-full: 9999px; /* pill·원형 — FMS --radius-full */ /* ── 간격(spacing) ──────────────────────────────────────────────────────── 4px 베이스 스케일. 실측 상 앱 전반이 8/12/14/16/22px 패딩을 반복 사용. */ --skku-space-1: 4px; --skku-space-2: 8px; --skku-space-3: 12px; --skku-space-4: 16px; --skku-space-5: 20px; --skku-space-6: 24px; --skku-space-8: 32px; /* ── 그림자 ─────────────────────────────────────────────────────────────── 포털이 실사용 중인 파인틴트(rgba(12,38,22,…)) 그림자 — 브랜드 색조와 조화. */ --skku-shadow: 0 1px 2px rgba(12, 38, 22, .05), 0 4px 16px rgba(12, 38, 22, .06); /* 포털 --shadow */ --skku-shadow-up: 0 2px 4px rgba(12, 38, 22, .08), 0 10px 28px rgba(12, 38, 22, .12); /* 포털 --shadow-up(hover/부양) */ }