@charset "utf-8"; /* ========================================================================== rb.BoardFactory — 디자인 토큰 Theme : Soft Sky Blue + White Font : Pretendard (한글 · 영문 · 숫자 공통) 라이트/다크 두 벌이 전부 여기 있다. 다른 CSS 는 값을 직접 쓰지 말고 반드시 var() 로 참조할 것. 그래야 테마 색을 한 곳에서 바꿀 수 있다. ※ 역할이 갈리는 토큰은 분리해 뒀다. 한 토큰이 '버튼 바탕'과 '강조 글자'를 겸하면 다크에서 반드시 하나가 깨진다. 바탕은 진해야 흰 글자가 읽히고, 글자는 밝아야 어두운 바닥에서 읽히기 때문이다. --sky-500~700 = 바탕 (흰 글자가 올라감) → 다크에서도 진하게 유지 --sky-t1~t3 = 강조 글자색 → 다크에서 밝게 반전 --sky-200~400 = 로고·아바타 그라데이션 → 다크에서도 유지 --sky-b1~b3 = 강조 선색 → 다크에서 어둡게 반전 ========================================================================== */ :root { /* ---- 글꼴 ---- 한글·영문·숫자 전부 Pretendard 한 벌로 간다. 목업은 숫자·영문 라벨에 Montserrat 을 썼지만, 숫자가 본문과 따로 노는 느낌이라 통일했다. --font-en 은 토큰 이름만 남겨 둔다. 호출부 52곳이 이 이름을 참조하고 있어서, 되돌릴 때는 여기 한 줄만 고치면 된다. */ --font-kr: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; --font-en: var(--font-kr); /* ---- Sky ---- */ --sky-50: #F5FAFE; --sky-100: #E8F4FD; --sky-200: #D2E9F9; --sky-300: #AAD6F2; --sky-400: #75BCEA; --sky-500: #3E9FDE; --sky-600: #2B82C4; --sky-700: #1F669E; --sky-800: #184F7B; /* ---- Ink ---- */ --ink-900: #14262F; --ink-800: #1E3542; --ink-700: #33495A; --ink-600: #4E6375; --ink-500: #6B7F8E; --ink-400: #8FA1AF; --ink-300: #B6C5D0; --ink-200: #D8E2EA; /* ---- 선 · 바닥 ---- */ --line: #E4EDF4; --line-soft: #F0F6FA; --bg: #F4F9FD; --white: #FFFFFF; /* ---- 면 (다크에서 뒤집힌다) ---- */ --surface: #FFFFFF; /* 카드 · 패널 */ --surface-2: #FFFFFF; /* 패널 위 칩 · 버튼 */ --plate: #FFFFFF; /* 흰 배경 제품 사진이 올라가는 판 */ --plate-blend: normal; /* ---- 강조 글자색 ---- */ --sky-t1: #3E9FDE; --sky-t2: #2B82C4; --sky-t3: #1F669E; /* ---- 강조 선색 ---- */ --sky-b1: #D2E9F9; --sky-b2: #AAD6F2; --sky-b3: #75BCEA; /* ---- 포인트 ---- */ --point: #FF6B5B; --mint: #17BFA0; --amber: #FFA928; --violet:#7C7BE8; /* ---- 그림자 ---- */ --sh-xs: 0 1px 2px rgba(31,102,158,.05); --sh-sm: 0 2px 8px rgba(31,102,158,.06); --sh-md: 0 6px 20px rgba(31,102,158,.08); --sh-lg: 0 14px 38px rgba(31,102,158,.12); --sh-up: 0 -4px 16px rgba(31,102,158,.08); /* ---- 모서리 ---- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* ---- 레이아웃 ---- 목업 css/style.css 와 같은 값이다. --bf-inner 1200 (좌우 padding 24px 포함) --side-w 300 --gap 24 (본문 : 사이드바 사이) 이래야 .content-main 이 828px 이 되고 메인 비주얼 슬라이더가 792x339 (7:3) 로 떨어진다. --bf-inner 는 리빌더 가로폭 설정으로 덮어쓴다 — 헤더 · 푸터는 '상단/하단', 메인 화면은 '메인', 나머지 화면(#bf_container)은 '서브' (theme.lib.php bf_widths). 리빌더가 빈 값을 1400 으로 채우므로 여기 값은 그 밖에서 .bf-inner 를 쓸 때만 나온다. */ --bf-inner: 1200px; --bf-gutter: 24px; /* 화면 좌우 여백. 좁아지면 layout.css 가 줄인다 (20 · 14) */ --bf-side: 300px; --bf-gap: 24px; /* 목업 CSS(rb.css/main.css)가 쓰는 이름. main.css 는 목업에서 그대로 옮겨 오므로(port_main_css.py) 목업의 토큰 이름을 여기서 받아 준다. 이름을 main.css 안에서 고치면 다음 이식 때 되돌아간다. --side-w 는 main.css 의 1280px 미디어쿼리가 280px 로 덮어쓴다. */ --side-w: 300px; --gap: 24px; color-scheme: light; } /* ========================================================================== 다크 모드 하나만 보고 전환한다. 값은 head.sub.php 의 인라인 스크립트가 첫 페인트 전에 정하므로 흰 화면이 번쩍이지 않는다. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0D141B; --surface: #151F29; --surface-2: #1D2A36; --line: #27343F; --line-soft: #1E2A34; --sky-b1: #2A3949; --sky-b2: #35506A; --sky-b3: #40739B; /* 배경으로만 쓰이는 연한 하늘색은 어두운 톤으로 뒤집는다 */ --sky-50: #17232E; --sky-100: #1D2D3C; --sky-200: #2F4557; /* --sky-300 ~ --sky-800 은 그대로 둔다. 남은 용도가 전부 '흰 글자가 올라가는 진한 바탕'이라 진해야 한다. */ --sky-t1: #6FBBEC; --sky-t2: #8ECCF3; --sky-t3: #ADDCF8; --ink-900: #EEF4F8; --ink-800: #DCE7EF; --ink-700: #BECEDA; --ink-600: #9CAFBD; --ink-500: #8195A4; --ink-400: #7D919F; --ink-300: #647889; --ink-200: #2E3C48; /* --point · --mint · --amber 는 건드리지 않는다. 라이트 값 그대로도 어두운 바닥에서 6~9:1 이라 충분히 읽히고, 더 밝히면 같은 색을 바탕으로 쓰는 배지(HOT · BEST · NEW)의 흰 글자 대비가 떨어진다. */ /* 파란 그림자는 어두운 바닥에서 보이지 않는다 */ --sh-xs: 0 1px 2px rgba(0,0,0,.34); --sh-sm: 0 2px 8px rgba(0,0,0,.38); --sh-md: 0 6px 20px rgba(0,0,0,.46); --sh-lg: 0 14px 38px rgba(0,0,0,.56); --sh-up: 0 -4px 16px rgba(0,0,0,.44); /* 제품 사진 판 — 사진 배경이 흰색이라 판까지 어둡게 칠하면 네모로 뜬다. 판은 밝게 두고 사진을 곱셈 합성해 경계를 지운다. */ --plate: #E7EEF4; --plate-blend: multiply; }