/* ══════════════════════════════════════════════════════════════ haccp selo · 다크 테마 (완전 블랙) ══════════════════════════════════════════════════════════════ 로드 순서: main.css → remote-support.css → theme-tokens.css → theme-overrides.css → journal-calendar.css → 이 파일(마지막) ───────────────────────────────────────────────────────────── 이 파일이 지켜야 하는 규칙 4개 — 어기면 조용히 사고 난다 ───────────────────────────────────────────────────────────── 1) 파일 전체가 `@media screen` 안에 있다. 인쇄에는 다크 규칙이 "덮여서 무효"가 아니라 "아예 존재하지 않는다". 이게 없으면: 다크로 일지를 인쇄할 때 툴바의 작성일자·담당자·검토자가 흰 종이에 흰 글씨로 찍혀 사라진다(main.css 의 print 블록은 표 배경만 강제하고 글자색은 강제하지 않는다). 화면은 멀쩡해서 심사 때까지 모른다. 2) 모든 선택자는 `html[data-theme="dark"]` 로 시작한다. 예외 없음. `prefers-color-scheme` 은 절대 쓰지 않는다 — 일지 PDF 내보내기가 새 창에 모든 를 복사해 가는데(bundle-journal-base.js), 새 창 에는 data-theme 가 없어서 지금은 자동으로 안전하다. 미디어쿼리로 쓰는 순간 그 안전장치가 무너진다. → tests/design-tone-guard.test.js 가 이 두 가지를 기계로 검사한다. 3) 다크 규칙은 이 파일에만 둔다. main.css / theme-overrides.css 에는 한 줄도. ① 되돌리기: 서버에서 이 파일만 비우면 즉시 라이트 복귀 (server.js 가 모든 .css 에 no-store 를 준다. 서비스워커는 css 를 안 가로챈다) ② backend/utils/journalExampleBuilder.js 가 main/theme-tokens/theme-overrides 를 하드코딩으로 물고 있어, 거기 섞으면 서버가 만드는 예시 문서까지 오염된다 4) 제외는 `:not()` 이 아니라 "토큰 되돌리기"로 만든다. 아래 B절 참조. (`:not(#journalBody *)` 같은 복합 :not 은 Safari 16.4+ 전용이라 구형 아이패드에서 규칙 전체가 조용히 무효화된다) ══════════════════════════════════════════════════════════════ */ @media screen { /* ══════════════════════════════════════════════════════════════ A. 토큰 — 화면의 대부분이 여기서 뒤집힌다 ══════════════════════════════════════════════════════════════ 인라인 스타일의 글자색 55%, 배경 26% 가 이미 var() 를 지나가므로 이 블록만으로 상당 부분이 따라온다. ══════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --cal-blue-bg:#17374d; --cal-blue-ink:#85ceff; --cal-orange-bg:#493322; --cal-orange-ink:#ffc386; --cal-pink-bg:#482932; --cal-pink-ink:#ffa9ba; /* ─── 면 ─── */ --white: #141414; /* 카드·모달 종이. 화면 곳곳에서 '면'으로 쓰인다 */ --card-bg: #141414; --gray1: #0A0A0A; /* 페이지 바닥 */ --paper: #0A0A0A; --bg2: #0A0A0A; --gray05: #101010; /* 아주 연한 회색 배경 자리 */ --mist: #1A1A1A; /* 보조 면 */ --primary-light:#1A1A1A; /* ─── 선 ─── */ --gray2: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.10); --hairline: rgba(255, 255, 255, 0.055); --hairline-strong: rgba(255, 255, 255, 0.18); /* ─── 글씨 ─── */ --gray4: #C8C8CC; /* 본문 */ --ink: #C8C8CC; --mono-text: #C8C8CC; --mono-text-2: #B4B4BA; --gray3: #A0A0A6; /* 보조 */ --ink-soft: #A0A0A6; --mono-text-3: #8A8A92; --mono-accent: #8A8A92; --mono-accent-2:#A4A4AA; --steel: #9AA0AC; --primary: #C8C8CC; /* ─── 대표 버튼 한 쌍 ─── 라이트는 '진회색 알약 + 흰 글씨'다. ★ 예전엔 그걸 그대로 뒤집어 '밝은 회색 판 + 검은 글씨'로 썼는데, 검은 화면에서 큰 밝은 판때기가 되어 눈이 아팠다(대표 지적 2026-08-02). 지금은 '어두운 면 + 밝은 테두리'다(대표 결정). 면은 페이지 바닥(#0A0A0A)보다 한 단 밝게 띄우고, 버튼이라는 건 테두리로 알린다. */ --btn-bg: #26262C; --btn-fg: #EDEDF0; --btn-line: rgba(255, 255, 255, 0.20); --btn-soft-bg: rgba(255, 255, 255, 0.06); --btn-soft-line: rgba(255, 255, 255, 0.20); /* ─── 사이드바(sage 계열) ─── */ --sage: #070707; --sage-deep: rgba(255, 255, 255, 0.14); --sage-soft: rgba(255, 255, 255, 0.06); --sage-line: rgba(255, 255, 255, 0.08); --sage-text: #D4D4D8; --sage-mute: #8A8A92; /* ─── 상태색 — 검은 배경에서 보이도록 한 톤 밝게 ─── */ --success: #4ADE80; --seal-green: #4ADE80; --success-light:rgba(74, 222, 128, 0.14); --danger: #F87171; --seal-red: #F87171; --danger-light: rgba(248, 113, 113, 0.14); --warning: #FBBF24; --seal-amber: #FBBF24; --warning-light:rgba(251, 191, 36, 0.14); /* ─── 도장 톤 — 글씨·배지용 상태색 (대표 지적 2026-08-02: "AI스럽다") ─── 위 세 줄(밝은 값)은 '점'용이다. 6~8px 짜리 점은 밝아야 검은 화면에서 보인다. 그런데 같은 값을 글씨·배지에 쓰니 면적이 넓어져 네온처럼 튀었다. 그래서 글씨·배지에는 채도를 죽인 이 한 벌을 쓴다 — 종이에 찍힌 도장 느낌. #93B79E hsl(138 20% 65%) 카드면(#141414) 대비 8.34:1 #C4A97F hsl( 37 37% 63%) 카드면(#141414) 대비 8.18:1 #CE9188 hsl( 8 42% 67%) 카드면(#141414) 대비 7.04:1 (참고 — 네온이던 값들의 채도: 69% / 96% / 91%) */ --stamp-green: #93B79E; --stamp-amber: #C4A97F; --stamp-red: #CE9188; /* ─── 그림자 — 검은 배경에선 그림자가 안 보이므로 더 깊게 ─── */ --shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.7), 0 12px 40px rgba(0, 0, 0, 0.6); --shadow-whisper: 0 1px 0 rgba(255, 255, 255, 0.04); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.55); /* ─── 화면 코드에 박혀 있던 색에 붙인 이름들 (theme-tokens.css 참조) ─── 라이트에선 값이 여러 갈래지만 다크에선 "면"이라는 역할만 남으므로 몇 단계로 모은다. */ --sf-warm: #141414; --sf-cool: #1A1A1A; --sf-1: #1A1A1A; --sf-2: #1A1A1A; --sf-3: #1F1F1F; --sf-4: #1F1F1F; --sf-ivory: #1C1A17; /* 웜 계열은 다크에서도 아주 살짝 따뜻하게 */ --sf-cream: #1F1C16; --sf-cream2: #1F1C16; /* 세금계산서 '발급완료' 배지 — 라이트 크림은 검은 화면에서 판때기가 된다 */ --sf-line: rgba(255, 255, 255, 0.07); --sf-line2: rgba(255, 255, 255, 0.07); --sf-line3: rgba(255, 255, 255, 0.20); /* 상태 틴트 — 검은 배경에선 파스텔이 흰 판때기가 되므로 반투명 색으로 */ --tint-green: rgba(74, 222, 128, 0.14); --tint-green2: rgba(74, 222, 128, 0.10); --tint-red: rgba(248, 113, 113, 0.14); --tint-red2: rgba(248, 113, 113, 0.10); --tint-amber: rgba(251, 191, 36, 0.14); --tint-amber2: rgba(251, 191, 36, 0.10); --tint-blue: rgba(147, 197, 253, 0.12); --tint-blue2: rgba(147, 197, 253, 0.09); /* ★ 이 둘은 '어두운 배경 + 흰 글씨' 버튼에 쓰인다. 한때 --btn-fg 가 #0A0A0A(검정)라서 여기를 밝은 알약으로 뒤집어야 했는데, --btn-fg 가 밝은 값(#EDEDF0)이 된 뒤로는 그 뒤집기가 '밝은 판 + 밝은 글씨'가 됐다 (인라인 style 로 색을 정하는 버튼 7군데. 글씨가 아예 안 보였다). 지금은 대표 버튼과 같은 언어 — 어두운 면 + 밝은 글씨. */ --btn-dark: var(--btn-bg); --btn-dark2: var(--btn-bg); /* 테두리 — 검은 반투명을 흰 반투명으로 뒤집는다. 안 그러면 카드 윤곽이 통째로 사라진다. */ --line-06: rgba(255, 255, 255, 0.06); --line-12: rgba(255, 255, 255, 0.07); --line-15: rgba(255, 255, 255, 0.13); --line-18: rgba(255, 255, 255, 0.16); --line-d1: rgba(255, 255, 255, 0.10); --line-e2: rgba(255, 255, 255, 0.07); --line-cb: rgba(255, 255, 255, 0.20); --line-04: rgba(255, 255, 255, 0.05); --line-05: rgba(255, 255, 255, 0.06); --line-14: rgba(255, 255, 255, 0.08); --sf-5: #1A1A1A; --tint-amber3: rgba(251, 191, 36, 0.09); --tint-blue3: rgba(147, 197, 253, 0.12); --tint-red3: rgba(248, 113, 113, 0.09); --line-red: rgba(248, 113, 113, 0.30); --sf-6: #0A0A0A; --sf-7: #141414; --tint-green3: rgba(74, 222, 128, 0.09); --line-amber: rgba(251, 191, 36, 0.30); --tint-amber4: rgba(251, 191, 36, 0.12); --tint-red4: rgba(248, 113, 113, 0.10); --info-fg: #93C5FD; --info-fg2: #7DD3FC; --info-fg-b: #93C5FD; --info-fg-c: #93C5FD; --sign-paper: #FFFFFF; /* 서명 바탕은 다크에서도 흰색 */ --in-bg: #1C1C1F; --in-line: rgba(255, 255, 255, 0.10); --in-line-on: rgba(255, 255, 255, 0.28); --in-ph: #7E7E86; --tint-blue4: rgba(147, 197, 253, 0.12); /* ★ 라이트에만 있고 다크 짝이 없던 것들(2026-08-02 발견). 짝이 없으면 라이트 값이 그대로 남아 검은 화면에 흰 판때기가 된다 — '서명 미등록' 안내 상자가 실제로 그랬다(--tint-red6 = #FFFAFA). */ --tint-blue5: rgba(165, 180, 252, 0.12); --tint-blue6: rgba(125, 211, 252, 0.12); --tint-blue7: rgba(165, 180, 252, 0.10); --tint-red5: rgba(248, 113, 113, 0.12); --tint-red6: rgba(248, 113, 113, 0.07); --sf-8: #1A1A1A; --slate-fg: #A0A0A6; --sf-today: #1F1F22; --sf-active: #26262A; /* ★ 배지·알약의 글씨/테두리 — 면(--tint-*)이 어두워지는데 여기가 리터럴로 남아 '어두운 면 + 어두운 글씨 + 밝은 테두리'가 됐다(2026-08-02). 면과 짝으로 뒤집는다. 글씨는 검은 화면에서 읽히는 밝기로, 테두리는 같은 색조의 반투명으로. */ --indigo-fg: #A5B4FC; --indigo-fg2: #A5B4FC; --info-fg-d: #7DD3FC; --info-fg-e: #93C5FD; --danger2: var(--stamp-red); /* '미작성'·'온도 이탈' 숫자 — 글씨라서 도장 톤 */ --line-ba: rgba(125, 211, 252, 0.32); --line-c7: rgba(165, 180, 252, 0.32); --line-bf: rgba(147, 197, 253, 0.32); --line-db: rgba(147, 197, 253, 0.24); --line-a7: rgba(74, 222, 128, 0.32); --line-fde: rgba(251, 191, 36, 0.32); --line-blue: #93C5FD; --amber-fg: var(--stamp-amber); /* '주의 필요' 알약 글씨 — 글씨라서 도장 톤 */ --line-ead: rgba(251, 191, 36, 0.30); --line-f3: rgba(248, 113, 113, 0.32); /* 컨설턴트 현황 카드 — 검은 반투명은 다크에서 안 뒤집힌다(검정 위 검정). 흰 반투명으로. */ --line-03: rgba(255, 255, 255, 0.04); --line-07: rgba(255, 255, 255, 0.06); --line-10: rgba(255, 255, 255, 0.10); /* ★ 5차 — 1:1 토큰이 없어서 리터럴로 남아 있던 자리 (2026-08-02 대표 결정). · 작은 점(dot)은 색을 유지한다 — 토큰으로 안 옮겼으니 여기 없다. · 넓은 글씨·면은 모노로 (--sale-fg / --btn-edit / --tint-violet). · 상태를 뜻하는 버튼은 도장색 계열 어두운 면 (--btn-editing / --btn-red / --btn-green). · 면은 페이지 바닥(#0A0A0A)·카드(#141414)보다 한 단만 밝게 — 판때기 금지. · 상태색 글씨는 도장 톤(--stamp-*)을 재사용한다 — 새 원색을 만들지 않는다. */ --sf-9: #1A1A1A; --sf-cream3: #1F1C16; --sf-mono10: rgba(255, 255, 255, 0.08); --sf-mono06: rgba(255, 255, 255, 0.06); --tint-blue8: rgba(165, 180, 252, 0.10); --tint-amber6: rgba(251, 191, 36, 0.14); --tint-amber7: rgba(251, 191, 36, 0.16); --tint-emerald: rgba(74, 222, 128, 0.14); --tint-green4: rgba(74, 222, 128, 0.14); --tint-green5: rgba(74, 222, 128, 0.12); --tint-green6: rgba(74, 222, 128, 0.10); --tint-violet: rgba(255, 255, 255, 0.07); /* 보라 면은 넓어서 모노로 */ /* 색 있는 버튼 면 — 도장 톤을 카드면(#141414)에 20% 섞은 값. 원색 알약이 아니라 '색기 도는 어두운 면'이다. 흰 글씨 대비 11:1 이상. */ --btn-green: #1F3C2A; --btn-green2: #1F3C2A; --btn-green3: #1A3323; --btn-red: #422727; --btn-amber: #423617; --btn-amber2: #4A3D1B; --btn-seal: #3A321D; --btn-bg3: #26262C; --btn-editing: #422727; /* [편집 중] — 도장 빨강 */ --btn-edit: #26262C; /* [편집] — 모노 */ --pill-today: #3A3A42; --pill-yesterday: #2E2E34; --pill-past: #26262C; --pill-focus: #3A3A42; /* 글씨 — 상태색은 전부 도장 톤 재사용 */ --green-fg: var(--stamp-green); --green-fg2: var(--stamp-green); --green-fg3: var(--stamp-green); --green-fg4: var(--stamp-green); --green-fg5: var(--stamp-green); --green2: var(--stamp-green); --num-green: var(--stamp-green); --num-amber: var(--stamp-amber); --red-fg2: var(--stamp-red); --red-fg3: var(--stamp-red); --sale-fg: #C8C8CC; /* 넓은 글씨라 모노 */ --indigo-fg3: #A5B4FC; --btn-fg2: #EDEDF0; --ink-62: #C8C8CC; --slate-fg2: #A0A0A6; --role-approver: var(--stamp-amber); --role-reviewer: var(--stamp-green); --role-worker: #9AA0AC; /* 선 */ --danger3: #F87171; --line-9c: rgba(255, 255, 255, 0.20); --line-bb: rgba(74, 222, 128, 0.32); --line-f59: rgba(251, 191, 36, 0.45); --line-fca: rgba(248, 113, 113, 0.45); --line-7f: rgba(248, 113, 113, 0.32); --line-ff6: #F87171; --line-b8: rgba(251, 191, 36, 0.45); --line-mono30: rgba(255, 255, 255, 0.20); --line-025: rgba(255, 255, 255, 0.03); --line-22: rgba(255, 255, 255, 0.20); --line-4b: rgba(255, 255, 255, 0.18); --line-emerald: rgba(74, 222, 128, 0.32); --line-amber3: rgba(251, 191, 36, 0.32); --line-ee: rgba(255, 255, 255, 0.07); --line-d9: rgba(255, 255, 255, 0.16); --line-b9: rgba(74, 222, 128, 0.32); --line-e2b: rgba(255, 255, 255, 0.10); --line-d4: rgba(255, 255, 255, 0.16); /* 대표 버튼 — 어두운 면 + 밝은 테두리(대표 결정 2026-08-02). 위 블록 주석 참고. */ --btn-bg: #26262C; --btn-bg2: #26262C; --btn-fg: #EDEDF0; --btn-line: rgba(255, 255, 255, 0.20); --btn-soft-bg: rgba(255, 255, 255, 0.06); --btn-soft-line: rgba(255, 255, 255, 0.20); /* 스크롤바·