/* * ============================================================================ * 밀리AI 토큰 — 별칭 · 파생값 · Bootstrap 재바인딩 * ============================================================================ * * 정본은 theme/tokens.css(디자인 참고 저장소 1:1 이식본)다. 이 파일은 세 가지만 한다. * * 1) 우리 프로젝트가 예전부터 쓰던 이름 → 참고 토큰 이름 별칭 * 2) 참고에 없어서 우리가 직접 정하는 파생값(-rgb 짝 · 그림자 · 히트맵 · 코드 팔레트 …) * 3) Bootstrap 루트 변수 재바인딩 * * ⚠️ 이 블록들은 "시맨틱을 재선언하는 모든 스코프"에 함께 걸어야 한다 — 즉 :root 와 .mili-light 양쪽. * 커스텀 프로퍼티는 선언된 요소에서 var() 가 치환되고 자손은 치환이 끝난 값을 상속하므로 * (css-variables-1 §2.1), :root 에만 --mili-bg: var(--mili-app-bg) 를 두면 * .mili-light 가 --mili-app-bg 를 바꿔도 따라오지 않는다. * * 스코프: :root = 다크(기본) / .mili-light = 라이트. * 화면 JSP 의 가 mili-dark(+레거시 mili-theme-dark) 또는 mili-light 를 붙인다. * ============================================================================ */ /* ============================================================ 1) 원시 팔레트 — 테마 무관 raw 값 ------------------------------------------------------------ 참고 토큰으로 대체되지 않은 것만 남았다. 참조처가 사라지는 대로 함께 지운다. ============================================================ */ :root { /* ---------- 브랜드: 파랑(레거시) ---------- components.css §1 의 .btn-primary/.form-control:focus 등이 아직 직접 참조한다. Phase 2 에서 --mili-primary 계열로 옮기고 나면 지운다. */ --mili-primary-100: #e8f0ff; --mili-primary-300: #8fb4ff; --mili-primary-500: #2f6fed; --mili-primary-600: #1d54c9; --mili-primary-700: #163f9a; /* ---------- 라임(레거시) ---------- 참고의 --mili-primary(#B4FF39) 로 수렴 중이다. 아직 화면 CSS 가 참조한다. */ --mili-lime-300: #b4ff39; --mili-lime-400: #aaff19; /* ---------- 다크 표면 계조(레거시) ---------- 참고의 --mili-app-bg / --mili-surface / --mili-surface-raised 로 수렴 중이다. */ --mili-slate-950: #0b0d10; --mili-slate-900: #0c0c0d; --mili-slate-800: #0d1014; --mili-slate-700: #14171b; --mili-slate-600: #1a1d21; /* ---------- 홈 스탯 4색 ---------- */ --mili-stat-streak: #ff8904; /* 연속 학습 */ --mili-stat-badge: #fdc700; /* 배지 */ --mili-stat-mission: #aaff19; /* 완료 미션 */ --mili-stat-time: #51a2ff; /* 누적 학습 */ /* 포인트 강조(노랑) — 진도 게이지·NEW 뱃지. 참고에 대응 토큰이 없다. */ --mili-accent: #ffc53d; /* 로그인 화면 좌측 비주얼 — 블랙 베이스 + 네온그린 글로우(PBL 히어로 배너와 같은 조합, pbl/project-list.css 참고). 사진을 쓰려면 이 값만 url("/images/login-visual.jpg") 처럼 바꾸면 된다(마크업 수정 불필요). */ --mili-login-visual: linear-gradient(160deg, #060706 0%, #0c0f0a 55%, #142010 100%); /* ---------- 폰트: tokens.css 값을 덮어쓴다 ---------- 참고는 폐쇄망 한글 폴백을 고려하지 않아 스택이 짧다(Pretendard 뒤가 바로 sans-serif). 우리는 폰트 파일을 받지 못하는 환경에서도 한글이 깨지지 않도록 시스템 스택을 유지한다. */ --mili-font-sans: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* 같은 이유로 Orbitron 뒤를 sans-serif 가 아니라 위 스택으로 받는다(Orbitron 에는 한글이 없다). */ --mili-font-metric: "Orbitron Variable", Orbitron, var(--mili-font-sans); /* ---------- 형태(레거시 반경 스케일) ---------- 참고는 --mili-radius-none/-filter/-card/-pill 4종이고 우리 CSS 는 sm/base/lg 를 49곳에서 참조한다. 각진 시안이라 전부 0 이다. 참조처를 --mili-radius-none 으로 옮기는 대로 지운다. */ --mili-radius-sm: 0; --mili-radius: 0; --mili-radius-lg: 0; /* ---------- 레이아웃(참고에 없는 것) ---------- */ --mili-navbar-height: 64px; /* .detail-shell__aside 의 sticky top 계산용 */ --mili-section-gap: 3rem; /* 참고는 본문 폭이 --mili-content-max(1440px) 한 벌이지만, 우리 읽기·폼형 화면은 960px 로 맞춰져 있어 두 번째 슬롯을 둔다. Phase 3 에서 재검토한다. */ --mili-content-narrow: 960px; /* 실행 결과 정/오답 색. 에디터·콘솔은 어느 테마에서도 다크라 테마를 타지 않는다. */ --mili-code-success: #48c78e; --mili-code-danger: #ff6b6b; } /* ============================================================ 2) 파생값 + 별칭 — 다크(기본) ============================================================ */ :root { /* 기본 스크롤바가 다크를 따라오게 한다(color-scheme 은 tokens.css 가 :root 에 건다). */ scrollbar-color: var(--mili-border-strong) var(--mili-app-bg); /* ---------- 표면 별칭 ---------- */ --mili-canvas: var(--mili-app-bg); --mili-bg: var(--mili-app-bg); --mili-panel: var(--mili-surface); --mili-panel-raised: var(--mili-surface-raised); --mili-panel-sunken: var(--mili-app-bg); /* 패널 안에 파인 영역 — 판보다 어둡다 */ /* ---------- 전경 별칭 ---------- */ --mili-fg: var(--mili-text); --mili-ink: var(--mili-text); --mili-fg-body: var(--mili-text-secondary); --mili-body: var(--mili-text-secondary); --mili-fg-muted: var(--mili-text-muted); --mili-muted: var(--mili-text-muted); --mili-fg-faint: #737373; /* 참고에 4단계가 없어 우리가 유지한다 */ /* ---------- 경계 별칭 ---------- */ --mili-line: var(--mili-border); --mili-line-strong: var(--mili-border-strong); /* ---------- 브랜드 별칭 ---------- */ --mili-brand: var(--mili-primary); --mili-brand-strong: var(--mili-primary-strong); --mili-brand-bg: var(--mili-primary-bg); --mili-brand-border: var(--mili-primary-border); --mili-brand-on: var(--mili-primary-on); --mili-brand-soft: rgba(180, 255, 57, 0.08); /* = --mili-primary #B4FF39 의 8% */ /* ---------- 상태 별칭 ---------- 참고는 -bg 로, 우리는 -soft 로 불러 왔다. 값을 두 벌로 두면 한쪽만 고치는 사고가 난다. */ --mili-danger: var(--mili-error); --mili-success-soft: var(--mili-success-bg); --mili-danger-soft: var(--mili-error-bg); /* ---------- -rgb 짝 ---------- Bootstrap 과 글래스 표면이 rgba(var(--x-rgb), .5) 형태로 쓴다. color-mix() 는 정부망 구형 브라우저 호환 리스크가 있어 hex 와 손으로 맞춘다. ⚠️ tokens.css 의 대응 hex 를 바꾸면 여기도 함께 고쳐야 한다. */ --mili-canvas-rgb: 14, 16, 19; /* --mili-app-bg #0E1013 */ --mili-fg-rgb: 248, 249, 250; /* --mili-text #F8F9FA */ --mili-fg-body-rgb: 173, 181, 189; /* --mili-text-secondary #ADB5BD */ --mili-line-rgb: 43, 48, 54; /* --mili-border #2B3036 */ --mili-brand-rgb: 180, 255, 57; /* --mili-primary #B4FF39 */ --mili-brand-strong-rgb: 199, 255, 104; /* --mili-primary-strong #C7FF68 */ --mili-brand-on-rgb: 24, 33, 14; /* --mili-primary-on #18210E */ --mili-text-muted-rgb: 134, 142, 150; /* --mili-text-muted #868E96 */ --mili-focus-rgb: 199, 255, 104; /* --mili-focus #C7FF68 */ /* ---------- 오버레이 · 그림자 ---------- 검정 배경에서는 옅은 그림자가 보이지 않으므로 더 깊게 준다. */ --mili-overlay: rgba(0, 0, 0, 0.6); --mili-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --mili-shadow: 0 12px 32px rgba(0, 0, 0, 0.38); --mili-shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.45); /* ---------- 학습 활동 잔디 히트맵 5단계 ---------- */ --mili-heat-0: rgba(255, 255, 255, 0.06); --mili-heat-1: #274d0a; --mili-heat-2: #4c8a12; --mili-heat-3: #7fc617; --mili-heat-4: var(--mili-primary); /* ---------- 코드 에디터·콘솔 팔레트(학습 플레이어) ---------- 다크 셸에서는 셸 자체가 검정이라 같은 계조를 쓰지 않으면 에디터만 다른 재질로 떠 보인다. */ --mili-code-bg: var(--mili-app-bg); --mili-code-surface: var(--mili-surface-raised); --mili-code-border: var(--mili-border-strong); --mili-code-text: var(--mili-text); --mili-code-muted: var(--mili-text-muted); --mili-code-accent: var(--mili-primary); } /* ============================================================ 2') 파생값 + 별칭 — 라이트 ------------------------------------------------------------ ⚠️ 위 블록과 항목이 1:1 로 대응해야 한다. 한쪽에만 추가하면 그 토큰은 테마를 타지 않는다. ============================================================ */ .mili-light { /* 참고 globals.css:248 이 .mili-light 에 거는 값. tokens.css 는 원본 그대로 두려고 여기에 둔다. */ color-scheme: light; scrollbar-color: var(--mili-border-strong) var(--mili-app-bg); --mili-canvas: var(--mili-app-bg); --mili-bg: var(--mili-app-bg); --mili-panel: var(--mili-surface); --mili-panel-raised: var(--mili-surface-raised); --mili-panel-sunken: var(--mili-surface-interactive); --mili-fg: var(--mili-text); --mili-ink: var(--mili-text); --mili-fg-body: var(--mili-text-secondary); --mili-body: var(--mili-text-secondary); --mili-fg-muted: var(--mili-text-muted); --mili-muted: var(--mili-text-muted); --mili-fg-faint: #9aa1ad; --mili-line: var(--mili-border); --mili-line-strong: var(--mili-border-strong); --mili-brand: var(--mili-primary); --mili-brand-strong: var(--mili-primary-strong); --mili-brand-bg: var(--mili-primary-bg); --mili-brand-border: var(--mili-primary-border); --mili-brand-on: var(--mili-primary-on); --mili-brand-soft: var(--mili-primary-bg); --mili-danger: var(--mili-error); --mili-success-soft: var(--mili-success-bg); --mili-danger-soft: var(--mili-error-bg); --mili-canvas-rgb: 248, 249, 250; /* --mili-app-bg #F8F9FA */ --mili-fg-rgb: 30, 34, 39; /* --mili-text #1E2227 */ --mili-fg-body-rgb: 92, 99, 107; /* --mili-text-secondary #5C636B */ --mili-line-rgb: 222, 226, 230; /* --mili-border #DEE2E6 */ --mili-brand-rgb: 97, 143, 32; /* --mili-primary #618F20 */ --mili-brand-strong-rgb: 77, 115, 27; /* --mili-primary-strong #4D731B */ --mili-brand-on-rgb: 255, 255, 255; /* --mili-primary-on #FFFFFF */ --mili-text-muted-rgb: 134, 142, 150; /* --mili-text-muted #868E96 */ --mili-focus-rgb: 120, 174, 40; /* --mili-focus #78AE28 */ --mili-overlay: rgba(30, 34, 39, 0.5); --mili-shadow-sm: 0 1px 2px rgba(30, 34, 39, 0.06); --mili-shadow: 0 8px 24px rgba(30, 34, 39, 0.08); --mili-shadow-lg: 0 16px 40px rgba(30, 34, 39, 0.12); /* 잔디 히트맵은 브랜드가 아니라 데이터 램프라 라이트에서는 중성 파랑 계조를 유지한다. */ --mili-heat-0: #eef1f6; --mili-heat-1: #cfe0ff; --mili-heat-2: #8fb4ff; --mili-heat-3: #4f86f0; --mili-heat-4: #1d54c9; /* 라이트 셸에서 에디터·콘솔은 "흰 판 위에 얹힌 다크 섬"이라 셸과 무관한 독자 계조를 쓴다. */ --mili-code-bg: #10131a; --mili-code-surface: #171b24; --mili-code-border: #2a3040; --mili-code-text: #e6e9f0; --mili-code-muted: #8b93a7; --mili-code-accent: #6ea8ff; } /* ============================================================ 3) Bootstrap 루트 변수 재바인딩 ------------------------------------------------------------ bootstrap.css 의 body/.btn/.card/.form-control 등은 아래 --bs-* 를 var() 로 그대로 참조하므로 스코프마다 한 번씩 걸면 전역에 반영된다. ⚠️ 여기도 :root 와 .mili-light 양쪽에 걸어야 한다(파일 상단 주석 참고). ============================================================ */ :root, .mili-light { --bs-body-font-family: var(--mili-font-sans); --bs-body-color: var(--mili-text-secondary); --bs-body-color-rgb: var(--mili-fg-body-rgb); --bs-body-bg: var(--mili-app-bg); --bs-emphasis-color: var(--mili-text); --bs-emphasis-color-rgb: var(--mili-fg-rgb); --bs-secondary-color: var(--mili-text-muted); --bs-border-color: var(--mili-border); /* Bootstrap 컴포넌트(.btn/.card/.form-control/.alert/.modal…)는 자기 반경을 이 변수로 읽는다. 참고는 [class*="rounded-"] 를 전역 0 으로 눕히는데, 우리 쪽 등가물이 이 다섯 줄이다. --bs-border-radius-pill 은 건드리지 않는다(검색 입력·뱃지가 쓴다). */ --bs-border-radius: 0; --bs-border-radius-lg: 0; --bs-border-radius-sm: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-link-color: var(--mili-primary); --bs-link-color-rgb: var(--mili-brand-rgb); --bs-link-hover-color: var(--mili-primary-strong); --bs-link-hover-color-rgb: var(--mili-brand-strong-rgb); }