/* ============================================================ KRBOS 공통 디자인 — theme.css ============================================================ 세 화면(직원앱 · 사장 대시보드 · TV 현황판)이 같은 색과 같은 간격을 쓴다. 예전에는 파일마다 색을 따로 적어두어서, 한 곳을 고쳐도 나머지는 그대로였다. 이제 색을 바꾸려면 이 파일 한 곳만 고치면 세 화면이 같이 바뀐다. ── 상태 색 규칙 (이 시스템의 핵심) ───────────────────── 빨강 이상 있음 — 마감 지남, 미제출, 미흡 판정, 응답 없음 주황 점검 필요 — 판단 불가, 대기 중, 기한 임박 초록 정상 — 완료, 승인됨, 기한 내 제출 회색 해당 없음 — 아직 시작 안 함, 데이터 없음 색만으로 뜻을 전하지 않는다. 어느 자리든 아이콘이나 글자를 함께 둔다. 매장 조명 아래 흐린 화면, 색약인 직원, 흑백 출력 — 색이 안 통하는 자리가 많다. ============================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css'); :root { /* ── 글자색 ── 진한 쪽부터 */ --ink: #14161a; /* 제목, 숫자 */ --ink-2: #3d434a; /* 본문 */ --ink-3: #5b6169; /* 보조 설명 */ /* 작은 글씨에도 쓰이는 색이라 흰 바탕에서 5.3:1 이 나오도록 잡았다. 목업의 #8b929b 은 11px 에서 3.1:1 밖에 안 나와 매장 조명 아래서 안 읽힌다. */ --ink-4: #656c75; /* 흐린 안내 (읽어야 하는 글) */ --ink-5: #a6acb4; /* 장식·비활성 (읽지 않아도 되는 것에만) */ /* ── 면과 선 ── */ --bg: #f2f4f6; /* 화면 바탕 */ --surface: #ffffff; /* 카드 */ --surface-2: #fafbfc; /* 카드 안의 한 칸 더 들어간 면 */ --surface-3: #eef0f2; /* 눌린 면, 표 머리 */ --line: #e3e6e9; /* 기본 테두리 */ --line-2: #c3c9d0; /* 입력칸 테두리 (더 진하게 — 눌러야 할 곳은 보여야 한다) */ --line-3: #eef0f2; /* 아주 옅은 구분선 */ /* ── 강조(브랜드) ── */ --brand: #2b5bd7; --brand-ink: #1f47ab; /* 눌렀을 때 */ --brand-bg: #eef2fd; /* 강조 배경 */ --brand-line: #c8d3ea; /* ── 상태 ── 각 색은 글자용·배경용·테두리용 세 벌 ── */ /* 글자용은 테두리용보다 한 단계 진하다. 목업 색을 11~13px 글자에 그대로 쓰면 초록 4.1:1, 주황 3.8:1 로 기준(4.5)에 못 미친다. 테두리·막대에는 목업 색을 그대로 쓰고, 글자만 진하게 해서 둘 다 지켰다. */ --ok: #0f7451; /* 정상 — 글자 */ --ok-bg: #e7f4ee; --ok-line: #12855a; /* 정상 — 테두리 (목업 값) */ --warn: #9a5d00; /* 점검 필요 — 글자 */ --warn-bg: #fdf1de; --warn-line: #b06a00; /* 점검 필요 — 테두리 (목업 값) */ --bad: #c62f38; /* 이상 있음 — 글자·테두리 겸용 (5.4:1 로 이미 충분) */ --bad-bg: #fdeaea; --bad-line: #c62f38; --none: #8b929b; /* 해당 없음 */ --none-bg: #f4f5f7; --none-line: #d5dade; /* ── 모서리 ── */ --r-sm: 4px; --r: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* ── 그림자 ── 얕게. 업무 화면은 그림자로 꾸미는 자리가 아니다 */ --shadow: 0 1px 3px rgba(0, 0, 0, .07); --shadow-up: 0 2px 10px rgba(0, 0, 0, .10); /* ── 간격 ── 4의 배수로 통일 */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; /* ── 글꼴 ── Pretendard 는 한글 자소가 고르고 숫자 폭이 안정적이라 표에서 자리가 안 흔들린다. 못 받아오면 기기 기본 글꼴로 떨어진다 — 화면이 깨지지는 않는다. */ --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', system-ui, sans-serif; /* 터치 목표 최소 크기. 매장 직원은 서서, 장갑 낀 손으로, 급하게 누른다. */ --tap: 44px; } /* ── 상태 한 벌을 통째로 갈아끼우는 장치 ────────────────── .is-ok / .is-warn / .is-bad / .is-none 을 붙이면 그 안에서 --st, --st-bg, --st-line 이 해당 상태 색으로 바뀐다. 덕분에 카드·점·칩·막대가 각자 색을 따로 정하지 않아도 같이 움직인다. */ .is-ok { --st: var(--ok); --st-bg: var(--ok-bg); --st-line: var(--ok-line); } .is-warn { --st: var(--warn); --st-bg: var(--warn-bg); --st-line: var(--warn-line); } .is-bad { --st: var(--bad); --st-bg: var(--bad-bg); --st-line: var(--bad-line); } .is-none { --st: var(--none); --st-bg: var(--none-bg); --st-line: var(--none-line); } /* ── 상태 카드 ── 테두리와 옅은 배경으로 상태를 알린다 */ .st-card { background: var(--st-bg, var(--surface)); border: 1.5px solid var(--st-line, var(--line)); border-radius: var(--r-lg); padding: var(--s4); } .st-card.plain { background: var(--surface); } /* 카드 오른쪽 위의 점. 색만으로 뜻을 전하지 않도록 늘 제목과 함께 둔다. */ .st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--none)); flex: 0 0 auto; } /* 상태 알약 — 글자를 반드시 넣는다 */ .st-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1.4; color: var(--st, var(--ink-3)); background: var(--st-bg, var(--none-bg)); border: 1px solid var(--st-line, var(--line)); white-space: nowrap; } /* 왼쪽 굵은 선 하나로 상태를 표시하는 줄 (목록에 적합) */ .st-row { border-left: 3px solid var(--st-line, var(--line)); background: var(--surface); padding: var(--s3); border-radius: 0 var(--r) var(--r) 0; } /* 진행 막대 */ .st-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .st-bar > i { display: block; height: 100%; background: var(--st, var(--brand)); border-radius: inherit; } /* 경고 한 줄 — 카드 아래에 붙는 짧은 문장 */ .st-note { display: flex; align-items: flex-start; gap: 6px; padding: 7px 10px; border-radius: var(--r); font-size: 12px; line-height: 1.5; color: var(--st, var(--ink-3)); background: var(--st-bg, var(--none-bg)); border: 1px solid var(--st-line, var(--line)); } /* ── 숫자 ── 표나 목록에서 숫자가 세로로 줄 맞도록 고정폭 숫자를 쓴다. 문장 속 숫자에는 쓰지 않는다 — 글자 사이가 벌어져 읽기 나빠진다. */ .num { font-variant-numeric: tabular-nums; } .num-big { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--ink); } /* ── 눌리는 것들 ── */ .tap { min-height: var(--tap); } /* 손가락으로 누르는 기기에서는 목표를 키운다. 마우스는 1px도 정확히 짚지만 손가락은 그렇지 않다. */ @media (pointer: coarse) { button, .btn, select, input[type="date"], input[type="time"] { min-height: var(--tap); } } /* 움직임을 줄여달라고 설정한 사람에게는 애니메이션을 끈다 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── 어두운 화면(TV 현황판)용 ───────────────────────────── 상태 색은 흰 바탕을 기준으로 고른 값이라 어두운 배경에서는 너무 어둡다. TV는 매장 벽에 걸려 멀리서 보는 화면이라 대비가 특히 중요하다. 같은 뜻(초록=정상, 주황=점검, 빨강=이상)을 유지하되 밝은 쪽으로 바꾼다. */ .on-dark { --ink: #ffffff; --ink-2: #e3e6e9; --ink-3: #c3c9d0; --ink-4: #a6acb4; --ink-5: #8b929b; --bg: #14161a; --surface: #22262c; --surface-2:#2b3037; --surface-3:#3d434a; --line: #3d434a; --line-2: #5b6169; --ok: #34d399; --ok-bg: rgba(52, 211, 153, .12); --ok-line: #34d399; --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .12); --warn-line: #fbbf24; --bad: #fca5a5; --bad-bg: rgba(252, 165, 165, .12); --bad-line: #fca5a5; --none: #a6acb4; --none-bg: rgba(255, 255, 255, .06); --none-line: #5b6169; --brand: #93b0f5; --brand-bg: rgba(147, 176, 245, .12); --brand-line: #93b0f5; }