/* 다우오피스 HR 디자인 시스템 토큰 — HR-DDS(피그마)에서 자동 생성 (2026-11-02) * 직접 고치지 말고 hr-dds-export.json 을 고친 뒤 build-ds.mjs hr 를 다시 실행하세요. * DO 사이트는 같은 이름으로 값만 다른 ds-tokens-do.css 를 씁니다. */ :root { /* ── 원색 (피그마 HR · Palette) — 컴포넌트에서 직접 쓰지 말고 아래 의미 토큰을 쓰세요 */ --ds-palette-white: #FFFFFF; --ds-palette-blue-03: #F3F7FF; --ds-palette-primary-03: #EEF0FF; --ds-palette-primary-05: #EAEDFF; --ds-palette-blue-05: #EAF1FD; --ds-palette-primary-10: #C3CAFA; --ds-palette-primary-18: #A6B2FF; --ds-palette-primary-26: #8A9AFF; --ds-palette-blue-26: #86AAFF; --ds-palette-primary-40: #6175F7; --ds-palette-primary-52: #5163E8; --ds-palette-primary-64: #4351CD; --ds-palette-purple-gray-03: #F8F6FF; --ds-palette-gray-03: #F5F6F8; --ds-palette-gray-08: #EAECEF; --ds-palette-gray-18: #CFD1D4; --ds-palette-gray-26: #B9B9B9; --ds-palette-gray-40: #929292; --ds-palette-gray-52: #888888; --ds-palette-gray-72: #666666; --ds-palette-gray-86: #424242; --ds-palette-gray-92: #333333; --ds-palette-gray-98: #1B1B1B; --ds-palette-blue-52: #0D99FF; --ds-palette-purple-52: #9A71D0; --ds-palette-purple-64: #6F38BB; --ds-palette-purple-72: #5F19BB; --ds-palette-purple-80: #5B1A84; --ds-palette-purple-86: #4E1A91; --ds-palette-guide-plum-50: #FDF0FB; --ds-palette-guide-plum-500: #BB70B5; --ds-palette-guide-plum-700: #7E467A; /* ── 의미 색 (피그마 HR · Color) */ --ds-basic-text-level1: var(--ds-palette-gray-98); /* 기본 제목·본문 */ --ds-basic-text-level2: var(--ds-palette-gray-92); /* 보조 본문 */ --ds-basic-text-level3: var(--ds-palette-gray-72); /* 설명·GNB 메뉴·자세히 보기 */ --ds-basic-text-level4: var(--ds-palette-gray-52); /* 보조 정보 */ --ds-basic-text-level5: #AAAAAA; /* 연한 보조 글자 · 날짜·메타 */ --ds-basic-text-level6: #C9CED7; /* 가장 연한 글자 · 플레이스홀더성 라벨 */ --ds-basic-text-disabled: var(--ds-palette-gray-40); /* 비활성 */ --ds-basic-text-on-bg: var(--ds-palette-white); /* 어두운 배경 위 텍스트 */ --ds-basic-text-on-bg-level2: var(--ds-palette-gray-26); /* 어두운 섹션 위 설명글 */ --ds-field-text-placeholder: var(--ds-palette-gray-40); /* 입력칸 안내 문구 */ --ds-primary-text-level1: var(--ds-palette-primary-52); /* 강조 숫자·브랜드 텍스트 */ --ds-primary-text-level2: var(--ds-palette-primary-40); /* 섹션 라벨(caption)·강조 텍스트 */ --ds-primary-text-on-bg: var(--ds-palette-primary-18); /* 어두운 배경 위 라벨 */ --ds-secondary-text-level1: var(--ds-palette-guide-plum-700); /* 플럼 강조 글자 (한 화면 2곳·면적 1% 이하) */ --ds-secondary-text-on-bg: var(--ds-palette-guide-plum-500); /* 어두운 배경 위 플럼 강조 */ --ds-basic-bg-base: var(--ds-palette-white); /* 페이지 기본 배경 */ --ds-basic-bg-level2: var(--ds-palette-gray-03); /* 회색 섹션·카드 상단·입력칸 */ --ds-basic-bg-inverse: var(--ds-palette-gray-92); /* 다크 카드·상단 띠 */ --ds-basic-bg-inverse-level2: var(--ds-palette-gray-86); /* 회사소개 다크 영역 */ --ds-primary-bg-level1: var(--ds-palette-primary-52); /* CTA 버튼·강조 */ --ds-primary-bg-level1-hover: var(--ds-palette-primary-64); /* CTA hover */ --ds-primary-bg-level3: var(--ds-palette-primary-03); /* 섹션 배경(요금제·블로그) */ --ds-secondary-bg-level3: var(--ds-palette-guide-plum-50); /* 플럼 온도 틴트 (넓은 면에만) */ --ds-card-bg-attendance: var(--ds-palette-blue-03); /* 카드 배경 — 근태·인사 */ --ds-card-bg-leave: var(--ds-palette-purple-gray-03); /* 카드 배경 — 휴가 */ --ds-card-bg-ai: var(--ds-palette-primary-03); /* 카드 배경 — AI */ --ds-tag-bg-primary: var(--ds-palette-primary-05); /* 태그 배경 */ --ds-button-bg-outline-hover: var(--ds-palette-blue-05); /* Line 버튼 hover 배경 */ --ds-banner-bg-accent: var(--ds-palette-blue-26); /* 배너·칩·Problem 라벨 */ --ds-gradient-mid: var(--ds-palette-primary-26); /* 그라데이션 중간 */ --ds-basic-border-level5: var(--ds-palette-gray-18); /* 진한 테두리 */ --ds-basic-border-level6: #DCDEE3; /* 중간 테두리 */ --ds-basic-border-level7: var(--ds-palette-gray-08); /* 카드·구분선 */ --ds-primary-border-level1: var(--ds-palette-primary-52); /* 진한 브랜드 테두리 */ --ds-primary-border-level2: var(--ds-palette-primary-10); /* 옅은 브랜드 테두리 */ --ds-basic-icon-level1: var(--ds-palette-gray-98); /* 아이콘 기본 */ --ds-basic-icon-level2: var(--ds-palette-gray-72); /* 아이콘 보조 */ --ds-basic-icon-level3: var(--ds-palette-gray-40); /* 아이콘 흐림·비활성 */ --ds-primary-icon-level1: var(--ds-palette-primary-52); /* 강조·브랜드 아이콘 (2026-11-02 추가 — 피그마 변수도 추가 필요) */ --ds-status-information-level1: var(--ds-palette-blue-52); /* 정보·NEW 태그 */ --ds-status-success-level1: #2CB48A; /* 성공·완료 */ --ds-status-success-bg: #E6FCF5; /* 성공 배경 */ --ds-status-success-border: #99E9D2; /* 성공 테두리 */ --ds-status-warning-level1: #FFD15A; /* 주의 (별점, 강조 배지) */ --ds-status-warning-bg: #FFF8E6; /* 주의 배경 */ --ds-status-warning-border: #FFE3A3; /* 주의 테두리 */ --ds-status-error-level1: #FF4F4F; /* 오류·필수 표시 */ --ds-status-error-bg: #FFF0F0; /* 오류 배경 */ --ds-status-error-border: #FFC9C9; /* 오류 테두리 */ --ds-enterprise-level1: var(--ds-palette-purple-86); /* 엔터프라이즈 대표색 */ --ds-enterprise-level2: var(--ds-palette-purple-80); /* 엔터프라이즈 보조 */ --ds-enterprise-chart-1: var(--ds-palette-purple-52); /* 엔터프라이즈 밝음·체크 아이콘 */ --ds-enterprise-chart-2: var(--ds-palette-purple-64); /* 엔터프라이즈 중간·이벤트가 배지 */ --ds-enterprise-chart-3: var(--ds-palette-purple-72); /* 엔터프라이즈 진함 */ --ds-footer-bg: #222222; /* 푸터 배경 */ --ds-footer-text: #8D949E; /* 푸터 회사 정보·보조 글자 */ --ds-footer-border: #5D6777; /* 푸터 구분선 */ /* ── 간격·높이·레이아웃 (피그마 HR · Size) */ --ds-space-4xs: 2px; --ds-space-3xs: 4px; --ds-space-2xs: 6px; --ds-space-xs: 8px; --ds-space-s: 12px; --ds-space-m: 16px; --ds-space-l: 24px; --ds-space-xl: 32px; --ds-space-2xl: 36px; --ds-space-3xl: 40px; --ds-space-4xl: 48px; --ds-space-5xl: 60px; --ds-space-6xl: 80px; --ds-space-7xl: 120px; --ds-space-section: 60px; /* 섹션 상하 여백 — 시안 「근태 (DS 적용)」 기준 60 (2026-11-02, 전엔 140) */ --ds-height-4xs: 6px; --ds-height-3xs: 8px; --ds-height-2xs: 12px; --ds-height-xs: 16px; --ds-height-s: 20px; --ds-height-m: 24px; --ds-height-l: 28px; --ds-height-xl: 32px; --ds-height-2xl: 36px; --ds-height-3xl: 40px; /* 버튼 S·GNB 버튼 */ --ds-height-4xl: 48px; --ds-height-5xl: 56px; /* 입력칸 */ --ds-height-cta: 62px; /* CTA 버튼 L */ --ds-height-gnb: 72px; /* GNB */ --ds-layout-container: 1200px; /* 콘텐츠 최대 폭 */ --ds-layout-gutter: clamp(20px, 4vw, 40px); /* 좌우 여백 — 모바일 20 ~ PC 40 (10/26 결정 4, 운영 --m26-gutter 와 같음) */ /* ── 모서리 (피그마 HR · Radius) */ --ds-radius-3xs: 2px; --ds-radius-2xs: 4px; --ds-radius-xs: 6px; --ds-radius-s: 8px; --ds-radius-m: 12px; --ds-radius-l: 16px; --ds-radius-card: 20px; /* 기능 카드 */ --ds-radius-xl: 24px; --ds-radius-2xl: 32px; --ds-radius-3xl: 40px; --ds-radius-pill: 46px; /* 버튼·태그 알약형 */ /* ── 그림자·그라데이션 (피그마 Effect·Paint 스타일) */ --ds-shadow-cta: 0 7px 21px rgba(0,0,0,.08); --ds-shadow-card: 0 7px 21px rgba(0,0,0,.04); --ds-gradient-main: radial-gradient(ellipse 9% 30% at 95% 25%, rgba(232,190,240,.75) 0%, rgba(232,190,240,0) 100%), radial-gradient(ellipse 22% 85% at 62% 75%, rgba(236,186,226,.95) 0%, rgba(200,170,236,.6) 40%, rgba(160,160,240,0) 100%), radial-gradient(ellipse 18% 70% at 48% 45%, rgba(150,140,235,.55) 0%, rgba(150,140,235,0) 100%), linear-gradient(90deg, #6E9CF0 0%, #6593EE 40%, #7B9CF2 60%, #8FB1F8 82%, #9EBEFA 100%); --ds-gradient-enterprise: linear-gradient(90deg, #5163E8 0%, #4E1A91 100%); --ds-gradient-deep: linear-gradient(90deg, #5163E8 0%, #3541AC 100%); /* ── 글꼴 */ --ds-font-family: 'Pretendard Std', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; }