/* ══════════════════════════════════════════════ tokens.css — 디자인 토큰 밝고 깨끗한 화이트 베이스 · 컬러풀 아이콘 · 알약형 버튼 원칙 세 가지 (2026-08-20 재정립) 1. 색은 계단으로만 쓴다. 계단 사이 값을 새로 만들지 않는다. 전에는 파랑 49종 · 회색 34종이 돌아다녔다. 눈이 구별 못 하는 차이인데 화면마다 달라서 "정돈이 안 됐다"는 인상을 줬다. 2. 글자 크기는 8단만 쓴다. 소수점(10.5px 같은)은 금지. 브라우저마다 반올림 방향이 달라 줄 높이가 어긋난다. 3. 화면 접히는 폭은 4개만 쓴다. 전에는 15종이었다. ══════════════════════════════════════════════ */ :root { /* ── 회색 계단 ─────────────────────────────── 0 이 가장 밝고 950 이 가장 어둡다. 살짝 푸른 기를 넣어 파란 강조색과 결이 맞게 했다. 중간값이 필요하면 계단을 새로 만들지 말고 가까운 쪽을 쓴다. */ --g-0: #FFFFFF; --g-25: #F8F9FC; /* 아주 옅은 바탕 — 표 줄무늬 */ --g-50: #F2F4F9; /* 옅은 바탕 — 눌린 상태, 보조 영역 */ --g-100: #ECEEF5; /* 화면 바탕 */ --g-200: #E6E6E8; /* 옅은 선 — 사이드바·머리줄·카드·표가 다 이 색을 쓴다. 푸른기를 거의 뺀 중성 회색이다. 전에는 #E3E6EF 로 파랑이 섞여 있어 흰 본문 위에서 선이 살짝 떠 보였다 */ --g-300: #D5D9E4; /* 선 */ --g-400: #B8BECC; /* 진한 선, 꺼진 상태 */ --g-500: #8A90A2; /* 흐린 글자 */ --g-600: #6B7186; /* 보조 글자 */ --g-700: #4A5163; /* 본문 보조 */ --g-800: #2C3345; /* 진한 글자 */ --g-900: #1B2233; /* 가장 진한 면 — 사이드바 */ --g-950: #12141D; /* 더 진한 면 — 코드, 어두운 카드 */ /* 바탕을 거의 흰색으로 둔다. 회색 판 위에 흰 카드를 얹으면 카드마다 테두리가 두 겹으로 보여 화면이 무겁다. 흰 바탕에 옅은 선 하나로 구획을 나누는 쪽이 내용에 눈이 먼저 간다. */ /* 사이드바·머리줄·본문을 모두 밝게 둔다. 어두운 사이드바 + 어두운 머리줄 조합은 2010년대 관리자 화면의 전형이라 그 자체로 오래된 인상을 준다. 밝게 깔고 흰 카드를 얹으면 내용이 앞으로 나온다. 바탕(#F7F8FC)과 카드(#FFFFFF)를 살짝만 갈라 둔다. 차이가 크면 카드가 둥둥 떠 보이고, 없으면 구획이 사라진다. */ --c-bg: #F2F4F9; --c-surface: var(--g-0); /* 사이드바는 흰색, 본문 바탕은 옅은 회색. 둘 다 회색으로 두면(#F6F7FB vs #F7F8FC) 눈으로 구별이 안 된다. 사이드바를 흰 면으로 세우고 본문을 살짝 눌러야 층이 생긴다. 카드도 흰색이지만 본문 바탕 위에 떠 있어 따로 읽힌다. */ --c-sidebar: var(--g-0); /* 메뉴 글자. g-700 은 흰 바탕에서 뿌옇게 보였다 — 읽는 글자라 한 단계 진하게 (v6-136) */ --c-sidebar-t: var(--g-800); --c-sidebar-tw: var(--g-500); /* 갈래 이름(OVERVIEW 등) */ --c-sidebar-hv: #F2F4F9; /* 얹었을 때 */ /* 고른 메뉴는 흰 알약으로 띄운다. 밝은 바탕에서 흰색이 오히려 도드라진다 */ /* 고른 메뉴 바탕. 사이드바가 흰색이라 흰 알약을 얹으면 아무것도 안 보인다. 옅은 파랑을 깔아야 어디에 있는지 한눈에 들어온다. */ --c-sidebar-on: #EAEDFE; /* 새 글쓰기 단추 테두리. 속을 안 채우므로 선이 너무 옅으면 안 보인다 */ --c-primary-line: rgba(68, 89, 227, .32); /* 머리줄도 흰 바탕 + 아래 선 */ --c-head: var(--g-0); --c-hover: #F0F2F8; --c-border: var(--g-200); /* 카드처럼 넓은 면을 두르는 선. 아주 연하게 두고, 대신 아래쪽에 부드러운 그림자를 함께 깐다(--shadow-card). 선만으로 세우려고 진하게(--g-300) 올렸더니 옛 관리자 화면처럼 촌스러웠고, 그림자만 쓰자니 예전 값(alpha .04)이 회색 바탕에서 대비 1.036 이라 아예 보이지 않았다. 둘을 겹치면 선은 윤곽만 잡고 그림자가 깊이를 준다. */ --c-border-card: var(--g-200); --c-border-s: var(--g-300); --c-border-strong: var(--g-400); --c-text: var(--g-800); --c-text-sub: var(--g-600); --c-text-weak: var(--g-500); /* ── 파랑 계단 (강조색) ────────────────────── 전에 49종이던 것을 9단으로 줄였다. --c-primary 값은 그대로 둬서 기존 화면의 인상이 바뀌지 않게 했다. */ --b-50: #EEF0FC; --b-100: #DDE2FB; --b-200: #B7C0F8; --b-300: #8B94FF; --b-400: #6B7BF7; --b-500: #6373F6; --b-600: #5868F8; /* 기준색 — 레퍼런스에서 뽑은 값 (S64 V97) */ --b-700: #4553E0; --b-800: #3341C4; --c-primary: var(--b-600); --c-primary-h: var(--b-700); --c-primary-bg: var(--b-50); --c-primary-t: var(--b-700); /* ── 뜻이 있는 색 ──────────────────────────── 각 3단씩만. 진한 면 / 옅은 바탕 / 글자색. */ --c-danger: #EF4444; --c-danger-bg: #FEF2F2; --c-danger-t: #DC2626; --c-warn: #F59E0B; --c-warn-bg: #FFFBEB; --c-warn-t: #B45309; --c-success: #10B981; --c-success-bg: #ECFDF5; --c-success-t: #059669; /* --c-info-bg 는 칸 색 칩이 유일하게 쓰던 것인데, 값을 board.css 로 모으면서 쓰는 데가 없어졌다 (v6-87). 글자색(--c-info-t)만 남겼는데, 아바타 하늘색이 유일하게 쓰던 것이라 그것마저 v6-138 에서 없어졌다. */ /* 메뉴 아이콘 — 한 갈래로만 맞추면 메뉴끼리 구분이 안 된다. 빨강처럼 경고로 읽히는 색만 빼고, 서로 충분히 다른 색을 고른다. 숫자 카드 채움색(--f-*)과 같은 대역을 쓴다. 채도 63~85%, 명도 83~89%. 한 화면에서 색이 두 갈래로 놀면 같은 제품처럼 안 보인다. 한때 채도를 48~58% 로 눌러봤는데 탁하고 흐릿했다. 반대로 어두운 사이드바 시절 값(채도 75~86%, 명도 98%)을 그대로 쓰면 흰 바탕에서 형광펜처럼 뜬다. 지금이 그 사이다. */ /* 메뉴 아이콘 색(--ic-*)은 걷어냈다 (v6-133). 메뉴마다 다른 색을 주니 사이드바가 알록달록했다. 사이드바는 읽는 곳이 아니라 옮겨 다니는 곳이다 — 조용해야 본문이 눈에 든다. 지금은 모두 --c-text-weak, 있는 자리만 --c-text 로 진해진다. */ /* ── 갈래 색 ───────────────────────────────── 숫자 카드·광고 요약 아이콘의 동그라미를 채우는 색. 채도는 50~70% 로 눌러 두되 명도를 90% 언저리로 올렸다. 원색에 가까우면(#059669 같은) 흰 카드 위에서 동그라미만 튀고, 명도를 낮추면 탁하고 어두워 보인다. 맑게 보이는 건 명도 쪽이다. 같은 계열 두 단계로 그라디언트를 만들어 면이 평평하지 않게 한다. 파랑이 둘인 이유 — 방문과 문의는 성격이 이어지는 숫자라 같은 계열로 묶되, 남색과 하늘색으로 갈라 서로 구별되게 했다. */ /* [되돌림 v6-166] 채도를 낮춰 봤더니 전체가 칙칙해졌다. 그래프 색은 갈래를 나누는 일을 하는데, 흐려지면 무엇이 무엇인지 구별이 잘 안 된다. 원래 값으로 되돌린다. 톤은 나중에 따로 잡는다 — 색만 손대는 것으로는 안 된다. 같은 계열 두 단계로 그라디언트를 만들어 면이 평평하지 않게 한다. 파랑이 둘인 이유 — 방문과 문의는 성격이 이어지는 숫자라 같은 계열로 묶되, 남색과 하늘색으로 갈라 서로 구별되게 했다. */ --f-blue-a: #6075F0; --f-blue-b: #4F65DF; /* 방문. 남색 */ --f-sky-a: #57A5EC; --f-sky-b: #4791D7; /* 문의. 하늘색 */ /* 주황만 채도를 조금 더 올렸다. 노랑에 가까운 색은 명도를 올리면 흰 그림이 바로 뭉갠다. 채도로 눌러 대비를 확보한다. */ --f-amber-a: #F09E2B; --f-amber-b: #DB8C1D; /* 손볼 것 */ --f-purple-a: #9772EF; --f-purple-b: #835BDB; /* 전환율 */ --f-green-a: #4ACFA2; --f-green-b: #3DBB8D; /* 광고 */ /* 열지도 4단. 요일·시간대처럼 "얼마나 몰렸나" 를 칸 색으로 보이는 곳에 쓴다. --c-primary 계열을 옅은 쪽부터 네 단으로 벌린 것이다. [톤 v6-162] 마지막 단을 --c-primary(진한 채움)에서 한 단 낮췄다. 칸이 수십 개 늘어서는 그림이라, 진한 색이 여럿이면 화면이 무거워진다. "가장 많은 곳" 만 알면 되므로 옅은 쪽에서 갈리는 편이 읽기 좋다. */ --f-heat-1: #EEF1FE; --f-heat-2: #C3CCFA; --f-heat-3: #9AA6F4; --f-heat-4: var(--b-400); /* 그래프 위 말풍선. 어두운 판에 흰 글자 — 본문과 층이 갈려야 읽힌다 */ --f-tip-bg: #1F2437; --f-tip-t: #C4C9DA; /* 주말 이름표. 평일과 갈리되 경고로 읽히면 안 되므로 붉은기를 낮췄다 */ --f-weekend: #C1738A; --f-weekend-w: #D89AAA; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ── 글자 크기 — 8단이 전부다 ──────────────── 소수점은 쓰지 않는다. 브라우저마다 반올림이 달라 줄 높이가 어긋난다. 11px 아래로 내려가지 않는다. 한글은 라틴 문자보다 획이 많아 10px 이하에서 받침이 뭉갠다. 담당자가 하루 종일 볼 화면이다. xxs 11 표 안의 꼬리표 (읽는 글자의 최소값) nano 8 NEW 같은 표시용 배지 — 읽는 글자가 아니다 xs 12 도움말, 캡션 sm 13 표 본문, 보조 글자 base 15 본문 기준 md 17 카드 제목 lg 20 화면 제목 xl 25 큰 숫자 2xl 32 대시보드 대표 숫자 */ /* nano 는 글자를 읽히려는 게 아니라 "여기 뭔가 있다"만 알리는 표시용이다. NEW 배지처럼 모양으로 알아보는 것에만 쓴다. 문장에는 절대 쓰지 않는다. */ --fs-nano: 8px; /* 목록에 곁들이는 아주 작은 숫자 (v6-209). [주의] 11px 아래는 원래 안 쓴다. 이 값은 관리자만 보는 곁가지 숫자에만 쓴다. 사람이 읽어야 하는 글에는 쓰지 않는다. */ --fs-tiny: 7px; /* 로고 자리에 들어가는 첫 글자. 14px 동그라미 안에 들어가야 한다 */ --fs-bico: 9px; /* --fs-nav 는 사이드바 메뉴 전용. 13px 은 작고 15px 은 커서 그 사이가 필요했다 */ --fs-xxs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-nav: 14px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 25px; --fs-2xl: 32px; --font: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", sans-serif; --lh: 1.6; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --ls-tight: -0.01em; /* 둥글기는 네 단만 쓴다 (v6-143). 전에는 화면마다 생 숫자를 적어 2·3·4·5·7·9·12·14·24·26·32·99px 이 섞여 있었다. --radius-in 6px 뱃지 · 썸네일 · 안쪽 작은 것 --radius 8px 입력 · 버튼 · 고르개 · 칩 ← 서 있는 것은 전부 같다 --radius-lg 12px 카드 · 표 · 펼침 상자 --radius-pill 999px 점 · 진행 막대 · 아바타처럼 정말 원형인 것만 [주의] 버튼은 --radius 다. 전에는 --radius-pill(알약)이었는데 6px 입력칸과 나란히 서면 짝이 안 맞아 옛날 화면처럼 보였다. */ --bw: 1px; --gap-label: 6px; --radius: 8px; --radius-in: 6px; --radius-lg: 12px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08); /* 카드용 — 아래로 살짝 번지게. 위쪽은 거의 안 깔아야 카드가 뜨지 않고 바닥에 놓인 것처럼 보인다. 진하기는 윤곽선과 비슷한 선에서 멈춘다. 한 번 합쳐서 alpha 0.13 까지 올렸더니 카드가 튀어나온 것처럼 보였다. 지금은 합쳐도 0.07 언저리다. 그림자는 "여기가 면이다"만 알려주면 되고, 그 이상은 장식이다. */ --shadow-card: 0 1px 1px rgba(16,24,40,.03), 0 2px 6px -2px rgba(16,24,40,.05); --shadow-lg: 0 12px 32px rgba(0,0,0,.12); --focus-ring: 0 0 0 3px rgba(51,76,228,.2); --ease: cubic-bezier(.16,1,.3,1); --dur: 120ms; --dur-p: 200ms; --z-dropdown: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* 메뉴 글자가 여덟 자를 넘는 것이 없어 240px 은 남았다 (v6-139) */ --sidebar-w: 210px; --sidebar-mini: 64px; --header-h: 60px; --h-control: 40px; --h-control-sm: 32px; --h-control-lg: 48px; /* ── 화면이 접히는 폭 — 4개가 전부다 ───────── 전에는 15종이었다. 200·220·240·380·460·480·560·640·720·768· 820·860·900·1100·1400 이 섞여 있어 창을 줄이면 요소마다 다른 지점에서 접혀 화면이 널뛰었다. 1100 큰 화면 전용 배치를 푼다 900 사이드바를 접는다 720 두 칸을 한 칸으로 560 손전화 @media 안에서는 CSS 변수를 못 쓰므로 값을 직접 적되, 위 네 값 말고는 쓰지 않는다. */ } body.is-dark { --g-0: #1A1D26; --g-25: #1E222C; --g-50: #232730; --g-100: #0F1117; --g-200: #2D313B; --g-300: #3E4350; --g-400: #565C6B; --g-500: #8A8F9C; --g-600: #9CA0AB; --g-700: #C0C4CE; --g-800: #F0F1F4; --g-900: #14161D; --g-950: #0B0D13; --c-bg: var(--g-100); --c-surface: var(--g-0); --c-sidebar: var(--g-900); --c-sidebar-t: #E8E9ED; --c-sidebar-tw: var(--g-500); --c-sidebar-hv: #232730; --c-hover: #232730; /* 밝은 모드 값(#EAEDFE)이 그대로 쓰이면 어두운 사이드바에서 흰 덩어리로 튄다 */ --c-sidebar-on: #262C42; --c-border: var(--g-200); --c-border-s: var(--g-300); --c-border-card: var(--g-200); /* 어두운 바탕에서는 그림자가 안 보인다. 선을 조금 더 세워 대신한다 */ --shadow-card: 0 1px 2px rgba(0,0,0,.4); --c-text: var(--g-800); --c-text-sub: var(--g-700); --c-text-weak: var(--g-500); --c-primary: var(--b-400); --c-primary-h: var(--b-500); --c-primary-bg: #1E2340; --c-primary-t: #9BA6F9; --c-danger-bg: #3A1C1C; --c-danger-t: #F98A8A; --c-warn-bg: #3A2D12; --c-warn-t: #F5C563; --c-success-bg: #123027; --c-success-t: #4FD1A0; /* 열지도 4단 다크 짝. 어두운 바탕에서는 밝기 방향이 반대라 옅은 단이 "거의 바탕색" 이어야 빈 칸으로 읽힌다 (v6-159) */ --f-heat-1: #1A1F30; --f-heat-2: #232A47; --f-heat-3: #33407A; --f-heat-4: #4A5CB8; /* 말풍선은 다크에서도 어둡게 둔다. 밝게 뒤집으면 그래프 위에서 눈이 부시다 */ --f-tip-bg: #0E1119; --f-tip-t: #C4C9DA; --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6); } :root { --tip-bg: var(--g-800); --tip-fg: #fff; } body.is-dark { --tip-bg: #000; --tip-fg: #fff; }