/* ============================================================ Groupware - 공유 디자인 토큰 그룹웨어(css/styles.css)와 데이터분석 모듈(data-analysis/css/style.css) 양쪽에서 "같은 값이어야 하는" 변수만 이곳에 둡니다. radius(--radius-*)와 shadow(--shadow-*)는 이름은 같은데 두 모듈이 서로 다른 값을 쓰고 있었습니다(그룹웨어 6/10/16px + 진한 그림자, 데이터분석 4/8/12px + 옅은 그림자). 팀 결정에 따라 그룹웨어 값을 기준으로 통합해 이 파일로 옮겼습니다 — 데이터분석 모듈은 모서리가 조금 더 둥글어지고 그림자가 살짝 뚜렷해집니다. ============================================================ */ /* ============================================================ 웹폰트 - Pretendard (self-hosted) ------------------------------------------------------------ ⭐ 경로 기준 ⭐ url()은 "이 CSS 파일 위치" 기준으로 풀립니다. 이 파일이 css/에 있으므로 ../fonts/ = 프로젝트 루트의 fonts/ 입니다. 데이터분석 모듈은 data-analysis/css/style.css에서 이 파일을 @import 하는데, 그 경우에도 url()은 (import한 쪽이 아니라) 여기 tokens.css 기준으로 풀리므로 두 모듈 모두 같은 파일을 가리킵니다. ⭐ font-display: swap ⭐ 폰트를 받는 동안 글자를 숨기지 않고(FOIT) 대체 폰트로 먼저 보여준 뒤 교체합니다(FOUT). 이 앱은 로그인 직후 바로 업무 화면이 뜨는 사내 도구라, 글자가 잠깐 안 보이는 것보다 폰트가 바뀌는 편이 낫습니다. ⭐ font-weight를 "범위"로 선언한 이유 ⭐ 제공된 파일은 Regular(400)와 Bold(700) 두 개뿐인데, 이 프로젝트는 --fw-medium(500)과 --fw-semibold(600)을 실제로 쓰고 있습니다 (사이드 메뉴·라벨이 500, 버튼·카드제목·표 머리글·활성 메뉴가 600). 단일 값으로만 선언하면 브라우저가 없는 굵기를 흉내 내려고 글자를 인위적으로 굵게 그리는 경우(synthetic bold)가 생겨 자형이 뭉개집니다. 범위로 선언해 500은 Regular 파일이, 600은 Bold 파일이 확실하게 맡도록 고정했습니다. ⚠️ 그 결과 600(semibold)으로 지정된 요소는 700과 같은 굵기로 보입니다. 원래 의도한 "본문보다 조금 진한" 중간 굵기를 살리려면 Pretendard-Medium(500)·SemiBold(600) woff2를 추가로 넣고 아래 범위를 400 / 500 / 600 / 700으로 쪼개면 됩니다. ============================================================ */ @font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Regular.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("../fonts/Pretendard-Bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } :root { /* ---------- 폰트 패밀리 ---------- Pretendard를 프로젝트에 직접 포함(self-host)해서 씁니다. 위 @font-face 선언 참고. [변경 이력] 예전에는 "설치된 사람만 Pretendard로 보이고 나머지는 맑은 고딕/Apple SD Gothic Neo로 떨어지는" 상태였습니다. 폰트 파일을 넣으면서 이제 전 사용자가 같은 자형으로 보게 됩니다. 폴백은 Pretendard를 못 받았을 때(네트워크 실패 등)만 쓰입니다. */ --font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; /* ---------- 폰트 크기 (GBDP FHD Desktop Typography v2.0) ---------- [PC 16:9 FHD(1920×1080) 기준] 이 그룹웨어는 브라우저 창을 꽉 채우거나 거의 채운 상태의 데스크톱에서 쓰는 것을 기본 전제로 합니다. 실사용 뷰포트는 크롬/툴바를 뺀 약 1900×950px 안팎이라, 모바일 대비 가로·세로 여유가 충분합니다 — 그래서 "제목/내용/설명/체크리스트 등 작성 화면의 글자"를 16px로 올려도 줄바꿈이나 잘림 없이 그대로 받아낼 수 있습니다. ⭐ 핵심 변경: 쓰기(작성) 계열을 16px로 통일 ⭐ 제목 입력, 본문 텍스트영역, 설명/라벨, 체크리스트 항목이 전부 `.login-input` 한 클래스를 공유하고 `--fs-input`만 참조하므로, 이 토큰 하나를 14→16px로 올리면 게시판·공지·전자결재·댓글 전체의 "쓰는 글자"가 한 번에 16px가 됩니다(v1.6.1에서 폰트를 전부 토큰화해둔 덕에 화면 코드는 건드리지 않았습니다). ⭐ 나머지 단계도 함께 재조정한 이유 ⭐ 쓰기 영역만 16px로 올리고 나머지를 그대로 두면, 입력창 글자가 본문(Body)·부제(H3)와 크기가 같거나 오히려 더 커져서 위계가 무너집니다. FHD의 여유 공간을 활용해 전체 계단을 한 단씩 올려 "입력 16 < 부제 20 < 페이지제목 24 < 메인제목 30"의 간격을 유지했습니다. UI 잡음(캡션·표·버튼)도 함께 1px씩 올렸는데, 이는 읽기 쾌적함보다는 "쓰기용 16px 옆에서 유독 작아 보이지 않게" 맞춘 것입니다. [이전(TYPOGRAPHY STANDARD v1.0, 13/14/15/16/18/22/28) → 현재] micro 11px → 11px (변경 없음, 알림배지·타임라인눈금 예외) caption 13px → 14px table 14px → 15px button 14px → 15px desc-sm 14px → 15px input 14px → 16px ★ 제목/내용/설명/체크리스트 compact 15px → 16px (사이드메뉴·모달본문·알림제목 — input과 통합) body 16px → 16px (변경 없음, 원래도 목표값) h3 18px → 20px h2 22px → 24px h1 28px → 30px */ --fs-h1: 30px; /* Main Title / Board Title */ --fs-h2: 24px; /* Page Title / Modal Title */ --fs-h3: 20px; /* Section Title / Card Title */ --fs-body: 16px; /* Body(긴 글) */ --fs-table: 15px; /* Table Header·Body */ --fs-button: 15px; /* Button */ --fs-input: 16px; /* Input / Label / Placeholder — 제목·내용·설명·체크리스트 */ --fs-desc-sm: 15px; /* Body Small(보조 설명) */ --fs-caption: 14px; /* Caption / Calendar Event */ /* 사이드 메뉴(15/500·활성 15/600), 모달 본문, 알림 제목이 함께 쓰던 15px 전용 단계였으나, 재조정 이후 --fs-input(16px)과 값이 같아져 사실상 별칭이 됐습니다. 세 곳의 의미(메뉴/모달/알림)가 서로 다르므로 토큰 이름은 그대로 두어, 나중에 다시 갈라야 할 때 값만 바꾸면 되게 해뒀습니다. */ --fs-body-compact: 16px; /* [기준 예외 1] --fs-micro(11px) FHD로 여유가 생겨도 이 두 곳은 크기를 못 올립니다 — 픽셀 제약이 아니라 "고정된 물리적 자리"의 문제라 화면 해상도와 무관합니다. ① 알림 배지 — 지름 16px 원 안에 들어가는 숫자입니다. 키우려면 원 자체를 키워야 하고, 그러면 상단바 아이콘 정렬이 틀어집니다. ② 타임라인 시간 눈금 — 좁은 좌측 라벨 열(모바일에서 32px까지 줄어듦)에 "13:00"이 한 줄로 들어가야 합니다. 달력 일정 칩은 --fs-caption(14px)을 그대로 씁니다. */ --fs-micro: 11px; /* ---------- 폰트 굵기 (TYPOGRAPHY STANDARD v1.0) ---------- 기본 400, 강조 600, 제목 700. 500은 메뉴·라벨처럼 "제목은 아니지만 주변보다 또렷해야 하는" 자리에 씁니다. 표준에 800은 없습니다. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- 줄간격 ---------- 표준이 항목별로 지정한 값을 그대로 토큰화했습니다. ⚠️ --lh-body(1.8)를 body 전역에 걸면 표 행·버튼·배지·메뉴까지 전부 늘어나 화면이 성겨집니다. 표준도 Caption/Body Small에는 1.6을 지정하고 있으므로, 전역 기본은 --lh-ui(1.6)로 두고 긴 글에만 --lh-body / --lh-reading을 적용합니다. */ --lh-tight: 1.2; /* 칩·배지처럼 한 줄로 끝나는 요소 */ --lh-ui: 1.6; /* 전역 기본 — Caption / Body Small */ --lh-body: 1.8; /* Body(긴 글) */ --lh-reading: 1.9; /* Board Content(게시글 본문) */ /* ---------- 긴 글 최대 폭 ---------- [FHD Desktop] 권장 범위(760~860px) 중 하한을 썼던 것을, 데스크톱 여유 공간에 맞춰 상한으로 올렸습니다. 16px 본문 기준 한 줄 약 38~42자 (한글) 정도로, 여전히 읽기 적정 범위 안입니다. ⚠️ 전역에 걸면 대시보드·칸반·표처럼 넓게 써야 하는 화면이 가운데 좁게 몰립니다. 읽기용 본문(.reading-body)에만 적용합니다. */ --content-max-width: 860px; /* ---------- 배경색 ---------- 그룹웨어 --color-bg(#F7F8FA)와 데이터분석 --bg-base(#F7F8FA)가 같은 색이라 --color-bg를 기준으로 통합하고, 데이터분석 쪽 코드가 계속 동작하도록 --bg-base는 --color-bg를 가리키는 별칭으로 둡니다. */ --color-bg: #F7F8FA; --bg-base: var(--color-bg); /* ---------- 모서리 반경 (그룹웨어 값으로 통일) ---------- 데이터분석 모듈은 원래 4/8/12px를 썼습니다. 그룹웨어 기준으로 통일하면서 모든 단계가 2~4px씩 둥글어집니다. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* --radius-full은 그룹웨어에 없던 값인데, 데이터분석의 원형 아이콘 3곳이 쓰고 있어 그대로 가져왔습니다. "완전한 원/알약 모양"이라 스케일과 무관한 별개 용도입니다. */ --radius-full: 9999px; /* ---------- 그림자 (그룹웨어 값으로 통일) ---------- Notion처럼 은은하게. 순수 검정 대신 살짝 남색이 도는 rgba(16,24,40)을 쓰는 것이 그룹웨어 방식이고, 데이터분석이 쓰던 rgba(0,0,0)보다 배경과 자연스럽게 섞입니다. */ --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); /* ---------- 버튼 크기 (그룹웨어 ↔ 데이터분석 공통) ---------- [버튼 크기 통일] 두 모듈이 각자 .btn을 따로 정의하면서 padding이 9px 14px(그룹웨어) / 10px 16px(데이터분석)로 갈라져 있었습니다. radius/shadow와 같은 이유로 여기 공유 토큰으로 옮겨, 앞으로는 둘 중 하나만 바뀌는 일이 구조적으로 불가능하게 했습니다. line-height는 1을 강제하던 데이터분석 쪽 방식 대신, 패딩이 이미 세로 여백을 만들어주므로 살짝 여유 있는 1.3을 공통으로 씁니다. */ /* ---------- 버튼 크기 ---------- */ --btn-padding-y: 9px; --btn-padding-x: 14px; /* ⭐ 버튼 글자를 아래로 내리는 양 (광학 보정) ⭐ ------------------------------------------------------------ [왜 필요한가] 계산과 브라우저 실측(getBoundingClientRect, Canvas TextMetrics)은 모두 "글자가 정확히 중앙에 있다"고 나옵니다. 폰트 지표로 따져도 한글 잉크의 중심과 글자 상자의 중심이 일치합니다. 그런데 실제 화면에서는 글자가 위로 떠 보입니다 — 여러 차례 눈으로 확인된 사실입니다. 기하학적 중앙과 사람이 느끼는 중앙이 다른 것은 타이포그래피에서 흔한 일입니다(한글은 받침 유무에 따라 글자마다 잉크가 차지하는 위치가 달라, 평균적으로 위쪽에 몰려 보입니다). 그래서 측정값을 맞추는 대신 눈에 맞추는 "광학 보정"을 넣습니다. [작동 방식] 위 padding을 이 값만큼 늘리고 아래 padding을 같은 만큼 줄입니다. 따라서 **버튼 전체 높이는 전혀 변하지 않고** 글자만 아래로 내려갑니다. [현재 값을 0.5px로 정한 근거] 1.5px → 1px → 0.5px로 두 차례에 걸쳐 0.5px씩 올려달라는 요청을 반영했습니다. 참고로 보정 1px에서는 반각 +가 정확히 중앙에 오고, 2.5px에서는 한글이 정중앙에 오지만 그만큼 +가 아래로 처집니다 — 둘을 동시에 만족시킬 수는 없는 구조입니다(자세한 이유는 --btn-line-height 주석 참고). 0.5px는 그 사이에서도 +에 더 가까운 지점입니다. [조절 방법] 위로 떠 보이면 값을 키우고, 내려가 보이면 줄이세요. 0으로 두면 보정이 꺼집니다(순수 기하학적 중앙). 이 값 하나만 바꾸면 두 모듈의 모든 버튼에 한꺼번에 반영됩니다. */ --btn-text-nudge: 0.5px; /* 위/아래를 비대칭으로 주되 합은 그대로 유지합니다(높이 불변). */ --btn-padding: calc(var(--btn-padding-y) + var(--btn-text-nudge)) var(--btn-padding-x) max(0px, calc(var(--btn-padding-y) - var(--btn-text-nudge))); /* ⚠️ 이 값을 만지기 전에 반드시 읽어주세요 ⚠️ "버튼 글자가 위로 치우친다"는 증상을 이 값으로 고치려는 시도가 세 번 있었고(1.3 → 1 → 1.5) 전부 헛수고였습니다. 실제 폰트 지표(Pretendard: ascent 1.0em, descent 0.26em)로 계산하면 line-height를 1.0으로 하든 1.8로 하든 **잉크의 치우침은 -0.15px로 완전히 동일**합니다. 이유는 단순합니다 — line-height가 만드는 여백(leading)은 글자 위아래로 항상 균등하게 나뉘고, flex의 align-items:center는 그 상자를 정확히 가운데 놓기 때문입니다. 즉 이 값은 버튼의 "높이"만 바꿀 뿐 글자의 "치우침"과는 무관합니다. (계산뿐 아니라 브라우저 실측으로도 확인했습니다) 치우침이 보인다면 여기가 아니라 --btn-text-nudge를 조절하세요. 그쪽이 글자를 위/아래로 옮기는 값입니다. 값은 1로 둡니다. 이러면 버튼 높이가 padding(9px)×2 + 글자상자(15px) = 33px가 되어, .btn-sm/.btn-xs 등 변형들도 각자 원래 높이를 그대로 유지합니다. */ --btn-line-height: 1; /* ---------- 간격 (그룹웨어 ↔ 데이터분석 공통) ---------- [간격 체계 통합] 데이터분석 모듈만 --space-* 7단계를 갖고 있었고, 그룹웨어는 spacing 토큰이 하나도 없이 102곳이 전부 하드코딩이었습니다. radius/shadow/버튼과 같은 이유로 여기 공유 토큰으로 옮깁니다. 값은 데이터분석이 쓰던 스케일을 그대로 가져왔습니다 — 이미 실사용 중이라 바꾸면 그쪽 화면이 전부 틀어지고, 4px 배수 기반이라 기준으로 삼기에도 적절합니다. ⚠️ 그룹웨어의 하드코딩 값 중 절반(48곳)은 6·10·14·18·20px처럼 이 스케일에 없는 값입니다. 이번에는 값이 정확히 같은 곳만 토큰으로 바꿨고(무손실), 스케일 밖 값은 화면이 실제로 바뀌는 변경이라 손대지 않았습니다. 정리하려면 별도 판단이 필요합니다. */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 36px; --space-3xl: 56px; } /* ============================================================ 다크 모드 ------------------------------------------------------------ ⭐ 적용 방식 ⭐ 가 붙으면 이 블록의 값들이 :root보다 나중에 선언되어 우선 적용됩니다(CSS 캐스케이드 — 같은 :root라도 나중에 나온 규칙이 이깁니다). js/core/theme.js가 이 속성을 붙이고 뗍니다. ⭐ 왜 여기(tokens.css)에 두었나 ⭐ 그룹웨어와 데이터분석 모듈이 이 파일을 함께 불러오므로, 두 화면이 같은 토큰 이름을 공유하는 --color-bg, --shadow-* 등은 다크모드 전환 시에도 항상 같은 값을 갖게 됩니다. 각 모듈 전용 토큰의 다크 버전은 각자의 파일에서 재정의합니다 — 그룹웨어 전용(--color-surface 등)은 styles.css의 [data-theme="dark"] 블록에서, 데이터분석 전용(--color-primary-*, --text-* 등 별도 색상 스케일)은 data-analysis/css/style.css의 [data-theme="dark"] 블록에서 처리합니다. 두 모듈 다 다크모드를 지원합니다. ============================================================ */ [data-theme="dark"] { --color-bg: #14181F; --bg-base: var(--color-bg); /* 그림자는 밝은 배경 전제로 설계된 값이라(옅은 검정) 어두운 배경 위에서는 거의 안 보입니다. 대비를 더 준 값으로 교체합니다. 그룹웨어와 데이터분석이 각자 두고 있던 다크 그림자도 값이 미세하게 달랐는데(blur 14px 대 10px), 여기서 그룹웨어 값으로 합쳤습니다. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); }