@charset "UTF-8"; /* ============================================================ themes/erp/style/base.css 토큰 · 카테고리색 · 리셋 · 유틸 ------------------------------------------------------------ 전 페이지 고정 로드 (header.php). 항상 제일 먼저 읽힌다. 다른 CSS는 여기 변수를 참조하므로 순서를 바꾸면 안 됨. 컨셉: 서가(書架). 책등 색띠 + 청구기호 라벨이 화면 문법. ============================================================ */ /* ------------------------------------------------------------ 1. 토큰 색·치수·서체를 여기 한 곳에서만 정의. 값을 바꾸면 전 페이지가 따라온다. ------------------------------------------------------------ */ :root{ /* ── 바탕 : 리넨/석회 계열. 노란기 없는 차가운 회색 ── */ --paper: #EAEBE6; /* 페이지 바탕 */ --surface: #FCFCFB; /* 카드·박스 바탕 */ --surface-2: #F3F4F0; /* 한 단계 눌린 바탕 (표 머리, 비활성) */ /* ── 글자 : 도장·장부의 잉크 ── */ --ink: #0D1620; /* 본문 기본 */ --ink-soft: #3C4A55; /* 보조 설명 */ --ink-faint: #6B7780; /* 캡션·라벨 */ /* ── 강조 : 잉크블루 ── */ --accent: #1E3A5F; /* 주 버튼 */ --accent-hi: #2C5687; /* hover */ /* ── 선 ── */ --line: #D2D6CE; /* 뚜렷한 경계 */ --line-soft: #E2E5DE; /* 흐린 구분선 */ /* ── 서가 구조물 (선반 널, 비활성 버튼) ── */ --shelf: #C3C7BC; --shelf-dark: #A9AEA1; /* ── 상태 ── */ --warn: #8C4A2F; /* 주의 · 필수(*) 표시 */ --ok: #2F6B52; /* ── 치수 ── */ --container: 1180px; /* 본문 최대 폭 */ --r: 3px; /* 기본 모서리. 거의 각지게 */ /* ── 서체 ── display : 제목 (함렛 — 한글 세리프) body : 본문 mono : 상품코드·금액·수량 (숫자 폭 고정) */ --f-display: 'Hahmlet', serif; --f-body: 'IBM Plex Sans KR', system-ui, -apple-system, sans-serif; --f-mono: 'IBM Plex Mono', monospace; /* ── 카테고리 색 기본값 ── 홈·검색·장바구니 등 "분류가 아닌" 페이지에서 쓰인다. */ --band: #4E7D8C; --band-dk: #3D6470; --band-lt: #EAF2F4; } /* ------------------------------------------------------------ 2. 카테고리 색 body 또는 요소에 .cat-{카테고리id} 를 붙이면 그 아래 --band 계열이 통째로 바뀐다. → 분류머리 색띠 / 배지 / 카드 이미지 띠 / 활성칩이 전부 따라옴. ★ 카테고리 추가 시 여기 1줄만 추가하면 끝. 매핑용 PHP 파일이나 설정값 없음 (readme3 D-3 대체) 쓰는 법: 매핑 없는 id면 :root 기본색으로 나온다. 죽지 않음. ------------------------------------------------------------ */ .cat-1 { --band:#2F8F7B; --band-dk:#25705F; --band-lt:#EAF4F1; } /* 정리용품 청록 */ .cat-2 { --band:#C6603D; --band-dk:#A34D2F; --band-lt:#F7ECE7; } /* 분류색띠라벨 테라코타 */ .cat-3 { --band:#3F6DB5; --band-dk:#31568F; --band-lt:#EAF0F8; } /* RFID·EM·RF 블루 */ .cat-4 { --band:#7A8450; --band-dk:#616A40; --band-lt:#F0F2E9; } /* 보수용품 올리브 */ .cat-5 { --band:#4E7D8C; --band-dk:#3D6470; --band-lt:#EAF2F4; } /* 도서관용품 틸 */ .cat-6 { --band:#B08A3E; --band-dk:#8E6F32; --band-lt:#F6F0E4; } /* 사인시스템 골드 */ .cat-7 { --band:#6C6FB0; --band-dk:#56588D; --band-lt:#EEEEF6; } /* 도서관리시스템 인디고 */ .cat-56 { --band:#8A7048; --band-dk:#6F5A39; --band-lt:#F3EDE3; } /* 문구·잡화 브라운 */ /* ------------------------------------------------------------ 3. 리셋 / 기본값 ------------------------------------------------------------ */ *, *::before, *::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; /* 모바일 가로전환 시 글자 커지는 것 방지 */ } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; font-weight:400; line-height:1.7; letter-spacing:-.005em; /* 한글은 살짝 좁혀야 덜 성글어 보임 */ } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button, input, select, textarea{ font:inherit; color:inherit; } /* 키보드(Tab)로 이동할 때만 테두리. 마우스 클릭엔 안 나옴 */ :focus-visible{ outline:2px solid var(--accent-hi); outline-offset:3px; } /* PHP에서 조건부로 숨길 때. !important 로 다른 display 를 이긴다 */ [hidden]{ display:none !important; } /* ------------------------------------------------------------ 4. 레이아웃 유틸 ------------------------------------------------------------ */ /* 가운데 정렬 컨테이너. 모든 섹션이 이걸로 감싸진다 */ .wrap{ max-width:var(--container); margin-inline:auto; padding-inline:24px; } /* ------------------------------------------------------------ 5. 글자 유틸 ------------------------------------------------------------ */ /* 코드·숫자용 — 상품코드(label_code), 주문번호, 금액 tabular-nums: 숫자 폭 고정 → 표에서 자리가 안 흔들림 */ .mono{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; font-variant-numeric:tabular-nums; } /* 제목 위에 붙는 작은 라벨 (ORDER RECEIVED, NOTICE 등) */ .eyebrow{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } /* 화면엔 안 보이고 스크린리더만 읽음 (라벨 대체용) */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ------------------------------------------------------------ 6. 접근성 — 애니메이션 줄이기 설정 존중 OS에서 "동작 줄이기"를 켠 사용자에게는 전환효과를 끈다. 여기 한 번만 선언하면 다른 CSS의 transition 도 같이 꺼짐. ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } } /* ------------------------------------------------------------ 7. 반응형 — 공통 여백만 (컴포넌트별 반응형은 각 CSS 파일에서) ------------------------------------------------------------ */ @media (max-width:640px){ .wrap{ padding-inline:16px; } } /* 300(Light) 은 한글에서 흐리게 보여 본문에 안 쓴다 */ .hero-head p, .cat-head .desc, .spot-intro p, footer{ font-weight:400; }