/** * dodam 테마 — 공유 토큰. 이 파일이 색·둥글기·그림자·모션·서체의 유일한 정의처다. 값을 바꿀 때는 여기만 고친다. * * 프레임·본문 스킨·게시판·블록 스킨·관리자 모두 여기의 이름(--dd-*)만 가리킨다. * * 1) --dd-* 원시 팔레트. 다크 모드가 이미 반영돼 있다(두 번째 블록이 같은 이름을 다시 정의). * 그 자체로는 화면에 아무 영향이 없다. * 2) 매핑 코어 semantic 토큰(--background, --primary ...)을 --dd-* 로 잇는다. * - (dodam 프레임이 붙임): 사이트 전체 * - 래퍼(.dodam, .mypage-wrapper ...): 프레임이 basic 이어도 그 화면 안쪽만 * 3) 관리자 --bs-* 매핑은 관리자 프레임 스킨(admin.css)이 --dd-* 를 가리켜서 한다. * * 브랜드색: 관리자에서 대표 색을 정하면 --brand-primary 가 생기고 --primary 가 그것을 따른다. */ /* ---- 1) 원시 팔레트 (라이트) ---- */ :root { --dd-background: #F2F4F6; --dd-background-rgb: 242, 244, 246; --dd-foreground: #191F28; --dd-foreground-rgb: 25, 31, 40; --dd-card: #FFFFFF; --dd-card-rgb: 255, 255, 255; --dd-card-foreground: #191F28; --dd-card-foreground-rgb: 25, 31, 40; --dd-popover: #FFFFFF; --dd-popover-rgb: 255, 255, 255; --dd-popover-foreground: #191F28; --dd-popover-foreground-rgb: 25, 31, 40; --dd-primary: #1B64DA; --dd-primary-rgb: 27, 100, 218; --dd-primary-foreground: #FFFFFF; --dd-primary-foreground-rgb: 255, 255, 255; --dd-secondary: #F2F4F6; --dd-secondary-rgb: 242, 244, 246; --dd-secondary-foreground: #333D4B; --dd-secondary-foreground-rgb: 51, 61, 75; --dd-muted: #F2F4F6; --dd-muted-rgb: 242, 244, 246; --dd-muted-foreground: #5F6B7A; --dd-muted-foreground-rgb: 95, 107, 122; --dd-subtle: #F2F4F6; --dd-subtle-rgb: 242, 244, 246; --dd-subtle-foreground: #191F28; --dd-subtle-foreground-rgb: 25, 31, 40; --dd-destructive: #D22B3A; --dd-destructive-rgb: 210, 43, 58; --dd-destructive-foreground: #FFFFFF; --dd-destructive-foreground-rgb: 255, 255, 255; --dd-border: #E5E8EB; --dd-border-rgb: 229, 232, 235; --dd-border-subtle: #F2F4F6; --dd-border-subtle-rgb: 242, 244, 246; --dd-input: #E5E8EB; --dd-input-rgb: 229, 232, 235; --dd-ring: #1B64DA; --dd-ring-rgb: 27, 100, 218; --dd-success: #0B7A4B; --dd-success-rgb: 11, 122, 75; --dd-success-foreground: #FFFFFF; --dd-success-foreground-rgb: 255, 255, 255; --dd-warning: #9A5300; --dd-warning-rgb: 154, 83, 0; --dd-warning-foreground: #FFFFFF; --dd-warning-foreground-rgb: 255, 255, 255; --dd-star: #C56A00; --dd-star-rgb: 197, 106, 0; --dd-info: #0A6E85; --dd-info-rgb: 10, 110, 133; --dd-info-foreground: #FFFFFF; --dd-info-foreground-rgb: 255, 255, 255; --dd-wall: #F0EDE8; --dd-wall-rgb: 240, 237, 232; --dd-wall-light: #F8F6F2; --dd-wall-light-rgb: 248, 246, 242; --dd-mat: #FBFAF7; --dd-mat-rgb: 251, 250, 247; --dd-frame-line: #D6D1C7; --dd-frame-line-rgb: 214, 209, 199; --dd-state-danger-bg: #FFEBEE; --dd-state-danger-fg: #B4232F; --dd-state-danger-border: #FFC9CE; --dd-state-success-bg: #E6F7EF; --dd-state-success-fg: #0B7A4B; --dd-state-success-border: #BFE8D4; --dd-state-info-bg: #E8F3FF; --dd-state-info-fg: #1B64DA; --dd-state-info-border: #BDD9FB; --dd-shadow-sm: 0 1px 2px rgba(2,32,71,.05); --dd-shadow-md: 0 4px 16px rgba(2,32,71,.08); --dd-shadow-lg: 0 8px 28px rgba(2,32,71,.12); --dd-color-scheme: light; --dd-radius: 0.875rem; --dd-radius-sm: 0.5rem; --dd-radius-md: 0.75rem; --dd-radius-lg: 1rem; --dd-radius-xl: 1.25rem; --dd-radius-2xl: 1.5rem; --dd-r-pill: 999px; --dd-ease: cubic-bezier(.2, .8, .2, 1); --dd-dur-fast: .15s; --dd-dur-base: .3s; --dd-dur-slow: .5s; --dd-dur-ambient: 1.4s; --dd-delay-short: .08s; --dd-delay-mid: .16s; --dd-delay-long: .3s; --dd-delay-ambient: 1.2s; --dd-stagger: .04s; --dd-auth-width: 30rem; --dd-auth-width-wide: 36rem; --dd-control-height: 3.25rem; --dd-knob: #FFFFFF; --dd-black: #000000; --dd-white: #FFFFFF; --dd-font-stack: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; --dd-font-serif: "Noto Serif KR", "Nanum Myeongjo", "Noto Serif CJK KR", "Batang", Georgia, serif; --dd-gray-50: #F9FAFB; --dd-gray-50-rgb: 249, 250, 251; --dd-gray-100: #F2F4F6; --dd-gray-100-rgb: 242, 244, 246; --dd-gray-200: #E5E8EB; --dd-gray-200-rgb: 229, 232, 235; --dd-gray-300: #D1D6DB; --dd-gray-300-rgb: 209, 214, 219; --dd-gray-400: #B0B8C1; --dd-gray-400-rgb: 176, 184, 193; --dd-gray-500: #8B95A1; --dd-gray-500-rgb: 139, 149, 161; --dd-gray-600: #6B7684; --dd-gray-600-rgb: 107, 118, 132; --dd-gray-700: #4E5968; --dd-gray-700-rgb: 78, 89, 104; --dd-gray-800: #333D4B; --dd-gray-800-rgb: 51, 61, 75; --dd-gray-900: #191F28; --dd-gray-900-rgb: 25, 31, 40; --dd-gray-950: #0E1116; --dd-gray-950-rgb: 14, 17, 22; } /* ---- 1) 원시 팔레트 (다크) ---- */ .dark, [data-theme="dark"], [data-bs-theme="dark"] { --dd-background: #17171C; --dd-background-rgb: 23, 23, 28; --dd-foreground: #F2F4F6; --dd-foreground-rgb: 242, 244, 246; --dd-card: #202027; --dd-card-rgb: 32, 32, 39; --dd-card-foreground: #F2F4F6; --dd-card-foreground-rgb: 242, 244, 246; --dd-popover: #202027; --dd-popover-rgb: 32, 32, 39; --dd-popover-foreground: #F2F4F6; --dd-popover-foreground-rgb: 242, 244, 246; --dd-primary: #4E9BFF; --dd-primary-rgb: 78, 155, 255; --dd-primary-foreground: #0A1A33; --dd-primary-foreground-rgb: 10, 26, 51; --dd-secondary: #2A2A33; --dd-secondary-rgb: 42, 42, 51; --dd-secondary-foreground: #F2F4F6; --dd-secondary-foreground-rgb: 242, 244, 246; --dd-muted: #2A2A33; --dd-muted-rgb: 42, 42, 51; --dd-muted-foreground: #A5AEBA; --dd-muted-foreground-rgb: 165, 174, 186; --dd-subtle: #2A2A33; --dd-subtle-rgb: 42, 42, 51; --dd-subtle-foreground: #F2F4F6; --dd-subtle-foreground-rgb: 242, 244, 246; --dd-destructive: #FF6B77; --dd-destructive-rgb: 255, 107, 119; --dd-destructive-foreground: #2B0508; --dd-destructive-foreground-rgb: 43, 5, 8; --dd-border: #34343E; --dd-border-rgb: 52, 52, 62; --dd-border-subtle: #26262E; --dd-border-subtle-rgb: 38, 38, 46; --dd-input: #34343E; --dd-input-rgb: 52, 52, 62; --dd-ring: #4E9BFF; --dd-ring-rgb: 78, 155, 255; --dd-success: #3DD68C; --dd-success-rgb: 61, 214, 140; --dd-success-foreground: #04210F; --dd-success-foreground-rgb: 4, 33, 15; --dd-warning: #F5B14C; --dd-warning-rgb: 245, 177, 76; --dd-warning-foreground: #2B1900; --dd-warning-foreground-rgb: 43, 25, 0; --dd-star: #FBBF24; --dd-star-rgb: 251, 191, 36; --dd-info: #5CC8E0; --dd-info-rgb: 92, 200, 224; --dd-info-foreground: #04212B; --dd-info-foreground-rgb: 4, 33, 43; --dd-wall: #1A1A20; --dd-wall-rgb: 26, 26, 32; --dd-wall-light: #2B2B34; --dd-wall-light-rgb: 43, 43, 52; --dd-mat: #24242C; --dd-mat-rgb: 36, 36, 44; --dd-frame-line: #3D3D48; --dd-frame-line-rgb: 61, 61, 72; --dd-state-danger-bg: #3A2226; --dd-state-danger-fg: #FF9AA2; --dd-state-danger-border: #5A2A30; --dd-state-success-bg: #16302A; --dd-state-success-fg: #6EE0AE; --dd-state-success-border: #1F4A3E; --dd-state-info-bg: #1E3050; --dd-state-info-fg: #8CBDFF; --dd-state-info-border: #2A4A7A; --dd-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --dd-shadow-md: 0 4px 16px rgba(0,0,0,.4); --dd-shadow-lg: 0 8px 28px rgba(0,0,0,.55); --dd-color-scheme: dark; } /* ---- 2) 프론트 semantic 매핑 ---- */ :root.dd-theme, .dd-scope, .dodam, .mypage-wrapper, .policy-view-wrapper, .search-page, .dodam-index, .auth-shell, .mublo-popup-overlay { --background: var(--dd-background); --foreground: var(--dd-foreground); --card: var(--dd-card); --card-foreground: var(--dd-card-foreground); --popover: var(--dd-popover); --popover-foreground: var(--dd-popover-foreground); --primary-foreground: var(--dd-primary-foreground); --secondary: var(--dd-secondary); --secondary-foreground: var(--dd-secondary-foreground); --muted: var(--dd-muted); --muted-foreground: var(--dd-muted-foreground); --accent: var(--dd-subtle); --accent-foreground: var(--dd-subtle-foreground); --destructive: var(--dd-destructive); --destructive-foreground: var(--dd-destructive-foreground); --border: var(--dd-border); --border-subtle: var(--dd-border-subtle); --input: var(--dd-input); --primary: var(--brand-primary, var(--dd-primary)); --ring: var(--primary); --radius: var(--dd-radius); --radius-sm: var(--dd-radius-sm); --radius-md: var(--dd-radius-md); --radius-lg: var(--dd-radius-lg); --radius-xl: var(--dd-radius-xl); --radius-2xl: var(--dd-radius-2xl); --shadow-sm: var(--dd-shadow-sm); --shadow-md: var(--dd-shadow-md); --shadow-lg: var(--dd-shadow-lg); --font-sans: var(--dd-font-stack); --font-body: var(--dd-font-stack); --font-heading: var(--dd-font-stack); --success: var(--dd-success); --success-foreground: var(--dd-success-foreground); --warning: var(--dd-warning); --warning-foreground: var(--dd-warning-foreground); --warning-subtle-foreground: var(--dd-warning); --info: var(--dd-info); --info-foreground: var(--dd-info-foreground); color-scheme: var(--dd-color-scheme); } /* 래퍼 안쪽 기본 서체 (프레임 전체는 프레임 스킨이 body 에 지정한다) */ .dd-scope, .dodam, .mypage-wrapper, .policy-view-wrapper, .search-page, .dodam-index, .auth-shell, .mublo-popup-overlay { font-family: var(--dd-font-stack); letter-spacing: -0.01em; word-break: keep-all; } /* ---- 4) 효과: 키프레임과 "동작 줄이기" 규칙은 여기서 한 번만 정의한다 ---- */ /* ============================================================ * 효과 (transform / opacity 만 사용 — 레이아웃을 흔들지 않는다) * 동작 줄이기(prefers-reduced-motion) 설정이면 아래 마지막 블록이 전부 끈다. * ============================================================ */ @keyframes dd-fx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes dd-fx-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes dd-fx-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes dd-fx-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-12deg); } 70% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1.22) rotate(-8deg); } } @keyframes dd-fx-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--reaction-color, var(--primary)) 45%, transparent); } to { box-shadow: 0 0 0 12px transparent; } } @keyframes dd-fx-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } @keyframes dd-fx-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } } @keyframes dd-fx-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } @keyframes dd-fx-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }