/* ═══════════════════════════════════════════════════════════════════════ * stock — 디자인 토큰 (Single Source of Truth) * Phase 1 · 2026-08-21 토큰 도입 · 2026-08-22 sogero 청록 팔레트 * 2026-09-02 · UI 고급화 시안 B "Porcelain" 채택 — 팔레트 교체 * · 바탕은 푸른기 도는 자기(porcelain) 회색, 카드는 테두리 없이 그림자만 * · 브랜드 색을 청록 → 네이비로. 청록은 sogero 와 같아 두 시스템이 구분되지 않았고 * 실거래 빨강·손익 색과 경합했다. 네이비는 등락(빨강/파랑)·위험(빨강)과 겹치지 않는다. * · 큰 숫자는 얇은 굵기(--s-num-w) — 여백·굵기 대비로 고급감을 낸다 * 토큰 이름은 그대로라 페이지는 손대지 않아도 따라온다. * * 기본 = 라이트 · 다크는 · 시스템 추종은 "system" * 변수 접두사 --s- 는 기존 --t- / --toss- / --brand / --bg / --panel 과 * 충돌하지 않도록 새로 잡은 네임스페이스다. * ═══════════════════════════════════════════════════════════════════════ */ /* ───────── 폰트 · Pretendard Variable (자체 호스팅 · SIL OFL) ───────── */ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; /* 가변 폰트 전 구간 */ font-style: normal; font-display: swap; src: url('../lib/fonts/PretendardVariable.woff2') format('woff2-variations'); } /* ───────── 라이트 (기본값) · Porcelain ───────── */ :root { /* 배경 */ --s-bg: #F3F4F6; /* 페이지 바닥 — 푸른기 도는 자기 회색 */ --s-panel: #FFFFFF; /* 카드 · 컬럼 */ --s-panel-2: #F6F7F9; /* 입력 · hover */ --s-panel-3: #ECEEF2; /* 강한 hover · 트랙 */ /* 선 — 카드 테두리는 쓰지 않는다. 표 행·구분선 전용 */ --s-line: #E4E7EC; --s-line-soft: #EEF0F3; /* 글자 — 잉크 네이비 계열 */ --s-txt: #161B26; --s-txt-2: #3B4453; --s-dim: #6B7482; --s-faint: #9AA3B0; /* 브랜드 — 네이비. 버튼(흰 글자)·링크·활성 탭에만 쓴다. 등락·위험 색과 절대 겹치지 않는다. */ --s-accent: #1F3B63; /* 흰 글자 대비 10.6:1 */ --s-accent-2: #2B5289; /* hover · 본문 링크 */ --s-accent-soft: #E9EEF6; --s-accent-fill: #1F3B63; /* 흰 글자를 얹는 채움면 */ /* 등락 — 한국 관례: 상승 빨강 / 하락 파랑 */ --s-up: #D6404E; --s-up-soft: #FCEBED; --s-dn: #2F6BD6; --s-dn-soft: #E8EFFB; /* 상태 */ --s-warn: #B7791F; --s-warn-soft: #FBF3E3; --s-live: #C62828; /* 실거래 위험 */ --s-live-soft: #FBE9E9; /* --s-*-fill : 배경을 채우고 흰 글자를 얹는 면 --s-*-ink : soft 배경 위에 얹는 글자 */ --s-live-fill: #B71F1F; /* 흰 글자 대비 6.5 */ --s-live-ink: #A81C1C; --s-warn-ink: #8F5D12; --s-dn-ink: #2258B8; /* 그림자 — 테두리 대신 층을 만든다 (2단: 접촉 그림자 + 부드러운 확산) */ --s-shadow: 0 1px 2px rgba(22,27,38,.04), 0 8px 24px rgba(22,27,38,.06); --s-shadow-lift: 0 2px 4px rgba(22,27,38,.06), 0 16px 40px rgba(22,27,38,.12); /* 차트 */ --s-grid: #EEF1F5; --s-ok: #2E8B57; /* 정상·성공 (상승 빨강과 분리) */ --s-ok-soft: #E6F3EB; --s-ma5: #D6404E; --s-ma20: #B7791F; --s-ma60: #2F6BD6; --s-ma120: #9AA3B0; /* ───── 치수 · 타이포 (색과 무관하므로 테마 공통) ───── */ --s-r-sm: 8px; --s-r: 10px; --s-r-lg: 12px; --s-sp-1: 4px; --s-sp-2: 8px; --s-sp-3: 16px; --s-sp-4: 24px; --s-fs-sm: 12px; --s-fs: 14px; --s-fs-lg: 16px; --s-fs-xl: 20px; --s-fs-2xl: 28px; --s-num-w: 300; /* KPI 같은 큰 숫자의 굵기 — 얇게 */ --s-touch: 44px; /* 모바일 최소 터치 타깃 */ --s-nav-h: 100px; /* 상단 프레임 높이 (탭 60 + 하위 링크 40) · topnav.jsp 와 일치 */ --s-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif; --s-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } /* ───────── 다크 (명시 선택) · 같은 색상 논리의 야간판 ───────── */ :root[data-theme="dark"] { --s-bg: #0F1217; --s-panel: #161A21; --s-panel-2: #1D222B; --s-panel-3: #252B36; --s-line: #262C36; --s-line-soft: #1F252E; --s-txt: #E6E9EE; --s-txt-2: #BDC4CF; --s-dim: #838C9A; --s-faint: #5B6472; --s-accent: #8FB0DC; /* 네이비의 다크 밝기 보정 (강청) */ --s-accent-2: #A9C4EA; --s-accent-soft: rgba(143,176,220,.14); --s-accent-fill: #2B5289; /* 흰 글자 대비 6.7 */ --s-up: #EF5A6A; --s-up-soft: rgba(239,90,106,.14); --s-dn: #5B93F2; --s-dn-soft: rgba(91,147,242,.14); --s-warn: #E0A32E; --s-warn-soft: rgba(224,163,46,.14); --s-live: #FF5C52; --s-live-soft: rgba(255,92,82,.14); --s-live-fill: #D32F2F; --s-live-ink: #FF6B62; --s-warn-ink: #E0A32E; --s-dn-ink: #5B93F2; --s-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --s-shadow-lift: 0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55); --s-grid: #1C222B; --s-ok: #5FB58B; --s-ok-soft: rgba(95,181,139,.14); --s-ma5: #EF5A6A; --s-ma20: #E0A32E; --s-ma60: #5B93F2; --s-ma120: #5B6472; } /* ───────── 시스템 추종 (data-theme="system" 일 때만) ───────── */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --s-bg:#0F1217; --s-panel:#161A21; --s-panel-2:#1D222B; --s-panel-3:#252B36; --s-line:#262C36; --s-line-soft:#1F252E; --s-txt:#E6E9EE; --s-txt-2:#BDC4CF; --s-dim:#838C9A; --s-faint:#5B6472; --s-accent:#8FB0DC; --s-accent-2:#A9C4EA; --s-accent-soft:rgba(143,176,220,.14); --s-accent-fill:#2B5289; --s-up:#EF5A6A; --s-up-soft:rgba(239,90,106,.14); --s-ok:#5FB58B; --s-ok-soft:rgba(95,181,139,.14); --s-dn:#5B93F2; --s-dn-soft:rgba(91,147,242,.14); --s-warn:#E0A32E; --s-warn-soft:rgba(224,163,46,.14); --s-live:#FF5C52; --s-live-soft:rgba(255,92,82,.14); --s-live-fill:#D32F2F; --s-live-ink:#FF6B62; --s-warn-ink:#E0A32E; --s-dn-ink:#5B93F2; --s-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --s-shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55); --s-grid:#1C222B; --s-ma5:#EF5A6A; --s-ma20:#E0A32E; --s-ma60:#5B93F2; --s-ma120:#5B6472; } } /* ═══════════════════════════════════════════════════════════════════════ * 전역 적용 — 폰트 · 접근성 · (2026-09-02) 카드/버튼/입력 공통 마감 * ═══════════════════════════════════════════════════════════════════════ */ /* 폰트 적용. 각 페이지가