/** * toss 테마 — 공유 토큰. 이 파일이 색·둥글기·그림자·모션·서체의 유일한 정의처다. 값을 바꿀 때는 여기만 고친다. * * 프레임·본문 스킨·게시판·블록 스킨·관리자 모두 여기의 이름(--tb-*)만 가리킨다. * * 1) --tb-* 원시 팔레트. 다크 모드가 이미 반영돼 있다(두 번째 블록이 같은 이름을 다시 정의). * 그 자체로는 화면에 아무 영향이 없다. * 2) 매핑 코어 semantic 토큰(--background, --primary ...)을 --tb-* 로 잇는다. * - (toss 프레임이 붙임): 사이트 전체 * - 래퍼(.toss, .mypage-wrapper ...): 프레임이 basic 이어도 그 화면 안쪽만 * 3) 관리자 --bs-* 매핑은 관리자 프레임 스킨(admin.css)이 --tb-* 를 가리켜서 한다. * * 브랜드색: 관리자에서 대표 색을 정하면 --brand-primary 가 생기고 --primary 가 그것을 따른다. */ /* ---- 1) 원시 팔레트 (라이트) ---- */ :root { --tb-background: #F2F4F6; --tb-background-rgb: 242, 244, 246; --tb-foreground: #191F28; --tb-foreground-rgb: 25, 31, 40; --tb-card: #FFFFFF; --tb-card-rgb: 255, 255, 255; --tb-card-foreground: #191F28; --tb-card-foreground-rgb: 25, 31, 40; --tb-popover: #FFFFFF; --tb-popover-rgb: 255, 255, 255; --tb-popover-foreground: #191F28; --tb-popover-foreground-rgb: 25, 31, 40; --tb-primary: #1B64DA; --tb-primary-rgb: 27, 100, 218; --tb-primary-foreground: #FFFFFF; --tb-primary-foreground-rgb: 255, 255, 255; --tb-secondary: #F2F4F6; --tb-secondary-rgb: 242, 244, 246; --tb-secondary-foreground: #333D4B; --tb-secondary-foreground-rgb: 51, 61, 75; --tb-muted: #F2F4F6; --tb-muted-rgb: 242, 244, 246; --tb-muted-foreground: #5F6B7A; --tb-muted-foreground-rgb: 95, 107, 122; --tb-subtle: #F2F4F6; --tb-subtle-rgb: 242, 244, 246; --tb-subtle-foreground: #191F28; --tb-subtle-foreground-rgb: 25, 31, 40; --tb-destructive: #D22B3A; --tb-destructive-rgb: 210, 43, 58; --tb-destructive-foreground: #FFFFFF; --tb-destructive-foreground-rgb: 255, 255, 255; --tb-border: #E5E8EB; --tb-border-rgb: 229, 232, 235; --tb-border-subtle: #F2F4F6; --tb-border-subtle-rgb: 242, 244, 246; --tb-input: #E5E8EB; --tb-input-rgb: 229, 232, 235; --tb-ring: #1B64DA; --tb-ring-rgb: 27, 100, 218; --tb-success: #0B7A4B; --tb-success-rgb: 11, 122, 75; --tb-success-foreground: #FFFFFF; --tb-success-foreground-rgb: 255, 255, 255; --tb-state-danger-bg: #FFEBEE; --tb-state-danger-fg: #B4232F; --tb-state-danger-border: #FFC9CE; --tb-state-success-bg: #E6F7EF; --tb-state-success-fg: #0B7A4B; --tb-state-success-border: #BFE8D4; --tb-state-info-bg: #E8F3FF; --tb-state-info-fg: #1B64DA; --tb-state-info-border: #BDD9FB; --tb-shadow-sm: 0 1px 2px rgba(2,32,71,.05); --tb-shadow-md: 0 4px 16px rgba(2,32,71,.08); --tb-shadow-lg: 0 8px 28px rgba(2,32,71,.12); --tb-color-scheme: light; --tb-radius: 0.875rem; --tb-radius-sm: 0.5rem; --tb-radius-md: 0.75rem; --tb-radius-lg: 1rem; --tb-radius-xl: 1.25rem; --tb-radius-2xl: 1.5rem; --tb-r-pill: 999px; --tb-ease: cubic-bezier(.2, .8, .2, 1); --tb-dur-fast: .15s; --tb-dur-base: .3s; --tb-dur-slow: .5s; --tb-dur-ambient: 1.4s; --tb-delay-short: .08s; --tb-delay-mid: .16s; --tb-delay-long: .3s; --tb-delay-ambient: 1.2s; --tb-stagger: .04s; --tb-knob: #FFFFFF; --tb-font-stack: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; --tb-gray-50: #F9FAFB; --tb-gray-50-rgb: 249, 250, 251; --tb-gray-100: #F2F4F6; --tb-gray-100-rgb: 242, 244, 246; --tb-gray-200: #E5E8EB; --tb-gray-200-rgb: 229, 232, 235; --tb-gray-300: #D1D6DB; --tb-gray-300-rgb: 209, 214, 219; --tb-gray-400: #B0B8C1; --tb-gray-400-rgb: 176, 184, 193; --tb-gray-500: #8B95A1; --tb-gray-500-rgb: 139, 149, 161; --tb-gray-600: #6B7684; --tb-gray-600-rgb: 107, 118, 132; --tb-gray-700: #4E5968; --tb-gray-700-rgb: 78, 89, 104; --tb-gray-800: #333D4B; --tb-gray-800-rgb: 51, 61, 75; --tb-gray-900: #191F28; --tb-gray-900-rgb: 25, 31, 40; --tb-gray-950: #0E1116; --tb-gray-950-rgb: 14, 17, 22; } /* ---- 1) 원시 팔레트 (다크) ---- */ .dark, [data-theme="dark"], [data-bs-theme="dark"] { --tb-background: #17171C; --tb-background-rgb: 23, 23, 28; --tb-foreground: #F2F4F6; --tb-foreground-rgb: 242, 244, 246; --tb-card: #202027; --tb-card-rgb: 32, 32, 39; --tb-card-foreground: #F2F4F6; --tb-card-foreground-rgb: 242, 244, 246; --tb-popover: #202027; --tb-popover-rgb: 32, 32, 39; --tb-popover-foreground: #F2F4F6; --tb-popover-foreground-rgb: 242, 244, 246; --tb-primary: #4E9BFF; --tb-primary-rgb: 78, 155, 255; --tb-primary-foreground: #0A1A33; --tb-primary-foreground-rgb: 10, 26, 51; --tb-secondary: #2A2A33; --tb-secondary-rgb: 42, 42, 51; --tb-secondary-foreground: #F2F4F6; --tb-secondary-foreground-rgb: 242, 244, 246; --tb-muted: #2A2A33; --tb-muted-rgb: 42, 42, 51; --tb-muted-foreground: #A5AEBA; --tb-muted-foreground-rgb: 165, 174, 186; --tb-subtle: #2A2A33; --tb-subtle-rgb: 42, 42, 51; --tb-subtle-foreground: #F2F4F6; --tb-subtle-foreground-rgb: 242, 244, 246; --tb-destructive: #FF6B77; --tb-destructive-rgb: 255, 107, 119; --tb-destructive-foreground: #2B0508; --tb-destructive-foreground-rgb: 43, 5, 8; --tb-border: #34343E; --tb-border-rgb: 52, 52, 62; --tb-border-subtle: #26262E; --tb-border-subtle-rgb: 38, 38, 46; --tb-input: #34343E; --tb-input-rgb: 52, 52, 62; --tb-ring: #4E9BFF; --tb-ring-rgb: 78, 155, 255; --tb-success: #3DD68C; --tb-success-rgb: 61, 214, 140; --tb-success-foreground: #04210F; --tb-success-foreground-rgb: 4, 33, 15; --tb-state-danger-bg: #3A2226; --tb-state-danger-fg: #FF9AA2; --tb-state-danger-border: #5A2A30; --tb-state-success-bg: #16302A; --tb-state-success-fg: #6EE0AE; --tb-state-success-border: #1F4A3E; --tb-state-info-bg: #1E3050; --tb-state-info-fg: #8CBDFF; --tb-state-info-border: #2A4A7A; --tb-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --tb-shadow-md: 0 4px 16px rgba(0,0,0,.4); --tb-shadow-lg: 0 8px 28px rgba(0,0,0,.55); --tb-color-scheme: dark; } /* ---- 2) 프론트 semantic 매핑 ---- */ :root.tb-theme, .tb-scope, .toss, .mypage-wrapper, .policy-view-wrapper, .search-page, .toss-index, .auth-shell { --background: var(--tb-background); --foreground: var(--tb-foreground); --card: var(--tb-card); --card-foreground: var(--tb-card-foreground); --popover: var(--tb-popover); --popover-foreground: var(--tb-popover-foreground); --primary-foreground: var(--tb-primary-foreground); --secondary: var(--tb-secondary); --secondary-foreground: var(--tb-secondary-foreground); --muted: var(--tb-muted); --muted-foreground: var(--tb-muted-foreground); --accent: var(--tb-subtle); --accent-foreground: var(--tb-subtle-foreground); --destructive: var(--tb-destructive); --destructive-foreground: var(--tb-destructive-foreground); --border: var(--tb-border); --border-subtle: var(--tb-border-subtle); --input: var(--tb-input); --primary: var(--brand-primary, var(--tb-primary)); --ring: var(--primary); --radius: var(--tb-radius); --radius-sm: var(--tb-radius-sm); --radius-md: var(--tb-radius-md); --radius-lg: var(--tb-radius-lg); --radius-xl: var(--tb-radius-xl); --radius-2xl: var(--tb-radius-2xl); --shadow-sm: var(--tb-shadow-sm); --shadow-md: var(--tb-shadow-md); --shadow-lg: var(--tb-shadow-lg); --font-sans: var(--tb-font-stack); --font-body: var(--tb-font-stack); --font-heading: var(--tb-font-stack); color-scheme: var(--tb-color-scheme); } /* 래퍼 안쪽 기본 서체 (프레임 전체는 프레임 스킨이 body 에 지정한다) */ .tb-scope, .toss, .mypage-wrapper, .policy-view-wrapper, .search-page, .toss-index, .auth-shell { font-family: var(--tb-font-stack); letter-spacing: -0.01em; word-break: keep-all; }