/* =================================================================================================== Design Tokens — 단일 진실원 (docs/frontend-audit.md, docs/token-migration-map.md 참조) - 이 파일은 CSS 변수 선언만 담는다. 규칙(셀렉터+속성)은 base.css 이하로. - 2026-10-14 테마 개편(사용자 지시): 회색을 차가운 slate 계열로, 그림자·포커스 링·반경을 단계 스케일로 바꿨다. 회색 단계는 명도를 기존과 맞춰 직접 쓰는 곳의 대비가 크게 변하지 않게 했다(muted 글자만 AA 대비 4.5:1 이상으로 진하게). 컴포넌트 적용은 theme.css(Bootstrap 컴포넌트 변수) — 값 변경은 token-migration-map.md 갱신과 함께 한다. - 로드 위치: bootstrap.min.css **뒤** — Bootstrap이 :root에 --bs-* 를 재선언하므로 브리지(9절)가 이기려면 나중에 와야 한다(동일 특이도, 후행 승리). =================================================================================================== */ :root { /* ── 1. Primitive: Gray (slate 계열 — 2026-10-14 테마 개편, 단계별 명도는 구 Open Color 값과 맞춤) ── */ --gn-gray-0: #fff; --gn-gray-50: #f8fafc; --gn-gray-100: #f1f5f9; --gn-gray-200: #e8edf3; --gn-gray-300: #dde3eb; --gn-gray-400: #cbd5e1; --gn-gray-500: #a3aebe; --gn-gray-600: #64748b; /* muted 글자 — 흰 바탕 대비 4.7:1 */ --gn-gray-700: #475569; --gn-gray-650: #556070; /* 진행 막대 예정(.bg-SCHEDULED) — PR7 10차 */ --gn-gray-800: #334155; --gn-gray-900: #0f172a; /* ── 1. Primitive: Brand Blue (#1761de가 주색 — style.css 실측 85회) ──────────── */ --gn-blue-50: #edf3fd; --gn-blue-100: #c8daf9; --gn-blue-150: #b1caf9; /* 진행 막대 그라데이션 시작(.progress.line) — PR7 10차 */ --gn-blue-200: #a3c1f5; --gn-blue-300: #7ea8f1; --gn-blue-400: #598fee; --gn-blue-500: #3578ea; --gn-blue-600: #1761de; --gn-blue-700: #1350bd; /* 주색 hover — 2026-10-14 테마 개편 */ --gn-blue-800: #0f4094; --gn-blue-850: #394d6e; /* 사이드바 카운트 뱃지 배경 — PR5 2차 */ --gn-blue-900: #08204a; --gn-blue-870: #0c306f; /* 노트 표지 제목 밑줄 강조(.line-sub) — PR7 11차 */ /* ── 1. Primitive: Status / Blue-gray ─────────────────────────────────────────── */ --gn-red-200: #fcb3ad; /* 진행 막대 지연(.bg-DELAY) — PR7 10차 */ --gn-red-500: #ee5139; --gn-red-600: #e12f13; --gn-red-100: #fbd9d4; /* 연빨강 버튼 hover — 2026-10-15 */ --gn-red-700: #c4290f; /* 빨강 버튼 hover·연빨강 글자 */ --gn-red-800: #a8230d; /* 빨강 버튼 active */ --gn-amber-500: #ffa000; --gn-amber-100: #ffecb3; /* 안내 알림 배경(.alert-primary) — PR7 11차 */ --gn-amber-600: #ff8f00; --gn-teal-50: #e0f2f1; /* 완료 프로젝트 노트 수 띠 배경 — PR4 후속 */ --gn-teal-500: #26a69a; --gn-teal-600: #009688; /* 역할 칩 관리자(.authGrpTxt.role.ROLE_OPMS_ADMIN/ROLE_USER_MANAGER) — 묶음 ⑥ */ --gn-green-500: #1cb56c; /* 모달 안내문 강조(.modal-cont-txt.green) — PR7 10차 */ --gn-sky-500: #03a9f4; --gn-sky-50: #e1f5fe; /* 노트 작성방식 뱃지(에디터) 배경 — PR7 7차 */ --gn-sky-600: #039be5; /* 노트 작성방식 뱃지(에디터) 글자 — PR7 7차 */ --gn-pink-50: #fce4ec; /* 노트 작성방식 뱃지(파일) 배경 — PR7 7차 */ --gn-pink-600: #d81b60; /* 노트 작성방식 뱃지(파일) 글자 — PR7 7차 */ --gn-bluegray-50: #eceff1; --gn-bluegray-300: #78909c; --gn-bluegray-400: #607d8b; /* 프로젝트 중단 뱃지·gray-full-sty02 — PR4 후속 */ --gn-bluegray-500: #546e7a; --gn-bluegray-700: #455a64; --gn-bluegray-800: #37474f; /* 프로젝트 상단 바 정보 값(.project_cont) — PR7 6차 */ --gn-bluegray-900: #263238; /* .cntBox 배경(Common §) — PR7 4차 */ --gn-indigo-500: #5c7cfa; /* .confirm-status.APPROVAL — PR7 4차 */ /* ── 2. Semantic ──────────────────────────────────────────────────────────────── */ --gn-color-text-primary: var(--gn-gray-900); --gn-color-text-secondary: var(--gn-gray-700); --gn-color-text-muted: var(--gn-gray-600); --gn-color-text-disabled: var(--gn-gray-500); --gn-color-bg-body: var(--gn-gray-50); --gn-color-bg-surface: var(--gn-gray-0); --gn-color-bg-subtle: var(--gn-gray-100); --gn-color-border-default: var(--gn-gray-300); --gn-color-border-strong: var(--gn-gray-400); /* 입력 테두리 */ --gn-color-accent: var(--gn-blue-600); --gn-color-accent-hover: var(--gn-blue-700); --gn-color-accent-subtle: var(--gn-blue-50); --gn-color-danger: var(--gn-red-500); --gn-color-danger-strong: var(--gn-red-600); --gn-color-warning: var(--gn-amber-600); --gn-color-success: var(--gn-teal-500); --gn-color-info: var(--gn-sky-500); --gn-color-accent-tint: rgba(200, 218, 249, 0.3); /* blue-100 30% — 템플릿 카드 hover(모달) — PR7 10차 */ --gn-color-scrim: rgba(15, 23, 42, 0.7); /* ── 2-1. 상태 칩(2026-10-14) — 연한 바탕 + 진한 글자(흰 글자 단색 칩 대신). 글자 대비 4.5:1 이상 ── */ --gn-status-writing-bg: var(--gn-sky-50); --gn-status-writing-fg: #0369a1; --gn-status-inspection-bg: var(--gn-blue-50); --gn-status-inspection-fg: var(--gn-blue-700); --gn-status-complete-bg: var(--gn-teal-50); --gn-status-complete-fg: #00695c; --gn-status-reject-bg: #fdecea; --gn-status-reject-fg: #c4290f; --gn-status-share-bg: #fff4e0; --gn-status-share-fg: #b45309; --gn-status-approval-bg: #eef1ff; --gn-status-approval-fg: #3b5bdb; --gn-status-neutral-bg: var(--gn-gray-100); --gn-status-neutral-fg: var(--gn-gray-700); --gn-status-admin-bg: var(--gn-teal-50); --gn-status-admin-fg: #00695c; --gn-status-lead-bg: var(--gn-bluegray-50); --gn-status-lead-fg: var(--gn-bluegray-800); --gn-status-ring: inset 0 0 0 1px rgb(15 23 42 / 0.08); /* ── 2-2. 안내 상자(callout) 진한 글자·링 / 채움 버튼 그림자(2026-10-15) ── */ --gn-callout-success-fg: #004d44; --gn-callout-success-ring: rgb(0 105 92 / 0.15); --gn-callout-warning-fg: #7c3a06; --gn-callout-warning-ring: rgb(180 83 9 / 0.18); --gn-callout-danger-fg: #8a1c0a; --gn-callout-danger-ring: rgb(196 41 15 / 0.15); --gn-shadow-btn-primary: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px 0 rgb(23 97 222 / 0.3); --gn-shadow-btn-danger: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px 0 rgb(225 47 19 / 0.3); /* gray-900 70% — 고정 하단 액션 바(.form_footer_wrap) 배경, PR7 5차 */ /* ── 3. Spacing (rem, 1rem=16px) ──────────────────────────────────────────────── */ /* 신규 코드 규칙: BS5 유틸(.m-·.p-·.gap- 계열)로 충분하면 유틸을 쓰고, 부족할 때만 이 토큰. 기존 5px 계열(5/10/15/30)은 시각 동일 원칙에 따라 병행 유지(--gn-space-legacy-*), 화면 단위 통합 승인 후 4배수 스케일로 수렴한다. */ --gn-space-1: 0.25rem; /* 4px */ --gn-space-2: 0.5rem; /* 8px */ --gn-space-3: 0.75rem; /* 12px */ --gn-space-4: 1rem; /* 16px */ --gn-space-5: 1.25rem; /* 20px */ --gn-space-6: 1.5rem; /* 24px */ --gn-space-7: 2rem; /* 32px */ --gn-space-8: 2.5rem; /* 40px */ --gn-space-legacy-1: 0.3125rem; /* 5px */ --gn-space-legacy-2: 0.625rem; /* 10px */ --gn-space-legacy-3: 0.9375rem; /* 15px */ --gn-space-legacy-4: 1.875rem; /* 30px */ /* ── 4. Typography (rem) ──────────────────────────────────────────────────────── */ /* 'Open Sans'는 로드되지 않는 유령 폰트(현 BS 빌드 body 규칙 잔재) — BS5.3 전환 PR에서 body 적용 여부를 검증한다. @font-face 등록명은 'Noto Sans'(font-style.css). */ --gn-font-family: 'Noto Sans', 'Open Sans', sans-serif; --gn-font-size-xs: 0.75rem; /* 12px */ --gn-font-size-sm: 0.875rem; /* 14px — 최빈값(116회) */ --gn-font-size-smd: 0.9375rem; /* 15px — 45회, 통합 보류 */ --gn-font-size-base: 1rem; /* 16px */ --gn-font-size-lg: 1.125rem; /* 18px */ --gn-font-size-xl: 1.25rem; /* 20px */ --gn-font-size-2xl: 1.5rem; /* 24px */ --gn-font-size-3xl: 2rem; /* 32px */ --gn-font-weight-regular: 400; --gn-font-weight-medium: 500; --gn-font-weight-bold: 700; --gn-line-height-tight: 1.4; --gn-line-height-base: 1.5; --gn-line-height-relaxed: 1.7; /* Noto Sans 숫자 잉크가 줄 상자 가운데보다 0.09em 위에 놓인다(글꼴 ascent:descent 비대칭, 12px 에서 약 1.1px). 숫자 배지는 위 패딩 +이 값, 아래 패딩 -이 값으로 세로 가운데를 맞춘다(실측 위·아래 여백 차 0.15px 이내). */ --gn-font-digit-offset: 0.09em; /* ── 5. Layout 상수 ───────────────────────────────────────────────────────────── */ --gn-sidebar-w: 18.4375rem; /* 295px — 현행 사이드바(layout.css:97) */ --gn-note-panel-w: 25rem; /* 400px — note 셸 좌패널(layout.css:171) */ --gn-header-h: 4.5rem; /* 72px — note 셸 #main-header 실측(layout.css:157) */ --gn-shell-chrome-h: 4.5rem; /* D13 모바일 세로 예산 계산용(= 현 헤더 높이) */ --gn-content-max-w: 100%; /* 본문 그리드 콘텐츠 폭 상한 — 폭별 값(1200·1440·1600px)은 layout-shell.css 6절 */ /* 본문 그리드(GNB 를 뺀 가운데 영역) — 모바일 기준값, md·lg·xl 이상은 layout-shell.css 6절에서 바꾼다. 단 수는 BS 12단 위의 묶음: 모바일 4단 = col-3 단위, 태블릿 6단 = col-md-2 단위, 데스크톱 12단 = col-xl-1 단위 */ --gn-grid-columns: 4; --gn-grid-margin: 1rem; /* 16px — 본문 좌우 바깥 여백 */ --gn-grid-gutter: 1rem; /* 16px — 단 사이(BS g-3) */ --gn-shell-max-w: 120rem; /* 1920px — 셸 상한(layout.css:32) */ /* ── 6. Radius / Border / Shadow ──────────────────────────────────────────────── */ --gn-radius-sm: 0.375rem; /* 6px — 배지·작은 칩 */ --gn-radius-md: 0.5rem; /* 8px — 버튼·입력 */ --gn-radius-lg: 0.75rem; /* 12px — 카드·드롭다운 */ --gn-radius-xl: 1rem; /* 16px — 모달 */ --gn-radius-pill: 50rem; --gn-radius-circle: 50%; --gn-border-hairline: 1px; /* px 유지(D6 예외) */ /* 단계 그림자(2026-10-14) — 두 겹(넓고 옅은 것 + 가깝고 진한 것)으로 떠 있는 느낌을 낸다 */ --gn-shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05); --gn-shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.07), 0 1px 2px -1px rgb(15 23 42 / 0.07); --gn-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06); --gn-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.06); --gn-shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.1), 0 8px 10px -6px rgb(15 23 42 / 0.08); --gn-shadow-card: var(--gn-shadow-sm); --gn-shadow-pop: var(--gn-shadow-lg); --gn-shadow-panel: 0 0 4px 0 #00000040; /* 우측 고정 이력 패널 */ --gn-shadow-menu: var(--gn-shadow-lg); /* 연구원 검색 드롭다운(.gn-member-menu) */ --gn-shadow-chip: 0 0 4px 0 #0000000a; /* 노트 정보 단계/등급 칩·note 셸 좌패널 — PR7 7차 */ --gn-shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.1); /* 관리자 hover 레이어(.admin-info-layer) — PR7 8차 */ --gn-shadow-file-row: 0 0 20px 0 #adb5bd1a; /* 업로드 파일 행(.file-list .add-file) — 묶음 ③ upload-area.css */ --gn-shadow-modal: var(--gn-shadow-xl); --gn-shadow-modal-strong: var(--gn-shadow-xl); /* 앱 모달(.gn-modal-wide·gn-modal-form·gn-modal-pick) — PR7 10차 */ --gn-shadow-pane: 0 4px 16px 0 #21252933; /* 모달 안 좌측 패널(.wrap-left) — PR7 10차 */ /* jsgantt 간트 스킨(pages/gantt.css) 전용 — 벤더 기본색을 덮는 값, PR7 11차 */ --gn-gantt-head-bg: #f0f4f8; --gn-gantt-head-text: #222; --gn-gantt-head-border: #d0d7de; --gn-gantt-task-bg: #f5f5f5; --gn-gantt-task-border: #e5e7ea; --gn-gantt-done-blue: #03a9f480; /* sky-500 50% */ --gn-gantt-done-red: #ff606080; --gn-gantt-done-green: #26a69a80; /* teal-500 50% */ --gn-gantt-print-bar: rgb(196, 58, 58); /* 포커스 링(2026-10-14) — 번지는 글로우 대신 3px 반투명 링 */ --gn-shadow-focus: 0 0 0 3px rgb(23 97 222 / 0.25); --gn-shadow-focus-danger: 0 0 0 3px rgb(225 47 19 / 0.2); /* ── 7. Z-index (승인 스케일) ─────────────────────────────────────────────────── */ /* Editor SDK 예약 대역 150~400: ai-sidebar 150 / modal 200 / bubble 300 / drag-handle 320 / slash 350 / toast 400 (MathLive 키보드 2147483000). 셸 크롬(100)은 SDK 아래, 셸이 의도적으로 여는 오버레이(500+)는 SDK 위 — 셸/SDK 패널은 동시에 열리지 않는다(D12 상호배타)는 전제. 1000 이상은 BS 5.3 표준값과 일치시켜 BS 컴포넌트와 층이 어긋나지 않게 한다. 기존 10000/100003/11000(인라인)은 이관 PR에서 이 스케일로 강하 매핑. */ --gn-z-base: 0; --gn-z-raised: 10; /* 카드 위 뱃지·아이콘 오버레이 */ --gn-z-chrome: 100; /* 셸 헤더·사이드바(고정 상태) — SDK(150+) 아래 */ --gn-z-overlay: 500; /* 모바일 드로어·백드롭 — SDK(≤400) 위 */ --gn-z-dropdown: 1000; /* = BS dropdown */ --gn-z-sticky: 1020; /* = BS sticky */ --gn-z-modal: 1055; /* = BS 5.3 modal */ --gn-z-guide: 1075; /* 이용 가이드(스포트라이트) — 모달·드롭다운 위, 토스트 아래 */ --gn-z-toast: 1090; /* = BS toast */ /* ── 8. Motion ────────────────────────────────────────────────────────────────── */ --gn-duration-fast: 0.2s; /* 사이드바/패널 슬라이드 실측(layout.css:100,178) */ --gn-duration-base: 0.5s; /* #main 전환 실측(layout.css:149) */ --gn-ease-out: ease-out; } /* ── 9. Bootstrap 5 브리지 (D5·D14 — 승인: primary #1761de, 시안 #16D5FF 폐기) ───── BS가 노출하는 변수만 오버라이드한다(자체 토큰 신설 금지 영역). 현행 BS 5.0 커스텀 빌드는 컴포넌트에 색이 컴파일되어 있어 이 브리지가 지금 시각을 바꾸지 않는다(primary 유틸 사용처: main/note 셸 0곳 실측). BS 5.3 전환 시 효력 발생. */ :root { --bs-primary: var(--gn-color-accent); --bs-primary-rgb: 23, 97, 222; --bs-link-color: var(--gn-color-accent); --bs-link-color-rgb: 23, 97, 222; --bs-link-hover-color: var(--gn-color-accent-hover); --bs-link-hover-color-rgb: 15, 64, 148; --bs-body-color: var(--gn-color-text-primary); --bs-body-color-rgb: 15, 23, 42; --bs-body-bg: var(--gn-color-bg-surface); --bs-secondary-color: var(--gn-color-text-muted); --bs-tertiary-bg: var(--gn-color-bg-body); --bs-emphasis-color: var(--gn-color-text-primary); --bs-heading-color: var(--gn-color-text-primary); --bs-border-color-translucent: rgb(15 23 42 / 0.08); --bs-border-radius-sm: var(--gn-radius-sm); --bs-border-radius-xl: var(--gn-radius-xl); --bs-box-shadow-sm: var(--gn-shadow-sm); --bs-box-shadow: var(--gn-shadow-lg); --bs-box-shadow-lg: var(--gn-shadow-xl); --bs-focus-ring-color: rgb(23 97 222 / 0.25); --bs-focus-ring-width: 3px; --bs-gray-100: var(--gn-gray-100); --bs-gray-200: var(--gn-gray-200); --bs-gray-300: var(--gn-gray-300); --bs-gray-400: var(--gn-gray-400); --bs-gray-500: var(--gn-gray-500); --bs-gray-600: var(--gn-gray-600); --bs-gray-700: var(--gn-gray-700); --bs-gray-800: var(--gn-gray-800); --bs-gray-900: var(--gn-gray-900); --bs-light: var(--gn-gray-50); --bs-light-rgb: 248, 250, 252; --bs-dark: var(--gn-gray-900); --bs-dark-rgb: 15, 23, 42; --bs-secondary-bg: var(--gn-gray-200); --bs-primary-bg-subtle: var(--gn-blue-50); --bs-primary-border-subtle: var(--gn-blue-100); --bs-primary-text-emphasis: var(--gn-blue-800); --bs-body-font-family: var(--gn-font-family); --bs-border-color: var(--gn-color-border-default); --bs-border-radius: var(--gn-radius-md); --bs-border-radius-lg: var(--gn-radius-lg); --bs-danger: var(--gn-color-danger); --bs-danger-rgb: 238, 81, 57; --bs-warning: var(--gn-color-warning); --bs-warning-rgb: 255, 143, 0; --bs-success: var(--gn-color-success); --bs-success-rgb: 38, 166, 154; --bs-info: var(--gn-color-info); --bs-info-rgb: 3, 169, 244; } /* BS 5.3 버튼은 컴포넌트 스코프 변수를 노출한다 — !important 없이 브랜드 적용(2026-10-14 테마 개편). 주 버튼은 hover 를 한 단계(blue-700)만 진하게, 보조 버튼은 연회색 채움(soft), 테두리 버튼은 흰 바탕 + 연한 테두리. */ .btn-primary { --bs-btn-bg: var(--gn-blue-600); --bs-btn-border-color: var(--gn-blue-600); --bs-btn-hover-bg: var(--gn-blue-700); --bs-btn-hover-border-color: var(--gn-blue-700); --bs-btn-active-bg: var(--gn-blue-800); --bs-btn-active-border-color: var(--gn-blue-800); --bs-btn-disabled-bg: var(--gn-blue-200); --bs-btn-disabled-border-color: var(--gn-blue-200); --bs-btn-focus-shadow-rgb: 23, 97, 222; } /* 취소·보조 버튼 — 연회색 채움 + 진회색 글자 */ .btn-secondary { --bs-btn-color: var(--gn-color-text-secondary); --bs-btn-bg: var(--gn-gray-100); --bs-btn-border-color: var(--gn-gray-100); --bs-btn-hover-color: var(--gn-color-text-primary); --bs-btn-hover-bg: var(--gn-gray-200); --bs-btn-hover-border-color: var(--gn-gray-200); --bs-btn-active-color: var(--gn-color-text-primary); --bs-btn-active-bg: var(--gn-gray-300); --bs-btn-active-border-color: var(--gn-gray-300); --bs-btn-disabled-color: var(--gn-color-text-disabled); --bs-btn-disabled-bg: var(--gn-gray-100); --bs-btn-disabled-border-color: var(--gn-gray-100); --bs-btn-focus-shadow-rgb: 100, 116, 139; } /* 삭제·위험 버튼 */ .btn-danger { --bs-btn-bg: var(--gn-red-600); --bs-btn-border-color: var(--gn-red-600); --bs-btn-hover-bg: var(--gn-red-500); --bs-btn-hover-border-color: var(--gn-red-500); --bs-btn-active-bg: var(--gn-red-600); --bs-btn-active-border-color: var(--gn-red-600); --bs-btn-disabled-bg: var(--gn-gray-100); --bs-btn-disabled-border-color: var(--gn-gray-100); --bs-btn-disabled-color: var(--gn-color-text-disabled); --bs-btn-focus-shadow-rgb: 225, 47, 19; } /* 흰 바탕 테두리 보조 버튼 */ .btn-outline-secondary { --bs-btn-color: var(--gn-gray-800); --bs-btn-bg: var(--gn-color-bg-surface); --bs-btn-border-color: var(--gn-color-border-strong); --bs-btn-hover-color: var(--gn-color-text-primary); --bs-btn-hover-bg: var(--gn-gray-50); --bs-btn-hover-border-color: var(--gn-color-border-strong); --bs-btn-active-color: var(--gn-color-text-primary); --bs-btn-active-bg: var(--gn-gray-100); --bs-btn-active-border-color: var(--gn-gray-500); --bs-btn-disabled-color: var(--gn-color-text-disabled); --bs-btn-disabled-bg: var(--gn-gray-50); --bs-btn-disabled-border-color: var(--gn-gray-300); --bs-btn-focus-shadow-rgb: 100, 116, 139; } /* 파란 테두리 버튼 — hover 는 채움 대신 연파랑 바탕 */ .btn-outline-primary { --bs-btn-color: var(--gn-blue-600); --bs-btn-bg: var(--gn-color-bg-surface); --bs-btn-border-color: var(--gn-blue-200); --bs-btn-hover-color: var(--gn-blue-700); --bs-btn-hover-bg: var(--gn-blue-50); --bs-btn-hover-border-color: var(--gn-blue-300); --bs-btn-active-color: var(--gn-blue-800); --bs-btn-active-bg: var(--gn-blue-100); --bs-btn-active-border-color: var(--gn-blue-300); --bs-btn-focus-shadow-rgb: 23, 97, 222; }