/* ============================================================= 인트라넷 공통 화면 규칙 (토큰) — v1 출처: 시안 3 (화면 구성안 × 애플 스타일) · public/static/ui-apple-v3-preview.html 설명서: docs/design/ui-rules.md 검사: node scripts/ui-tokens-check.mjs (글자 대비 · 최소 크기) ★ 아직 실제 인트라넷 화면에는 연결하지 않았다. 지금은 시안만 이 파일을 쓴다. ★ 값은 여기서만 바꾼다. 화면 코드에 색·크기 숫자를 직접 적지 않는다. ★ 이름은 "어디에 쓰는가" 기준이다. 파란색이 필요하면 --ui-blue 가 아니라 --ui-accent. ============================================================= */ :root{ /* ── 색: 강조 (화면당 채운 파랑 버튼은 하나) ── */ --ui-accent:#0071e3; /* 채운 버튼 · 고른 줄 · 켜진 상태 */ --ui-accent-hover:#0068d1; /* 채운 버튼에 마우스를 올렸을 때 */ --ui-accent-text:#0066cc; /* 파란 글자 (링크 · 글자 버튼 · 회색 바탕 위) */ --ui-accent-tint:rgba(0,113,227,.10); /* 연한 파랑 바탕 (강조 보조 버튼 · 일정 칩) */ --ui-accent-flash:rgba(0,113,227,.18); /* 자동으로 채워진 칸을 잠깐 표시 */ --ui-accent-system:#007aff; /* 맥 시스템 파랑 — 옆 메뉴 고른 줄에만(사용자 요청 2026-10-28). 흰 글자 4.0:1 → 예외, 다른 곳에 쓰지 않음 */ --ui-on-accent:#ffffff; /* 파랑 위 글자 */ --ui-on-accent-2:#ffffff; /* 고른 줄 안의 보조 글자 — 파랑 위에선 흐리게 하지 않음 (85%는 3.8:1로 미달) */ /* ── 색: 글자 ── */ --ui-text-1:#1d1d1f; /* 제목 · 본문 · 숫자 */ --ui-text-2:#6a6a6f; /* 보조 설명 · 표 머리 · 날짜 (#6e6e73은 회색 칸 위 4.4:1로 미달) */ --ui-text-3:#86868b; /* 사용 불가 · 입력 예시 · 꺾쇠(›) 에만. 읽어야 하는 글자에 쓰지 않음 */ /* ── 색: 바탕 ── */ --ui-bg:#f5f5f7; /* 창 바탕 */ --ui-surface:#ffffff; /* 카드 · 묶음 목록 · 표 */ --ui-surface-alt:#fafafc; /* 표 줄무늬 (짝수 줄) */ --ui-fill:rgba(118,118,128,.12); /* 회색 버튼 · 검색칸 · 분할 버튼 바탕 */ --ui-fill-hover:rgba(118,118,128,.18); --ui-fill-subtle:rgba(118,118,128,.08); /* 줄 위에 마우스 · 안내 띠 · 칸반 열 */ --ui-material:rgba(246,246,248,.80); /* 옆 메뉴 · 상단 막대 · 아래 탭 (뒤가 살짝 비침) */ --ui-material-blur:saturate(180%) blur(20px); --ui-scrim:rgba(0,0,0,.25); /* 시트 · 확인 창 뒤 */ --ui-toast:rgba(29,29,31,.92); /* 되돌리기 알림 바탕 */ --ui-toast-action:#64d2ff; /* 알림 안 "되돌리기" 글자 */ /* ── 색: 선 ── */ --ui-line:rgba(60,60,67,.16); /* 머리카락 선 (줄 구분 · 막대 경계) */ --ui-line-control:rgba(0,0,0,.16);/* 입력칸 · 날짜칸 테두리 */ --ui-line-dashed:rgba(60,60,67,.25); /* 파일 끌어놓기 칸 */ /* ── 색: 상태 (글자 / 점 / 연한 바탕). 색만으로 알리지 않고 항상 글자를 같이 쓴다 ── */ --ui-success:#1e7b34; --ui-success-dot:#34c759; --ui-success-tint:rgba(52,199,89,.10); --ui-warning:#c93400; --ui-warning-dot:#ff9500; --ui-warning-tint:rgba(255,149,0,.10); --ui-danger:#d70015; --ui-danger-dot:#ff3b30; /* 개수 배지 바탕은 --ui-danger (점 색 위 흰 글자는 3.6:1로 미달) */ --ui-danger-tint:rgba(255,59,48,.08); --ui-info:var(--ui-accent-text); --ui-info-dot:var(--ui-accent); --ui-info-tint:var(--ui-accent-tint); --ui-highlight:#ffe8b3; --ui-on-highlight:#8a5300; /* 1위 표시 */ /* ── 색: 그래프 (순서대로 쓴다) ── */ --ui-chart-1:#0071e3; --ui-chart-2:#ff9500; --ui-chart-3:#34c759; --ui-chart-4:#ff2d55; --ui-chart-5:#64d2ff; --ui-chart-other:#aeaeb2; /* ── 색: 견적서 · 거래명세표 문서 (종류별, 문서 렌더러와 같은 값) ── main = 제목 · 굵은 선(큰 글자만), ink = 작은 글자, tint/head = 반투명 바탕(워터마크가 비침) */ --ui-doc-online:#2563EB; --ui-doc-online-ink:#1E40AF; --ui-doc-online-tint:rgba(37,99,235,.07); --ui-doc-online-head:rgba(37,99,235,.16); --ui-doc-buy:#EA580C; --ui-doc-buy-ink:#9A3412; --ui-doc-buy-tint:rgba(234,88,12,.07); --ui-doc-buy-head:rgba(234,88,12,.16); /* ── 초점 표시 (키보드로 이동할 때 반드시 보이게) ── */ --ui-focus-ring:0 0 0 3px rgba(0,113,227,.35); --ui-error-ring:0 0 0 3px rgba(215,0,21,.12); /* ── 글자 ── */ --ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard",system-ui,sans-serif; --ui-font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* 견적번호 · 승인번호 · 글 주소 */ --ui-text-caption:11px; /* 가장 작은 글자. 이보다 작게 쓰지 않음 (배지 · 탭 막대 포함) */ --ui-text-footnote:12px; /* 표 머리 · 보조 설명 · 작은 버튼 */ --ui-text-body:13px; /* 기본 본문 · 표 · 입력칸 · 버튼 */ --ui-text-callout:14px; /* 구역 제목 · 모바일 목록 첫 줄 · 읽는 글 */ --ui-text-title3:15px; /* 상세 패널 제목 · 상단 막대 제목 */ --ui-text-title2:17px; /* 본문 글 제목 · 시트 제목 */ --ui-text-title1:22px; /* 화면 제목 (PC) */ --ui-text-large:26px; /* 화면 제목 (모바일) · 지표 큰 숫자 */ --ui-weight-regular:400; /* 본문 */ --ui-weight-semibold:600; /* 라벨 · 버튼 · 표 속 강조 */ --ui-weight-bold:700; /* 제목 · 큰 숫자. 이 세 가지 말고 쓰지 않음 */ --ui-leading:1.4; /* 화면 글자 */ --ui-leading-read:1.65; /* 읽는 글 (교육 본문 · 메일 본문) */ --ui-tracking:-.01em; /* 기본 자간 */ --ui-tracking-tight:-.02em; /* 큰 제목 · 큰 숫자 */ /* ── 선 굵기 ── */ --ui-hairline:.5px; --ui-inset:14px; /* 줄 구분선이 왼쪽에서 띄는 거리 (애플 목록 방식) */ /* ── 모서리 ── */ --ui-radius-row:6px; /* 옆 메뉴 항목 · 작은 칩 안 */ --ui-radius-control:7px; /* 버튼 · 입력칸 · 분할 버튼 */ --ui-radius-card:8px; /* 칸반 카드 · 말풍선 안쪽 */ --ui-radius-group:10px; /* 묶음 목록 · 지표 카드 · 안내 띠 */ --ui-radius-panel:12px; /* 큰 패널 · 상세 패널 · 앱 창 */ --ui-radius-sheet:14px; /* 시트 · 확인 창 */ --ui-radius-pill:999px; /* 칩 · 배지 · 프로필 */ /* ── 높이(그림자): 내용에는 그림자를 쓰지 않는다. 바탕색 차이와 선으로 구분 ── */ --ui-elev-0:none; --ui-elev-raised:0 .5px 1px rgba(0,0,0,.08); /* 칸반 카드 */ --ui-elev-control:0 1px 2px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04); --ui-elev-field:inset 0 0 0 .5px rgba(0,0,0,.22), inset 0 .5px 1px rgba(0,0,0,.06); /* 맥 입력란: 테두리 대신 안쪽 머리카락 선 */ /* 분할 버튼의 고른 칸 · 필터 단추 */ --ui-elev-popover:0 10px 30px rgba(0,0,0,.25); /* 알림 */ --ui-elev-sheet:0 22px 70px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.1); /* 시트 · 확인 창 */ /* ── 밀도 · 크기 ── */ --ui-row:32px; /* 표 · 목록 한 줄 (PC) */ --ui-row-mobile:44px; /* 목록 한 줄 · 탭 막대 칸 (모바일) */ --ui-control:28px; /* 버튼 · 입력칸 (PC) */ --ui-control-sm:24px; /* 작은 버튼 · 필터 단추 · 표 안 버튼 */ --ui-control-mobile:36px; /* 버튼 (모바일) */ --ui-target-min:24px; /* 누르는 범위 최소. 체크칸 · 아이콘은 28px */ --ui-sidebar:224px; --ui-inspector:300px; --ui-facet:200px; --ui-gap:12px; --ui-gap-sm:8px; --ui-pad:16px; --ui-breakpoint:768px; /* 이보다 좁으면 모바일 배치 (CSS 미디어 쿼리에는 숫자로 768px) */ /* ── 움직임 ── */ --ui-dur-fast:120ms; --ui-dur:150ms; --ui-dur-slow:200ms; --ui-ease:cubic-bezier(.2,.8,.2,1); --ui-undo-ms:5000; /* 되돌리기 알림이 떠 있는 시간 */ } @media (prefers-reduced-motion:reduce){ :root{ --ui-dur-fast:0ms; --ui-dur:0ms; --ui-dur-slow:0ms } }