/* ============================================================ alphakin/alphakin-tokens.css — JNC Holdings DS 호환 토큰 레이어 목적: 적응형 화면(JSX/구조 CSS)이 쓰는 토큰 이름을 JNC Holdings Design System 의 role/primitive 토큰으로 매핑한다. 컴포넌트 구조는 그대로 두고 "색·타입·반경·그림자"만 JNC로 정박한다(사용자 요청: 스타일만 적용). · 모든 별칭은 JNC role/primitive 를 가리키므로 [data-theme="dark"] 적용 시 자동으로 다크로 리맵핑된다(themes.css 가 role 을 다크값으로 덮음). · 시장 방향색은 KRX 관습(상승=red / 하락=blue)을 그대로 따른다. ============================================================ */ :root { /* ── 타입 (JNC: --font-sans / --font-num 제공) ── */ --font-mono: var(--font-sans); --font-display: var(--font-sans); /* ════════════════════════════════════════════════════════════════ 공통 페이지 레이아웃 토큰 (Single Layout Contract) — 4px 그리드 정박 문제(근본 원인): 페이지마다 .cds-pad 의 paddingTop(26/30/34) 과 헤더 좌우 인셋(모바일 4px)이 인라인으로 제각각 → LNB 이동 시 타이틀이 상하로 '까딱' 이고, 모바일 오버라인이 타이틀보다 더 왼쪽에서 시작해 불안정. 해법: 상단·좌우·하단 패딩을 토큰 1벌로 정의하고 셸(.cds-pad/.m3-body)에만 적용한다. 페이지는 자기 패딩을 갖지 않는다 → 전 페이지 동일 시작점(정합). 근거: 모든 px 는 4px 베이스 그리드(JNC --sp-*; Carbon 8px·M3 8dp 그리드와 정합). 36=9×4·56=14×4 는 그리드상이나 DS 큐레이션 목록에 없어 신설(DS 가 sp-7 을 신설한 선례와 동일). [carbondesignsystem.com/guidelines/spacing · m3.material.io/foundations/layout/understanding-layout/spacing] ──────────────────────────────────────────────────────────────── */ --sp-9: 36px; /* 9×4 — 데스크톱 본문 좌우 거터 */ --sp-14: 56px; /* 14×4 — 데스크톱 본문 하단 */ --ak-pad-top: var(--sp-8); /* 32 — 전 페이지 동일 상단(까딱임 제거) */ --ak-pad-x: var(--sp-9); /* 36 — 데스크톱 좌우(인덱스밴드와 동일 정렬) */ --ak-pad-bottom: var(--sp-14); /* 56 */ --ak-pad-top-m: var(--sp-2); /* 8 — 모바일 상단(앱바·인덱스밴드 아래) */ --ak-pad-x-m: var(--sp-4); /* 16 — 모바일 좌우(카드 가장자리와 동일) */ --ak-pad-bottom-m: var(--sp-24); /* 96 — 모바일 하단(하단 내비 회피) */ /* ════════════════════════════════════════════════════════════════ [모바일 공통 규약] 섹션 전환 간격 (Mobile Section Rhythm) — 전 화면 단일 소스 문제(근본 원인): 스크롤 한 화면에 여러 '섹션'(신호·테마·수급…)이 이어지는데 섹션 헤더의 위 간격이 화면마다 18·22·24·26px 로 제각각이고, 위(이전 섹션 본문)와 아래(자기 본문)의 차이가 작아(예: 22 vs 12) 새 섹션이 '시작됐다'는 경계가 약했다 → 타이틀이 있어도 오밀조밀하게 뭉쳐 보임. 규약: 섹션 헤더는 '위(그룹 분리) ≫ 아래(제목-본문 결속)'. 위 32 / 아래 12. · 위 32px = 무관한 이전 섹션과의 경계(그룹 분리). · 아래 12px = 제목을 '자기 본문'에 더 가깝게 묶음(근접성). 비율 32:12(≈2.7:1)로 "이 타이틀은 아래 내용의 것"이 즉시 읽힌다. 근거(검증): Google Material 3 — spacing 으로 무관한 그룹의 '경계'를 만들고 관련 요소는 가깝게 묶는다(m3.material.io/foundations/layout/understanding-layout/spacing). Gestalt 근접성 — 제목을 그 본문에 더 가깝게 두면 어디에 속하는지 즉시 인지, 너무 붙으면 무관한 것을 한 그룹으로 오인(NN/g·법칙). 8dp 그리드 정합(32=4×8). 단일 소스: 이 토큰만 바꾸면 모든 모바일 섹션(.m3 .sec-head + 인라인 헤더) 동시 반영. ──────────────────────────────────────────────────────────────── */ --ak-msec-top: 32px; /* 섹션 위 간격 — 이전 섹션과의 경계(그룹 분리) */ --ak-msec-bottom: 12px; /* 섹션 헤더 → 본문 — 제목-본문 결속(근접성) */ /* ════════════════════════════════════════════════════════════════ [데스크톱 공통 규약] 섹션 전환 간격 (Desktop Section Gap) — 전 화면 단일 소스 문제(근본 원인): 데스크톱은 모바일과 달리 섹션 헤더의 '위 간격' 토큰이 없어 각 섹션의 '아래' 여백(다음 섹션과의 분리)을 화면마다 인라인으로 34·38·40·8px 제각각 박았다 → 시황 같은 긴 단일 페이지에서 섹션 리듬이 들쑥날쑥(특히 8px는 두 섹션이 거의 붙어 보임). 34·38 은 8px 그리드를 벗어난 값(off-grid). 규약: 최상위 섹션의 '아래 여백'(= 다음 섹션과의 경계)은 이 토큰 하나로 통일. sec-head 자체의 '헤더→본문' 결속은 .sec-head margin-bottom(22px)이 담당. 근거(검증): IBM Carbon — 일관된 spacing 스케일이 페이지 간 자연스러운 리듬· 흐름을 만들고, 레이아웃 스케일의 큰 토큰으로 여백을 늘려 무관한 섹션을 분리한다 (carbondesignsystem.com/elements/spacing). 40 = 8×5(2x 그리드 정합, layout-08). 단일 소스: 이 토큰만 바꾸면 데스크톱 시황 등 긴 페이지의 섹션 간격 동시 반영. ──────────────────────────────────────────────────────────────── */ --ak-dsec-gap: 40px; /* 데스크톱 섹션 전환(아래) 간격 — Carbon 2x 그리드 정합 */ /* ── 본문/보조 텍스트 ── */ --text-primary: var(--fg1); --text-secondary: var(--fg2); --text-muted: var(--fg3); /* ── 잉크 깊이(테마 대응 role 로) ── */ --ink-2: var(--fg2); --ink-3: var(--fg3); --ink-4: var(--fg3); /* ════════════════════════════════════════════════════════════════ ALPHAKIN BI 브랜드 색 정박 (BI 파일 기준) — 전역 BI: Alphakin Orange #FF6A00(정체성·마크·워시·보더·α·액티브 상태), Warm Ink #1A1613, Ivory #FAF6F1. 대비 규약(요청 "대비는 명확하도록"): 순수 #FF6A00 은 *텍스트가 아닌* 정체성 모먼트(마크·워시·보더·α·액티브)에만 쓰고 — ① 라이트 면 위 '오렌지 글자/링크' 와 ② 흰 글자가 얹히는 '채움' 은 BI 오렌지의 더 깊은 톤으로 내려 AA 가독을 확보한다(JNC --link 가 orange-700 을 쓰는 것과 동일 원리). 이로써 BI 맥락(오렌지 정체성)을 잃지 않으면서 대비를 명확히 한다. · 런타임 강조색(frame-mount accent)은 --brand 만 인라인 치환하므로, 기본값을 #FF6A00 으로 두면 화면 전반이 BI 오렌지로 정박된다. ──────────────────────────────────────────────────────────────── */ --brand: #FF6A00; /* BI Alphakin Orange — 정체성/마크/워시/보더/α/액티브 */ --brand-strong: #E85F00; /* hover/pressed 채움 */ --brand-stronger: #CC5300; /* deeper press */ --brand-tint: #FFE9DC; /* soft wash (오렌지 50) */ --ak-orange-text: #B84D00; /* 라이트 면 오렌지 텍스트/링크 — AA(이보리 ~4.8:1·흰 ~5.1:1) */ --ak-orange-text-deep: #A34400; /* 강조 텍스트 변형 — AA */ --focus-ring: var(--brand); /* 포커스 링도 BI 오렌지 */ /* ── 액센트 색 (오렌지 주도) ── */ --ak-sunset: var(--ak-orange-text); /* 1차 텍스트/링크 — AA(라이트 면) */ --ak-gold: var(--brand-strong); /* 카드 좌측 룰·1차 채움(흰 글자 대형/볼드) */ --ak-gold-soft: var(--gold); /* 다크 잉크 패널 위 럭스 골드 */ --ak-rose: var(--orange-400); /* 타임라인 점(장식) */ --ak-rose-deep: var(--ak-orange-text-deep);/* 큐레이션 강조 텍스트 — AA */ --ak-ink: var(--ink); --ak-paper: var(--stone-50); --paper: var(--stone-50); /* ── 표면 ── */ /* --surface 는 JNC role(흰 카드, 다크 자동전환)을 그대로 사용 — 재정의하지 않음 */ --surface-tinted: var(--brand-tint); /* orange-50 wash (다크: 어두운 brand 틴트) */ --plate: var(--bg-raised); /* 좌측 레일 면 */ --plate-2: var(--bg-sunken); /* 호버 wash */ /* ════════════════════════════════════════════════════════════════ ALPHAKIN 표면 분리 규약 (3-cue Surface Separation) — 페이지 전역 규약 문제: JNC 기본 recession 은 '아이보리 페이지(#FAF6F1) 위에 흰 카드(#FFFFFF)' 로, 두 면의 명도차가 ~1.05:1 에 불과하고 헤어라인(stone-200)도 흰 면 대비 ~1.2:1 이라, 카드가 배경에 묻혀 화면 전체가 한 덩어리로 보인다. 대상: 초심자·고령 사용자 → 노화에 따른 대비 감도(contrast sensitivity) 저하로 낮은 명도차를 더 못 본다. 단일 단서(미묘한 채움차)에 의존하면 영역 인지 실패. 규약: 모든 '떠 있는 면'(카드·시트·행·팝오버)은 캔버스와 다음 3중 단서로 분리한다 — ① 명도 단계(캔버스를 따뜻한 파치먼트로 한 단계 깊게) ② 보이는 경계선 ③ 따뜻한 그림자. 어느 하나가 약해도 나머지가 분리를 보장(중복 단서 원칙). 근거: WCAG 1.4.11(비텍스트 대비 3:1, 저시력 경계 인지) · M3 '톤 단계 + 필요시 그림자'로 컨테이너 분리 · M3 filled card 는 표면과 카드를 분리하기 위해 다른 톤을 기본 사용 · NN/g(저대비는 노화·인지부하 사용자 가독/발견성 훼손). 정체성 보존: 흰 카드는 그대로 유지(따뜻한 종이 위의 '에르메스 박스'). ──────────────────────────────────────────────────────────────── */ --ak-canvas: #FBF6EF; /* 캔버스 — 맑고 밝은 웜 아이보리(BI ivory 계열). 칙칙한 mid-tone 제거 → 더 환하고 트인 느낌, 카드 분리는 경계+그림자로 */ --ak-card: var(--surface); /* 카드면 = 흰색(정체성 유지) */ --ak-card-border: #DDCBAF; /* 카드 경계 — 맑아진 캔버스·흰 카드 양면에서 부드럽게 보임 */ --ak-card-border-hover: color-mix(in srgb, var(--brand) 42%, var(--ak-card-border)); --ak-card-shadow: 0 1px 3px rgba(40,28,14,.07), 0 8px 22px -8px rgba(120,72,22,.18); --ak-card-shadow-hover: 0 3px 8px rgba(40,28,14,.10), 0 16px 34px -10px rgba(120,72,22,.26); /* 캔버스 — 상단에서 BI 오렌지가 아주 옅게 번지는 웜 글로우(에르메스 박스 톤). 과한 그라데이션 금지, 숨결 정도만 */ --bg-radial: radial-gradient(140% 95% at 50% -12%, #FFEFE1 0%, #FCF3EA 38%, var(--ak-canvas) 72%); /* ── 분할선(테마 대응) ── */ --line: var(--border); --line-2: color-mix(in srgb, var(--border) 58%, transparent); /* ── KRX 방향색 ── */ --rise: var(--positive); /* 상승 red */ --fall: var(--negative); /* 하락 blue */ --flat: var(--fg3); /* ════════════════════════════════════════════════════════════════ 매매 주체 색 (외/기/연) — 독립 범주색 (Categorical, 비방향) 원칙: ① 방향색(상승 red·하락 blue)·브랜드 오렌지와 충돌 않게 별개 3색. ② 색맹 안전(Okabe-Ito류 — 청록/보라/금, 명도차로 2차 분리). ③ 색에만 의존하지 않게 항상 '외/기/연' 글자 배지로 이중 부호화(WCAG 1.4.1). 근거: Okabe&Ito 정성 팔레트(색맹 강건)·기본 red/blue 회피·범주↔색 매핑 일관. ──────────────────────────────────────────────────────────────── */ --ent-foreign: #0C7C63; /* 외국인 — 청록(teal) */ --ent-inst: #5B43A0; /* 기관 — 보라(violet) */ --ent-pension: #97680C; /* 연기금 — 금(amber·장기 자금) */ --ent-individual: var(--fg3); /* 개인 — 중립 회색 */ --ent-badge-fg: #fff; /* 배지 글자색(라이트=흰, 다크=잉크) */ --ent-foreign-soft: color-mix(in srgb, var(--ent-foreign) 13%, var(--surface)); --ent-inst-soft: color-mix(in srgb, var(--ent-inst) 13%, var(--surface)); --ent-pension-soft: color-mix(in srgb, var(--ent-pension) 14%, var(--surface)); } /* ── 테마 재정박 (필수) ────────────────────────────────────────── CSS 변수 치환은 *선언 위치*(:root)에서 1회 일어난다. 그래서 :root 에서 `--text-primary: var(--fg1)` 로 둔 별칭은 :root 의 fg1(라이트)로 굳어 상속되어 [data-theme] 하위에서 다크로 바뀌지 않는다(JNC themes.css 가 role 을 테마 스코프에서 직접 재정의하는 것과 같은 이유). 따라서 role 을 가리키는 별칭을 테마 스코프에서 다시 선언해, 해당 스코프의 fg/border 로 재해석되게 한다. */ [data-theme="dark"], [data-theme="hc"], [data-theme="dark-hc"] { --text-primary: var(--fg1); --text-secondary: var(--fg2); --text-muted: var(--fg3); --ink-2: var(--fg2); --ink-3: var(--fg3); --ink-4: var(--fg3); --surface-tinted: var(--brand-tint); --plate: var(--bg-raised); --plate-2: var(--bg-sunken); /* 다크/고대비: 오렌지 '텍스트' 별칭은 *밝은* 브랜드(themes.css 가 다크에서 brand 를 밝은 톤으로 올림)로 재해석해 어두운 캔버스 위 고대비를 확보. (라이트의 #B84D00 을 그대로 상속하면 다크 캔버스에서 묻힘 → 반드시 테마 스코프에서 재선언) */ --ak-orange-text: var(--brand); --ak-orange-text-deep: var(--brand-strong); --ak-sunset: var(--ak-orange-text); /* 다크/고대비: 캔버스·경계·그림자를 테마 role 로 재정박(역 recession 은 themes.css 가 이미 카드를 캔버스보다 밝게 만들어 분리를 보장 → 규약은 경계+그림자를 강화) */ --ak-canvas: var(--bg); --ak-card: var(--surface); --ak-card-border: var(--border-strong); --ak-card-border-hover: color-mix(in srgb, var(--brand) 50%, var(--border-strong)); --ak-card-shadow: 0 1px 3px rgba(0,0,0,.34), 0 10px 26px -10px rgba(0,0,0,.52); --ak-card-shadow-hover: 0 3px 8px rgba(0,0,0,.42), 0 18px 38px -12px rgba(0,0,0,.62); --bg-radial: var(--ak-canvas); --line: var(--border); --line-2: color-mix(in srgb, var(--border) 58%, transparent); --rise: var(--positive); --fall: var(--negative); --flat: var(--fg3); --ak-rose-deep: var(--ak-orange-text-deep); /* 다크/고대비: 주체색을 밝은 톤으로 올리고 배지 글자는 잉크로(DS 다크 가이드) */ --ent-foreign: #3FC9A6; --ent-inst: #B7A0EA; --ent-pension: #E0B24E; --ent-individual: var(--fg3); --ent-badge-fg: #1A1613; --ent-foreign-soft: color-mix(in srgb, var(--ent-foreign) 18%, var(--surface)); --ent-inst-soft: color-mix(in srgb, var(--ent-inst) 18%, var(--surface)); --ent-pension-soft: color-mix(in srgb, var(--ent-pension) 20%, var(--surface)); }