/* 글꼴 (2026-09-29 wms) — 프리텐다드는 92조각 분할본(글자 범위별로 필요한 조각만 받는다. 전엔 2MB 한 덩이라 도메인으로 첫 화면이 3초 걸렸다). 숫자용 IBM Plex Mono 는 라틴만 자체 보관(구글 폰트 안 부름). */ @import url("/design/fonts/pretendardvariable-dynamic-subset.css"); @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/design/fonts/mono/ibm-plex-mono-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/design/fonts/mono/ibm-plex-mono-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/design/fonts/mono/ibm-plex-mono-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/design/fonts/mono/ibm-plex-mono-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ============================================================================ 순수본 FP부문 공용 디자인 토큰 — 단일 원본 작성 2026-09-15 · 우무송(wms, 서버 관리자) 모든 팀 화면은 색·간격·모서리·그림자를 여기서 가져온다. 값을 직접 박지 말 것. 화면 에 이 한 줄: 왜 한 곳인가: 색 하나를 바꿔도 전 팀 화면이 같이 바뀐다. 팀마다 따로 박으면 「비슷하지만 다른」 화면 네 개가 된다. 토큰이 부문을 한 몸으로 묶는다. 근거: 2공장 운영앱(operations/stg/t/ui.css)에서 실제로 쓰던 값을 그대로 옮겼다. 2026-09-16 추가 — 짙은 바 계열(--nav-2 · --nav-ink-hi · --nav-ink-2 · --nav-ink-3). 머리말·사이드바는 **어두운 바탕**이라 밝은 화면용 글자색(--ink 계열)을 쓰면 안 된다. 이 칸이 없어서 화면을 표준으로 옮길 때 사이드바 색이 --ink 로 잘못 가 읽히지 않게 됐다. 어두운 바탕 위의 것은 반드시 --nav-* 를 쓴다. ============================================================================ */ :root{ /* ── 바탕 · 면 ─────────────────────────────────────────── */ --ground:#e9ecee; /* 화면 바탕 (회색) */ --panel:#fff; /* 카드·패널 면 (흰색) */ --panel-2:#f4f6f7; /* 한 겹 들어간 면 — 표 머리·부제 줄 */ --sunk:#dfe4e7; /* 파인 면 — 입력칸 안쪽·홈 */ --track:#dfe4e7; /* 막대·슬라이더 바탕 */ --idle-bg:#e8ebed; /* 대기·해당없음 배경 */ --nav:#20272c; /* 머리말·짙은 바 */ --nav-hi:#2c353c; /* 짙은 바 위의 면 — 눌린 항목·구분선 (본 통합 사이트 이름) */ --nav-2:var(--nav-hi); /* ↑ 같은 것. 09-16 에 내가 다른 이름으로 먼저 썼다 — 별칭으로 남긴다 */ --nav-ink:#c3ccd2; /* 짙은 바 위 글자 */ --nav-ink-hi:#e8edf0; /* 짙은 바 위 강조 글자 (제목·선택됨) */ --nav-ink-2:#7d8b94; /* 짙은 바 위 흐린 글자 (구역 라벨) */ --nav-ink-3:#4a555d; /* 짙은 바 위 더 흐린 것 (대기 표시) */ /* 대비 실측(바탕 --nav 기준): hi 12.8 · ink 9.3 · ink-2 3.3 · ink-3 2.0 ink-2 는 굵은 라벨까지, ink-3 은 글자 말고 점·막대 같은 표시에만 쓴다. */ /* ── 글자 ─────────────────────────────────────────────── */ --ink:#14181b; /* 본문 (제일 진함) */ --ink-2:#4c565d; /* 보조 */ --ink-3:#7d888f; /* 흐림 · 라벨 */ /* ── 선 ───────────────────────────────────────────────── */ --line:#d5dbde; /* 기본 회선 */ --line-2:#bcc5ca; /* 진한 회선 · 입력창 테두리 */ /* ── 브랜드 (2공장 = 원육·장조림 갈색) ──────────────────── */ --brand:#5a3a1f; /* 강조 · 주 버튼 · 선택 */ --on-brand:#fff; /* 브랜드색 위에 얹는 글자 */ --brand-soft:#efe7de; /* 강조 옅은 배경 */ /* ── 상태색 (초록=정상 · 주황=주의 · 파랑=냉각/정보) ────── */ --good:#07713f; --good-bg:#e2f0e8; --warn:#a8730a; --warn-bg:#f7eddb; --cool:#2b6ca3; --cool-bg:#e4eef6; --crit:#8a2b2b; --crit-bg:#f6e4e4; /* 위험 · 부적합 */ /* ── 간격 계단 (이 다섯만 쓴다. 11·13·14px 섞지 말 것) ──── */ --sp-1:6px; --sp-2:8px; --sp-3:11px; --sp-4:14px; --sp-5:18px; /* ── 모서리 (카드 10 · 버튼 9 · 칩 8 · 알약 999) ────────── */ --r-card:10px; --r-btn:9px; --r-chip:8px; --r-pill:999px; /* ── 그림자 (물류 AOS 에서 배운 이중 그림자 · 아주 옅게) ─── */ --shadow:0 1px 2px rgba(20,24,27,.05), 0 4px 14px rgba(20,24,27,.04); /* ── 글꼴 ─────────────────────────────────────────────── */ --font: "Pretendard Variable", Pretendard, "Gothic A1", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif; /* 고정폭 글꼴에는 한글이 없다. 「2026년 9월」·「49.4%」처럼 한글이 섞이면 그 글자만 네모(□)로 깨진다. 뒤에 Gothic A1 을 두어 한글만 본문 글꼴로 흘린다. 2026-09-16 wms — 2공장 계획 화면·현황판에서 실제로 깨진 것을 보고 고침. */ --font-m: "IBM Plex Mono", "SFMono-Regular", Consolas, "Gothic A1", monospace; /* 숫자·시각·코드 */ --sans:var(--font); /* 본 통합 사이트가 쓰는 이름. 같은 것이다 */ --mono:var(--font-m); } /* ============================================================================ 어두운 화면 — 본 통합 사이트(index/index.html)의 값을 그대로 가져왔다. 2026-09-16. 그전까지 표준에 어두운 짝이 없어서 팀 화면의 dark 를 빼고 있었다. 이제 있으므로 팀 화면도 이 값을 따르면 된다. 세 가지 상태를 다 본다: 고른 밝게 / 고른 어둡게 / 안 고름(운영체제 설정). ============================================================================ */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --ground:#101418; --panel:#1a1f24; --panel-2:#212830; --sunk:#0a0d10; --track:#2a333a; --idle-bg:#20262b; --nav:#080b0d; --nav-hi:#1a2126; --nav-2:var(--nav-hi); --nav-ink:#a2b0b9; --nav-ink-hi:#e8edf0; --nav-ink-2:#6b7880; --nav-ink-3:#4a555d; --ink:#e8edf0; --ink-2:#a2b0b9; --ink-3:#74838d; --line:#2a333a; --line-2:#3d4a53; --brand:#c9a17a; --on-brand:#14181b; --brand-soft:#2a211a; --good:#2faa72; --good-bg:#122a20; --warn:#b58a08; --warn-bg:#2a2110; --cool:#63a8dc; --cool-bg:#12252f; --crit:#e2695a; --crit-bg:#301a18; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3); }} :root[data-theme="dark"]{ --ground:#101418; --panel:#1a1f24; --panel-2:#212830; --sunk:#0a0d10; --track:#2a333a; --idle-bg:#20262b; --nav:#080b0d; --nav-hi:#1a2126; --nav-2:var(--nav-hi); --nav-ink:#a2b0b9; --nav-ink-hi:#e8edf0; --nav-ink-2:#6b7880; --nav-ink-3:#4a555d; --ink:#e8edf0; --ink-2:#a2b0b9; --ink-3:#74838d; --line:#2a333a; --line-2:#3d4a53; --brand:#c9a17a; --on-brand:#14181b; --brand-soft:#2a211a; --good:#2faa72; --good-bg:#122a20; --warn:#b58a08; --warn-bg:#2a2110; --cool:#63a8dc; --cool-bg:#12252f; --crit:#e2695a; --crit-bg:#301a18; --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.3); } /* ============================================================================ 화면 크기 — 모니터 · 태블릿 · 핸드폰은 각기 다르게 나온다 2026-09-15 우무송 지시로 못 박음. 같은 앱이라도 보는 기계에 따라 다르게 그려야 한다. 하나로 만들어 늘리면 어디서도 어정쩡하다. 표준 경계는 아래 셋이다: 핸드폰 ~ 560px 한 손 · 세로 · 한 번에 한 가지 태블릿 561 ~ 1100 현장 · 가로 · 장갑 손가락 · 큰 버튼 모니터 1101px ~ 사무실 · 넓게 · 표·달력·여러 패널 ★ 가장 중요한 것: **각 화면에 무엇을 담을지는 만드는 팀이 정한다.** 이 토큰과 컴포넌트는 「조각」만 준다. 태블릿엔 무엇을 크게 놓고 핸드폰에선 무엇을 접을지는 그 공정을 아는 사람이 판단한다. 디자인 시스템이 대신 못 정한다. 쓰는 법 — 화면 CSS 에서: @media (max-width: 560px) { ... 핸드폰 ... } @media (min-width:1101px) { ... 모니터 ... } 그 사이가 태블릿(기본)이다. ============================================================================ */ :root{ --bp-phone:560px; /* 이 아래는 핸드폰 */ --bp-desktop:1101px; /* 이 위는 모니터. 그 사이는 태블릿 */ }