/* ============================================================================ tokens.css HSO "Operator OS" 디자인 시스템 토큰 레이어 (v1) 출처: claude.ai/design 핸드오프 번들 "hso-design-system-rebuild" (갤러리 파일 `HSO Design System.dc.html`의 :root). 색·타입·elevation 토큰은 소스에서 그대로 옮긴 검증값. radius/spacing/letter-spacing은 소스에 토큰으로 없어 프로토타입 인라인 값에서 도출한 '제안'이며 아래에서 블록을 분리하고 신뢰도 차이를 명시함. 성격: 핸드오프 자산. 비침습. 모든 토큰이 `.hso`로 스코프되어 있어, 이 파일을 해도 class="hso"를 붙인 요소가 없는 한 기존 화면은 전혀 바뀌지 않음. (CSS 커스텀 프로퍼티는 그 자체로 아무것도 렌더하지 않으므로, 어떤 요소가 var(--*)를 소비하기 전까지 부작용 0.) 현재 채택 상태: - base.html이 tokens.css + shell.css를 로드하고 #app에 class="hso" data-theme="light|dark"를 부여한다. 토큰은 `.hso` 스코프로 유지(전역 :root로 올리지 않음)해, 앞으로 들어올 다른 제품 CSS와 섞이지 않게 둔다. - 레거시 styles.css(테라코타 --primary-color/--gray-* 팔레트)는 제거됨. login.css도 이 토큰 체계로 완전히 이전됐다(raw 색상 0건). 다만 .hso 스코프를 안 쓰는 유일한 파일이라 셸 밖 화면으로 남아 있다. 폰트 메모: - Pretendard 단일(국문 포함 전부). @font-face 등록은 shell.css가 한다 (styles.css 제거 후 승계). 여기 tokens.css는 var(--font-sans)로 패밀리만 지정. - Freesentation(2-tier 브랜드 폰트)은 웹폰트 부재로 포기. 워드마크는 폰트가 아니라 로고 이미지(/static/images/logo-hso.png)로 처리한다. ============================================================================ */ /* ── 1) 검증 토큰: 소스(:root)에서 그대로 옮김 ───────────────────────────── */ .hso { /* Type: Pretendard 단일(국문 포함 전부). Freesentation(브랜드 헤딩)은 웹폰트 부재로 포기. 위계는 폰트 패밀리가 아니라 size/weight로. 워드마크는 폰트 아닌 로고 이미지로 처리. */ --font-sans: 'Pretendard Variable', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, sans-serif; --font-mono: var(--font-sans); /* 숫자도 Pretendard. mono 미사용 */ font-variant-numeric: tabular-nums; /* 숫자 등폭 정렬(컬럼 정렬), mono 없이 */ /* 네이티브 위젯(select 팝업·스크롤바·date picker)도 테마를 따라 그리게 한다. 미선언이면 UA가 팝업을 라이트로 그리는데 글자는 페이지 색(다크 흰색)을 상속해 흰 바탕 흰 글자가 된다 (다크 블록이 dark로 덮는다). */ color-scheme: light; /* Brand: Gold (FROM.H 로고 #CFB272). 제품 인터랙션엔 gold-600/500. 녹색 Forest에서 골드로 리브랜드. 다크→라이트 순 브론즈골드→크림 램프. */ --gold: #594318; /* 최심 브론즈골드: 로그인 무대·primary 베이스(흰 글씨 대비 확보) */ --gold-700: #6B521E; --gold-600: #866628; --gold-500: #A38033; --gold-400: #C29D47; /* 현재 미소비 */ --gold-300: #CEB373; /* ≈ 로고 골드(#CFB272) */ --gold-200: #DDCCA2; --gold-100: #EBE3CB; /* 현재 미소비 */ /* Neutral surfaces (라이트): 거의 흰색까지 식힌 중립 */ --canvas: #F3F4F5; /* 앱 배경 */ --surface: #FFFFFF; /* 카드·테이블 */ --surface-2: #F7F8F9; /* 툴바·헤더 */ --surface-3: #EDEFF1; /* 호버·트랙 */ /* Text 위계 (남용 주의: 보조 기본은 --text-2. --text-3은 placeholder·비활성·구분자 같은 3차에만. 핵심 메타까지 text-3 쓰면 줄줄이 죽어 보인다) */ --text: #191C20; /* primary 본문 */ --text-2: #5C636B; /* secondary 보조 (메타·라벨 기본값) */ --text-3: #8A9098; /* tertiary: placeholder·비활성·구분자만 */ --text-inv:#FFFFFF; /* Border / grid: Sheets 하이라인 */ --border: rgba(22,26,31,0.11); --border-strong: rgba(22,26,31,0.17); --grid: rgba(22,26,31,0.07); /* 셀 그리드라인 */ /* 조밀 격자용 강화 stroke. 시트·추이표처럼 셀이 촘촘한 화면에서 기본 농도로는 격자가 흐려 안 보인다. .ilbo-app·.dash-page가 --grid/--border/--border-strong을 이 값으로 덮는다(전역은 안 건드림). */ --grid-dense: rgba(22,26,31,0.13); --border-dense: rgba(22,26,31,0.20); --border-strong-dense: rgba(22,26,31,0.26); /* Primary: 제품 UI 액션 = Gold */ --primary: #594318; --primary-hover: #6B521E; --primary-active: #413010; --primary-tint: #F2EDDE; --primary-tint-2: #EBE3CB; /* Accent = Clay: 그 화면의 단 하나, 가장 중요한 것에만(전체의 1~5%, 남발 금지). 종착 액션(답변 복사·지금 수집)이나 최상위 집계 수치(총매출) 같은 정점 1개. 일반 제품 UI 액션·상태·뱃지는 Gold(--primary). 규칙: docs/reference/design-guide.md 2.2 */ --accent: #B8573A; --accent-hover: #8E3E28; /* Selection / focus / spark */ --sel-bg: rgba(89,67,24,0.08); --sel-border: #866628; --focus: #866628; --spark: #A38033; /* 현재 미소비 */ /* Semantic: 라이트/다크 모두 가독한 미드톤 */ --ok: #A9852E; --ok-bg: rgba(169,133,46,0.15); --warn: #BE7B2E; --warn-bg: rgba(200,137,58,0.16); --info: #5A86A0; --info-bg: rgba(90,134,160,0.16); --bad: #C15A5A; --bad-bg: rgba(193,90,90,0.16); /* Elevation */ --shadow-1: 0 1px 2px rgba(16,20,24,0.05), 0 1px 1px rgba(16,20,24,0.04); --shadow-2: 0 6px 20px -6px rgba(16,20,24,0.16), 0 2px 6px rgba(16,20,24,0.06); --shadow-3: 0 16px 40px -12px rgba(16,20,24,0.22), 0 4px 10px rgba(16,20,24,0.08); /* 현재 미소비 */ } /* select '팝업'은 인라인 위젯과 달리 요소가 아니라 문서 루트의 color-scheme을 참조한다 (크로미움 동작. 요소 선언만으론 다크에서 팝업이 라이트로 그려져 흰 바탕 흰 글자 재발). 테마 속성이 #app(.hso)에 있어 루트에 못 닿으므로 :has()로 루트에 미러링한다. 이 두 줄이 이 파일에서 유일하게 .hso 스코프 밖을 만지는 예외다. */ html:has(.hso[data-theme="light"]) { color-scheme: light; } html:has(.hso[data-theme="dark"]) { color-scheme: dark; } /* Dark: 토큰만 스왑. 중립 차콜 위에서 Gold가 밝은 쪽으로 자동 전환 */ .hso[data-theme="dark"] { color-scheme: dark; /* 네이티브 위젯(select 팝업·스크롤바 등)도 다크로. 라이트 블록 주석 참조 */ --canvas: #121417; --surface: #1B1E22; --surface-2: #23272B; --surface-3: #2C3035; --text: #E7EAED; --text-2: #9BA2AA; --text-3: #6A727A; --text-inv:#FFFFFF; --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --grid: rgba(255,255,255,0.065); --grid-dense: rgba(255,255,255,0.13); --border-dense: rgba(255,255,255,0.20); --border-strong-dense: rgba(255,255,255,0.28); --primary: #8A6A28; --primary-hover: #A07E30; --primary-active: #6E5420; --primary-tint: rgba(160,126,48,0.22); --primary-tint-2: rgba(160,126,48,0.30); --accent: #CC7355; --accent-hover: #E0876A; --sel-bg: rgba(200,169,110,0.13); --sel-border: #C3A255; --focus: #C3A255; --spark: #CBAE66; /* 현재 미소비 */ --ok: #CBAE66; --ok-bg: rgba(203,174,102,0.15); --warn: #D9A45A; --warn-bg: rgba(217,164,90,0.15); --info: #7FA8C2; --info-bg: rgba(127,168,194,0.15); --bad: #D9817F; --bad-bg: rgba(217,129,127,0.15); --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 8px 28px -8px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35); --shadow-3: 0 18px 46px -12px rgba(0,0,0,0.6), 0 6px 14px rgba(0,0,0,0.4); /* 현재 미소비 */ } /* ── 2) 도출 제안: 소스에 토큰으로 '없는' 값 ───────────────────────────── 위 1)과 신뢰도가 다름. 소스는 간격/라운드/트래킹을 인라인 리터럴로 처리했고, 아래는 프로토타입 실사용 분포에서 관측해 만든 제안 스케일임. 채택은 선택. */ .hso { /* Radius. 관측 분포: 7px(컨트롤, 최빈) · 10px(카드·패널) · 6px(칩) · 99px(pill) */ --r-sm: 6px; --r: 7px; /* 버튼·인풋 등 컨트롤 기본 */ --r-lg: 10px; /* 카드·패널 */ --r-pill: 99px; /* Letter-spacing 컨벤션 (Pretendard 단일): - 본문/UI = --track-body(-0.01em): Pretendard를 아주 살짝 조여 밀도 확보, 가독성은 유지. - 큰 헤딩 = --track-display(-0.02em). - 트래킹 캡스(--track-eyebrow)는 영문 대문자 라벨에만. 한글엔 쓰지 말 것 (자간이 벌어져 '제 품'처럼 어색해짐. 한글 라벨 위계는 크기·굵기·색으로 만든다). */ --track-body: -0.01em; --track-display: -0.02em; --track-eyebrow: 0.16em; /* 영문 대문자 전용 */ /* Type scale. 소스 비토큰(인라인 값에서 도출). 베이스 15px 압축 스케일 (일괄 배율 대신 작은 라벨은 하한을 올리고 큰 헤딩은 과확대를 막음). */ --fs-eyebrow: 11px; --fs-meta: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-title: 24px; /* Spacing. 소스 비토큰. 4px 베이스 제안(관측 패딩 10·12·16·18·22·40px와 호환) */ --space-1: 4px; /* 현재 미소비 */ --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; /* 현재 미소비 */ --space-6: 32px; /* 현재 미소비 */ /* Layout. 콘텐츠 영역 최대폭·좌우 거터(소스 비토큰). 너무 넓은 화면에서 콘텐츠가 끝없이 늘어나는 것만 막는 상한, 좌우 거터로 가장자리와 띄움. */ --page-gutter: 16px; /* 셸 크롬 높이. 정의가 한 곳이어야 파생 계약이 안 어긋난다. 소비: shell.css .topbar, ilbo.css .ilbo-app, inquiry.css 폼·스레드 높이 */ --topbar-h: 56px; /* 오버뷰 표(.tbl-wrap.is-wide)와 워크벤치 드로어가 100vh에서 빼는 값. = 상단바 + .page 상하 패딩 + .page-head + .freshness 합계. 불변식: 네 오버뷰(autoreview·ilbo·master·pricing) 표 높이가 전부 같아야 메뉴 이동 시 화면이 세로로 안 흔들린다. 그 불변식이 이 값에 걸려 있다. 168px은 상단바 아래 페이지 크롬 합계로, 측정값이다. */ --overview-chrome-h: calc(var(--topbar-h) + 168px); /* ilbo 컨트롤 바 높이. 유도: 컨트롤 30 + 상하 패딩 14 + 보더 1. 탭 바(.tabs.is-sticky·.sa-tabrow)가 sticky top으로 이 값에 붙는다. 이 둘이 어긋나면 탭만 붙고 필터가 밀린다. */ --toolbar-h: 45px; /* 카드 안쪽 패딩. 4배수 밖이지만 스냅하지 않는다(값 통일은 UI 개편 몫). shell .card 정본이 기본값으로 소비하며, 밀도가 다른 카드는 자기 클래스에서 이 변수만 덮는다(노브). 헤더 정렬식이 calc(var(--gap-inset) + var(--card-pad))로 이 값에 결합된다. */ --card-pad: 22px; /* 레이어 밴드. 새 요소는 반드시 이 중 하나를 고른다. 새 숫자를 만들지 않는다. 밴드가 없던 시절 10단계가 무근거로 흩어졌고, 새 팝오버를 만들 때마다 크롬 바 높이와 z를 조회해야 했다. */ --z-cell: 1; /* 표: sticky 헤더 행 */ --z-head: 2; /* 표: sticky 행 라벨(왼쪽 고정 열) */ --z-corner: 3; /* 표: 행·열이 둘 다 고정되는 교차 셀 */ --z-bar-tabs: 20; /* 화면 크롬: 탭 바 */ --z-bar-summary: 25; /* 화면 크롬: 요약 띠 */ --z-bar-toolbar: 30; /* 화면 크롬: 컨트롤 바 */ --z-popover: 40; /* 페이지 안 팝오버·툴팁·플로팅 패널. 크롬 위, 셸 아래 */ --z-dropdown: 50; /* 셸: 지점 스위처·프로필 메뉴 */ --z-fixed-popover: 55; /* 런타임 좌표를 JS가 주입하는 fixed 팝오버 */ --z-overlay: 60; /* 그 위에 겹치는 최상위 팝오버 */ /* 컨트롤 높이 정본 4단. 새 컨트롤은 이 넷 중에서 고른다. 현재 코드에는 24·28·32·36·40px 이탈이 남아 있다. 값 통일은 UI 개편에서 하며, 여기서는 정본과 이미 같은 자리만 토큰을 소비한다. */ --ctl-h-inline: 22px; /* 표 셀 안 입력 */ --ctl-h-sm: 30px; /* 조밀 툴바 컨트롤 */ --ctl-h: 34px; /* 셸 크롬 */ --ctl-h-lg: 38px; /* 폼 인풋·기본 버튼 */ /* 전환 시간. 셸의 .18s 등 이탈 4건은 값 통일이라 개편으로 넘긴다. */ --dur: .15s; /* 간격 역할 별칭(tier 2). 새 코드는 숫자 스케일이 아니라 이 층에서 고른다. 정의만 하고 기존 코드는 전환하지 않는다(선택은 새 코드·개편 몫). 지금 8·10·12px이 섞여 있어 어느 것이 그룹 간격인지 판정하려면 화면별 의도를 읽어야 하고, 그 판정이 곧 값 통일로 이어져 시각 변화 0 원칙을 깬다. */ --gap-stack: var(--space-2); /* 그룹 안 세로 간격 */ --gap-section: var(--space-6); /* 섹션 사이 */ } /* ── 3) 데이터 표기 컨벤션 (시스템 규칙, 코드 아닌 합의) ─────────────────── 통화: 항상 `₩` + 전체 자릿수 + tabular-nums + 우측정렬. `K`/`M` 약어 금지 (직관성 우선). 예: ₩268,000 (O) ₩268K (X) 숫자: Pretendard 400 Regular + font-variant-numeric: tabular-nums 로 컬럼 정렬. 퍼센트/비율: 우측정렬, 동일 tabular 규칙. ───────────────────────────────────────────────────────────────────────── */