/* ═══════════════════════════════════════════════════════════════════════════
JT Design System — Design Tokens v5.0 (DRAFT)
Janytree Inc. / 제니트리 디자인 시스템 정본 토큰 파일
⚠️ 이 파일은 편집하지 마세요.
값을 바꿔야 하면 디렉터에게 요청하고, 개정판이 나오면 파일을 통째로 교체합니다.
Primary = 로고색 Charcoal #1F2328 · Accent = Blue #305CDE
기준 본문 16px(v5.0에서 14→16 전환) · 간격 4px 그리드 · 기준 라운드 8px
v5.0 주요 변경 (상세: DS §17 변경 이력)
- 본문 기준 14px → 16px (웹 표준 정렬 — 기존 앱과의 크기 충돌 근본 해소)
- 타입 스케일 재계산 · --fs-2xs 폐기 예정(11px로 상향, v6에서 제거)
- 타입 세트 2벌: Productive(기본 12~32) + Expressive(40·48·56, 랜딩·브랜드용)
- 폰트 조합 확정: 본문 Pretendard 단독 / 숫자·영문대형 Figtree (Inter 제외)
- **웹폰트 로드를 이 파일에 내장** — 이 파일 하나만 링크하면 폰트까지 따라옵니다
- 컨테이너 4종: narrow 720 / max 1200 / wide 1440 / full
- 폰트 스택에 태국·인도계 시스템 폰트 명시 (파일 추가 0)
- 언어 안전 규칙 신설: keep-all은 :lang(ko) 한정 + overflow-wrap 안전망
- 컨트롤 높이 40/32/48 (16px 본문 기준 재조정)
═══════════════════════════════════════════════════════════════════════════ */
/* ═══ 웹폰트 로드 — v5.0 신설 ═══════════════════════════════════════════════
v4.0까지는 각 HTML에 를 손으로 복붙해야 했고, 빠뜨린 곳은 폰트가
적용되지 않았습니다(개발자센터가 그 사례). 이제 이 파일만 링크하면 됩니다.
⚠️ @import는 반드시 파일 최상단(주석 제외 첫 규칙)에 있어야 합니다.
⚠️ 속도가 중요한 페이지는 @import 대신 에 를 직접 넣고
아래 두 줄을 주석 처리하세요 (@import는 CSS 로드 후 순차 요청이라 한 박자 늦음).
Pretendard = 한글·영문 본문 전부 (라틴이 Inter 기반이라 별도 영문 폰트 불필요)
Figtree = 숫자·영문 대형 제목 전용 (400/600/700만 — 본문용이 아니므로 최소 굵기) */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700&display=swap");
/* ── 아이콘 폰트 (선택) ─────────────────────────────────────────────────────
아이콘을 SVG(brand/icons/)로만 쓰는 앱은 이 줄이 필요 없습니다.
7,798종을 자유롭게 쓰려면 아래 주석을 해제하세요.
⚠️ 반드시 display=block 입니다 (swap 아님).
아이콘 폰트에 swap을 쓰면 로드 전에 "settings" 같은 **리가처 원문이
그대로 노출**되고 레이아웃이 무너집니다. block은 로드 전까지 감춥니다.
⚠️ 사내망 방화벽 등으로 CDN이 막힐 수 있는 환경에서는 폰트 대신
SVG(.jt-ico-mask)를 쓰세요 — 핵심 29종은 brand/icons/에 있습니다. */
/* @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"); */
:root{
/* ── 이 파일의 버전 (마이그레이션 추적용 — 지우지 마세요) ── */
--jt-ds-version: "5.0";
/* ── 브라우저 기본 컨트롤의 명암 (v5.0 신설) ──
체크박스·라디오·날짜 달력·스크롤바·셀렉트 화살표는 브라우저가 그리는
부분이라 CSS로 색을 바꿀 수 없습니다. color-scheme을 알려주면
브라우저가 알아서 다크용으로 그립니다. 이 한 줄이 없으면 다크 화면에서
라디오 버튼만 흰 원으로 튀고, 달력 아이콘이 하얗게 보입니다. */
color-scheme: light;
/* ── 폰트 (v5.0 조합 확정) ──
본문(--font-base): Pretendard 단독. 라틴이 Inter 기반이라 별도 영문 폰트를
섞으면 오히려 통일감이 깨집니다(x/cap 0.750 동일 = 사실상 같은 폰트).
Figtree는 본문 스택에서 제외 — 베트남어 결합부호(ạ·ệ)가 없어 단어
중간에 폰트가 바뀌는 사고를 막기 위함(Pretendard는 보유).
숫자(--font-num) / 영문 대형(--font-display): Figtree.
Avenir 계열 지오메트릭 인상이 브랜드로 읽히는 자리에만 한정 사용.
태국·인도계는 웹폰트를 추가하지 않고 OS 시스템 폰트를 이름으로 명시해
렌더링 통제권만 확보합니다(용량 0). 아랍어 등 그 외 문자는 OS 기본 폴백.
⚠️ word-break:keep-all을 중국어·일본어·태국어에 적용하지 마세요 —
무공백 언어는 문장 전체가 한 단어로 취급되어 레이아웃이 붕괴합니다. */
--font-base:"Pretendard Variable",Pretendard,"Noto Sans SC","Noto Sans TC",
-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",
"PingFang SC","Microsoft YaHei","PingFang TC","Microsoft JhengHei",
"Leelawadee UI","Thonburi","Noto Sans Thai",
"Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari",
"Helvetica Neue",Arial,sans-serif;
--font-num:"Figtree","Pretendard Variable",Pretendard,ui-monospace,sans-serif;
--font-display:"Figtree","Pretendard Variable",Pretendard,sans-serif;
/* ═══ MAP — 원시 팔레트 (컴포넌트에서 직접 참조하지 마세요) ═══ */
/* neutral — 브랜드 잉크 */
--neutral-0:#FFFFFF; --neutral-50:#F7F8F9; --neutral-100:#EEF0F2; --neutral-200:#DEE2E6;
--neutral-300:#C5CBD1; --neutral-400:#9DA5AF; --neutral-500:#757F8A; --neutral-600:#5A6470;
--neutral-700:#434B55; --neutral-800:#2E343B; --neutral-900:#1F2328; --neutral-950:#14171A;
/* gray — UI 구조 */
--gray-50:#F9FAFB; --gray-100:#F2F4F6; --gray-200:#E5E8EB; --gray-300:#D1D6DB; --gray-400:#B0B8C1;
--gray-500:#8B95A1; --gray-600:#6B7684; --gray-700:#4E5968; --gray-800:#333D4B; --gray-900:#191F28;
/* Core 시맨틱 */
--blue-50:#EEF3FE; --blue-100:#D6E1FC; --blue-200:#AEC3F8; --blue-300:#7E9DF1; --blue-400:#5578E8;
--blue-500:#305CDE; --blue-600:#2A4EC0; --blue-700:#24419E; --blue-800:#1F387F; --blue-900:#1B2F66;
--green-50:#E7F7F0; --green-100:#C2ECD9; --green-300:#57C99B; --green-400:#2BB681;
--green-500:#14A870; --green-600:#0F8E5F; --green-700:#0C744E; --green-900:#074A32;
--yellow-50:#FEF6E4; --yellow-100:#FBE8B4; --yellow-300:#F4C64B; --yellow-400:#F2BA2C;
--yellow-500:#F0B01C; --yellow-600:#D2960F; --yellow-700:#A9760C; --yellow-900:#6B4A0C;
--red-50:#FDECEC; --red-100:#FAD3D3; --red-300:#EC8080; --red-400:#E66161;
--red-500:#E14B4B; --red-600:#C93A3F; --red-700:#A82F35; --red-900:#6B1F23;
/* Extended — 데이터 시각화·특수 강조 */
--purple-50:#F4EFFB; --purple-100:#E6D8F5; --purple-300:#AB84DA; --purple-400:#885CC0;
--purple-500:#6C3BAA; --purple-600:#5C3092; --purple-700:#4B2777; --purple-900:#30194C;
--teal-50:#E6F6F6; --teal-100:#BEE8E8; --teal-300:#52C2C2; --teal-400:#2FB1B1;
--teal-500:#12A3A3; --teal-600:#0D8A8A; --teal-700:#0B7070; --teal-900:#074747;
/* ── 타입 스케일 ① Productive (기본 · 기준 16px) ──
제품 UI — 사용자가 "업무를 완료"하는 화면(PLM·업무도구·관리자·폼·표).
공간 효율 우선. 바닥값: 본문 12px · 캡션 11px (이하 금지) */
--fs-2xs:11px; /* @deprecated v5.0 — 캡션 바닥값 특수용. v6.0에서 제거 예정. --fs-xs 사용 권장 */
--fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px;
--fs-xl:20px; --fs-2xl:24px; --fs-3xl:28px; --fs-4xl:32px;
/* ── 타입 스케일 ② Expressive (디스플레이 · 40px~) ──
브랜드 사이트·랜딩·개발자센터 표지 — 사용자가 "읽고 탐색"하는 화면.
Productive와 같은 시스템 안의 확장 단계입니다(시스템을 나누지 않음).
사용법: 해당 영역에 data-typeset="expressive" → 아래 조판 규칙 자동 적용
⚠️ 40px 이상은 반드시 tight 행간 + 음수 자간 (한글은 대형에서 자간이 벌어져 보임) */
--fs-display-sm:40px; --fs-display-md:48px; --fs-display-lg:56px;
--lh-display:1.15; --ls-display:-0.02em;
/* lh-tight는 라틴·한글 "제목" 전용 — 태국어·데바나가리 등 상하 결합 문자가
섞일 수 있는 본문·데이터 셀에는 lh-snug(1.45) 이상을 사용 */
--lh-tight:1.35; --lh-snug:1.45; --lh-normal:1.6; --lh-relaxed:1.75;
/* ── 간격 (4px 그리드) ── */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
--space-7:32px; --space-8:40px; --space-9:48px; --space-10:56px; --space-11:64px; --space-12:72px;
/* ── 라운드 ── */
--r-none:0; /* v5.0 신설 — 각진 모서리. 표 셀·풀블리드 배너·이미지 타일·
기존 앱과의 경계 맞춤 등 '둥글게 하면 안 되는' 자리에 사용.
0을 직접 쓰지 말고 이 토큰을 쓰세요(나중에 일괄 조정 가능) */
--r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
/* ── 그림자 (라이트) ──
shadow-4는 모달 오버레이·스포트라이트 전용. 카드·버튼에 사용 금지(CI 정합) */
--shadow-1:0 1px 2px rgba(25,31,40,.06),0 1px 3px rgba(25,31,40,.04);
--shadow-2:0 2px 8px rgba(25,31,40,.06),0 1px 3px rgba(25,31,40,.05);
--shadow-3:0 8px 24px rgba(25,31,40,.10),0 2px 6px rgba(25,31,40,.06);
--shadow-4:0 20px 40px rgba(25,31,40,.14),0 4px 10px rgba(25,31,40,.08);
/* ── 모션 ── */
--dur-instant:100ms; --dur-fast:160ms; --dur-base:240ms; --dur-slow:360ms; --dur-page:480ms;
--ease-standard:cubic-bezier(.4,0,.2,1); --ease-decelerate:cubic-bezier(0,0,.2,1);
--ease-accelerate:cubic-bezier(.4,0,1,1); --ease-emphasized:cubic-bezier(.2,0,0,1);
/* ── 레이어링(z-index) 스케일 — v5.0 신설 ──────────────────────────────
복잡한 앱의 1번 고질병(z-index:9999 경쟁)을 구조로 차단합니다.
⚠️ 컴포넌트에 z-index 숫자를 직접 쓰지 마세요. 아래 이름만 씁니다.
100 단위 간격 = 사이에 끼워 넣을 여지를 남긴 것 */
--z-base:0; /* 일반 콘텐츠 */
--z-raised:10; /* 카드 hover·포커스로 살짝 떠오름 */
--z-sticky:100; /* 고정 헤더·툴바·표 헤더 */
--z-drawer:900; /* 사이드 드로어(모바일 메뉴) */
--z-dropdown:1000; /* 셀렉트·메뉴·자동완성 */
--z-overlay:1100; /* 모달 뒤 어두운 막 */
--z-modal:1200; /* 모달·다이얼로그 본체 */
--z-toast:1300; /* 토스트·스낵바 */
--z-tooltip:1400; /* 툴팁 — 항상 최상단 */
/* ── 아이콘 크기 — v5.0 신설 ──
아이콘은 버튼·입력·탭·메뉴 어디에나 들어갑니다. 크기를 규정하지 않으면
화면마다 제각각이 됩니다. 글자 크기와 짝을 맞춘 3단. */
--icon-sm:16px; --icon-md:20px; --icon-lg:24px;
/* ── 포커스 링 — v5.0 신설 (접근성 필수) ──
한 곳에서 관리합니다. 컴포넌트는 이 값만 참조하세요. */
--focus-ring-width:2px; --focus-ring-offset:2px;
/* ── 터치 타깃 최소 크기 (WCAG 2.5.5) ──
아이콘 버튼처럼 시각적으로 작은 컨트롤도 이 값 이상은 눌리게 합니다. */
--touch-target-min:44px;
/* ── 브레이크포인트 (참조용) ── */
--bp-mobile:639px; --bp-tablet:1023px; --bp-desktop:1439px;
/* ── 컨테이너 4종 (v5.0 신설 — 앱이 용도에 맞게 선택) ──
narrow: 문서·읽기 중심 (Bootstrap md 컨테이너와 동일 폭, 본문 가독 65~75자)
max: 표준 앱/대시보드 (기존 기본값 유지)
wide: 데이터 밀집 대시보드·대형 모니터
full: 최대폭 제한 없음 — 토큰 불필요, 좌우 패딩만 유지 */
--container-narrow:720px; --container-max:1200px; --container-wide:1440px;
/* ═══════════════════════════════════════════════════════════════════════
ALIAS — 컴포넌트는 아래 이름만 참조합니다.
═══════════════════════════════════════════════════════════════════════ */
/* 텍스트 */
--color-text: var(--neutral-900);
--color-text-secondary: var(--gray-600); /* 보조 정보 — 대비 4.5:1 통과 */
/* ⚠️ tertiary는 흰 배경 대비 3.04:1로 텍스트 기준(4.5:1) 미달입니다.
**글자에 쓰지 마세요.** placeholder도 텍스트라 해당됩니다(→ secondary 사용).
아이콘·구분 표식 등 비텍스트 장식에만 허용합니다. */
--color-text-tertiary: var(--gray-500);
--color-text-disabled: var(--gray-400);
--color-on-primary: var(--neutral-0);
/* 배경 (표면 고도) */
--color-bg-layout: var(--gray-50);
--color-bg-container: var(--neutral-0);
--color-bg-elevated: var(--neutral-0);
/* ── 상호작용 상태 채움색 — v5.0 확장 ──────────────────────────────────
v4.0은 hover 하나뿐이라 "선택된 탭·선택된 행·눌린 버튼"을 만들 수 없었습니다.
목록·탭·메뉴·표 행·카드 선택 등 모든 선택형 UI가 이 4종을 씁니다. */
--color-fill-hover: var(--gray-50); /* 마우스 올림 */
--color-fill-active: var(--gray-100); /* 누르는 중 */
--color-fill-selected: var(--blue-50); /* 선택됨 — 파랑 계열(상호작용 신호) */
--color-fill-disabled: var(--gray-100); /* 비활성 배경 */
/* 선택 상태의 글자·테두리 (선택 표시의 3종 세트) */
--color-text-selected: var(--blue-700);
--color-border-selected: var(--color-accent);
/* 테두리·구분
border = 카드·구분선 등 "장식" 테두리. 대비 기준 없음(1.23:1)
border-strong = 입력·셀렉트 등 "폼 컨트롤" 테두리.
⚠️ WCAG 1.4.11은 UI 요소 식별에 3:1을 요구합니다. 입력 필드는
테두리가 "여기가 입력칸"임을 알리는 유일한 표시라 해당됩니다.
gray-500(3.04:1)은 램프에서 3:1을 만족하는 가장 밝은 단계로,
통과선에 딱 맞춰 무게를 최소화한 값입니다.
카드에는 쓰지 마세요 — 화면 전체가 무거워집니다. */
--color-border: var(--gray-200);
--color-border-strong: var(--gray-500);
--color-split: var(--gray-100);
/* ── Dimmed(가림막) 4단계 — v5.0 확장 ─────────────────────────────────
용도마다 필요한 어둡기가 다릅니다. 앱이 임의 투명도를 쓰지 않도록 고정합니다.
⚠️ 가림막을 깐 화면은 뒤 콘텐츠를 스크린리더에서도 가려야 합니다
(모달 열 때 배경에 aria-hidden="true" 또는 inert). */
--color-dim-weak: rgba(15,18,21,.24); /* 바텀시트·드로어 뒤 — 뒤가 보여야 함 */
--color-overlay: rgba(15,18,21,.48); /* 모달 뒤 (기본) */
--color-dim-strong: rgba(15,18,21,.72); /* 이미지 뷰어·전체화면 */
/* 제품 사진 위에 흰 글자를 얹을 때 — 사진 밝기가 제각각이어도 글자가 읽히게 */
--color-dim-image: rgba(15,18,21,.40);
/* 브랜드·상호작용 */
--color-primary: var(--neutral-900);
--color-primary-hover: var(--neutral-800);
--color-primary-active: var(--neutral-950);
--color-accent: var(--blue-500);
--color-accent-hover: var(--blue-400);
--color-accent-bg: var(--blue-50);
--color-accent-border: var(--blue-100);
--color-link: var(--color-accent);
--color-link-hover: var(--color-accent-hover);
--color-focus: var(--color-accent);
/* 상태 (배경 / 테두리 / 글자 3종 세트) */
--color-success: var(--green-600); --color-success-bg: var(--green-50);
--color-success-border: var(--green-100); --color-success-text: var(--green-700);
--color-warning: var(--yellow-500); --color-warning-bg: var(--yellow-50);
--color-warning-border: var(--yellow-100); --color-warning-text: var(--yellow-900);
--color-error: var(--red-600); --color-error-bg: var(--red-50);
--color-error-border: var(--red-100); --color-error-text: var(--red-700);
--color-info: var(--blue-600); --color-info-bg: var(--blue-50);
--color-info-border: var(--blue-100); --color-info-text: var(--blue-700);
--color-science: var(--teal-500); --color-science-bg: var(--teal-50);
--color-science-border: var(--teal-100); --color-science-text: var(--teal-700);
/* ── 화장품 제조·품질 도메인 — v5.0 신설 ──────────────────────────────
제니트리 앱의 절반은 시험·규격·판정을 다룹니다(자주측정·자가점검·COA).
"적합/부적합/보류"는 일반 success/error와 의미가 달라 별도 이름을 둡니다.
⚠️ 판정은 색만으로 전달하지 마세요 — 반드시 글자(적합/부적합)를 함께.
색맹 사용자와 흑백 인쇄(COA·시험성적서)에서 정보가 사라집니다. */
--color-pass: var(--green-600); --color-pass-bg: var(--green-50);
--color-pass-border: var(--green-100); --color-pass-text: var(--green-700);
--color-fail: var(--red-600); --color-fail-bg: var(--red-50);
--color-fail-border: var(--red-100); --color-fail-text: var(--red-700);
--color-hold: var(--yellow-600); --color-hold-bg: var(--yellow-50);
--color-hold-border: var(--yellow-100); --color-hold-text: var(--yellow-900);
/* 규격 범위를 벗어났지만 판정 전 단계(관리한계 이탈 경고) */
--color-oos: var(--purple-600); --color-oos-bg: var(--purple-50);
--color-oos-border: var(--purple-100); --color-oos-text: var(--purple-700);
/* 제품 이미지 배경 — 화장품 컷은 흰 배경이 많아 컨테이너와 경계가 사라집니다 */
--color-product-bg: var(--neutral-50);
/* 컨트롤 높이 — v5.0: 16px 본문 기준 재조정. 항상 min-height로 사용(§8 팽창 규칙) */
--control-height:40px; --control-height-sm:32px; --control-height-lg:48px;
/* 엘리베이션 의미 이름 */
--elev-card:var(--shadow-1); --elev-pop:var(--shadow-2); --elev-modal:var(--shadow-3);
/* 밀도 (기본 = comfortable, 16px) */
--density-fs-base:16px; --density-fs-sm:14px; --density-lh:1.6;
--cell-pad-x:12px; --cell-pad-y:8px;
/* 로고 테마 스왑 */
--logo-light-display:block; --logo-dark-display:none;
}
/* ═══ 다크 테마 — Alias만 재정의 ═══ */
[data-theme="dark"]{
color-scheme: dark; /* 브라우저 기본 컨트롤도 다크로 (v5.0) */
--color-text:rgba(255,255,255,.88);
--color-text-secondary:rgba(255,255,255,.55);
--color-text-tertiary:rgba(255,255,255,.40);
--color-text-disabled:rgba(255,255,255,.25);
/* 표면 밝기 계단 (다크 전용 값 — 팔레트에 없음) */
--elev-0:#0F172A; --elev-1:#1E293B; --elev-2:#273449; --elev-3:#2E3C52; --elev-4:#35435B;
--color-bg-layout: var(--elev-0);
--color-bg-container: var(--elev-1);
--color-bg-elevated: var(--elev-2);
/* 상호작용 상태 — 다크에서는 흰색 알파로 밝히는 방식 */
--color-fill-hover:rgba(255,255,255,.06);
--color-fill-active:rgba(255,255,255,.10);
--color-fill-selected:rgba(126,157,241,.16); /* accent 계열 알파 */
--color-fill-disabled:rgba(255,255,255,.04);
--color-text-selected:var(--blue-200);
--color-border-selected:var(--blue-300);
--color-border:rgba(255,255,255,.14);
--color-border-strong:rgba(255,255,255,.40); /* 3.61:1 — 폼 컨트롤 식별 기준 충족 */
--color-split:rgba(255,255,255,.08);
/* Dimmed — 다크에서는 더 짙게(뒤 배경이 이미 어두워 구분이 약함) */
--color-dim-weak:rgba(0,0,0,.40);
--color-overlay:rgba(0,0,0,.64);
--color-dim-strong:rgba(0,0,0,.82);
--color-dim-image:rgba(0,0,0,.52);
--elev-hairline:inset 0 1px 0 rgba(255,255,255,.06);
--shadow-dark:0 8px 24px rgba(0,0,0,.36);
--elev-card:var(--elev-hairline);
--elev-pop:var(--shadow-dark),var(--elev-hairline);
--elev-modal:0 12px 32px rgba(0,0,0,.44),var(--elev-hairline);
/* primary 반전: 밝은 표면 + 어두운 글자 */
--color-primary: var(--neutral-50);
--color-primary-hover: var(--neutral-0);
--color-primary-active:var(--neutral-100);
--color-on-primary: var(--neutral-900);
/* accent 밝게 (blue-300 = 다크 위 대비 5.56:1) */
--color-accent: var(--blue-300);
--color-accent-hover: var(--blue-200);
--color-accent-bg: rgba(126,157,241,.16);
--color-accent-border:rgba(126,157,241,.34);
--color-link: var(--color-accent);
--color-link-hover:var(--color-accent-hover);
--color-focus: var(--color-accent);
/* 상태색 — 다크 전용 값(채도↓ 밝기↑). 배경은 채우지 않고 테두리·글자로 표현 */
--color-success:#5FD6A6; --color-success-text:#5FD6A6; --color-success-border:rgba(95,214,166,.40); --color-success-bg:transparent;
--color-warning:#F5CE6B; --color-warning-text:#F5CE6B; --color-warning-border:rgba(245,206,107,.40);--color-warning-bg:transparent;
--color-error:#F09090; --color-error-text:#F09090; --color-error-border:rgba(240,144,144,.40); --color-error-bg:transparent;
--color-info:var(--blue-300); --color-info-text:var(--blue-300); --color-info-border:rgba(126,157,241,.40); --color-info-bg:transparent;
--color-science:#5FD2D2; --color-science-text:#5FD2D2; --color-science-border:rgba(95,210,210,.40); --color-science-bg:transparent;
/* 품질 판정 — 다크 전용 값. 배경 대신 테두리·글자로 표현 */
--color-pass:#5FD6A6; --color-pass-text:#5FD6A6; --color-pass-border:rgba(95,214,166,.40); --color-pass-bg:transparent;
--color-fail:#F09090; --color-fail-text:#F09090; --color-fail-border:rgba(240,144,144,.40); --color-fail-bg:transparent;
--color-hold:#F5CE6B; --color-hold-text:#F5CE6B; --color-hold-border:rgba(245,206,107,.40); --color-hold-bg:transparent;
/* oos는 다크 링크색(blue-300 #7E9DF1)과 가장 가까운 색이라 자홍 쪽으로 이동.
ΔE 23.1 → 27.4로 분리, 대비도 7.04 → 7.40:1로 개선 */
--color-oos:#D6A8E8; --color-oos-text:#D6A8E8; --color-oos-border:rgba(214,168,232,.40); --color-oos-bg:transparent;
--color-product-bg:var(--elev-2);
--logo-light-display:none; --logo-dark-display:block;
}
/* ═══ 컴팩트 밀도 — 바닥값 준수 (본문 14px / 캡션 12px / 행간 1.5)
v5.0: 기준 16px에서 한 스텝(14px)만 내림. 두 스텝 이상 금지.
태국·인도계 텍스트가 들어가는 셀에는 overflow:hidden 금지(모음부호 잘림) ═══ */
[data-density="compact"]{
--control-height:34px; --control-height-sm:28px;
--density-fs-base:14px; --density-fs-sm:12px; --density-lh:1.5;
--cell-pad-x:10px; --cell-pad-y:5px;
}
/* ═══ Expressive 타입 세트 — v5.0 신설
랜딩·브랜드 페이지 영역에 data-typeset="expressive"를 붙이면
그 안의 h1~h3가 디스플레이 크기로 승격됩니다. 색·간격·컴포넌트는 그대로 공유.
:where() = 명시도 0 — 앱이 개별 지정한 크기가 있으면 그쪽이 항상 이깁니다. ═══ */
[data-typeset="expressive"] :where(h1){
font-size:var(--fs-display-lg); line-height:var(--lh-display);
letter-spacing:var(--ls-display);
}
[data-typeset="expressive"] :where(h2){
font-size:var(--fs-display-md); line-height:var(--lh-display);
letter-spacing:var(--ls-display);
}
[data-typeset="expressive"] :where(h3){
font-size:var(--fs-display-sm); line-height:var(--lh-display);
letter-spacing:var(--ls-display);
}
/* 모바일에서는 한 단계씩 낮춰 가로 넘침 방지 */
@media (max-width:639px){
[data-typeset="expressive"] :where(h1){ font-size:var(--fs-display-sm); }
[data-typeset="expressive"] :where(h2){ font-size:var(--fs-4xl); }
[data-typeset="expressive"] :where(h3){ font-size:var(--fs-3xl); }
}
/* ═══ 언어 안전 규칙 — v5.0 신설 (다국어 레이아웃 붕괴 방지)
이 블록은 폰트 크기·전역 스타일을 건드리지 않으므로
기존 앱에도 :root 변수와 함께 안전하게 복사할 수 있습니다.
- keep-all은 한국어에만: 태국어·중국어 등 무공백 언어에 걸리면
문장 전체가 한 단어로 취급되어 가로 스크롤·레이아웃 붕괴 발생
- overflow-wrap 안전망: DB에 저장된 lang 표시 없는 외국어 데이터·긴 URL 대응
(:where() = 명시도 0 — 기존 앱의 어떤 규칙도 덮어쓰지 않음) ═══ */
:lang(ko){ word-break:keep-all; }
:where(body){ overflow-wrap:anywhere; }
/* ═══ 접근성 — 필수 ═══ */
@media (prefers-reduced-motion:reduce){
*{animation:none!important; transition:none!important;}
}