/* 사본 주의 — 정본은 design-system/design-system/tokens.css 이다. 고칠 때는 정본을 고치고 temp/퍼블리싱-앱반영.py 를 다시 돌린다. */ /* ============================================================ * 호치민시한국교육원 누리집 — Design Tokens * 기준 시안: 2026-07 개편 시안 27장 (데스크톱 1920px / 모바일 390px) * * 값 확정 방법: python3 + PIL 픽셀 히스토그램 샘플링. * 영역별 최빈값(JPEG 노이즈 제거) + 7개 배치 인벤토리 교차 검증. * 실측 근거: * #043764 1_메인화면 6.62% / 9_게시판 7.66% 점유 (푸터·Primary 버튼·헤딩·필독 배지 동일) * #008D9E 진행중 배지·TOPIK 보조 버튼·'자세히 보기 →' 링크 공통 * #F5FAFE 검색/필터 패널·테이블 헤더·페이지 밴드 상단 * #EDF3FF 페이지 헤더 밴드 하단 * #DDDDDD 카드·인풋 보더 최빈 무채색 * #E4032F/#053863 헤더 로고 태극(공식 SVG 값과 일치 확인) * * ⚠️ 이 파일이 단일 진실 소스. 컴포넌트는 var(--…)만 참조한다. * ⚠️ 2026-04 구 시안 블루(#2C5FE6 계열) 폐기. 7월 팔레트는 * "짙은 네이비(#043764) + 틸(#008D9E)" 2축이다. * ============================================================ */ :root { /* ── 컬러 : Brand Navy (주 브랜드) ───────────────────────── */ --c-navy-50: #EEF4FB; --c-navy-100: #D6E6FD; /* 실측 — 밴드 장식 라인 */ --c-navy-200: #AFC7E1; --c-navy-300: #7D9CC3; --c-navy-400: #3F6D98; --c-navy-500: #14507F; --c-navy-600: #0A4271; --c-navy-700: #043764; /* ★ Primary — 실측 확정 */ --c-navy-800: #032B4E; --c-navy-900: #021D36; --c-primary: var(--c-navy-700); --c-primary-hover: var(--c-navy-800); --c-primary-active: var(--c-navy-900); --c-on-primary: #FFFFFF; /* ── 컬러 : Accent Teal (보조 강조) ──────────────────────── */ --c-teal-50: #E6F5F7; --c-teal-100: #CCEBEF; --c-teal-200: #99D8DF; --c-teal-300: #66C4CF; --c-teal-400: #33B1BF; --c-teal-500: #008D9E; /* ★ Accent — 실측 확정 */ --c-teal-600: #007585; --c-teal-700: #005D6B; --c-teal-800: #004551; --c-accent: var(--c-teal-500); --c-accent-hover: var(--c-teal-600); --c-accent-active: var(--c-teal-700); --c-on-accent: #FFFFFF; /* ── 컬러 : Neutral ────────────────────────────────────── * 실측 그레이 계단: #DDDDDD(보더) / #9F9F9F·#7F7F7F(뮤트) * 본문·헤딩은 시안상 순수 블랙에 수렴 → 웹 가독성 위해 #111111 채택 */ --c-white: #FFFFFF; --c-gray-50: #FAFAFA; --c-gray-100: #F2F2F2; --c-gray-200: #E8E8E8; --c-gray-300: #DDDDDD; /* ★ 실측 — 카드/인풋 보더 */ --c-gray-400: #BFBFBF; --c-gray-500: #9F9F9F; /* ★ 실측 — 날짜·캡션 */ --c-gray-600: #7F7F7F; /* ★ 실측 — 보조 본문 */ --c-gray-700: #5F5F5F; --c-gray-800: #3F3F3F; --c-gray-900: #202020; --c-black: #111111; /* 표면 단계 (푸른기 도는 틴트 — 실측) */ --c-surface: #FFFFFF; --c-surface-tint: #F5FAFE; /* ★ 검색/필터 패널·테이블 헤더·TOPIK 패널 */ --c-surface-band: #EDF3FF; /* ★ 페이지 헤더 밴드 하단 */ --c-surface-mute: #F2F2F2; /* 메타정보 박스 */ /* 텍스트 역할 */ --c-text: #111111; --c-text-strong: #000000; --c-text-soft: var(--c-gray-700); --c-text-mute: var(--c-gray-600); --c-text-cap: var(--c-gray-500); --c-text-invert: #FFFFFF; /* 라인 */ --c-line: var(--c-gray-300); --c-line-soft: var(--c-gray-200); --c-line-strong: #BFBFBF; /* ── 컬러 : 페이지 헤더 밴드 그라디언트 (전 서브페이지 공통) ── * 실측: 상단 #F5FAFE → 하단 #EDF3FF, 밴드 높이 300~340px */ --grad-page-band: linear-gradient(160deg, #F5FAFE 0%, #F0F7FF 45%, #EDF3FF 100%); /* ── 컬러 : 사진 플레이스홀더 (외부 이미지 금지 대체) ──────── * 메인 히어로 하늘톤 실측 #A0CAF0 기반 */ --grad-hero-photo: linear-gradient(135deg, #A0CAF0 0%, #7FB3E4 45%, #043764 100%); --grad-photo-ph: linear-gradient(135deg, #D6E6FD 0%, #AFC7E1 55%, #7D9CC3 100%); --grad-photo-ph-2: linear-gradient(135deg, #CCEBEF 0%, #99D8DF 55%, #33B1BF 100%); /* ── 컬러 : State ──────────────────────────────────────── * 시안에 별도 성공/실패 색 없음. 상태 배지는 네이비/틸 2종 * (필독=네이비, 진행중=틸). danger/warning은 폼 검증 최소 용도 신설 */ --c-state-notice: var(--c-navy-700); --c-state-ongoing: var(--c-teal-500); --c-state-closed: var(--c-gray-500); --c-danger: #D93025; --c-warning: #E8A33D; --c-success: var(--c-teal-600); --c-highlight: #FFF3B0; /* 검색어 강조 형광펜 — 옅은 노랑 바탕(통합검색 결과) */ /* ── 컬러 : 정부상징(태극) 참조값 — 새로 그리기 금지 ──────── * assets/gov-emblem.svg 공식 마크업을 인라인 복사할 것. */ --c-emblem-blue: #003764; --c-emblem-red: #e4032e; /* ── 타이포 : 패밀리 (외부 CDN·@import 금지) ─────────────── */ --font-sans: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Malgun Gothic', 'Helvetica Neue', Arial, sans-serif; --font-num: var(--font-sans); /* ── 타이포 : 크기 (1920 시안 실측 → 1280 컨테이너 정규화) ─── */ --fs-11: 0.6875rem; /* 로고 상단 캡션 '대한민국 교육부 부설' */ --fs-12: 0.75rem; /* 최소 캡션 */ --fs-13: 0.8125rem; /* 브레드크럼·저작권 */ --fs-14: 0.875rem; /* 메타·날짜·테이블 헤더 */ --fs-15: 0.9375rem; /* 카드 메타·테이블 셀 */ --fs-16: 1rem; /* 본문 기본 */ --fs-17: 1.0625rem; /* GNB 메뉴·공지 리스트 */ --fs-18: 1.125rem; /* 강조 본문 */ --fs-20: 1.25rem; /* 카드 타이틀(소) */ --fs-22: 1.375rem; /* 카드 타이틀 */ --fs-24: 1.5rem; /* 패널 헤딩(공지사항/TOPIK 안내) */ --fs-28: 1.75rem; /* 연혁 연도·서브 섹션 */ --fs-32: 2rem; /* 게시판 페이지 타이틀 */ --fs-40: 2.5rem; /* 서브페이지 히어로 H1 */ --fs-48: 3rem; /* 섹션 대제목 */ --fs-56: 3.5rem; /* 메인 히어로 H1 */ /* 역할 별칭 */ --fs-hero: var(--fs-56); --fs-page-title: var(--fs-40); --fs-section: var(--fs-32); --fs-panel: var(--fs-24); --fs-card: var(--fs-22); --fs-body: var(--fs-16); --fs-meta: var(--fs-14); --fs-caption: var(--fs-13); /* ── 타이포 : 행간 / 자간 / 굵기 ─────────────────────────── */ --lh-tight: 1.25; --lh-snug: 1.4; --lh-base: 1.6; --lh-loose: 1.75; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-base: 0; --ls-wide: 0.04em; /* 베트남어 대문자 카피 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* ── 간격 (4px 그리드) ───────────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-30: 120px; --sp-40: 160px; /* 역할 별칭 */ --sp-card-pad: var(--sp-6); --sp-panel-pad: var(--sp-10); --sp-section-y: var(--sp-24); --sp-section-y-sm: var(--sp-12); --sp-grid-gap: var(--sp-8); /* ── 레이아웃 ────────────────────────────────────────────── */ --container: 1280px; /* 시안 1920 캔버스·컨테이너 1680 → 정규화 */ --container-wide: 1440px; --container-narrow: 960px; --gutter: var(--sp-6); --gutter-mobile: var(--sp-5); /* 모바일 20px — 실측 */ --header-h: 90px; /* 실측 데스크톱 */ --header-h-mobile: 58px; /* 실측 모바일 */ --page-band-h: 320px; /* 서브페이지 헤더 밴드 실측 300~340 */ /* ── 라운드 ─────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; /* 폼 인풋 */ --r-md: 8px; /* 버튼·세그먼트 토글 */ --r-lg: 12px; /* 카드 */ --r-xl: 16px; /* 패널·테이블 랩퍼 */ --r-2xl: 24px; /* 대형 플로팅 카드 */ --r-3xl: 32px; /* 히어로 퀵링크 플로팅 바 */ --r-full: 999px; /* 배지·pill·원형 마커 */ /* ── 그림자 (시안 전반 플랫·저강도) ─────────────────────── */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(4, 55, 100, 0.04); --shadow-sm: 0 2px 8px rgba(4, 55, 100, 0.05); --shadow-md: 0 6px 18px rgba(4, 55, 100, 0.07); --shadow-lg: 0 14px 40px rgba(4, 55, 100, 0.10); /* 플로팅 퀵링크·요약 카드 */ --shadow-focus: 0 0 0 3px rgba(0, 141, 158, 0.28); /* 포커스 링(틸) */ /* ── 보더 ───────────────────────────────────────────────── */ --bd: 1px solid var(--c-line); --bd-soft: 1px solid var(--c-line-soft); --bd-navy: 1px solid var(--c-navy-700); --bd-accent: 1px solid var(--c-teal-500); /* ── 모션 ───────────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; /* ── Z-index ────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 50; --z-header: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; /* ── Breakpoint 참조값 (미디어쿼리에 var() 직접 사용 불가) ──── * xs ~479 / sm 480~767(모바일 시안 390) / md 768~1023 * lg 1024~1279 / xl 1280~(데스크톱 시안 1920) */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; } /* ── 모바일(≤767px) 타이포 축소 : 390px 시안 실측 반영 ───────── * 히어로 56→28 / 페이지타이틀 40→28 / 섹션 32→20 * 패널 24→19 / 카드 22→18 */ @media (max-width: 767px) { :root { --fs-56: 1.75rem; --fs-48: 1.625rem; --fs-40: 1.75rem; --fs-32: 1.25rem; --fs-28: 1.25rem; --fs-24: 1.1875rem; --fs-22: 1.125rem; --fs-20: 1.0625rem; --fs-17: 0.875rem; --fs-16: 0.875rem; --gutter: var(--gutter-mobile); --sp-section-y: var(--sp-section-y-sm); --sp-panel-pad: var(--sp-5); --sp-card-pad: var(--sp-4); --header-h: var(--header-h-mobile); --page-band-h: 210px; } } /* ── 접근성 : 모션 감소 ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }