/* 다우오피스 DO 디자인 시스템 토큰 — DO-DDS(피그마)에서 자동 생성 (2026-11-03) * 직접 고치지 말고 do-dds-export.json 을 고친 뒤 build-ds.mjs do 를 다시 실행하세요. * HR 사이트는 같은 이름으로 값만 다른 ds-tokens-hr.css 를 씁니다. */ :root { /* ── 원색 (피그마 DO · Palette) — 컴포넌트에서 직접 쓰지 말고 아래 의미 토큰을 쓰세요 */ --ds-palette-white: #FFFFFF; --ds-palette-mint-50: #EBF8FB; --ds-palette-mint-100: #D0EFF6; --ds-palette-mint-200: #A8DEEB; --ds-palette-mint-300: #73C8DA; --ds-palette-mint-400: #43B3C9; --ds-palette-mint-500: #00A1B9; --ds-palette-mint-600: #008197; --ds-palette-mint-700: #006B7E; --ds-palette-mint-800: #005262; --ds-palette-mint-900: #003B46; --ds-palette-mint-950: #002931; --ds-palette-gray-03: #F5F8F9; --ds-palette-gray-05: #F7F9FA; --ds-palette-gray-08: #E4E9EB; --ds-palette-gray-18: #C6CBCE; --ds-palette-gray-26: #B9B9B9; --ds-palette-gray-40: #929292; --ds-palette-gray-52: #7C8A91; --ds-palette-gray-72: #666666; --ds-palette-gray-86: #424242; --ds-palette-gray-92: #333333; --ds-palette-gray-98: #16232A; --ds-palette-enterprise-cyan: #02B6D7; --ds-palette-enterprise-violet: #9F1AFF; /* ── 의미 색 (피그마 DO · Color) */ --ds-basic-text-level1: var(--ds-palette-gray-98); /* 기본 제목·본문 (가이드 #16232A) */ --ds-basic-text-level2: var(--ds-palette-gray-92); /* 보조 본문 (운영 #333333) */ --ds-basic-text-level3: var(--ds-palette-gray-72); /* 설명·GNB 메뉴 */ --ds-basic-text-level4: var(--ds-palette-gray-52); /* 보조 글자 (가이드 #7C8A91) */ --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-mint-700); /* 민트 글자 1단계(가장 진함) #006B7E — 강조 글자·본문 링크 (6.17:1) */ --ds-primary-text-on-bg: var(--ds-palette-mint-300); /* 어두운 배경 위 민트 글자 (가이드 300) */ --ds-primary-text-level2: var(--ds-palette-mint-600); /* 민트 글자 2단계 #008197 (4.58:1) */ --ds-primary-text-level3: var(--ds-palette-mint-400); /* 민트 글자 3단계(가장 밝음) #43B3C9 — 큰 제목·아이콘·어두운 바탕용 (흰 바탕 약 2.6:1) */ --ds-accent-text-level1: var(--ds-palette-mint-700); /* = primary/text/level1 (진한 민트, 링크). 코드 호환용 이름 */ --ds-accent-text-level2: var(--ds-palette-mint-600); /* = primary/text/level2 (코드 호환용 이름) */ --ds-accent-text-on-bg: var(--ds-palette-mint-300); /* = primary/text/on-bg (코드 호환용 이름) */ --ds-basic-bg-base: var(--ds-palette-white); /* 페이지 기본 배경 */ --ds-basic-bg-level2: var(--ds-palette-gray-03); /* 지면·회색 섹션·입력칸 (가이드 #F5F8F9) */ --ds-basic-bg-level3: var(--ds-palette-gray-05); /* 카드 배경 (가이드 #F7F9FA) */ --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-mint-600); /* 민트 채움 — 배지·선택 표시·필수 점·라디오 (가이드 600, 흰 글자 4.58:1). 버튼은 button/bg/primary */ --ds-primary-bg-level1-hover: var(--ds-palette-mint-700); /* 민트 채움 hover */ --ds-primary-bg-level3: var(--ds-palette-mint-50); /* 민트 틴트 배경·hover 면 */ --ds-button-bg-primary: var(--ds-palette-gray-92); /* 프라이머리 버튼 배경 — 검정 (운영 #333) */ --ds-button-bg-primary-hover: var(--ds-palette-gray-98); /* 프라이머리 버튼 hover */ --ds-button-bg-line-hover: var(--ds-palette-gray-03); /* Line 버튼 hover 배경 */ --ds-accent-bg-level1: var(--ds-palette-mint-600); /* = primary/bg/level1 (코드 호환용 이름) */ --ds-accent-bg-level1-hover: var(--ds-palette-mint-700); /* = primary/bg/level1-hover (코드 호환용 이름) */ --ds-accent-bg-level3: var(--ds-palette-mint-50); /* = primary/bg/level3 (코드 호환용 이름) */ --ds-card-bg-level1: var(--ds-palette-gray-05); /* 카드 배경 (가이드 카드 전부 같은 값) */ --ds-card-bg-highlight: var(--ds-palette-mint-50); /* 핵심 카드 — 민트 틴트, 한 화면에 한 장만 */ --ds-tag-bg-primary: var(--ds-palette-mint-100); /* 태그 배경 — 민트 100 */ --ds-banner-bg-accent: var(--ds-palette-mint-400); /* 배너·칩 라벨 — 민트 400 */ --ds-basic-border-level5: var(--ds-palette-gray-18); /* 진한 테두리·비교 데이터 (가이드 #C6CBCE) */ --ds-basic-border-level6: #DCDEE3; /* 중간 테두리 */ --ds-basic-border-level7: var(--ds-palette-gray-08); /* 카드·구분선 (가이드 #E4E9EB) */ --ds-primary-border-level1: var(--ds-palette-mint-600); /* 민트 테두리 */ --ds-primary-border-level2: var(--ds-palette-mint-200); /* 옅은 민트 테두리·디바이더 (가이드 200) */ --ds-button-border-primary: var(--ds-palette-gray-92); /* 검정 테두리 (Line 버튼 Dark) */ --ds-accent-border-level1: var(--ds-palette-mint-600); /* = primary/border/level1 (코드 호환용 이름) */ --ds-accent-border-level2: var(--ds-palette-mint-200); /* = primary/border/level2 (코드 호환용 이름) */ --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-brand: var(--ds-palette-mint-500); /* 브랜드 민트 원색 — 로고·그래픽·아이콘·대형 타이포만, 글자 버튼 금지 (가이드 500) */ --ds-button-text-primary: var(--ds-palette-white); /* 검정 버튼 위 글자 */ --ds-button-text-line: var(--ds-palette-gray-98); /* Line 버튼 글자·아이콘 */ --ds-status-information-level1: #2563EB; /* 정보 (가이드 고정값) */ --ds-status-success-level1: #16A34A; /* 성공·완료 (가이드 고정값) */ --ds-status-success-bg: #E6FCF5; /* 성공 배경 */ --ds-status-success-border: #99E9D2; /* 성공 테두리 */ --ds-status-warning-level1: #F59E0B; /* 주의 (가이드 고정값) */ --ds-status-warning-bg: #FFF8E6; /* 주의 배경 */ --ds-status-warning-border: #FFE3A3; /* 주의 테두리 */ --ds-status-error-level1: #DC2626; /* 오류·필수 표시 (가이드 고정값) */ --ds-status-error-bg: #FFF0F0; /* 오류 배경 */ --ds-status-error-border: #FFC9C9; /* 오류 테두리 */ --ds-enterprise-level1: var(--ds-palette-enterprise-violet); /* 엔터프라이즈 대표색 — 그라데이션 테두리 끝 (운영 #9F1AFF) */ --ds-enterprise-level2: var(--ds-palette-enterprise-cyan); /* 엔터프라이즈 보조 — 그라데이션 테두리 시작 (운영 #02B6D7) */ --ds-footer-bg: #222222; /* 푸터 배경 */ --ds-footer-text: #8D949E; /* 푸터 회사 정보·보조 글자 */ --ds-footer-border: #5D6777; /* 푸터 구분선 */ /* ── 간격·높이·레이아웃 (피그마 DO · 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; /* 섹션 상하 여백 — HR 과 같은 60 (2026-11-03, 전엔 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; /* 입력칸 (HR 기준 유지 — DO 리드폼 입력칸 48은 ds-components-do.css, 3단계에서 맞춤) */ --ds-height-cta: 62px; /* CTA 버튼 L (HR 기준 유지 — DO 버튼 L 66·M 50·S 40은 ds-components-do.css, 3단계에서 맞춤) */ --ds-height-gnb: 80px; /* GNB (DO 운영 --gnb-h 80 — header.jsp 공용, 화면 변화 없게 운영값) */ --ds-layout-container: 1200px; /* 콘텐츠 최대 폭 (DO 1200px 117회) */ --ds-layout-gutter: clamp(20px, 4vw, 40px); /* 좌우 여백 — 모바일 20 ~ PC 40 (10/26 결정 4, 운영 --m26-gutter 와 같음) */ /* ── 모서리 (피그마 DO · 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; /* DO 15 → 16 */ --ds-radius-card: 20px; /* 기능 카드 (DO 최다 147회) */ --ds-radius-xl: 24px; /* DO 25 → 24 */ --ds-radius-2xl: 32px; /* DO 30 → 32 */ --ds-radius-3xl: 40px; --ds-radius-pill: 46px; /* 버튼·태그 알약형 (DO 50 → 46) */ /* ── 그림자·그라데이션 (피그마 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: linear-gradient(90deg, #4CF1FF 0%, #0D99FF 50%, #B694FF 100%); --ds-gradient-cta-dark: linear-gradient(90deg, #7CF5FF 0%, #5D88FF 50%, #B792FF 100%); /* ── 글꼴 */ --ds-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif; }