/* ══════════════════════════════════════════════════════════════════ tokens.css — v757 · 화면 설정값을 한 곳에 모읍니다 왜 만들었나 — 사장님 지적: "왜 네가 만든 건데 설정값을 모르나" 세어보니 색이 **665종 · 4,354곳**에 그냥 박혀 있었고, 설정값(--변수)으로 관리되는 비율은 **17%** 뿐이었습니다. 그래서 v755 에서 흐린 글자를 고칠 때 변수 하나가 아니라 413곳을 찾아 바꿔야 했습니다. 여기 있는 값을 바꾸면 앱 전체가 따라 바뀝니다. ⚠ 값은 종전과 **한 글자도 다르지 않습니다** — 이름만 붙였습니다. ⚠ JS 가 계산에 쓰는 색(hexA('#…') · CAT 의 cl:'#…')은 건드리지 않았습니다. ※ 회색이 gray1~gray7 로 일곱 가지입니다. 눈으로는 거의 같은 색인데 값이 다릅니다. 다음 단계에서 둘셋으로 줄이면 화면이 더 정돈됩니다(값이 바뀌므로 따로 확인 필요). ══════════════════════════════════════════════════════════════════ */ :root{ --c-blue: #1a5fa8; /* 주 파랑 — 헤더 그라데이션·강조 */ --c-blue2: #1766c2; /* 파랑 — 버튼·링크 */ --c-cyan: #00a5c8; /* 청록 — 그라데이션 끝 */ --c-purple: #7c3aed; /* 보라 — 필터 계열 */ --c-red: #C23A2B; /* 빨강 — 오류·위험 · 1.337.136: 연한 빨강(#fee2e2) 위 4.0→4.8 · 앱 정본 빨강과 통일 */ --c-red2: #C23A2B; /* 주황빨강 — 불합리 · 1.337.135: 옅은 빨강 배지 위 대비 2.9→4.7 */ --c-amber: #9C5B06; /* 주황 — 주의 · 1.337.136: 연한 노랑(#fef3c7) 위 2.9→4.9 */ --c-green: #086A46; /* 초록 — 정상 · 1.337.136: 연한 초록(#dcfce7) 위 3.0→6.0 · --c-green2 와 통일 */ --c-green2: #086A46; /* 진초록 — 해결됨 · 1.337.134: 옅은 초록 배지 바탕(#EAF7F0) 위 대비 4.45→6.0 (WCAG AA) */ --c-ink: #191f28; /* 본문 글자 (거의 검정) */ --c-ink2: #12233a; /* 진한 남색 글자 */ --c-gray1: #4e5968; /* 중간 회색 글 */ --c-gray2: #54677D; /* 회색 글 · 1.337.136: #F0F2F5 위 4.38→5.15 */ --c-gray3: #657280; /* 회색 글 (v755) */ --c-gray4: #67727f; /* 회색 글 (v755) */ --c-gray5: #6b7279; /* 회색 글 (v755) */ --c-gray6: #59636E; /* 회색 글 · 1.337.135: #ECEEF2 바탕 대비 4.0→5.3 (AA) */ --c-gray7: #5F6B79; /* 회색 글 */ --c-line: #dbe3ec; /* 테두리 */ --c-line2: #eef0f4; /* 아주 연한 테두리 */ --c-bg2: #f1f3f6; /* 연한 배경 */ --c-bg-blue: #eaf2fc; /* 연한 파랑 배경 */ } /* ── 글자크기 ───────────────────────────────────────────────────── 40종(11 · 11.5 · 12 · 12.5 · 13 · 13.5 …)으로 갈라져 있던 것 중 많이 쓰는 16종에 이름을 붙였습니다. 값은 종전 그대로입니다. ※ 반 픽셀 단위로 나뉜 것은 750판을 거치며 조금씩 다르게 찍힌 흔적입니다. 나중에 5~6단계로 줄이면 화면이 정돈됩니다(값이 바뀌므로 따로 확인 필요). ※ 현장 폰에서 읽기 힘든 10px·10.5px 를 키우려면 아래 두 줄만 고치면 됩니다. ───────────────────────────────────────────────────────────────── */ :root{ --fs-10: 11.5px; /* v762: 10px → 11.5px — 현장 폰에서 읽기 어려웠음(교체·오염 이력 날짜, 필터 % 등 37곳) */ --fs-105: 11.5px; /* v762: 10.5px → 11.5px — 위와 같음(판정 기준 표 등) */ --fs-11: 11px; /* */ --fs-115: 11.5px; /* */ --fs-12: 12px; /* */ --fs-125: 12.5px; /* */ --fs-13: 13px; /* */ --fs-135: 13.5px; /* */ --fs-14: 14px; /* */ --fs-145: 14.5px; /* */ --fs-15: 15px; /* */ --fs-155: 15.5px; /* */ --fs-16: 16px; /* */ --fs-17: 17px; /* */ --fs-18: 18px; /* 2026-10-21: 11곳이 쓰는데 정의가 없어 부모 크기로 떨어지던 것(생김새 표 · 감사 #1340 묶음) */ --fs-19: 19px; /* 〃 */ --fs-20: 20px; /* */ --fs-22: 22px; /* */ } /* ── PC 화면 폭 ────────────────────────────────────────────────── 화면마다 최대폭이 **16종**으로 흩어져 있습니다: 1023px · 1120px · 1200px · 1280px · 1340px · 1040px · 1180px · 1132px · 1140px · 1188px · 1420px · 1372px · 1380px · 1428px · 1460px · 1464px 750판을 거치며 화면별로 따로 정해진 흔적입니다. 값은 종전 그대로 두고 이름만 붙였습니다. ⚠ 「PC 화면을 전부 넓게」 하시려면 아래 값들을 하나로 맞추면 됩니다. 예: 전부 1340px 로 → 좁던 화면(1132·1140·1180·1188)이 함께 넓어집니다. 단 이건 **값이 실제로 바뀌는 일**이라 화면을 보고 결정하셔야 합니다. ⚠ 모바일/PC 가르는 경계 820px 은 여기 못 넣습니다 — CSS 의 @media 조건에는 설정값을 쓸 수 없습니다. 대신 50곳이 서로 어긋나지 않는지 자동검사가 봅니다. ──────────────────────────────────────────────────────────────── */ :root{ --pc-w-1023: 1023px; /* 2곳 */ --pc-w-1120: 1120px; /* 2곳 */ --pc-w-1200: 1200px; /* 1곳 */ --pc-w-1280: 1280px; /* 2곳 — 1.337.4: 카드 화면 자식도 사용 */ --pc-w-1340: 1340px; /* 1곳 */ --pc-w-1040: 1040px; /* 1곳 */ --pc-w-1320: 1320px; /* 1곳 — 1.337.4: 1180→1320(목록 본문, 남는 공간 채움) */ --pc-w-1272: 1272px; /* 1곳 — 1.337.4: 1132→1272(목록 머리) */ --pc-w-1328: 1328px; /* 1곳 — 1.337.4: 1188→1328(카드 화면 몸통) */ --pc-w-1420: 1420px; /* 1곳 */ --pc-w-1372: 1372px; /* 1곳 */ --pc-w-1380: 1380px; /* 1곳 */ --pc-w-1428: 1428px; /* 1곳 */ --pc-w-1460: 1460px; /* 1곳 */ --pc-w-1464: 1464px; /* 1곳 */ } /* ── PC 카드 한 줄에 몇 개 ──────────────────────────────────────── 카드 목록(냉방기·설비 리스트 등)의 **최소 폭**입니다. 이 값이 작을수록 한 줄에 많이 들어갑니다. 본문 폭 1,188px 기준: 480px → 2열 · 360px → 3열 · 280px → 4열 v760 실측 (냉방기 검색 · 설비 80대): 480px : 2열 · 카드폭 568px · 세로 3,910px 360px : 3열 · 카드폭 375px · 세로 2,779px ← 세로 29% 감소 · 글자 잘림 0 · 가로 넘침 0 ⚠ 더 줄이면(280px) 4열이 되지만 카드 안 글자가 잘릴 수 있습니다 — 줄이시려면 확인 후에. ──────────────────────────────────────────────────────────────── */ :root{ --pc-card-min: 360px; /* PC 카드 최소 폭 — 이 한 줄이 한 줄에 몇 개인지를 정합니다 */ } /* ═══════════════════════════════════════ 1.226.40 — 크기 설정값(사장님 «사이즈를 수정했는데 이전에 고정한 사이즈가 문제») 실측 — 글자 크기는 이미 변수 93%라 한 곳만 고치면 전부 바뀝니다. 그런데 너비 2% · 높이 0% · 여백 0% · 표시 0% — 약 4,960곳에 숫자가 직접 박혀 있습니다. 같은 값이 몇 번이나 되풀이되는지 세어 봤습니다: 모서리 12px×232 · 10px×155 · 8px×135 · 14px×124 · 9px×112 (다섯 값이 758곳) 사이 띄우기 8px×199 · 10px×89 · 6px×84 · 7px×62 (네 값이 434곳) 버튼·줄 높이 44px×22(최소높이 16) · 40px×14 (터치 기준) 그래서 되풀이가 가장 많은 값들부터 이름을 붙입니다. ⚠ 값은 종전과 한 글자도 다르지 않습니다 — 이름만 붙였습니다(색 토큰과 같은 방식). ⚠ 아직 쓰는 곳을 바꾸지 않았습니다. 다음 단계에서 한 화면씩 옮깁니다 (한꺼번에 바꾸면 어디가 틀어졌는지 못 찾습니다 — v739 교훈). ═══════════════════════════════════════ */ :root{ /* 모서리 둥글기 — 작은 것부터 */ --r-sm: 8px; /* 칩·작은 버튼 (135곳) */ --r-md: 9px; /* 배지·태그 (112곳) */ --r-lg: 10px; /* 버튼·입력칸 (155곳) */ --r-xl: 12px; /* 카드 (232곳 — 가장 많이 씁니다) */ --r-2xl: 14px; /* 큰 카드·시트 (124곳) */ /* 사이 띄우기 */ --gap-1: 4px; --gap-2: 6px; /* (84곳) */ --gap-3: 7px; /* (62곳) */ --gap-4: 8px; /* (199곳 — 가장 많이 씁니다) */ --gap-5: 10px; /* (89곳) */ /* 손가락으로 누르는 것의 최소 높이 — 이보다 작으면 눌리지 않습니다 */ --tap-min: 44px; /* 버튼·목록 줄 (최소높이 16곳) */ --tap-small: 40px; /* 좁은 곳 (14곳) */ } /* ═══════════════════════════════════════ 1.226.46 — 여백(padding) 통일 (사장님 결정: 「난 통일이 좋아」) 실측 — 여백에 35가지 숫자가 쓰이고 있었습니다. 2px 183 · 3px 124 · 6px 185 · 7px 168 · 8px 283 · 9px 187 · 10px 260 · 11px 160 · 12px 296 · 13px 189 · 14px 218 · 16px 115 · 18px 77 · 20px 70 … 눈으로는 구별되지 않는 1~2px 차이가 대부분입니다. 12단계로 묶습니다. 묶는 규칙 — 가까운 값끼리(변화는 최대 2px) 1·2px→2 · 3·4px→4 · 5·6px→6 · 7·8px→8 · 9·10px→10 · 11·12px→12 13·14px→14 · 15·16·17px→16 · 18·19·20px→20 · 22·24·26px→24 28·30·32px→30 · 34·36px→36 (40px 이상은 드물고 뜻이 달라 그대로 둡니다) ⚠ 화면이 아주 조금 달라집니다(간격 1~2px). 그 대신 — · 여백이 12개 이름으로 정리돼 한 곳에서 조절됩니다 · 「너무 빽빽하다/헐겁다」 하시면 그 이름 한 줄만 고치면 전부 따라옵니다 · 되돌리고 싶으시면 이름의 값을 원래대로(예: --pad-4를 7px로) 되돌리면 됩니다 ═══════════════════════════════════════ */ :root{ --pad-1: 2px; /* 아주 좁게 — 배지 안쪽 */ --pad-2: 4px; --pad-3: 6px; --pad-4: 8px; /* 가장 많이 쓰는 좁은 여백 */ --pad-5: 10px; --pad-6: 12px; /* 카드 안쪽 기본 */ --pad-7: 14px; --pad-8: 16px; --pad-9: 20px; /* 넉넉하게 — 큰 카드·시트 */ --pad-10: 24px; --pad-11: 30px; --pad-12: 36px; } /* ═══════════════════════════════════════════════════════════════════ 1.337.23 — 다크모드 토큰 (사장님 «다크모드 ... 읽기에 불편한 부분들도 많고 통일감도 없던데 · 전체 확인해줘») 왜 통일감이 없었나 — 다크모드가 이 이름표(토큰)들은 그대로 두고 화면마다 선택자를 하나씩 적어 덮는 방식이었기 때문입니다. 그래서 나중에 만든 화면은 목록에 없어서 밝은 채로 남았고, 덮은 곳과 안 덮은 곳의 색이 서로 달라 뒤죽박죽이 됐습니다. 46개 기능을 다크로 열어 글자·배경 대비를 전부 재 보니 — 「P1」·「천안」·설비명·「나효종」 같은 글자가 대비 1.02였습니다. 1.00은 글자색과 배경색이 똑같다는 뜻입니다. 있는데 안 보입니다. 그 글자들은 전부 --c-ink(#191f28) 하나를 쓰고 있었습니다. → 이름표의 값만 다크용으로 바꿉니다. 화면을 하나씩 덮을 필요가 없고, 앞으로 새로 만드는 화면도 저절로 다크가 맞습니다(그게 통일감입니다). 밝기는 WCAG AA(본문 4.5:1)를 기준으로 골랐습니다. ═══════════════════════════════════════════════════════════════════ */ /* ⚠ 선택자를 두 겹으로 쓰는 이유 — 같은 이름표를 뒤에서 또 정하는 곳이 있습니다. launcher.js 가 화면에 넣는 CSS 안에 body.lch-theme{--surface:#FFFFFF ...} 가 있어 무게가 같으면(0,1,1) 나중에 실린 쪽이 이깁니다 — 실제로 --surface 가 흰색으로 되돌아가 위험성평가 화면이 다크에서 흰 판으로 남아 있었습니다(실측으로 확인). → body.ss-dark.lch-theme(0,2,1) 를 함께 적어 순서와 상관없이 이기게 합니다. */ body.ss-dark, body.ss-dark.lch-theme, body.ss-dark.lch-pc{ /* 글자 — 진한 글자일수록 밝게 뒤집는다 */ --c-ink: #e6eaf0; /* 본문 (밝을 때 #191f28) */ --c-ink2: #d5dee9; --c-gray1: #b7c0cc; --c-gray2: #a7b3c2; --c-gray3: #9aa5b3; --c-gray4: #9aa5b3; --c-gray5: #97a2b0; --c-gray6: #97a2b0; --c-gray7: #a2adba; /* 선·바탕 */ --c-line: #2a3441; --c-line2: #242d39; --c-bg2: #1e2733; --c-bg-blue: #22303f; /* 강조색 — 어두운 바탕에서 읽히도록 밝기만 올린다(색은 그대로) */ --c-blue: #4e96e0; /* ══ 1.337.272(아이디어 ㉖) — 여기 --c-blue2 한 줄이 빠져 있었다 ══ 이 블록은 토큰 27개를 다시 정하는데 --c-blue2 만 없어서, 어두운 화면에서 단추·링크 파랑(쓰는 자리 202곳)만 밝은 화면 값(#1766c2) 그대로 남았다. js/dark-fix.js 도 이 토큰은 손대지 않는다(0곳). 「한쪽만 고침」이다. 값은 이 집안이 이미 쓰는 것과 같게 맞춘다 — --c-blue · --ci-blue · --accent 가 모두 #4e96e0 다. ⚠ 대비를 재 보면 트레이드오프가 있다(흰 글자 기준): · 글자·테두리로 쓰는 105곳: #1766c2 위 3.30 → #4e96e0 로 5.99 (좋아짐) · 바탕으로 쓰는 55곳(흰 글자 단추): 5.63 → 3.10 (나빠짐 · 큰 글자 기준 3.0 은 넘는다) 한 값으로 둘 다 4.5 를 넘길 수는 없다(수학적으로 불가능하다 — 계산해 봤다). 그래서 여기서는 집안 값에 맞추는 것까지만 한다. 단추 바탕용 색을 따로 둘지는 UI 대화(#28)의 「다크모드 대비 다시 재기」에서 정할 일이다. scan9 S63 이 이 줄을 지킨다. */ --c-blue2: #4e96e0; --c-cyan: #39c7e8; --c-purple: #a78bfa; --c-red: #ff6b6b; --c-red2: #ff8878; --c-amber: #f0a85a; --c-green: #3dd68c; --c-green2: #3dba85; /* styles.css 쪽 이름표도 같은 규칙으로 */ --bg: #0f1419; --surface: #1a212b; --surface2: #151c25; --border: #242d39; --text: #e6eaf0; --muted: #9aa5b3; --green: #3dd68c; --warn: #f0a85a; --danger: #ff6b6b; --ci-blue: #4e96e0; --ci-sky: #39c7e8; --accent: #4e96e0; --accent2: #39c7e8; color-scheme: dark; } /* 2026-09-29(Q48 — 김원준님 «다크모드 남은 흰 바탕») — .sitechip 는 index.html 에 두 정의 (#F7F9FB · #fff) · js/launcher.js 에 !important 정의 한 벌이 있는데, 다크 규칙이 0곳이었다(UI-작업-아이디어-2026-09-08.md ②). 셋 다 이 한 벌로 덮는다(토큰이라 다크 값도 같이 옴). ⚠ launcher.js 의 body.lch-theme .sitechip{…!important}는 나중에(런타임에) 실려 무게가 같으면(0,2,1) 그쪽이 이긴다 — 이 파일 200줄쯤의 --surface 사고와 같은 모양이다. 그래서 body.ss-dark 하나가 아니라 .lch-theme·.lch-pc 를 겹쳐 무게를 (0,3,1)로 올려 실리는 순서와 무관하게 이기게 한다. */ body.ss-dark .sitechip, body.ss-dark.lch-theme .sitechip, body.ss-dark.lch-pc .sitechip{ background:var(--surface2)!important; border-color:var(--border)!important; color:var(--text)!important; } /* 2026-09-30(Q48 되잡기 — 감사) — 선택된(.on) 칩은 애초에 다크 규칙이 필요 없었다: 실제로 이기는 규칙은 launcher.js 의 body.lch-theme .sitechip.on{background:var(--tm,var(--c-blue2)) …!important}(무게 0,3,1)이고, 이 규칙은 테마를 안 가려 다크에서도 그대로 걸려 있었다(흰 바탕이 아니라 처음부터 진한 --tm 색 + 흰 글자). 그런데 --c-blue2 로 고정해 덮어써 팀색(--tm)이 사라지고 흰 글자 대비가 낮아졌다(약 3.1) — 있던 문제를 고치려다 없던 문제를 만든 것이라 뺀다. */ body.ss-dark .sitechip s{ color:var(--muted)!important; } body.ss-dark .sitechip.on s{ color:#fff!important; } /* 2026-09-30(Q48 되잡기 — 감사 ④) — 팀 달력 공휴일 배지(.tc-hd, index.html)도 같은 흰 바탕. */ body.ss-dark .tc-hd, body.ss-dark.lch-theme .tc-hd, body.ss-dark.lch-pc .tc-hd{ background:#3d1f1c!important; color:#f2a49c!important; } /* ══ 1.337.166 ★ 폰 「설정 > 디스플레이 > 글자 크기」를 키우면 앱 글자가 잘렸다 ══ (사장님 «명단 글자가 잘리는데 … 핸드폰에서 글자를 기본적으로 크게했을때 생기는 문제가 아닐까 싶은데?? 계속 줄여도 자꾸 저러는거 보면 설정을 크게 해놓으면 그걸 반영한것 같은데?») 맞습니다. 안드로이드 브라우저는 그 설정 배율을 웹 글자에 그대로 곱합니다(폴드7·S23 실측 재현). 그래서 앱에서 아무리 px 를 줄여도 그 배율이 다시 곱해져 계속 잘렸습니다. → 브라우저가 제 글자 크기를 임의로 부풀리지 않게 합니다. (그래도 부풀리는 브라우저가 있어, 실제로 재서 보정하는 안전장치가 index.html 에 하나 더 있습니다) */ html{ -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; }