/* ══════════════════════════════════════════════════════════════ 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"] { /* ─── 면 ─── */ --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); /* ─── 그림자 — 검은 배경에선 그림자가 안 보이므로 더 깊게 ─── */ --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-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-dark: #C4C4CA; --btn-dark2: #C4C4CA; /* 테두리 — 검은 반투명을 흰 반투명으로 뒤집는다. 안 그러면 카드 윤곽이 통째로 사라진다. */ --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; /* 대표 버튼 — 어두운 면 + 밝은 테두리(대표 결정 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); /* 스크롤바·