/* ============================================================================ * KRX Brand Overrides — "Cyan and White Ledger" (DESIGN_GUIDE.md, 2026-08-25) * ---------------------------------------------------------------------------- * iOS 26 토큰 위에 KRX cyan 팔레트를 점령(override)하는 시맨틱 허브. * 01_ios26_tokens.css 다음에 import 되어야 함. * * 🔴 색은 cyan 이다. 티일(#088177)은 2026-08-25 사용자 판단으로 폐기됐다. * krx_listing 의 --color-accent-cyan 계열이 정렬 기준이다. * * KRX 팔레트 (DESIGN_GUIDE.md §1): * - Cyan #00B4D6 브랜드 코어 (CTA·활성 인디케이터) * - Cyan Hover #009bbd hover/active * - Arctic White #ffffff 페이지·카드 면 * - Ink Black #1b1b1b 텍스트 * - Slate Gray #6d6d6d 보조 텍스트 * - Horizon Gray #e9e9e9 테두리·구분선 * - Ghost White #faf8f5 구역 구분 배경 * - Warning Red #d80027 / Caution Yellow #ffda44 의미색 전용 * * 깊이는 평면 색 + 1px 테두리로만 — 글래스·그라디언트·무거운 그림자 금지. * 폰트: 한국어 비중이 높아 SF Pro 대신 SUIT Variable을 우선. * ========================================================================= */ /* --------------------------------------------------------------------------- * LIGHT MODE * ------------------------------------------------------------------------ */ :root { /* -- KRX cyan 시맨틱 토큰 ----------------------------------------------- */ --color-brand: #00B4D6; --color-brand-hover: #009bbd; /* 텍스트·아이콘·링크용 브랜드색 — 다크에서만 명도를 올린다. 흰 글자를 얹는 면(fill)은 --color-brand 를 쓸 것. */ --color-brand-text: #00B4D6; /* 반투명 파생값의 단일 출처. 알파만 바꿔 쓰고 RGB 를 하드코딩하지 말 것 — 다크 재선언 한 줄로 전 화면 틴트·포커스링이 따라오게 하는 장치다. 사용: rgba(var(--color-brand-rgb), 0.18) */ --color-brand-rgb: 0, 180, 214; --color-brand-tint: rgba(var(--color-brand-rgb), 0.10); --color-on-brand: #ffffff; --color-surface: var(--ios-bg-grouped-secondary); --color-surface-alt: var(--ios-bg-grouped-primary); --color-text: var(--ios-label-primary); --color-text-muted: var(--ios-label-secondary); --color-border: var(--ios-separator-opaque); --color-danger: #d80027; --color-warning: #ffda44; /* #ffda44 는 텍스트 대비가 안 나온다 — 글자로 쓸 땐 어두운 파생값 (5.9:1) */ --color-warning-text: #7a6200; /* Finance (한국 관습: 빨강=상승, 파랑=하락) — 의미색이라 cyan 단일 규칙 예외 */ --color-stock-up: var(--color-danger); --color-stock-down: #0b60c4; --color-stock-flat: var(--ios-gray); /* -- iOS 시스템 컬러 점령 (채도 높은 색 = cyan 하나) -------------------- */ --ios-color-cyan: var(--color-brand); --ios-color-blue: var(--color-brand); --ios-color-teal: var(--color-brand); --ios-color-mint: var(--color-brand); --ios-color-indigo: var(--color-brand); --ios-color-yellow: var(--color-warning); --ios-color-red: var(--color-danger); --ios-glass-icon-primary: var(--color-brand); /* -- Ink/Slate 라벨 + Ledger 배경/구분선 -------------------------------- */ --ios-label-primary: #1b1b1b; --ios-label-secondary: #6d6d6d; --ios-bg-primary: #ffffff; --ios-bg-secondary: #faf8f5; --ios-bg-tertiary: #ffffff; --ios-bg-grouped-primary: #faf8f5; --ios-bg-grouped-secondary: #ffffff; --ios-bg-grouped-tertiary: #faf8f5; --ios-separator-opaque: #e9e9e9; --ios-separator-non-opaque: #e9e9e9; /* -- 탈글래스: 반투명 material/glass 면 → 불투명 평면 ------------------- */ --ios-material-chrome-bg: #ffffff; --ios-material-thick-bg: #ffffff; --ios-material-regular-bg: #ffffff; --ios-material-thin-bg: #ffffff; --ios-glass-bg-large: #ffffff; --ios-glass-bg-medium: #ffffff; --ios-glass-bg-small: #ffffff; --ios-glass-bg-small-primary: #ffffff; --ios-glass-border-small: #e9e9e9; --ios-glass-shadow-blur: 0px; /* -- 라운드 (가이드 §3: 카드·입력 4 / 버튼 6 / 이미지 24) --------------- */ --ios-radius-card: 4px; --ios-radius-input: 4px; --ios-radius-button: 6px; --ios-radius-image: 24px; --ios-radius-sm: 4px; --ios-radius-md: 6px; --ios-radius-lg: 8px; --ios-radius-xl: 8px; --ios-radius-sheet: 8px; --ios-glass-radius-large: 6px; --ios-glass-radius-medium: 6px; --ios-glass-radius-small: 4px; /* -- 폰트 패밀리: SUIT Variable 우선 ------------------------------------ */ --ios-font-family: 'SUIT Variable', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif; --ios-font-family-rounded: 'SUIT Variable', "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; /* -- 18_pages.css 레거시 단축 변수 호환 (미정의로 깨져 있던 것 복구) ----- */ --ios-cyan: var(--color-brand); --ios-green: var(--ios-color-green); --ios-yellow: var(--color-warning); --ios-gray-300: var(--ios-gray-4); --ios-gray-400: var(--ios-gray-3); --ios-spacing-3: 12px; --ios-spacing-4: 16px; --ios-spacing-5: 20px; --ios-spacing-6: 24px; --ios-spacing-7: 32px; --ios-radius-xs: 4px; /* -- KRX 시맨틱 별칭 (마이그레이션 호환층 — JS 컨트롤러 등에서 참조) ----- */ --color-primary: var(--color-brand); --color-primary-light: var(--color-brand-tint); --color-primary-dark: var(--color-brand-hover); --color-accent: var(--color-warning-text); --color-accent-light: rgba(255, 218, 68, 0.18); --color-secondary: var(--ios-label-primary); /* Background 별칭 */ --color-bg: var(--ios-bg-grouped-primary); --color-bg-elevated: var(--ios-bg-grouped-secondary); --color-bg-muted: var(--ios-bg-secondary); /* Grey 별칭 (KRX 50~900 → iOS gray 시리즈) */ --color-grey-50: #FAFAFA; --color-grey-100: var(--ios-gray-6); --color-grey-200: var(--ios-gray-5); --color-grey-300: var(--ios-gray-4); --color-grey-400: var(--ios-gray-3); --color-grey-500: var(--ios-gray); --color-grey-600: var(--ios-gray-2); --color-grey-700: #616161; --color-grey-800: #424242; --color-grey-900: var(--ios-gray-black); /* Semantic 별칭 */ --color-success: var(--ios-color-green); --color-error: var(--color-danger); --color-info: var(--color-brand); } /* --------------------------------------------------------------------------- * DARK MODE — 시맨틱 토큰만 다크 값으로 교체 (DESIGN_GUIDE.md §7) * 위 :root 블록이 01의 다크 블록보다 늦게 로드되므로, * 여기서 점령한 모드 가변 토큰은 전부 다크 값을 재선언해야 한다. * ------------------------------------------------------------------------ */ .ios26-dark, :root[data-theme="dark"] { /* 다크에서 브랜드 텍스트는 명도를 올린 cyan (#1c1c1e 대비 6.9:1) — krx_listing --color-accent-cyan-bright 와 같은 값. hover 는 반대로 낮춘다: filled 버튼 hover 배경이라 흰 글자를 얹는다. #008BA6 = 흰 글자 4.00:1 · 다크 배경 4.25:1. -mid(#00A7BD)는 흰 글자 2.89:1 이라 쓰지 않는다. */ --color-brand-text: #48D3E6; --color-brand-hover: #008BA6; --color-brand-rgb: 72, 211, 230; --color-brand-tint: rgba(var(--color-brand-rgb), 0.16); --color-danger: #ff5c66; --color-warning-text: #ffda44; --color-stock-down: #4a9eff; --ios-glass-icon-primary: var(--color-brand-text); /* 라벨/배경/구분선 — iOS 다크 뉴트럴 복원 */ --ios-label-primary: rgba(255, 255, 255, 1); --ios-label-secondary: rgba(235, 235, 245, 0.6); --ios-bg-primary: #000000; --ios-bg-secondary: #1c1c1e; --ios-bg-tertiary: #2c2c2e; --ios-bg-grouped-primary: #000000; --ios-bg-grouped-secondary: #1c1c1e; --ios-bg-grouped-tertiary: #2c2c2e; --ios-separator-opaque: #38383a; --ios-separator-non-opaque: #38383a; /* 탈글래스 다크 면 */ --ios-material-chrome-bg: #1c1c1e; --ios-material-thick-bg: #1c1c1e; --ios-material-regular-bg: #1c1c1e; --ios-material-thin-bg: #1c1c1e; --ios-glass-bg-large: #1c1c1e; --ios-glass-bg-medium: #1c1c1e; --ios-glass-bg-small: #1c1c1e; --ios-glass-border-small: #38383a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-brand-text: #48D3E6; --color-brand-hover: #008BA6; --color-brand-rgb: 72, 211, 230; --color-brand-tint: rgba(var(--color-brand-rgb), 0.16); --color-danger: #ff5c66; --color-warning-text: #ffda44; --color-stock-down: #4a9eff; --ios-glass-icon-primary: var(--color-brand-text); --ios-label-primary: rgba(255, 255, 255, 1); --ios-label-secondary: rgba(235, 235, 245, 0.6); --ios-bg-primary: #000000; --ios-bg-secondary: #1c1c1e; --ios-bg-tertiary: #2c2c2e; --ios-bg-grouped-primary: #000000; --ios-bg-grouped-secondary: #1c1c1e; --ios-bg-grouped-tertiary: #2c2c2e; --ios-separator-opaque: #38383a; --ios-separator-non-opaque: #38383a; --ios-material-chrome-bg: #1c1c1e; --ios-material-thick-bg: #1c1c1e; --ios-material-regular-bg: #1c1c1e; --ios-material-thin-bg: #1c1c1e; --ios-glass-bg-large: #1c1c1e; --ios-glass-bg-medium: #1c1c1e; --ios-glass-bg-small: #1c1c1e; --ios-glass-border-small: #38383a; } }