/* =========================================================================
법무그룹 현일 — 공통 디자인 시스템 (theme.css) v1.0
-------------------------------------------------------------------------
브랜드 톤: 로고의 딥네이비(#082545) + 골드 그라데이션을 기준으로 한
"밝은" 테마. 기존 페이지들이 쓰던 다크 테마(#0f0f13, #1a1d24 등)를
전면 교체할 때 이 파일 하나만 로 걸면 됩니다.
사용법:
그 다음 는 아래 페이지 셸 클래스 중 하나를 사용하세요.
- 사이드바가 있는 화면(관리자 화면 대부분):
그리고 콘텐츠 영역은
...
로 감싸면
사이드바 유무·모바일 폭에 따라 자동으로 여백이 조정됩니다.
- 사이드바가 없는 단독 화면(로그인, 랜딩 등): 이 파일만 링크하고
기존처럼 자유롭게 작성하되 아래 변수/컴포넌트 클래스를 활용하세요.
admin_sidebar.js 는 이 파일이 정의하는 CSS 변수를 그대로 재사용합니다.
========================================================================= */
:root {
/* --- 브랜드 컬러 (로고 기준: 네이비 + 골드) --- */
--hi-navy-950: #051629;
--hi-navy-900: #082545; /* 메인 브랜드 네이비 (기존 이메일 템플릿과 동일) */
--hi-navy-800: #0f3364;
--hi-navy-700: #16447f;
--hi-navy-600: #1f5aa3;
--hi-gold-700: #a9781f;
--hi-gold-600: #c79a3a;
--hi-gold-500: #d9b054; /* 로고 포인트 골드 */
--hi-gold-400: #e8c877;
--hi-gold-100: #faf3e0;
/* --- 배경 / 표면 (다크 → 라이트 전환의 핵심) --- */
--hi-bg: #f4f6fb;
--hi-bg-alt: #eaeef6;
--hi-surface: #ffffff;
--hi-surface-alt: #f7f9fd;
--hi-border: #e1e6f0;
--hi-border-strong: #c7cfe0;
/* --- 텍스트 --- */
--hi-text: #16233d;
--hi-text-secondary: #4b5b76;
--hi-text-muted: #8593ab;
--hi-text-on-navy: #f4f7ff;
--hi-text-on-gold: #2a1e05;
/* --- 상태 컬러 --- */
--hi-success: #1a9c63;
--hi-success-bg: #e6f7ee;
--hi-danger: #e0393e;
--hi-danger-bg: #fdeced;
--hi-warning: #d9822b;
--hi-warning-bg: #fdf3e6;
--hi-info: #2c5bf2;
--hi-info-bg: #eaf0ff;
--hi-gray: #8593ab;
--hi-gray-bg: #eef1f6;
/* --- 레이아웃 --- */
--hi-sidebar-width: 260px;
--hi-header-height: 64px;
--hi-radius-sm: 6px;
--hi-radius: 12px;
--hi-radius-lg: 20px;
--hi-shadow-sm: 0 1px 3px rgba(8, 37, 69, 0.08);
--hi-shadow: 0 4px 16px rgba(8, 37, 69, 0.08);
--hi-shadow-lg: 0 10px 30px rgba(8, 37, 69, 0.12);
/* --- 반응형 브레이크포인트 참고용 (미디어쿼리에는 직접 px 사용) ---
모바일: ~640px / 태블릿: ~1024px / 데스크탑: 1024px~ */
}
* { box-sizing: border-box; }
body.hi-theme, body.hi-shell {
font-family: "Pretendard Variable", "Pretendard", -apple-system, sans-serif;
background: var(--hi-bg);
color: var(--hi-text);
margin: 0;
}
a { color: inherit; }
/* =========================================================================
페이지 셸 — 사이드바 폭에 맞춰 콘텐츠 여백을 자동으로 잡아줍니다.
admin_sidebar.js가 만드는