/* ═══════════════════════════════════════════════════════════════════════════ 다크 모드 — 옵트인 (00.176.09부터). `` 일 때만 적용된다. 기본값은 라이트이며, OS 가 다크여도 사용자가 직접 선택하지 않으면 밝은 화면 그대로다. 이 파일은 공개 HTML 과 SSR 템플릿에서 **가장 마지막**에 링크된다. 페이지 전용 시트(post.css, calendar.css …)보다 뒤에 와야 우선순위가 맞는다. ── 완료된 것 ──────────────────────────────────────────────────────────── · --white / --black 189곳을 역할별 시맨틱 토큰으로 분리 (라이트 무변화 증명) · 브랜드 강조색 123곳을 -surface / -text / -border 로 분리 (동일 증명) · 아래 토큰 값 전부 scripts/apca.mjs 로 --bg(#191320)·--surface(#211a2a) 양쪽에 대해 검증. 본문 |Lc| 75+, 콘텐츠 60+ 통과. ── 수정할 때 지킬 것 ──────────────────────────────────────────────────── · 값을 바꾸면 반드시 검증한다: DARK_MODE_TEST=1 npx playwright test tests/darkmode-contrast.spec.ts 11개 공개 페이지를 light/dark 양쪽으로 렌더해 실제 계산된 색의 APCA 를 잰다. · 새 색 토큰을 추가하면 여기에도 다크 대응값을 넣는다. 넣지 않으면 흰 배경 기준으로 고른 짙은 색이 다크에서 |Lc| 15~45 로 떨어져 읽히지 않는다. · `-surface` 계열은 어둡게 유지한다. 그 위 글자가 --on-accent(흰색)이므로 밝히면 깨진다. 밝혀야 하는 것은 `-text` 계열이다. · 적용 범위는 공개 사이트뿐이다. admin.html / kms.html / dreampath.html 은 이 시트를 링크하지 않는다 (자체 토큰 체계를 갖는다). ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 다크 모드 (00.176.06) 기본은 라이트다. OS 설정을 따라가지 않는다. OS 설정을 따르며 별도 토글은 두지 않는다. 설계 원칙 — 단순 반전이 아니다: · 딥퍼플은 다크 배경에서 전경으로 소멸한다 (Midnight Purple APCA Lc 0.0, Scouting Purple 10.7). 그래서 `-text` 변형만 밝은 값으로 재매핑하고, `-surface` 변형은 어두운 채로 둔다 — 그 위에 얹히는 --on-accent(흰 글씨)를 살리기 위해서다. · 반대로 흰 배경에서 본문 사용이 금지됐던 파스텔(River Blue / Leaf Green)이 다크에서는 |Lc| 80+ 로 가장 잘 읽힌다. 그래서 초록·파랑 텍스트는 파스텔로 간다. · 모든 값은 scripts/apca.mjs 로 --bg(#191320) 와 --surface(#211a2a) 양쪽에 대해 검증했다. 본문 |Lc| 75+, 콘텐츠 60+ 통과. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* 폼 컨트롤·스크롤바·기본 UI 가 다크를 따르도록 브라우저에 알린다 */ color-scheme: dark; /* ── 표면 ─────────────────────────────────────────────── */ --bg: #191320; --surface: #211a2a; --card-bg: #211a2a; /* 라이트에서 '검은 패널'이던 표면. 다크에서도 어둡게 유지해야 그 위 --on-accent(흰 글씨)가 살아남는다. 밝게 뒤집으면 깨진다. */ --surface-inverse: #2c2436; /* 그레이스케일은 명도가 아니라 '역할' 기준으로 뒤집는다. --gray-900 = 최대 대비 emphasis, --gray-100 = 배경 tint */ --gray-900: #f5f3f7; /* |Lc| 99.6 */ --gray-700: #c3bdcb; /* |Lc| 67.4 */ --gray-500: #8d8598; /* UI·테두리 전용 */ --gray-300: #3a3145; /* 구분선 */ --gray-100: #241d2e; /* 섹션 배경 tint */ /* ── 텍스트 ───────────────────────────────────────────── */ --ink: #eceaef; /* |Lc| 93.8 · 본문 */ --text-strong: #f5f3f7; /* |Lc| 99.6 · 최대 강조 */ --muted: #c3bdcb; /* |Lc| 67.4 · 보조 */ /* ── 선 / 포커스 ──────────────────────────────────────── */ --border: rgba(236, 234, 239, 0.16); --border-strong: rgba(236, 234, 239, 0.32); --focus-ring-color: rgba(199, 169, 238, 0.60); /* ── 강조색: 텍스트 변형만 밝게 (배경 변형은 위 원칙대로 유지) ── */ --accent-text: #d3baf4; /* |Lc| 70.4 (호버 표면에서도 60+ 확보) */ --scouting-purple-text: #d3baf4; /* |Lc| 70.4 */ --midnight-purple-text: #d3baf4; /* |Lc| 70.4 */ --forest-green-text: #9fed8f; /* |Lc| 83.3 — Leaf Green */ --ocean-blue-text: #82e6de; /* |Lc| 80.5 — River Blue */ --fire-red-text: #ffb3b2; /* |Lc| 71.6 */ /* 테두리 변형도 밝혀야 어두운 표면에서 보인다 (UI 기준 |Lc| 30+) */ --accent-border: #8b5fc4; --scouting-purple-border: #8b5fc4; --midnight-purple-border: #9b72d0; --forest-green-border: #4fa862; --ocean-blue-border: #2fb6d4; --fire-red-border: #ff7d7c; /* 어두운 그라디언트는 라이트의 '잉크 그라디언트'를 다크 표면 계열로 치환 */ --gradient-ink: linear-gradient(90deg, #2c2436 0%, #241d2e 52%, #1f1929 100%); } /* 토큰을 거치지 않고 하드코딩된 반투명 어두운 글자색 — 다크에서 뒤집는다. (라이트 모드 값을 건드리지 않으려고 토큰화 대신 여기서만 덮어쓴다) */ [data-theme="dark"] body[data-home-bootstrap] .lang-btn { color: rgba(236, 234, 239, 0.55); } [data-theme="dark"] .share-modal-btn-help { color: rgba(236, 234, 239, 0.72); } [data-theme="dark"] .admin-login-build { color: rgba(236, 234, 239, 0.66); } /* 사진·썸네일이 어두운 배경에서 과하게 튀지 않도록 아주 살짝 눌러 준다. 본문 가독성용 조정이며, 사진 자체의 색을 왜곡하지 않는 수준으로 유지한다. */ [data-theme="dark"] .post-card-thumb img, [data-theme="dark"] .hero-slide img { filter: brightness(0.94); } @media (prefers-contrast: more) { :root[data-theme="dark"] { --ink: #ffffff; --muted: #e4e1e8; --border: rgba(236, 234, 239, 0.42); } } /* 다크 모드 — 하드코딩된 반투명 어두운 글자색 보정 (style.css 다크 블록의 연장). 이 시트가 style.css 보다 나중에 로드되므로 여기서 덮어써야 우선순위가 맞는다. */ [data-theme="dark"] .post-related-date { color: rgba(236, 234, 239, 0.68); } /* 다크 모드 — style.css 다크 블록의 연장 (로드 순서상 여기서 덮어쓴다) */ [data-theme="dark"] .calendar-map-result-place::before { color: rgba(236, 234, 239, 0.55); } /* 다크 모드 — 딥퍼플 텍스트는 다크 배경에서 소멸하므로 밝은 대응값으로 교체. (rgba(77,0,110,0.72) = Midnight Purple 계열 → APCA Lc 0 수준) */ [data-theme="dark"] .members-section-eyebrow, [data-theme="dark"] .member-country-toggle-count { color: rgba(211, 186, 244, 0.88); } /* ═══════════════════════════════════════════════════════════════════════════ 3차 — 게시판 작성 모달(--bw-*) · 잔여 리터럴 색 ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* BW 토큰군은 이미 역할별로 나뉘어 있어 값만 뒤집으면 된다. 텍스트 값은 --bw-surface(#211a2a) 기준으로 APCA 검증했다. */ --bw-surface: #211a2a; --bw-canvas: #191320; --bw-border: rgba(236, 234, 239, 0.16); --bw-border-m: rgba(236, 234, 239, 0.30); --bw-text: #eceaef; /* |Lc| 93.0 */ --bw-text-s: #c3bdcb; /* |Lc| 66.5 */ --bw-text-m: #cac3d5; /* |Lc| 70.0 */ --bw-text-l: #c6bfd1; /* |Lc| 67.4 */ --bw-primary-tint: #2c2436; /* --bw-primary / --bw-primary-h 는 배경 역할이라 어두운 보라를 유지한다 (그 위 글자가 흰색이므로 밝히면 깨진다). */ --bw-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4); --bw-shadow-lg: 0 10px 40px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .45); } [data-theme="dark"] /* 토큰을 거치지 않은 밝은 표면 — 다크에서 흰 판으로 남는다 */ .memo-modal-body { background: #241d2e; } [data-theme="dark"] .gw-ep-create-form { background: #241d2e; } [data-theme="dark"] .gw-chatbot-thread { background: #1f1929; } [data-theme="dark"] /* 위험(삭제) 버튼의 짙은 빨강(#c33)은 다크 배경에서 |Lc| 가 부족하다 */ .memo-btn-danger { color: #ff9e9d; } [data-theme="dark"] .memo-btn-danger:hover { background: #a32b2b; border-color: #ff9e9d; } /* ── 반투명 흰 배경 중 '사실상 흰 판'인 것 (alpha ≥ 0.8) ──────────────────── alpha 0.03~0.36 짜리는 어두운 표면·사진 위에 얹는 흰 베일이라 다크에서도 그대로 두어야 한다. 아래 것들만 표면 역할이므로 다크 표면색으로 뒤집는다. (알파는 원래 값을 그대로 유지해 블러·겹침 효과를 보존한다) */ [data-theme="dark"] .home-rail-card { background: rgba(33, 26, 42, 0.98); } [data-theme="dark"] .pull-refresh-label { background: rgba(33, 26, 42, 0.96); } [data-theme="dark"] .item-meta-chip { background: rgba(33, 26, 42, 0.98); } [data-theme="dark"] .post-history-entry { background: rgba(33, 26, 42, 0.98); } [data-theme="dark"] .bw-footer { background: rgba(33, 26, 42, 0.98); } [data-theme="dark"] .share-modal-close { background: rgba(33, 26, 42, 0.90); } [data-theme="dark"] .mobile-compact-drawer-close { background: rgba(33, 26, 42, 0.88); } [data-theme="dark"] .admin-sidebar-group { background: rgba(33, 26, 42, 0.96); } [data-theme="dark"] .admin-selected-post { background: rgba(33, 26, 42, 0.80); } /* ── 지역(region) 팔레트 — 캘린더·회원국 현황에서 텍스트로 쓰인다 ────────── 원래 값은 흰 배경 기준으로 고른 짙은 색이라 다크에서 |Lc| 15~45 로 떨어진다. 같은 색상 계열을 유지하면서 밝기만 올려 |Lc| 60+ 를 확보한다. */ :root[data-theme="dark"] { --region-kor: #6fd3ef; --region-apr: #ff9e9d; --region-eur: #6fd0dd; --region-afr: #e5b264; --region-arb: #bcb0ff; --region-iar: #f39ac4; --region-wosm: var(--forest-green-text); } /* ── 별칭 토큰 · 브라우저 기본색 ──────────────────────────────────────────── --success / --danger 는 raw 브랜드 토큰을 가리키는 별칭이라 역할 분리 대상에서 빠져 있었다. 텍스트로 21곳 쓰이므로 다크 대응값이 필요하다. 또 `color-scheme: dark` 를 선언하면 스타일이 없는 가 브라우저 기본 다크 링크색(#9E9EFF, |Lc| 52.9)을 쓰는데 기준(60)에 못 미친다. */ :root[data-theme="dark"] { --success: var(--forest-green-text); /* #9fed8f · |Lc| 83.3 */ --danger: var(--fire-red-text); /* #ffb3b2 · |Lc| 71.6 */ } [data-theme="dark"] a:not([class]) { color: var(--accent-text); } /* ── shade 팔레트 — color: 로 16개 토큰이 쓰인다 ──────────────────────────── 흰 배경 기준으로 고른 짙은 색이라 다크에서 |Lc| 15~45 로 떨어진다. 색상 계열을 유지하며 밝기만 올려 전부 |Lc| 60+ 를 확보했다. */ :root[data-theme="dark"] { --shade-amber-1: #e8bc4d; /* 68.8 */ --shade-blue-2: #6fd0dd; /* 68.9 */ --shade-gray-2: #cfc9d8; /* 74.4 */ --shade-gray-3: #c8c2d1; /* 70.3 */ --shade-gray-4: #cbc3b9; /* 70.1 */ --shade-gray-5: #c5bfce; /* 68.6 */ --shade-gray-6: #bfb9c9; /* 65.1 */ --shade-gray-7: #bbb5c4; /* 62.8 */ --shade-gray-8: #b6b0c0; /* 60.1 */ --shade-green-3: #9fed8f; /* 83.3 */ --shade-purple-9: #d3baf4; /* 70.4 */ --shade-red-1: #ff9eb4; /* 64.4 */ --shade-red-2: #ffb0ad; /* 70.3 */ --shade-red-4: #ffb3a3; /* 71.1 */ --shade-red-5: #e0b45c; /* 64.6 */ --shade-tint-7: #2c2436; /* 배경 역할 */ } [data-theme="dark"] /* 스타일이 없는 링크가 브라우저 기본 다크 링크색(#9E9EFF, [data-theme="dark"] |Lc| 52.9)을 쓰는 것을 막는다. 요소 선택자(특정도 0, [data-theme="dark"] 0, [data-theme="dark"] 1)라 클래스 규칙이 있으면 그쪽이 이긴다 — 의도적으로 색을 지정한 링크는 그대로 유지된다. */ a { color: var(--accent-text); }