/* ========================================================================== G5Pro 디자인 토큰 shadcn/ui 의 기본(zinc) 팔레트를 CSS 변수로 옮긴 것. Tailwind 를 설치하지 않고 손으로 쓴 CSS 이므로 빌드 산출물이 없다. 규약 - 모든 변수는 --pro- 접두사. 순정 CSS 나 서드파티 스킨의 변수와 절대 충돌하지 않는다. - 색은 shadcn 규약대로 HSL 삼중값만 담는다. 사용처에서 hsl(var(--pro-primary)) 로 쓰고 투명도가 필요하면 hsl(var(--pro-primary) / .5) 로 쓴다. - 라이트/다크는 로 전환한다. data-theme 이 없으면 prefers-color-scheme 를 따른다. ========================================================================== */ /* ========================================================================== 폰트 깜빡임(FOUT) 방지 — 폴백 메트릭 보정 Pretendard 는 CDN 에서 오고 그 CSS 의 @font-face 92개가 전부 font-display:swap 이다. 그래서 화면은 이 순서로 그려진다. ① 맑은 고딕으로 먼저 그림 → ② Pretendard 도착 → ③ 갈아 끼움 두 폰트의 메트릭이 달라서 ③ 에서 글자 폭과 줄 높이가 눈에 띄게 튄다. 실측값 (같은 문자열 100px, Chrome/Windows) 폭 Pretendard 1619.59px 맑은 고딕 1792.09px → Pretendard 가 9.63% 좁다 ascent Pretendard 95 맑은 고딕 109 descent Pretendard 24 맑은 고딕 24 아래 가짜 패밀리는 실체가 맑은 고딕이지만 위 차이만큼 눌러서 Pretendard 와 같은 자리를 차지하게 만든다. 그러면 ③ 에서 글자가 안 움직인다. 폰트를 바꾸거나 버전을 올리면 _g5pro_font_probe.html 로 다시 재서 값을 갱신할 것. local() 이 맑은 고딕뿐이므로 이 보정은 Windows 에서만 걸린다. macOS 는 이 face 가 해석되지 않아 그냥 다음 폰트(Apple SD Gothic Neo)로 넘어간다 — 예전과 같은 동작이다. */ @font-face { font-family: "Pretendard Fallback"; src: local("Malgun Gothic"), local("맑은 고딕"); font-style: normal; font-weight: 100 900; size-adjust: 90.37%; ascent-override: 105.12%; descent-override: 26.56%; line-gap-override: 0%; } :root { color-scheme: light; /* --- 표면 --- 바닥은 순백이 아니라 아주 옅은 라일락 회색이다. 그 위에 흰 카드를 얹어야 테두리 없이도 카드가 떠 보인다 — 마루가 선을 안 쓰고 면으로만 구분하는 방식. */ --pro-background: 240 20% 95.5%; /* #F1F1F6 바닥 */ --pro-foreground: 240 13% 12%; /* #1A1A22 먹 */ --pro-card: 0 0% 100%; --pro-card-foreground: 240 13% 12%; --pro-popover: 0 0% 100%; --pro-popover-foreground: 240 13% 12%; /* --- 의미색 --- 액센트는 블루 하나뿐이다. 이 색이 나오는 자리를 늘리지 말 것 — 글쓰기 버튼, 활성 상태, 댓글 수, 공지 표시. 그 이상은 강조가 강조가 아니게 된다. 흰 글자를 얹었을 때 5.20:1 로 WCAG AA 를 넘긴다. 앞서 쓰던 탠저린(#F4511E)은 3.47:1 로 미달이었다 — 색조를 바꾸면서 그것도 같이 고쳤다. info 는 인디고(243°)다. primary(221°)와 22° 벌어져 구별되면서도 차가운 계열이라 '정보'로 읽힌다. 보라까지 가면 브랜드색처럼 보여 뜻이 흐려진다. */ --pro-primary: 221 83% 53%; /* #2563EB 블루 */ --pro-primary-foreground: 0 0% 100%; --pro-secondary: 240 17% 91%; /* #E4E4EC 분류 칩 바탕 */ --pro-secondary-foreground: 240 10% 39%; --pro-muted: 240 20% 96%; /* #F3F3F7 */ --pro-muted-foreground: 240 5% 50%; /* #797986 */ --pro-accent: 240 14% 93%; --pro-accent-foreground: 240 13% 12%; --pro-destructive: 0 72% 51%; --pro-destructive-foreground:0 0% 100%; /* shadcn 기본에는 없지만 게시판에 필요해서 추가한 것. 마루의 보조색이다. 분류 칩 세 종류가 여기서 나온다. */ --pro-success: 172 100% 33%; /* #00A88E 민트 */ --pro-success-foreground: 0 0% 100%; --pro-warning: 38 92% 45%; --pro-warning-foreground: 0 0% 100%; --pro-info: 243 75% 59%; /* #5048E5 인디고 */ --pro-info-foreground: 0 0% 100%; --pro-plum: 272 44% 44%; /* #6B3FA0 자두 */ /* --- 선 --- 마루는 카드 테두리를 안 쓴다. --pro-border 는 표 안 행 구분선처럼 "면으로는 못 나누는 자리" 에만 쓰는 아주 옅은 실선이다. ring 은 액센트를 따라간다 — 포커스는 브랜드색이 맞다. */ /* 바닥(#F1F1F6, L=95.5%)과 거의 같은 밝기라 선이 안 보였다 — 바닥 위 1.01:1. 카드 위 1.46:1 / 바닥 위 1.30:1 로 내려 실선이 실선으로 읽히게 한다. 더 진하게 하면 표의 행 구분선이 격자처럼 튄다. 여기가 경계다. */ --pro-border: 240 16% 86%; /* #D5D5E1 — 행 구분선 같은 장식용 실선 */ /* ★ --pro-border 와 --pro-input 은 역할이 다르므로 밝기를 같이 두면 안 된다. border 는 장식(행 구분선)이고, input 은 "여기가 조작할 수 있는 칸" 이라는 경계다. WCAG 1.4.11 이 UI 요소 경계에 요구하는 값이 3:1 인데, 예전엔 둘이 같은 밝기라 흰 카드 위에서 1.33:1 이었다 — 사실상 안 보였다. 아래 값은 흰 카드(#FFF) 위에서 3.07:1. 바꿀 때는 _g5pro_contrast_probe.html 로 잴 것. */ --pro-input: 240 10% 61%; /* #91919E */ --pro-ring: 221 83% 53%; /* --- 그림자 --- 마루의 그림자는 두 겹이다. 1px 짜리로 카드 경계를 세우고, 크게 번지는 두 번째 겹으로 바닥에서 띄운다. 테두리를 안 쓰는 대신 이게 경계 역할을 한다. (다크에서는 값 자체를 바꾼다. 어두운 배경에서 검은 그림자는 안 보인다.) */ --pro-shadow-sm: 0 1px 2px hsl(240 13% 12% / .05); --pro-shadow: 0 1px 2px hsl(240 13% 12% / .05), 0 6px 18px -14px hsl(240 13% 12% / .35); --pro-shadow-md: 0 2px 4px hsl(240 13% 12% / .06), 0 16px 30px -18px hsl(240 13% 12% / .5); --pro-shadow-lg: 0 4px 8px hsl(240 13% 12% / .07), 0 24px 48px -24px hsl(240 13% 12% / .55); /* 액센트 버튼 전용. 브랜드색이 바닥에 옅게 번져야 「눌러도 되는 것」으로 읽힌다. */ --pro-shadow-primary: 0 6px 16px -6px hsl(221 83% 53% / .75); /* --- 모서리 --- 바깥이 클수록 안쪽은 작아야 한다. 카드 16px 안에 10px 버튼이 앉으면 모서리가 동심으로 보인다. 반대로 하면 버튼이 카드 밖으로 삐져나온 듯 보인다. ★ 버튼·칩·쪽번호는 --pro-radius-btn 하나만 본다. 여기만 바꾸면 전부 따라간다. 0 각진 사각 0.625rem 지금(약간 둥근) 9999px 완전 pill 완전 pill 은 스위치·아바타·스피너처럼 「원이어야 뜻이 통하는」 것에만 남긴다. */ --pro-radius: 1rem; --pro-radius-sm: 0.5rem; --pro-radius-md: 0.625rem; --pro-radius-lg: var(--pro-radius); --pro-radius-btn: 0.625rem; --pro-radius-full: 9999px; /* --- 타이포 --- "Pretendard Fallback" 은 아래 @font-face 가 만든 가짜 패밀리다. 실체는 맑은 고딕인데 Pretendard 와 같은 폭·높이로 보이도록 보정해 두었다. Pretendard 바로 뒤에 둬야 CDN 폰트가 도착하기 전 이 폰트로 그려지고, 도착 후 갈아 끼울 때 글자가 안 움직인다. */ --pro-font-sans: "Pretendard Variable", Pretendard, "Pretendard Fallback", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, "Noto Sans KR", sans-serif; --pro-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "D2Coding", "Liberation Mono", Menlo, monospace; --pro-text-xs: 0.75rem; --pro-text-sm: 0.875rem; --pro-text-base: 1rem; --pro-text-lg: 1.125rem; --pro-text-xl: 1.25rem; --pro-text-2xl: 1.5rem; --pro-text-3xl: 1.875rem; --pro-leading-tight: 1.25; --pro-leading-normal: 1.6; /* --- 간격 (4px 배수) --- */ --pro-sp-1: 0.25rem; --pro-sp-2: 0.5rem; --pro-sp-3: 0.75rem; --pro-sp-4: 1rem; --pro-sp-5: 1.25rem; --pro-sp-6: 1.5rem; --pro-sp-8: 2rem; --pro-sp-10: 2.5rem; --pro-sp-12: 3rem; /* --- 레이아웃 --- */ --pro-container: 1200px; --pro-header-h: 3.5rem; /* --- 전환 --- */ --pro-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* 시스템이 다크인데 사용자가 명시 선택을 하지 않은 경우 */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; /* 라이트를 뒤집은 게 아니다. 바닥과 카드의 밝기 차를 라이트보다 좁혀야 (95.5→100 vs 6.5→10.4) 어두운 화면에서 카드가 둥둥 뜨지 않는다. */ --pro-background: 240 15% 6.5%; --pro-foreground: 240 19% 94%; --pro-card: 240 13% 10.5%; --pro-card-foreground: 240 19% 94%; --pro-popover: 240 13% 13%; --pro-popover-foreground: 240 19% 94%; /* 블루를 살짝 밝히고 채도를 낮춘다. 원래 값 그대로면 어두운 바탕에서 가라앉아 버튼이 안 읽힌다. */ --pro-primary: 217 85% 64%; --pro-primary-foreground: 240 15% 6.5%; --pro-secondary: 240 10% 18%; --pro-secondary-foreground: 240 12% 78%; --pro-muted: 240 11% 15%; --pro-muted-foreground: 240 9% 58%; --pro-accent: 240 10% 20%; --pro-accent-foreground: 240 19% 94%; --pro-destructive: 0 65% 55%; --pro-destructive-foreground:0 0% 100%; --pro-success: 172 60% 48%; --pro-warning: 38 92% 62%; --pro-info: 243 80% 76%; --pro-plum: 272 55% 70%; --pro-border: 240 10% 24%; /* 카드(#17171E) 위 1.55:1 */ --pro-input: 240 10% 43%; /* 카드(#17171E) 위에서 3.02:1 */ --pro-ring: 217 85% 64%; --pro-shadow-sm: 0 1px 2px hsl(0 0% 0% / .4); --pro-shadow: 0 1px 2px hsl(0 0% 0% / .5), 0 6px 18px -14px hsl(0 0% 0% / .9); --pro-shadow-md: 0 2px 4px hsl(0 0% 0% / .55), 0 16px 30px -18px hsl(0 0% 0% / .95); --pro-shadow-lg: 0 4px 8px hsl(0 0% 0% / .6), 0 24px 48px -24px hsl(0 0% 0% / 1); --pro-shadow-primary: 0 6px 18px -8px hsl(217 85% 64% / .65); } } /* 사용자가 명시적으로 고른 다크 — 시스템 설정을 이긴다 */ :root[data-theme="dark"] { color-scheme: dark; --pro-background: 240 15% 6.5%; --pro-foreground: 240 19% 94%; --pro-card: 240 13% 10.5%; --pro-card-foreground: 240 19% 94%; --pro-popover: 240 13% 13%; --pro-popover-foreground: 240 19% 94%; --pro-primary: 217 85% 64%; --pro-primary-foreground: 240 15% 6.5%; --pro-secondary: 240 10% 18%; --pro-secondary-foreground: 240 12% 78%; --pro-muted: 240 11% 15%; --pro-muted-foreground: 240 9% 58%; --pro-accent: 240 10% 20%; --pro-accent-foreground: 240 19% 94%; --pro-destructive: 0 65% 55%; --pro-destructive-foreground:0 0% 100%; --pro-success: 172 60% 48%; --pro-warning: 38 92% 62%; --pro-info: 243 80% 76%; --pro-plum: 272 55% 70%; --pro-border: 240 10% 24%; /* 카드(#17171E) 위 1.55:1 */ --pro-input: 240 10% 43%; /* 카드(#17171E) 위에서 3.02:1 */ --pro-ring: 217 85% 64%; --pro-shadow-sm: 0 1px 2px hsl(0 0% 0% / .4); --pro-shadow: 0 1px 2px hsl(0 0% 0% / .5), 0 6px 18px -14px hsl(0 0% 0% / .9); --pro-shadow-md: 0 2px 4px hsl(0 0% 0% / .55), 0 16px 30px -18px hsl(0 0% 0% / .95); --pro-shadow-lg: 0 4px 8px hsl(0 0% 0% / .6), 0 24px 48px -24px hsl(0 0% 0% / 1); --pro-shadow-primary: 0 6px 18px -8px hsl(217 85% 64% / .65); } /* 사용자가 명시적으로 고른 라이트 — 시스템이 다크여도 이긴다 (위 media 블록이 :not([data-theme]) 이므로 자동) */ :root[data-theme="light"] { color-scheme: light; }