/* ========================================================================== 가나전산 웹주문시스템 — 디자인 토큰 Design.md (Starbucks-inspired) 색·타이포 + B2B 고밀도 확장 ========================================================================== */ :root { /* --- 1rem = 10px 앵커 (Design.md 규칙) ------------------------------- */ /* html { font-size: 62.5% } 로 설정됨 — base.css 참조 */ /* ====================================================================== COLOR — Design.md 원본 토큰 ====================================================================== */ /* 그린 4단계 (역할별 매핑 — 하나로 뭉뚱그리지 않는다) */ --brand-green: #006241; /* 제목, 브랜드 시그널 */ --green-accent: #00754A; /* 채움 CTA, 활성 상태 */ --house-green: #35604F; /* 다크 밴드, 합계바, 푸터 (원래 #1E3932) */ --green-uplift: #2b5148; /* 한 단계 밝은 다크 그린 */ --green-light: #d4e9e2; /* 연한 민트 — 선택 행, 유효 필드 틴트 */ /* ★ 사이드바 전용 토큰 세트 — 배경만이 아니라 글자/구분선/호버까지 묶는다. 이 7개만 바꾸면 어두운 사이드바 ↔ 밝은 사이드바가 통째로 전환된다. House Green(#1E3932) 은 원래 "가끔 스치는 다크 밴드"용 명도라서 항상 떠 있는 220px 면에 쓰면 무겁게 읽힌다 → 기본은 한 단계 밝은 Uplift. ※ var(--green-uplift) 같은 참조로 쓰면 안 된다. 커스텀 속성 안의 var() 는 선언된 :root 에서 즉시 확정되어 팔레트 전환이 먹히지 않는다. 그래서 themes.css 의 각 팔레트에서도 이 값들을 직접 지정한다. */ --sidebar-bg: #35604F; /* 배경 */ --sidebar-fg: rgba(255, 255, 255, 1); /* 주요 글자 */ --sidebar-fg-soft: rgba(255, 255, 255, 0.70); /* 보조 글자 */ --sidebar-line: rgba(255, 255, 255, 0.12); /* 구분선 · 테두리 */ --sidebar-hover: rgba(255, 255, 255, 0.13); /* 호버 배경 */ --sidebar-tile: rgba(255, 255, 255, 0.07); /* 프로필 · 유틸 버튼 면 */ --sidebar-accent: #d4e9e2; /* 브랜드 태그 강조색 */ /* 골드 — Design.md: 특별 상태 전용. 범용 악센트로 쓰지 않는다. 본 시스템에서의 역할: 특가/기획 상품 배지 한정 */ --gold: #cba258; --gold-light: #dfc49d; --gold-lightest: #faf6ee; /* 표면 */ --white: #ffffff; --neutral-cool: #f9f9f9; /* 드롭다운, 조용한 유틸 컨테이너 */ --canvas: #f2f0eb; /* ★ 페이지 캔버스 — 순백 대신 웜 크림 */ --ceramic: #edebe9; /* 존 구분자, 테이블 헤더 */ --black: #000000; /* 텍스트 (순수 검정 금지 — 웜 캔버스 온도에 맞춘 알파) */ --ink: rgba(0, 0, 0, 0.87); --ink-soft: rgba(0, 0, 0, 0.58); --ink-faint: rgba(0, 0, 0, 0.38); --ink-white: rgba(255, 255, 255, 1); --ink-white-soft: rgba(255, 255, 255, 0.70); --ink-white-faint: rgba(255, 255, 255, 0.45); /* 시맨틱 */ --red: #c82014; /* 오류, 삭제, 약가 인상 */ --blue: #1565c0; /* 약가 인하 */ --yellow: #fbbc05; /* 경고 */ --tint-valid: hsl(160 32% 87% / 33%); --tint-invalid: hsl(4 82% 43% / 5%); --tint-blue: #eef4fb; /* 인하 배지 배경 */ --tint-red: #fdeeed; /* 인상 배지 배경 */ /* 제품 구분 배지 (특수약품 코드 00027) 구버전은 이 자리를 /images/*.gif 10장으로 처리했다. 색은 그중 둘만 목록 글자색으로 썼고(향정 빨강 · 생물 파랑) 나머지는 갈색 이미지였다. 리뉴얼은 배지 색으로 갈라 준다 — 자세한 근거는 ROADMAP(파일별).txt 5절 [특수약품]. */ --purple: #6a1b9a; /* 마약 · 한외마약 */ --tint-purple: #f5eefa; --orange: #ad3e00; /* 오남용우려약품 · 독극약 */ --tint-orange: #fdf0e8; --row-hover: var(--gold-lightest); /* 테이블 행 hover */ /* 목록 즉시 필터에서 찾은 글자 (2026-08-12) ★ 팔레트 색을 안 쓴다 — 초록은 선택 행(--green-light)과, 골드는 특가 배지와 겹친다. 겹치면 "이 행이 골라진 건가" 를 매번 다시 판단하게 된다. 형광펜은 어느 팔레트에서도 형광펜으로 읽히는 편이 낫다. */ --mark-bg: #fff3a3; /* 경계선 */ --line: #e3e1dc; /* 기본 구분선 (크림 캔버스에 맞춘 웜 그레이) */ --line-strong: #d6dbde; /* 입력 필드 테두리 */ --line-dark: rgba(255, 255, 255, 0.12); /* 다크 표면 위 구분선 */ /* ====================================================================== TYPOGRAPHY ====================================================================== */ /* SoDoSans는 스타벅스 독점 서체 — 한글 대응 불가. Pretendard로 대체 (휴머니스트 지오메트릭, 한글 웨이트 전 범위 지원) */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", "맑은 고딕", sans-serif; --font-num: "Pretendard Variable", Pretendard, "Segoe UI", sans-serif; /* 자간 — Design.md의 시그니처. 한글은 -0.01em이 과해서 -0.005em으로 완화 */ --tracking: -0.005em; --tracking-loose: 0.1em; --tracking-looser: 0.15em; --leading: 1.5; --leading-compact: 1.2; /* 크기 — Design.md 시맨틱 스케일 */ --text-1: 1.2rem; /* 12px — 캡션, 마이크로 카피 */ --text-2: 1.3rem; /* 13px — ★ 데이터 테이블 본문 (B2B 확장) */ --text-3: 1.4rem; /* 14px — 버튼 라벨, 폼 라벨, 메타 */ --text-4: 1.6rem; /* 16px — 기본 본문 */ --text-5: 1.8rem; /* 18px — 패널 제목 */ --text-6: 2.4rem; /* 24px — H1 / H2 */ --text-7: 3.2rem; /* 32px — 페이지 타이틀 */ --text-8: 4.5rem; /* 45px — 히어로 */ /* ====================================================================== SPACING — Design.md 스케일 + 고밀도 확장 ====================================================================== */ --space-0: 0.2rem; /* 2px (B2B 확장) */ --space-1: 0.4rem; /* 4px */ --space-2: 0.8rem; /* 8px */ --space-3: 1.6rem; /* 16px ★ 기본 리듬 상수 */ --space-4: 2.4rem; /* 24px */ --space-5: 3.2rem; /* 32px */ --space-6: 4.0rem; /* 40px */ --space-7: 4.8rem; /* 48px */ --space-8: 5.6rem; /* 56px */ --space-9: 6.4rem; /* 64px */ /* 고밀도 컴포넌트 치수 (Design.md에 없는 B2B 확장) */ --row-h: 3.2rem; /* 32px — 데이터 테이블 행 높이 */ --row-h-tight: 2.8rem; /* 28px — 보조 테이블 행 */ --control-h: 3.4rem; /* 34px — 입력/셀렉트 높이 */ --control-h-lg: 4.0rem; /* 40px — 주요 CTA */ /* ====================================================================== RADIUS — Design.md ====================================================================== */ --radius-card: 12px; /* 카드, 모달, 패널 */ --radius-field: 6px; /* 입력 필드 (Design.md 4px에서 소폭 상향) */ --radius-pill: 50px; /* ★ 모든 버튼은 예외 없이 풀필 */ --radius-round: 50%; /* 원형 아이콘 */ /* ====================================================================== ELEVATION — 낮은 알파 2~3겹. 무거운 단일 그림자 금지 ====================================================================== */ --shadow-card: 0 0 0.5px 0 rgba(0, 0, 0, 0.14), 0 1px 1px 0 rgba(0, 0, 0, 0.24); --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.10), 0 2px 2px rgba(0, 0, 0, 0.06), 0 0 2px rgba(0, 0, 0, 0.07); --shadow-float: 0 0 6px rgba(0, 0, 0, 0.24), 0 8px 12px rgba(0, 0, 0, 0.14); --shadow-float-active: 0 0 6px rgba(0, 0, 0, 0.24), 0 8px 12px rgba(0, 0, 0, 0); /* ====================================================================== MOTION ====================================================================== */ --ease: 0.2s ease; --ease-expander: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --press-scale: 0.95; /* ★ 시그니처 마이크로 인터랙션 */ /* ====================================================================== LAYOUT ====================================================================== */ --sidebar-w: 22rem; /* 220px */ --banner-w: 15.2rem; /* 152px — 배너 이미지 128px + 여백 */ --info-col-w: 28rem; /* 280px — 우측 정보 컬럼 (해상도 무관 고정) 줄인 만큼 좌측 목록·장바구니가 넓어진다 */ --gutter: var(--space-3); /* ★ 콘텐츠 폭 — max-width 가 아니라 '고정 폭'. 가변으로 두면 해상도마다 목록 폭이 달라져서, 관리자가 컬럼을 설정할 때 "이 PC에선 괜찮은데 저 PC에선 스크롤이 생기는" 상황이 발생한다. 고정하면 어느 PC에서 봐도 컬럼 폭이 동일하다. 1340px 선택 근거 : 1366×768 (구형 사무용 모니터)에서 가로 스크롤 없이 들어감 1280 모니터도 지원해야 하면 → 124rem (1240px) 로 낮출 것 이때 제품목록 패널의 '스크롤 없이 보이는 폭' : 1340 - 32(패딩) - 220(사이드바) - 152(배너) - 32(gap) - 280(정보컬럼) - 8(gap) - 8(스크롤바) = 608px ※ 이 값을 바꾸면 admin-grid.html 의 AVAIL 상수도 같이 고칠 것 */ /* ★ --shell-base 는 '본문이 쓰는 폭' 이고 --shell-w 는 '지금 실제로 그리는 폭' 이다. 둘로 나눈 이유 — 넓은 화면에서 배너를 켜면 app.css 2절이 --shell-w 만 배너 몫만큼 키운다(본문은 그대로). 커스텀 속성은 자기 자신을 참조할 수 없어(순환) 기준값이 따로 있어야 하고, 없으면 1340 을 두 곳에 적게 된다 */ --shell-base: 134rem; /* 1340px */ --shell-w: var(--shell-base); /* ★ 본문 최소 높이 — 모든 화면이 이 값을 공유한다. 실제 높이는 화면에서 푸터를 뺀 나머지 전부(1fr)이고, 이 값은 하한선이다. 페이지 타이틀 / 탭 / 검색바가 있든 없든 본문 총 높이는 동일 → 메뉴를 옮기거나 사이드바를 접어도 푸터가 움직이지 않는다. */ --page-min-h: 42rem; }