/* ========================================================================== 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) 방지 — 폴백 메트릭 보정 나눔고딕 폰트 CSS 는 테마 것(fonts/nanum-gothic/, woff2 는 CDN)을 쓰고 soda 는 @font-face(92 서브셋 × 400/700/800)가 전부 font-display:swap 이다 (head.sub.php 주석 참조 — default 의 optional 은 클릭/새로고침의 글꼴이 달라져 되돌렸다). swap 은 폰트가 늦게 오면 폴백(맑은 고딕)으로 먼저 그린 뒤 갈아 끼우므로, 그 두 화면이 같은 자리를 차지해야 교체 순간 레이아웃이 안 튄다 — 이 보정이 그걸 맡는다. 계산값 (fontTools 로 폰트 파일에서 직접 계산, 2026-07) 한·영 혼합 견본 문자열의 폭 합계로 재면 나눔고딕 / Pretendard = 1.0714 여기에 예전 Chrome/Windows 실측치 Pretendard/맑은고딕 = 0.9037 을 곱해 나눔고딕 / 맑은고딕 = 0.9682 → size-adjust ascent 0.844 / descent 0.156 은 나눔고딕 hhea 값이고, override 는 각각을 size-adjust 로 나눈 값이다. (같은 방법으로 Pretendard 를 계산하면 hhea 95/24 가 나와 예전 실측 주석과 일치 — 방법 검증됨) 아래 가짜 패밀리는 실체가 맑은 고딕이지만 위 차이만큼 눌러서 나눔고딕과 같은 자리를 차지하게 만든다. 폰트를 바꾸면 값을 다시 계산할 것. local() 이 맑은 고딕뿐이므로 이 보정은 Windows 에서만 걸린다. macOS 는 이 face 가 해석되지 않아 그냥 다음 폰트(Apple SD Gothic Neo)로 넘어간다 — 예전과 같은 동작이다. */ @font-face { font-family: "Nanum Gothic Fallback"; src: local("Malgun Gothic"), local("맑은 고딕"); font-style: normal; font-weight: 100 900; size-adjust: 96.82%; ascent-override: 87.17%; descent-override: 16.11%; line-gap-override: 0%; } :root { color-scheme: light; /* --- 표면 --- 바닥은 순백이 아니라 옅은 소다(하늘색)다. 그 위에 흰 카드를 얹어야 테두리 없이도 카드가 떠 보인다 — default 가 라일락으로 하던 것을 파랑으로 옮겼다. 채도가 높아 보여도 L=95.5% 라 화면에서는 "흰 바탕에 푸른 기" 정도로 읽힌다. */ --pro-background: 213 78% 95.5%; /* #EBF3FC 소다 바닥 */ --pro-foreground: 215 28% 14%; /* #1A222E 짙은 남먹 */ --pro-card: 0 0% 100%; --pro-card-foreground: 215 28% 14%; --pro-popover: 0 0% 100%; --pro-popover-foreground: 215 28% 14%; /* --- 의미색 --- 액센트는 소다 블루 하나뿐이다. 이 색이 나오는 자리를 늘리지 말 것 — 글쓰기 버튼, 활성 상태, 댓글 수, 공지 표시. 그 이상은 강조가 강조가 아니게 된다. 시안(#2E7CF6)은 흰 글자와 3.93:1 로 AA 미달이라, 같은 색상(217°)에서 밝기만 내린 #2268E5 를 쓴다 — 흰 글자 5.02:1. 시안의 진한 쪽(#1D5FD1)과 버튼 쪽(#2E7CF6) 사이 값이라 눈에는 같은 "소다 블루"로 읽힌다. info 는 인디고(243°)다. primary(217°)와 26° 벌어져 구별되면서도 차가운 계열이라 '정보'로 읽힌다. 보라까지 가면 브랜드색처럼 보여 뜻이 흐려진다. */ --pro-primary: 217 84% 52%; /* #2268E5 소다 블루 */ --pro-primary-foreground: 0 0% 100%; --pro-secondary: 214 100% 92%; /* #D6E7FF 분류 칩 바탕 */ --pro-secondary-foreground: 218 70% 44%; /* #2260BE */ --pro-muted: 213 60% 96%; /* #EFF5FC */ --pro-muted-foreground: 215 16% 47%; /* #64748B 슬레이트 */ --pro-accent: 213 70% 93%; --pro-accent-foreground: 215 28% 14%; --pro-destructive: 0 72% 51%; --pro-destructive-foreground:0 0% 100%; /* shadcn 기본에는 없지만 게시판에 필요해서 추가한 것. 분류 칩 세 종류가 여기서 나온다. success 는 그라디언트 끝색과 같은 틸이다. */ --pro-success: 173 80% 33%; /* #119787 틸 */ --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 자두 */ /* --- 그라디언트 (soda 전용 토큰) --- 시안 L3 의 스카이→블루→틸. 히어로·FAB·기본 아바타가 쓴다. 아바타는 닉네임 해시로 세 벌 중 하나를 골라 사람마다 다르게 보이게 한다. */ --pro-grad: linear-gradient(115deg, hsl(199 93% 60%), hsl(217 91% 60%) 55%, hsl(173 80% 40%)); --pro-grad-2: linear-gradient(135deg, hsl(173 80% 40%), hsl(217 91% 60%)); --pro-grad-3: linear-gradient(135deg, hsl(239 84% 67%), hsl(199 93% 60%)); /* --- 선 --- 마루는 카드 테두리를 안 쓴다. --pro-border 는 표 안 행 구분선처럼 "면으로는 못 나누는 자리" 에만 쓰는 아주 옅은 실선이다. ring 은 액센트를 따라간다 — 포커스는 브랜드색이 맞다. */ /* 밝기 기준은 default 와 같다(카드 위 ≈1.46:1). 색조만 소다에 맞춰 푸르게. */ --pro-border: 214 40% 86%; /* #CDDCEA — 행 구분선 같은 장식용 실선 */ /* ★ --pro-border 와 --pro-input 은 역할이 다르므로 밝기를 같이 두면 안 된다. border 는 장식(행 구분선)이고, input 은 "여기가 조작할 수 있는 칸" 이라는 경계다. WCAG 1.4.11 이 UI 요소 경계에 요구하는 값이 3:1. 아래 값은 흰 카드(#FFF) 위에서 3.0:1 이상. 바꿀 때는 _g5pro_contrast_probe.html 로 잴 것. */ --pro-input: 215 14% 60%; /* #8595A8 */ --pro-ring: 217 84% 52%; /* --- 그림자 --- 마루의 그림자는 두 겹이다. 1px 짜리로 카드 경계를 세우고, 크게 번지는 두 번째 겹으로 바닥에서 띄운다. 테두리를 안 쓰는 대신 이게 경계 역할을 한다. (다크에서는 값 자체를 바꾼다. 어두운 배경에서 검은 그림자는 안 보인다.) */ /* 그림자에 먹 대신 파랑을 탄다 — 시안의 rgba(50,100,180,.09) 계열. 파란 바닥 위에서 회색 그림자는 탁해 보이고, 파란 그림자는 "물속 그늘"처럼 앉는다. */ --pro-shadow-sm: 0 1px 2px hsl(213 55% 35% / .06); --pro-shadow: 0 1px 2px hsl(213 55% 35% / .05), 0 6px 18px -8px hsl(213 55% 45% / .22); --pro-shadow-md: 0 2px 4px hsl(213 55% 35% / .06), 0 16px 30px -14px hsl(213 55% 45% / .32); --pro-shadow-lg: 0 4px 8px hsl(213 55% 35% / .07), 0 24px 48px -20px hsl(213 55% 45% / .38); /* 액센트 버튼 전용. 브랜드색이 바닥에 옅게 번져야 「눌러도 되는 것」으로 읽힌다. */ --pro-shadow-primary: 0 6px 16px -6px hsl(217 84% 52% / .6); /* --- 모서리 --- 바깥이 클수록 안쪽은 작아야 한다. 카드 안에 버튼이 앉으면 모서리가 동심으로 보인다. 반대로 하면 버튼이 카드 밖으로 삐져나온 듯 보인다. soda 는 SNS 룩이라 default 보다 한 단계씩 둥글다: 카드 20px, 버튼은 완전 pill. ★ 버튼·칩·쪽번호는 --pro-radius-btn 하나만 본다. 여기만 바꾸면 전부 따라간다. */ --pro-radius: 1.25rem; --pro-radius-sm: 0.625rem; --pro-radius-md: 0.75rem; --pro-radius-lg: var(--pro-radius); --pro-radius-btn: 9999px; --pro-radius-full: 9999px; /* --- 타이포 --- "Nanum Gothic Fallback" 은 위 @font-face 가 만든 가짜 패밀리다. 실체는 맑은 고딕인데 나눔고딕과 같은 폭·높이로 보이도록 보정해 두었다. Nanum Gothic 바로 뒤에 둬야 폰트 캐시가 빈 첫 방문에서 이 폰트로 그려지고, 캐시 후 방문과 같은 자리를 차지해 화면 간 이동이 조용하다. */ --pro-font-sans: "Nanum Gothic", "Nanum Gothic 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; /* 나눔고딕은 Pretendard 보다 글자 폭이 넓고 자간도 성겨 보인다. 본문 전체를 살짝 조여 밀도를 맞춘다. 글자가 클수록 같은 자간도 넓어 보이므로 큰 제목류(lg 이상)는 tight 를 쓴다. */ --pro-tracking: -0.02em; --pro-tracking-tight: -0.04em; --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; /* 라이트를 뒤집은 게 아니다. 바닥과 카드의 밝기 차를 라이트보다 좁혀야 어두운 화면에서 카드가 둥둥 뜨지 않는다. soda 다크는 남색(217°) 계열 — "밤의 물속" 이 컨셉이라 default 의 무채색 다크보다 색조가 뚜렷하다. */ --pro-background: 218 35% 8%; /* #0D1420 */ --pro-foreground: 213 30% 93%; --pro-card: 217 30% 13%; /* #17202B */ --pro-card-foreground: 213 30% 93%; --pro-popover: 217 28% 16%; --pro-popover-foreground: 213 30% 93%; /* 블루를 살짝 밝히고 채도를 낮춘다. 원래 값 그대로면 어두운 바탕에서 가라앉아 버튼이 안 읽힌다. */ --pro-primary: 213 92% 66%; /* #5BA4F9 */ --pro-primary-foreground: 218 35% 8%; --pro-secondary: 217 30% 21%; --pro-secondary-foreground: 213 45% 80%; --pro-muted: 217 28% 16%; --pro-muted-foreground: 215 15% 61%; --pro-accent: 217 28% 20%; --pro-accent-foreground: 213 30% 93%; --pro-destructive: 0 65% 55%; --pro-destructive-foreground:0 0% 100%; --pro-success: 173 60% 48%; --pro-warning: 38 92% 62%; --pro-info: 243 80% 76%; --pro-plum: 272 55% 70%; /* 그라디언트는 다크에서 한 톤 가라앉힌다 — 원색 그대로면 어두운 바탕에서 형광처럼 뜬다. */ --pro-grad: linear-gradient(115deg, hsl(199 80% 52%), hsl(217 80% 55%) 55%, hsl(173 65% 38%)); --pro-grad-2: linear-gradient(135deg, hsl(173 65% 38%), hsl(217 80% 55%)); --pro-grad-3: linear-gradient(135deg, hsl(239 70% 62%), hsl(199 80% 52%)); --pro-border: 217 22% 25%; /* 카드 위 1.5:1 안팎 */ --pro-input: 216 14% 45%; /* 카드 위에서 3:1 안팎 */ --pro-ring: 213 92% 66%; --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(213 92% 66% / .5); } } /* 사용자가 명시적으로 고른 다크 — 시스템 설정을 이긴다 */ :root[data-theme="dark"] { color-scheme: dark; --pro-background: 218 35% 8%; --pro-foreground: 213 30% 93%; --pro-card: 217 30% 13%; --pro-card-foreground: 213 30% 93%; --pro-popover: 217 28% 16%; --pro-popover-foreground: 213 30% 93%; --pro-primary: 213 92% 66%; --pro-primary-foreground: 218 35% 8%; --pro-secondary: 217 30% 21%; --pro-secondary-foreground: 213 45% 80%; --pro-muted: 217 28% 16%; --pro-muted-foreground: 215 15% 61%; --pro-accent: 217 28% 20%; --pro-accent-foreground: 213 30% 93%; --pro-destructive: 0 65% 55%; --pro-destructive-foreground:0 0% 100%; --pro-success: 173 60% 48%; --pro-warning: 38 92% 62%; --pro-info: 243 80% 76%; --pro-plum: 272 55% 70%; --pro-grad: linear-gradient(115deg, hsl(199 80% 52%), hsl(217 80% 55%) 55%, hsl(173 65% 38%)); --pro-grad-2: linear-gradient(135deg, hsl(173 65% 38%), hsl(217 80% 55%)); --pro-grad-3: linear-gradient(135deg, hsl(239 70% 62%), hsl(199 80% 52%)); --pro-border: 217 22% 25%; --pro-input: 216 14% 45%; --pro-ring: 213 92% 66%; --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(213 92% 66% / .5); } /* 사용자가 명시적으로 고른 라이트 — 시스템이 다크여도 이긴다 (위 media 블록이 :not([data-theme]) 이므로 자동) */ :root[data-theme="light"] { color-scheme: light; }