/* ============================================================ 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; /* ---------- 폰트 크기 (TYPOGRAPHY STANDARD v2.0 — FHD Desktop) ---------- [재적용] 예전에 v1.0(촘촘한 크기)으로 되돌렸던 적이 있으나, 다시 "FHD Desktop Typography v2.0" 기준으로 올립니다. 쓰기 영역 (--fs-input)을 14→16px로 올리고, 위계가 무너지지 않도록 나머지 단계도 함께 한 단씩 올립니다(caption 13→14, table/button/desc-sm 14→15, compact 15→16, h3 18→20, h2 22→24, h1 28→30 — body/micro는 이번에도 변경 없음). 아래 토큰들만 바꾸면 되도록 처음부터 전부 토큰화해 둔 덕에(v1.6.1), 화면 코드는 건드리지 않았습니다. v1.0으로 되돌렸던 이유(레이아웃이 촘촘한 크기에 맞춰져 있어 커지면 답답하다는 피드백)가 재발하면, 화면별 레이아웃(여백·줄바꿈)도 함께 점검이 필요할 수 있습니다. */ --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 */ /* 사이드 메뉴(16/500·활성 16/600), 모달 본문, 알림 제목이 함께 쓰던 16px 전용 단계입니다. 세 곳의 의미(메뉴/모달/알림)가 서로 다르므로 토큰 이름은 그대로 두어, 나중에 갈라야 할 때 값만 바꾸면 되게 해뒀습니다. */ --fs-body-compact: 16px; /* [기준 예외 1] --fs-micro(11px) 크기를 못 올리는(또는 되돌려도 그대로인) 두 곳입니다 — 픽셀 제약이 아니라 "고정된 물리적 자리"의 문제라 화면 해상도와 무관합니다. ① 알림 배지 — 지름 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; /* ---------- 줄간격 ---------- [읽기 모드 폐지] 게시글 본문(.reading-body)만 줄간격을 1.9로, 최대 폭을 860px로 따로 두던 "읽기 전용 서식"이 있었습니다. 워크스페이스가 작성 화면과 상세보기(읽기) 사이를 계속 오가며 둘을 서로 맞추는 작업을 반복하게 만든 원인이라, 별도 모드 자체를 없앴습니다 — 이제 본문이든 UI 요소든 화면 전체가 --lh-ui(1.6) 하나만 씁니다. 표준이 Caption/Body Small에 원래 지정한 값이기도 합니다. --lh-body/ --lh-reading/--content-max-width 토큰과 그 토큰을 쓰던 .reading-body 전용 규칙은 삭제했습니다(css/styles.css 참고).*/ --lh-tight: 1.2; /* 칩·배지처럼 한 줄로 끝나는 요소 */ --lh-ui: 1.6; /* 전역 기본 — 본문 포함 화면 전체 */ /* ---------- 배경색 ---------- 그룹웨어 --color-bg(#F7F8FA)와 데이터분석 --bg-base(#F7F8FA)가 같은 색이라 --color-bg를 기준으로 통합하고, 데이터분석 쪽 코드가 계속 동작하도록 --bg-base는 --color-bg를 가리키는 별칭으로 둡니다. */ --color-bg: #F7F8FA; --bg-base: var(--color-bg); /* ---------- 기본 텍스트색 ---------- [사용자 지적 - "데이터분석(독립모듈)의 버튼은 다른 버튼들 하고 다른것 같은데? 독립모듈이어도 디자인은 통일해 두었던거 아닌가?"] .btn의 padding/font-size/radius/line-height는 이미 이 파일의 공유 토큰으로 통일돼 있었지만, 배경/글자색은 그룹웨어 .btn이 여기 없는 --color-text를, 데이터분석 .btn이 자기만의 --text-secondary를 써서 실제로는 서로 다른 값이었습니다(위 --color-bg/--bg-base와 똑같이 "이름만 다른 같은 개념"인데 공유가 안 돼 있던 경우). 그룹웨어 --color-text(#1F2937)와 데이터분석 --text-primary(#1A1A1A, 다크에서는 #E7EAF0로 완전히 동일)가 사실상 같은 "기본/진한 텍스트" 색이라 여기로 통합합니다 — 데이터분석의 --text-primary는 이제 이 --color-text를 가리키는 별칭입니다(data-analysis/css/style.css 참고). */ --color-text: #1F2937; /* ---------- 모서리 반경 (그룹웨어 값으로 통일) ---------- 데이터분석 모듈은 원래 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; /* ---------- 입력창/선택창 크기 ---------- .login-input의 좌우 padding이 css/styles.css 규칙 안에 9px 12px로 직접 박혀 있었던 것을 토큰으로 뽑았습니다. [세로폭 — 결국 버튼 기준으로 통일] 한 줄짜리 /는 브라우저 네이티브 UI 여백이 남아 padding/line-height만으로는 원하는 높이가 나오지 않았고(부서 캘린더 select 때 확인), 그렇다고 ·검색창(--fs-input 16px)과 .btn(--fs-button 15px)은 애초에 글자 크기부터 달라 나란히 두면 세로폭이 어긋났습니다. 최종 요청("+ 새 글쓰기 버튼이나 갤러리 탭 크기가 지금 딱 좋다, 이 기준으로 통일")에 따라 css/styles.css의 input.login-input, select.login-input 규칙은 --btn-padding-y/--fs-button/--btn-line-height(.btn이 쓰는 토큰 그대로)로 font-size·line-height·height를 다시 정의합니다. 이 --input-padding-y는 이제 .login-input 기본 규칙(여러 줄 입력 포함 좌우/기본 padding)에만 쓰입니다. */ --input-padding-y: 9px; --input-padding-x: 12px; /* ---------- 공용 테두리 굵기 ---------- [사용자 지적 - "버튼하고 선택창하고 높이가 다른데.. 워크스페이스 새 글쓰기에 선택 창 텍스트도 잘려져 있고"] 지금까지 select/input의 height를 .btn과 같은 계산식(패딩*2+글자크기)으로 맞췄지만, 그 계산은 "테두리가 없는 .btn"을 기준으로 한 값입니다. select/input은 테두리(1px 위+아래=2px)가 있는데, box-sizing:border-box에서는 그 2px도 지정한 height 안에서 나눠 가져야 하므로, padding+글자 영역이 height와 정확히 같으면(기존 계산식이 그랬음) 테두리가 들어갈 자리가 없어 2px만큼 글자 아래가 잘렸습니다. 또한 브라우저 기본(native)