/* ============================================================ 마이디비 — 디자인 토큰 ------------------------------------------------------------ 확정 (2026-08-29 대표) A 강조색 ★ 브랜드 색 #3d30ce (로고 색). 처음 고른 코발트에서 교체 다크는 같은 색상각의 밝은 버전 #a396f5 B 밀도 표준 (행 34px) C 글꼴 Pretendard D 모드 라이트 기본 · 다크 지원 E 분위기 보통 (모서리 6 · 옅은 그림자) F 로고 마이디비 (한글) ★ 헤더 · GNB · 본문 모두 밝은 톤 ------------------------------------------------------------ ★ 쓰는 규칙 — 화면에서 색을 직접 적지 않는다. `#1f5eff` 대신 `var(--ac)`, `#fff` 대신 `var(--sf)`. 그래야 나중에 색 하나 바꾸면 전 화면이 같이 바뀐다. ★★ 특히 「의미 토큰」(--bg-app · --sf · --bd …)을 쓴다. 원시 색(--n0 · --a4)은 의미 토큰을 정의할 때만 쓴다. 그래야 다크 모드가 저절로 따라온다. ============================================================ */ @font-face { font-family: Pretendard; src: url('fonts/PretendardVariable.woff2') format('woff2'); font-weight: 45 920; font-style: normal; font-display: swap; } :root { /* ---------- 원시 : 중립 10단 ---------- */ /* ★ 한 단 진하게 (2026-10-10 대표 · §479 「디자인이 뿌옇다」) — 카드와 바닥 대비 1.08 · 선 1.28 · 보조 글자 6.8 · 흐림 5.1 · 아주 흐림 2.3 이라 면 경계가 녹고 글자가 옅었다 */ --n0: #ffffff; --n05: #fbfcfd; --n1: #eef0f3; /* 본문 바닥 */ --n15: #f3f5f7; /* 표 머리 · 마우스 올림 — 바닥보다 한 단 밝게 */ --n2: #e4e7ec; --n3: #d5dae1; --n4: #bcc3cd; --n5: #8a929e; /* 흰 3.2 */ --n6: #59616c; /* 흰 6.4 */ --n7: #3f4650; /* 흰 9.6 */ --n8: #343b44; --n9: #1c2028; /* ---------- 원시 : 강조 — 브랜드 색 ---------- ★ 로고 색 #3d30ce 를 그대로 쓴다 (2026-08-29 로고 수령). 처음 고른 코발트(#1f5eff)는 색상각 223°, 로고는 245° 라 나란히 두면 「비슷한데 다른 파랑」 두 개가 되어 서로 싸운다. 브랜드 색이 대비도 더 좋다 — 흰 배경 위 8.36 (코발트 5.12). */ /* ★ 로고 색은 «따로» 둔다 (대표 2026-09-02 「로고는 그대로」). 화면 강조는 밝히되 로고·명함·인쇄물은 이 값을 그대로 쓴다 */ --brand: #3d30ce; /* 화면 강조 — 로고와 같은 색상각(245°)에서 «두 단» 밝게. 옛 #3d30ce 는 흰 글자 대비 8.36 으로 필요한 것(4.5)의 두 배였다. 과하게 잡은 대비가 색을 눌러 어둡게 만들고 있었다 */ --a1: #f0eff8; /* 배경 — 선택 행 · 배지 */ --a2: #d1cfed; /* 테두리 */ --a3: #a19be3; /* 보조 */ --a4: #6055d8; /* 기본 ★ 흰 글자 5.54 · 배지 4.86 */ --a5: #4538d1; /* 마우스 올림 — 진해진다 */ --a6: #382cbf; /* 누름 */ /* ---------- 원시 : 갈래색 ---------- 그래프 조각을 «가르는» 색이다. 강조 한 줄기로는 여덟 갈래를 못 가른다. 고른 기준 — 가장 가까운 두 색 ΔE 25.4, 적록색약에서도 ΔE 12.7. ★ 위험(#c0293b)과 헷갈리지 않게 순수 빨강은 안 쓴다. */ --c1: #6055d8; /* 보라 — 강조와 같은 색 */ --c2: #2f9e8f; /* 청록 */ --c3: #e8833a; /* 주황 */ --c4: #4a90d9; /* 파랑 */ --c5: #b5556f; /* 로즈 */ --c6: #5f9e2f; /* 연두 */ --c7: #8a7355; /* 모래 */ --c8: #5d7a99; /* 슬레이트 */ /* ---------- 원시 : 상태 ---------- */ --ok-f: #087a41; --ok-b: #e6f6ee; --ok-l: #b9e3cc; /* 배지 대비 4.85 */ --wn-f: #b45309; --wn-b: #fdf3e3; --wn-l: #f2ddb8; --bd-f: #c0293b; --bd-b: #fdecee; --bd-l: #f4c9cf; /* ---------- 원시 : 단골 등급 5단 ---------- 실측 — 판매현황 시트가 `주문횟수` 에 쓰던 청록 히트스케일. 설계 원칙 6 「색으로만 있던 것을 데이터로 올린다」 → 숫자를 정본으로 두고 색은 보조로 남긴다. */ --tier1-b:#e1f5f7; --tier1-f:#286c72; /* 대비 5.35 */ --tier2-b:#adeaef; --tier2-f:#22636a; --tier3-b:#76d9e0; --tier3-f:#17505a; --tier4-b:#3ab2bb; --tier4-f:#0d3a3e; /* ★ 흰 글자는 대비 2.54 로 미달 → 어두운 글자로 뒤집는다 (4.89) */ --tier5-b:#2f7d83; --tier5-f:#ffffff; /* 4.79 */ /* ============================================================ 의미 토큰 — 화면은 이것만 쓴다 ★ 밝은 톤 셸 : 헤더 · GNB 가 흰색이고 본문이 옅은 회색이다. 어두운 네비가 없으므로 위계를 「면(surface) + 선」으로 만든다. 네비·카드 = 흰색(떠 있음) 본문 바닥 = 옅은 회색(들어감) ============================================================ */ /* 면 */ --bg-app: var(--n1); /* 본문 바닥 — 들어간 면 */ --sf: var(--n0); /* 카드 · 표 · 패널 — 떠 있는 면 */ --sf-2: var(--n05); /* 살짝 낮춘 면 — 보조 툴바 */ --sf-sunken: var(--n15); /* 표 머리 · 지표 칸 */ --sf-hover: var(--n15); /* 마우스 올림 */ --sf-topbar: var(--n0); /* ★ 상단바 — 흰색 */ --sf-gnb: var(--n0); /* ★ GNB — 흰색 */ /* 선 */ --bd: var(--n3); /* 기본 경계 */ --bd-2: var(--n2); /* 옅은 구분선 — 표 행 사이 */ --bd-strong: var(--n4); /* 뚜렷한 경계 — 마우스 올림 */ /* 글자 */ --tx: var(--n9); /* 본문 */ --tx-2: var(--n7); /* 보조 · 라벨 */ --tx-3: var(--n6); /* 흐림 · 비어 있음 */ --tx-4: var(--n5); /* 아주 흐림 */ --tx-on-ac: #ffffff; /* 강조색 위 글자 */ /* 강조 */ --ac: var(--a4); --ac-hover: var(--a5); --ac-press: var(--a6); --ac-bg: var(--a1); --ac-bd: var(--a2); --ac-tx: var(--a4); /* 상태 */ --ok: var(--ok-f); --ok-bg: var(--ok-b); --ok-bd: var(--ok-l); --wn: var(--wn-f); --wn-bg: var(--wn-b); --wn-bd: var(--wn-l); --bd-c: var(--bd-f); --bd-bg: var(--bd-b); --bd-bd: var(--bd-l); /* 포커스 — 접근성. 키보드로도 다 돌 수 있어야 한다 */ --focus: 0 0 0 3px rgba(96,85,216,.30); /* ---------- 글꼴 ---------- Pretendard 를 self-host 한다 — 위 @font-face (외부 CDN 을 안 쓴다). ★ 파일이 없으면 조용히 뒤 글꼴로 떨어진다 — 맥은 -apple-system, Windows 는 맑은 고딕. */ --ff: Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --ff-num: var(--ff); /* 숫자도 같은 글꼴 + tabular-nums */ --fs-11: 11px; /* 배지 · 각주 */ --fs-12: 12px; /* ★ 표 · 폼 — 기본 */ --fs-13: 13px; /* 본문 */ --fs-14: 14px; /* 소제목 */ --fs-16: 16px; /* 화면 제목 */ --fs-20: 20px; /* 지표 숫자 */ --fs-28: 28px; /* 큰 지표 — 「오늘 몇 건」 */ --fw-n: 400; --fw-m: 500; --fw-b: 600; --fw-x: 700; --lh-t: 1.35; /* 촘촘 — 표 */ --lh-n: 1.6; /* 보통 */ --lh-r: 1.8; /* 읽기 — 상담메모 */ /* ---------- 간격 — 4px 배수 ---------- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 10px; --sp-6: 12px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; --sp-10: 32px; /* ---------- 모서리 (E · 보통) ---------- */ --r-sm: 4px; /* 배지 · 태그 */ --r-md: 6px; /* 버튼 · 입력 */ --r-lg: 8px; /* 카드 · 표 */ --r-pill: 999px; /* ---------- 그림자 (E · 보통 — 옅게) ---------- */ --sh-1: 0 1px 2px rgba(20,30,50,.08), 0 0 0 1px rgba(20,30,50,.02); /* 카드 (§479 한 단 진하게) */ --sh-2: 0 1px 3px rgba(20,30,50,.08), 0 1px 2px rgba(20,30,50,.04); --sh-3: -6px 0 20px rgba(20,30,50,.08); /* 우측 패널 */ --sh-top: 0 1px 0 rgba(20,30,50,.06); /* ★ 밝은 상단바 — 선 대신 */ /* ---------- 치수 (B · 표준) ---------- */ --row-h: 34px; /* ★ 표 행 — 밀도의 핵심 */ --row-h-sm: 28px; /* 촘촘 모드 — 대량 목록에서 전환 */ --ctl-h: 30px; /* 버튼 · 입력 */ --topbar-h: 46px; --gnb-w: 196px; --gnb-mini: 52px; /* ★ 접었을 때 — 아이콘만 남는 레일 */ --panel-w: 560px; --panel-w2: 1120px; /* 넓은 패널 — 발주는 달력을 나란히 본다 */ --phone-w: 375px; } /* ============================================================ 다크 모드 — 라이트가 기본, 다크는 지원 ★ 의미 토큰만 다시 정의한다. 화면 코드는 손대지 않는다. 쓰는 법 — ★★ 확정 (2026-08-29 대표) — 다크는 라이트와 방향이 다르다 바탕 : 중립(순수 회색). 파랑기를 뺐다 강조 : 페리윙클 #8b9cff. 보라 쪽으로 밀어 온기를 준다 왜 갈랐나 — 「다크에서 코발트가 차갑다」. 원인이 둘이었다. 강조색만이 아니라 **바탕 회색에도 파랑기가 있어** 둘이 겹쳐 더 차게 보였다. 그래서 바탕과 강조를 함께 바꿨다. 라이트는 코발트 그대로다. ============================================================ */ :root[data-theme="dark"] { /* 중립 — 순수 회색. 파랑기 없음 */ --n0: #1a1c20; /* 카드 · 상단바 · GNB */ --n05: #1e2025; --n1: #121316; /* 본문 바닥 — 가장 어둡다 */ --n15: #121316; /* 표 머리 · 마우스 올림 — 다크는 바닥과 같다(§479 전과 같다) */ --n2: #24262b; --n3: #2d3036; --n4: #3d4148; --n5: #61656d; --n6: #8d9199; --n7: #b1b5bd; --n8: #cfd3d9; --n9: #e9eaee; /* 다크 전용 강조 — 브랜드 색을 밝힌 것 고르셨던 페리윙클(#8b9cff)은 색상각 231°, 로고는 245° 였다. 같은 제품에서 라이트와 다크의 색상각이 어긋나면 티는 안 나지만 어딘가 안 맞는 느낌이 남는다. **브랜드 각으로 맞췄다.** */ --brand: #a396f5; /* 어두운 바닥의 로고 — 원본을 밝힌 것 */ --a1: rgba(163,150,245,.18); --a2: rgba(163,150,245,.38); --a3: #8d7fe0; --a4: #a396f5; /* ★ 기본 — 로고 색을 어두운 바닥용으로 밝힌 것 */ --a5: #b6abf8; /* 어두운 바닥에서는 마우스 올림이 「더 밝아지는」 쪽이다 */ --a6: #8d7fe0; /* 갈래색 — 어두운 바닥용으로 L* 를 16 올리고 채도를 살짝 낮춘 것 */ --c1: #9380f5; --c2: #73c8ba; --c3: #ffb273; --c4: #89bafb; --c5: #da8499; --c6: #93c869; --c7: #b39d82; --c8: #8ba3bf; --ok-f:#3fbd7c; --ok-b:rgba(10,138,74,.16); --ok-l:rgba(63,189,124,.35); --wn-f:#e0a052; --wn-b:rgba(180,83,9,.18); --wn-l:rgba(224,160,82,.35); --bd-f:#f0788a; --bd-b:rgba(192,41,59,.18); --bd-l:rgba(240,120,138,.35); --tier1-b:#1b3b40; --tier1-f:#9fd8dd; --tier2-b:#215058; --tier2-f:#b6e6ea; --tier3-b:#2b6870; --tier3-f:#d8f4f6; --tier4-b:#347e85; --tier4-f:#ffffff; /* 4.70 */ --tier5-b:#4aa3ab; --tier5-f:#0d1b1d; /* 5.97 */ --sf-topbar: var(--n0); --sf-gnb: var(--n0); --tx-on-ac: #0d0f18; /* 강조색 위 글자 — 대비 7.50 */ --focus: 0 0 0 3px rgba(163,150,245,.35); --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 1px 3px rgba(0,0,0,.45); --sh-3: -6px 0 20px rgba(0,0,0,.45); --sh-top: 0 1px 0 rgba(0,0,0,.4); } /* 사용자가 고르지 않았고 기기가 다크면 따라간다 — 기본은 어디까지나 라이트 */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; } }