/* ========================================================================== Doto Gray — 은은하게 (2026-09-06) 왜 만드나: - 잉크가 기본이 되면서 작업면이 순백(#FFFFFF)·대시보드가 크림(#F6F6F4)이 됐고, 그 위에 흰 카드가 겹친다. 「밝게가 좋은데 눈이 부시다」는 사람에게는 화면 전체가 최대 밝기다. 어둡게는 그 사람들의 답이 아니다 — 너무 멀리 간다. 원칙: - 🔴 «흰빛만» 낮춘다. 글자색·의미색(success/warning/danger/info)·도메인 색은 밝게와 «완전히 같다». 다크와 결정적으로 다른 점 — 다크 작업의 절반은 글자 대비였다. 여기서 color 를 건드리기 시작하면 밝게와 두 벌을 관리하게 된다. - 마크업 무수정. 잉크·다크와 같은 방식으로 변수를 낮추고, 변수가 안 닿는 «흰색 리터럴»만 자리별로 덮는다. - 스코프는 [data-doto-tone="gray"] 한 축. data-bs-theme 은 light 그대로다 (Bootstrap 은 light|dark 만 알아듣는다 — header.php 주석 참조). - 로드 순서는 doto-dark.css 뒤(header.php). 다크와는 스코프가 갈려 안 부딪친다. 팔레트 (B안 — 오너 선택 2026-09-06. 흰빛을 바탕에서 약 6분의 1 걷어낸 값): page #DFE3E9 · card #EFF1F4 · panel #E7EAEF · panel2 #DFE3E9 hover #DCE0E6 · line #CFD5DD · line2 #BFC7D1 글자는 잉크 그대로 #1F2937 — 카드 위 대비 13.0:1 (밝게는 14.7:1, 기준 4.5:1) 켜고 끄기: 프로필 메뉴 「화면」 · ?theme=gray (지원용) ========================================================================== */ /* -------------------------------------------------------------------------- 1. 루트 토큰 — 잉크가 정한 «흰 종이» 축을 한 단 낮춘다 -------------------------------------------------------------------------- */ [data-doto-tone="gray"] { --doto-gray-page: #DFE3E9; --doto-gray-card: #EFF1F4; --doto-gray-panel: #E7EAEF; --doto-gray-panel2: #DFE3E9; --doto-gray-hover: #DCE0E6; --doto-gray-line: #CFD5DD; --doto-gray-line2: #BFC7D1; } /* 🔴 같은 블록을 «밝은 섬»에도 건다. 검은 메인메뉴 안에서 열리는 드롭다운 세 곳은 header.php 가 data-bs-theme="light" 를 따로 심는데, 그 순간 Bootstrap 의 [data-bs-theme=light] 블록이 --bs-body-bg 를 #fff 로 «로컬 재정의»한다. html 에만 걸면 그 섬 안쪽만 흰색으로 남는다(실측: 전체 메뉴 서랍). */ [data-doto-tone="gray"], [data-doto-tone="gray"] [data-bs-theme="light"] { /* 도토 자체 서페이스 (style.css 가 #fff 로 정의 — 카드·칸반·컴포넌트가 참조) */ --doto-surface: var(--doto-gray-card, #EFF1F4); --doto-surface-subtle: var(--doto-gray-panel, #E7EAEF); --doto-surface-hover: var(--doto-gray-hover, #DCE0E6); --doto-border: var(--doto-gray-line, #CFD5DD); /* 바탕 — 카드·모달·오프캔버스·드롭다운이 전부 --bs-body-bg 를 참조한다. 그래서 이 값은 «페이지 바탕»이 아니라 «카드 면»이다. 페이지 바탕은 §3 에서 따로. */ --bs-body-bg: var(--doto-gray-card, #EFF1F4); --bs-body-bg-rgb: 239, 241, 244; /* 🔴 --bs-white 는 «건드리지 않는다». 판으로만 쓰이는 줄 알았는데 Bootstrap 5.3 은 .text-white 도 같은 토큰(--bs-white-rgb)을 읽는다 — 낮추면 «어두운 판 위 흰 글자»가 함께 흐려진다(직원목록 아바타 이니셜 4.83:1 → 4.27:1 로 실측). 판만 낮추려면 .bg-white 유틸을 따로 잡아야 한다 — §2 아래. */ /* 면 2단: 카드 ↔ 섹션. section-panel 이 tertiary-bg 를 참조한다 */ --bs-tertiary-bg: var(--doto-gray-panel, #E7EAEF); --bs-tertiary-bg-rgb: 231, 234, 239; --bs-secondary-bg: var(--doto-gray-panel2, #DFE3E9); --bs-secondary-bg-rgb: 223, 227, 233; /* bg-light = 본문 배경으로 쓰이는 자리 */ --bs-light: var(--doto-gray-panel, #E7EAEF); --bs-light-rgb: 231, 234, 239; --bs-light-bg-subtle: var(--doto-gray-panel, #E7EAEF); --bs-light-border-subtle: var(--doto-gray-line, #CFD5DD); /* 선 — 바탕이 어두워진 만큼 헤어라인도 한 단 내려야 같은 세기로 보인다 */ --bs-border-color: var(--doto-gray-line, #CFD5DD); --bs-border-color-translucent: var(--doto-gray-line, #CFD5DD); /* 잉크가 흰 판 위 전제로 잡아 둔 옅은 강조면 */ --bs-primary-bg-subtle: var(--doto-gray-panel2, #DFE3E9); --bs-primary-border-subtle: var(--doto-gray-line, #CFD5DD); } /* -------------------------------------------------------------------------- 2. 작업면 — 잉크가 «흰 종이»를 리터럴로 못 박은 자리 -------------------------------------------------------------------------- */ /* 🔴 눈에 들어오는 바닥은 .main-layout 이 아니라 그 안쪽 .content-area 다. 잉크가 .main-layout 을 #fff !important 로 박아 뒀고, 대시보드는 그 위에 .dashboard-content-area 가 크림색(#F6F6F4)을 또 덮는다. 둘 다 낮추지 않으면 토큰을 아무리 내려도 화면은 그대로 밝다(실측으로 확인한 자리). */ [data-doto-tone="gray"] .main-layout { background-color: var(--doto-gray-page, #DFE3E9) !important; } [data-doto-tone="gray"] .content-area, [data-doto-tone="gray"] .dashboard-content-area { background-color: var(--doto-gray-page, #DFE3E9); } [data-doto-tone="gray"] body { background-color: var(--doto-gray-page, #DFE3E9); } /* .bg-white 유틸 — 잉크 상단바가 이 클래스라 안 잡으면 화면 위에 흰 띠가 남는다. 유틸이 !important 라 같은 무기가 필요하다. 🔴 .text-white 는 건드리지 않는다(§1 주석). */ [data-doto-tone="gray"] .bg-white { background-color: var(--doto-gray-card, #EFF1F4) !important; } /* -------------------------------------------------------------------------- 3. 잉크가 «흰 판»으로 못 박은 뱃지 — 바탕만 내려앉으면 형광등처럼 도드라진다 -------------------------------------------------------------------------- */ [data-doto-tone="gray"] .badge[class*="badge-soft-"]:not(.rounded-pill), [data-doto-tone="gray"] .badge[class*="badge-status-"]:not(.rounded-pill), [data-doto-tone="gray"] .badge[class*="-subtle"]:not(.rounded-pill), [data-doto-tone="gray"] .badge.badge-tag { background-color: var(--doto-gray-card, #EFF1F4) !important; } /* -------------------------------------------------------------------------- 4. 흰색이 «리터럴»로 박힌 면 — 변수로는 못 닿는 자리 찾은 방법: ①밝게 상태의 CSS 를 전수로 훑어 배경이 흰색·크림인 규칙 110개를 뽑고 ②화면을 열어 밝기 244 이상인 «큰 면»을 실측으로 대조했다. 다크가 같은 자리를 이미 한 번 훑어 둔 덕에 명단이 겹친다(doto-dark.css §11·§13·§15). 🔴 넣지 않은 것 — 흰색이지만 그대로 둬야 맞는 자리: · 의미색 판 (#fff5f5 휴무·#fffbeb 이상·#eff6ff 연차 적음) — 색이 곧 뜻이다 · 지도 마커·오버레이 — 지도 타일은 테마와 무관하게 밝다 · 인쇄 미리보기(.print-viewer-*)·서명 캔버스 — 「종이에 나올 모습」이 목적인 면 · 아바타 테두리·파일 아이콘·체크 표시 같은 소품 — 회색 판 위에서 흰 점이 오히려 산다 -------------------------------------------------------------------------- */ /* 4-1. 카드 면 — 원래 순백이던 «담는 판» */ [data-doto-tone="gray"] .ink-subnav-expander, [data-doto-tone="gray"] #unifiedMenuOffcanvas, [data-doto-tone="gray"] .sub-menu .list-group, [data-doto-tone="gray"] .ink-pal, [data-doto-tone="gray"] .ink-pal-foot kbd, [data-doto-tone="gray"] .ink-focus-exit, [data-doto-tone="gray"] .main-content > .tab-content > .tab-pane > .card > .card-footer, [data-doto-tone="gray"] .main-content > form > .tab-content > .tab-pane > .card > .card-footer, [data-doto-tone="gray"] #calendar .fc-view-harness, [data-doto-tone="gray"] .notification-list, [data-doto-tone="gray"] .search-overlay-dialog, [data-doto-tone="gray"] .searchable-select-dropdown, [data-doto-tone="gray"] #chatMessages .accordion-button, [data-doto-tone="gray"] #chatMessages .accordion-button:not(.collapsed), [data-doto-tone="gray"] .journal-column, [data-doto-tone="gray"] .journal-arrow, [data-doto-tone="gray"] .kanban-home, [data-doto-tone="gray"] .chain-node-card, [data-doto-tone="gray"] .task-status-tabs .nav-link.active, [data-doto-tone="gray"] .task-swipe-item .list-group-item, [data-doto-tone="gray"] .task-card, [data-doto-tone="gray"] .quick-add-form, [data-doto-tone="gray"] .push-nudge-inner, [data-doto-tone="gray"] .official-doc-paper, [data-doto-tone="gray"] .doto-ai-input-area, [data-doto-tone="gray"] .doto-ai-input-area textarea, [data-doto-tone="gray"] .ps-speech-bubble, [data-doto-tone="gray"] .gantt-name-col, [data-doto-tone="gray"] .gantt-row .gantt-name-col { background-color: var(--doto-gray-card, #EFF1F4); } /* 4-2. 고정열·표의 빈 칸 — 가로로 긴 표에서 «자기 배경»을 갖는 자리라 리터럴 흰색이다. 여기가 남으면 표만 흰 띠로 도드라진다(근태·연차·급여 매트릭스가 전부 이 구조). */ [data-doto-tone="gray"] .att-matrix-scroll, [data-doto-tone="gray"] .att-matrix-name-col, [data-doto-tone="gray"] .att-matrix-summary-col, [data-doto-tone="gray"] .att-matrix-cell.status-empty, [data-doto-tone="gray"] .att-matrix-cell.approval-matrix-cell-empty, [data-doto-tone="gray"] .att-matrix-cell.leave-matrix-cell-empty, [data-doto-tone="gray"] .att-matrix-cell.partner-matrix-cell-empty, [data-doto-tone="gray"] .att-matrix-cell.vmx-cell-empty, [data-doto-tone="gray"] .payroll-ledger-table .pl-sticky, [data-doto-tone="gray"] .payroll-ledger-table .pl-sticky-end { background-color: var(--doto-gray-card, #EFF1F4); } /* 4-3. 카드보다 한 단 낮은 면 — 원래 #F8F9FA·#F4F5F7 계열이던 자리 (표 머리행·섹션 바닥·hover). 카드와 같은 값으로 올리면 위계가 무너진다. */ /* .sub-menu 는 §4-6 으로 옮겼다 — 잉크가 !important 로 박아 여기서는 안 걸린다 */ [data-doto-tone="gray"] .unified-menu-icon, [data-doto-tone="gray"] .ink-pal-foot, [data-doto-tone="gray"] .ink-focus-exit kbd, [data-doto-tone="gray"] .vehicle-photo-slot, [data-doto-tone="gray"] .search-overlay-kbd, [data-doto-tone="gray"] .searchable-select-footer, [data-doto-tone="gray"] .journal-column-header, [data-doto-tone="gray"] .chain-legend, [data-doto-tone="gray"] .chain-node.is-cancelled .chain-node-card, [data-doto-tone="gray"] .tax-invoice-label, [data-doto-tone="gray"] .task-status-tabs, [data-doto-tone="gray"] .task-card-done, [data-doto-tone="gray"] .withholding-preview .wh-report-table .wh-subtotal td, [data-doto-tone="gray"] .att-matrix-cell.aging-cell-no-due, [data-doto-tone="gray"] .att-matrix-cell.partner-matrix-cell-total, [data-doto-tone="gray"] .att-matrix-table .partner-matrix-summary-col, [data-doto-tone="gray"] .att-matrix-table .leave-matrix-summary-col, [data-doto-tone="gray"] .partner-matrix-totals, [data-doto-tone="gray"] .rp-matrix-totals, [data-doto-tone="gray"] .vl-preview-table thead th, [data-doto-tone="gray"] .gantt-header, [data-doto-tone="gray"] .gantt-header .gantt-name-col { background-color: var(--doto-gray-panel, #E7EAEF); } /* 4-4. 마우스를 올렸을 때 — 원래 «흰 판 위 옅은 회색»이라 회색 바탕에서는 안 보인다. 판이 내려온 만큼 hover 도 함께 내려야 «올렸다»는 신호가 남는다. */ [data-doto-tone="gray"] .nav-tabs .nav-link:hover:not(.active), [data-doto-tone="gray"] .nav-pills:not(.nav-pills-sm):not(.flex-column) .nav-link:hover:not(.active), [data-doto-tone="gray"] .master-list .list-item-row.unread:hover, [data-doto-tone="gray"] .master-list .list-group-item.unread:hover, [data-doto-tone="gray"] .master-row.is-unread:hover, [data-doto-tone="gray"] .chain-node-card:hover, [data-doto-tone="gray"] #mini-calendar .calendar-day:hover, [data-doto-tone="gray"] #compact-mini-calendar .calendar-day:hover, [data-doto-tone="gray"] .dropzone-sm:hover, [data-doto-tone="gray"] .dropzone-sm.dragover, [data-doto-tone="gray"] .task-status-btn:hover, [data-doto-tone="gray"] .task-card-body:hover, [data-doto-tone="gray"] .category-card:hover, [data-doto-tone="gray"] .gantt-row:hover, [data-doto-tone="gray"] .gantt-row:hover .gantt-name-col, [data-doto-tone="gray"] .tree-view.tree-light .tree-node-content:hover { background-color: var(--doto-gray-hover, #DCE0E6); } /* 4-5. 매뉴얼 안의 화면 모형 — 도토 화면을 그림으로 그린 것이라, 흰색으로 두면 매뉴얼만 밝게 화면처럼 남는다. */ [data-doto-tone="gray"] .manual-figure, [data-doto-tone="gray"] .manual-feedback button, [data-doto-tone="gray"] .mock-caption, [data-doto-tone="gray"] .mock-master, [data-doto-tone="gray"] .mock-detail, [data-doto-tone="gray"] .mock-stack, [data-doto-tone="gray"] .mock-card, [data-doto-tone="gray"] .mock-btn-outline, [data-doto-tone="gray"] .mock-tabs, [data-doto-tone="gray"] .mock-toolbar, [data-doto-tone="gray"] .mock-sidebar, [data-doto-tone="gray"] .mock-kanban-card { background-color: var(--doto-gray-card, #EFF1F4); } [data-doto-tone="gray"] .mock-frame, [data-doto-tone="gray"] .mock-grid, [data-doto-tone="gray"] .mock-header, [data-doto-tone="gray"] .mock-table th, [data-doto-tone="gray"] .mock-field-input, [data-doto-tone="gray"] .mock-search, [data-doto-tone="gray"] .mock-footer, [data-doto-tone="gray"] .mock-body-section, [data-doto-tone="gray"] .mock-kanban { background-color: var(--doto-gray-panel, #E7EAEF); } /* -------------------------------------------------------------------------- 4-6. 🔴 좌측 서브메뉴 — 밝게 값이 통째로 남아 있던 자리 §4-3 이 .sub-menu 를 목록에 넣어 뒀는데도 «데스크톱에서만» 안 걸렸다. 잉크가 @media (min-width: 992px) 안에서 background-color: #F4F5F7 !important 로 박아 두었기 때문(style.css 가 lg 에서 transparent 로 중립화하는 것을 되살리려고 같은 무기를 쓴 자리다). 폭 992px 미만 서랍만 회색으로 내려가 있었다. 그 결과 세 가지가 어긋나 있었다(1440px 실측): ① 좌측 레일 #F4F5F7 이 화면에서 «가장 밝은 면»으로 남았다 — 본문 카드(#EFF1F4) 보다도 밝아 시선이 왼쪽으로 쏠린다. ② 위계가 뒤집혔다. 밝게에서는 레일(#F4F5F7) < 그룹 패널(#fff) 이라 패널이 «떠 보였는데», 패널만 회색으로 내려가 레일(245) > 패널(239) 이 됐다. ③ hover(#F0F1F3=240)가 패널(239)보다 «밝아» 마우스를 올린 신호가 사라졌다. 고치는 방법은 밝게의 «차이»를 그대로 옮기는 것이다 — 레일은 패널보다 한 단 어둡고, hover 는 패널보다 한 단, active 는 두 단 어둡다. -------------------------------------------------------------------------- */ [data-doto-tone="gray"] { /* 눌린 행 — hover 보다 한 단 더 (밝게의 #E8EAED 자리) */ --doto-gray-active: #D4D9E1; } /* 레일 — 잉크가 !important 로 박았으니 같은 무기가 필요하다. 미디어쿼리 밖에 두어 서랍(<992px)과 레일(≥992px)이 같은 값을 갖게 한다. */ [data-doto-tone="gray"] .sub-menu { background-color: var(--doto-gray-panel, #E7EAEF) !important; } /* 마우스를 올린 행 — 밝게의 #F0F1F3 자리 */ [data-doto-tone="gray"] .sub-menu .list-group-item:hover, [data-doto-tone="gray"] .sub-menu .subnav-split-main:hover, [data-doto-tone="gray"] .sub-menu .border-top a.small.d-block:hover, [data-doto-tone="gray"] .sub-menu .border-top button.subnav-locked:hover, [data-doto-tone="gray"] .sub-menu .btn-group-sm > .btn { background-color: var(--doto-gray-hover, #DCE0E6); } [data-doto-tone="gray"] .sub-menu .subnav-split-aside:hover, [data-doto-tone="gray"] .sub-menu .btn-group-sm > .btn:hover { background-color: #D1D6DD; } /* 지금 보고 있는 행 — 밝게의 #E8EAED 자리. 채움 단계가 바탕 < hover < active 로 밝게와 «같은 방향»을 유지한다(회색: 231 < 220 < 212). */ [data-doto-tone="gray"] .sub-menu .list-group-item.active, [data-doto-tone="gray"] .sub-menu .subnav-split:has(.subnav-split-main.active), [data-doto-tone="gray"] .sub-menu .border-top a.small.d-block.fw-semibold, [data-doto-tone="gray"] .sub-menu .btn-group-sm > .btn.active { background-color: var(--doto-gray-active, #D4D9E1); } /* 건수 알약 — 잉크가 «흰 칩 + 헤어라인»으로 만든 자리(.badge-soft-primary/secondary/ info/success 넷만 흰 판이고, danger·warning 은 색 판이라 건드리면 안 된다). 밝게에서는 흰 카드 위 흰 칩이라 테두리로만 보였는데, 회색 판 위에 남으니 형광 점처럼 튄다(서브메뉴 건수·받은편지함 34 가 그 자리). 다크가 이미 같은 넷만 카드색으로 내려 둔 선례를 따른다(doto-dark.css). 🔴 §3 이 :not(.rounded-pill) 로 알약을 통째로 제외해 여기까지 못 닿았다 — 색 판인 danger·warning 을 지키려던 제외였다. */ [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-primary, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-secondary, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-info, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-success { background-color: var(--doto-gray-card, #EFF1F4) !important; /* 잉크가 !important 라 같은 무기 */ } /* -------------------------------------------------------------------------- 5. 에디터 종이 — 글을 쓰는 동안 눈에 가장 오래 닿는 흰 면 🔴 여기가 회색이 다크보다 «쉬운» 자리다. 다크는 종이를 어둡게 하면 사용자가 고른 글자색(빨강 2.58:1 등)이 안 읽혀 「종이색 바꾸기」 탈출구를 따로 만들어야 했다. 회색은 종이가 여전히 밝아서 **어떤 글자색도 그대로 읽힌다** — 뒤집는 게 아니라 한 단 낮추는 것뿐이라, 색을 건드릴 일이 아예 없다. 그래도 「종이색 바꾸기」는 존중한다 — 그 버튼은 테마와 무관하게 툴바에 늘 붙어 있고, 눌러서 흰 종이로 두는 사람이 회색에서도 있을 수 있다(저장 위치는 브라우저 localStorage). 🔴 저장되는 HTML 은 한 글자도 바뀌지 않는다 — 화면에만 거는 표시다. -------------------------------------------------------------------------- */ [data-doto-tone="gray"]:not(.doto-editor-paper-light) .doto-editor { background: var(--doto-gray-card, #EFF1F4); } [data-doto-tone="gray"]:not(.doto-editor-paper-light) .doto-editor-toolbar { background: var(--doto-gray-panel, #E7EAEF); } [data-doto-tone="gray"]:not(.doto-editor-paper-light) .editor-paper-a4 .doto-editor-content { background: var(--doto-gray-page, #DFE3E9); } /* 🔴 「A4 용지로 보기」는 .ProseMirror 가 자기 배경을 #fff 로 다시 박는다(더 좁은 선택자). 여기를 안 잡으면 전자결재·공문 작성창만 흰 종이로 남는다 — 다크가 밟았던 자리. */ [data-doto-tone="gray"]:not(.doto-editor-paper-light) .editor-paper-a4 .doto-editor-content .ProseMirror { background-color: var(--doto-gray-card, #EFF1F4); } /* 읽는 화면의 본문 — 쓰는 사람은 일부, 읽는 사람은 전부다(다크 §13.5 와 같은 이유). 게시판·공문·전자결재 본문이 카드 안에서 «자기 흰 판»을 갖는 자리. */ [data-doto-tone="gray"] .post-content, [data-doto-tone="gray"] .doc-content, [data-doto-tone="gray"] .document-content-body { background-color: var(--doto-gray-card, #EFF1F4); } /* -------------------------------------------------------------------------- 6. 🔴 글자 — 「회색은 글자를 안 건드린다」가 반만 맞았다 판을 12% 낮추면 그 위 글자의 대비도 같은 비율로 깎인다. 본문 글자(#1F2937)는 14.7:1 → 13.0:1 이라 아무 문제가 없지만, **흰 판 전제로 겨우 4.5:1 을 넘던 색**은 기준 아래로 내려간다. 실측(대시보드·직원목록·근태·일정): #6c757d 열제목·부제 4.69 → 4.14 #6B7280 잉크 회색 딱지 4.83 → 4.27 #0d6efd 파랑(토요일) 4.50 → 3.98 #dc3545 빨강(일요일) 4.53 → 4.00 판을 밝혀서는 못 푼다 — #6c757d 가 4.5 를 지키려면 바탕이 #FAFAFA(거의 흰색)여야 한다. 그래서 **경계에 있던 색만** 한 단 진하게 한다. 색을 «바꾸는» 게 아니라 판이 내려간 만큼 따라 내리는 것이라, 밝게와 나란히 놓아도 같은 색으로 읽힌다. 🔴 --bs-secondary-rgb 로 뭉뚱그리지 않는다 — 그 토큰은 .bg-secondary 판으로도 쓰여 (이니셜 아바타) 글자 생각으로 내리면 판까지 어두워진다. 글자 자리만 좁혀 잡는다. -------------------------------------------------------------------------- */ [data-doto-tone="gray"], [data-doto-tone="gray"] [data-bs-theme="light"] { /* 열제목·부제·날짜를 칠하는 토큰 하나 — 여기가 가장 넓다 */ --doto-text-subtle: #5C636A; /* 회색 카드 위 5.38:1 */ } /* 🔴 손대지 «않는» 유틸 — 잉크가 이미 진한 값으로 바꿔 놨다. 부트스트랩 기본값을 전제로 보정하면 오히려 대비를 깎는다. 실측(밝게 흰판 → 회색 카드): .text-muted / .text-body-secondary rgba(31,41,55,.75) 14.68 → 12.99 (여유) .text-primary #0A0A0A 잉크 검정 19.80 → 17.51 (여유) .text-danger #CD0200 5.83 → 5.15 (여유) 처음엔 이 셋을 «올린다»고 #5C636A·#0B5ED7·#C82333 을 넣었는데, 재 보니 전부 원래 색보다 «흐린» 값이었다 — 넣는 순간 개악이었다. 잰 뒤에 고칠 것. */ [data-doto-tone="gray"] .text-secondary, [data-doto-tone="gray"] .badge.badge-tag { color: #5A6270 !important; /* 4.83 → 5.43:1 (원래보다 진하다 — 실측 확인) */ } /* 🔴 의미색 셋은 «밝게에서도» 기준 미달이다 — 회색이 만든 결함이 아니라 잉크 팔레트가 원래 갖고 있던 것이다(흰 판에서 warning 3.31 · info 3.00 · success 2.68). 회색이 판을 낮춰 3:1 선까지 무너뜨리므로, **글자 자리에서만** 3:1 을 되찾는 값으로 둔다. 판(.bg-success 등)은 건드리지 않는다 — 그 위에는 흰 글자가 얹힌다. ▶ 밝게 쪽 같은 결함은 이번 범위 밖이다(오너 판단 필요 — 의미색을 바꾸는 일이라 별건). */ [data-doto-tone="gray"] .text-warning { color: #B36400 !important; /* 2.93 → 3.91(카드) / 3.44(바탕) */ } [data-doto-tone="gray"] .text-info { color: #1B7FD4 !important; /* 2.65 → 3.69 / 3.24 */ } [data-doto-tone="gray"] .text-success { color: #2E8B18 !important; /* 2.37 → 3.62 / 3.18 */ } /* 달력 요일색 — FullCalendar 가 부트스트랩 링크색을 그대로 쓴다(토 파랑·일 빨강). 해시 클래스라 셀렉터로 못 짚고, 요일 축은 fc- 접두 구조로 잡는다. */ [data-doto-tone="gray"] .fc .fc-day-sat a, [data-doto-tone="gray"] .fc .fc-day-sat .fc-daygrid-day-number { color: #0B5ED7 !important; } [data-doto-tone="gray"] .fc .fc-day-sun a, [data-doto-tone="gray"] .fc .fc-day-sun .fc-daygrid-day-number { color: #C82333 !important; } /* 🔴 대시보드 «미니 캘린더»(.calendar-day)는 건드리지 않는다. 토·일에 색을 박았더니 더 좁은 규칙이 칠하던 「오늘」 칸까지 덮어 18.15:1 → 4.35:1 로 떨어뜨렸다. 요일 머리글도 마찬가지 — 한 클래스가 평일 회색과 일요일 빨강을 함께 쓴다. 여기 남는 4.0~4.3:1 은 아래 §8 에 «남은 한계»로 적어 둔다. */ [data-doto-tone="gray"] .fc .fc-week-number-label, [data-doto-tone="gray"] .fc .fc-col-header-cell-cushion { color: #5C636A; } /* 테두리형 경고 버튼 — 밝게에서도 3.31:1 로 이미 낮던 자리다(회색에서 2.93 으로 내려간다). 회색에서만 한 단 진하게 해 3:1 은 지킨다. 🔴 이 색의 본래 결함은 밝게에도 남아 있다. */ [data-doto-tone="gray"] .btn-outline-warning { --bs-btn-color: #B36400; --bs-btn-hover-bg: #B36400; --bs-btn-hover-border-color: #B36400; } /* -------------------------------------------------------------------------- 7. 🔴 남은 한계 — 고치지 «못한» 것이 아니라 고치지 «않기로» 한 것 실측 9화면에서 3:1 아래로 내려간 자리는 0 이다. 다만 4.5:1 을 겨우 넘던 보조 글자 몇 종은 회색에서 4.0~4.3 으로 내려간다. 전부 «밝게에서도 아슬아슬하던» 색이다: · 대시보드 미니 캘린더 — 요일 머리글(4.69→4.14) · 토·일·공휴일 날짜(4.53→4.00) · 탭 라벨 .nav-link 비활성(4.83→4.27) 잡으려면 한 클래스가 평일 회색과 일요일 빨강을 함께 쓰는 자리에 색을 박아야 하는데, 실제로 그렇게 했다가 더 좁은 규칙이 칠하던 「오늘」 칸을 덮어 18.15:1 → 4.35:1 로 떨어뜨렸다. **판을 밝혀서 푸는 길도 없다** — #6c757d 가 4.5 를 지키려면 바탕이 #FAFAFA 여야 해서, 어떤 회색 모드에서도 이 색은 기준을 못 넘는다. 근본 해법은 도토 전역의 «흐린 회색 글자» 팔레트를 한 단 내리는 것이고, 그건 밝게까지 바꾸는 별개 작업이다(오너 판단 필요). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 8. 🔴 인쇄·PDF 는 언제나 흰 종이 — 종이는 회색이 아니다. 다크 §12 와 같은 규칙. 화면 테마가 발송물·인쇄물을 바꾸면 안 된다. -------------------------------------------------------------------------- */ @media print { [data-doto-tone="gray"], [data-doto-tone="gray"] [data-bs-theme="light"] { --doto-surface: #fff; --doto-surface-subtle: #f8f9fa; --doto-surface-hover: #e9ecef; --doto-border: #dee2e6; --bs-body-bg: #fff; --bs-body-bg-rgb: 255, 255, 255; --bs-white: #fff; --bs-white-rgb: 255, 255, 255; --bs-tertiary-bg: #fafafa; --bs-secondary-bg: #f4f5f7; --bs-light: #fafafa; --bs-border-color: #e5e7eb; --bs-border-color-translucent: #e5e7eb; } [data-doto-tone="gray"] .main-layout, [data-doto-tone="gray"] .content-area, [data-doto-tone="gray"] .dashboard-content-area, [data-doto-tone="gray"] body { background-color: #fff !important; } /* §4-6 이 !important 로 낮춘 레일·알약도 인쇄에서는 되돌린다 */ [data-doto-tone="gray"] .sub-menu, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-primary, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-secondary, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-info, [data-doto-tone="gray"] .badge.rounded-pill:not(.filter-chip).badge-soft-success { background-color: #fff !important; } /* §4 에서 리터럴로 낮춘 «종이·표»도 인쇄에서는 되돌린다 — 토큰을 되돌리는 것만으로는 안 닿는다(그 규칙들이 색을 직접 칠하기 때문). 공문 종이·매트릭스 고정열이 여기. */ [data-doto-tone="gray"] .official-doc-paper, [data-doto-tone="gray"] .att-matrix-scroll, [data-doto-tone="gray"] .att-matrix-name-col, [data-doto-tone="gray"] .att-matrix-summary-col, [data-doto-tone="gray"] .att-matrix-cell.status-empty, [data-doto-tone="gray"] .att-matrix-cell.approval-matrix-cell-empty, [data-doto-tone="gray"] .att-matrix-cell.leave-matrix-cell-empty, [data-doto-tone="gray"] .att-matrix-cell.partner-matrix-cell-empty, [data-doto-tone="gray"] .att-matrix-cell.vmx-cell-empty, [data-doto-tone="gray"] .payroll-ledger-table .pl-sticky, [data-doto-tone="gray"] .payroll-ledger-table .pl-sticky-end, [data-doto-tone="gray"] .journal-column, [data-doto-tone="gray"] .kanban-home, [data-doto-tone="gray"] .task-card, [data-doto-tone="gray"] .gantt-name-col, [data-doto-tone="gray"] .gantt-row .gantt-name-col { background-color: #fff !important; } [data-doto-tone="gray"] .doto-editor, [data-doto-tone="gray"] .editor-paper-a4 .doto-editor-content, [data-doto-tone="gray"] .editor-paper-a4 .doto-editor-content .ProseMirror, [data-doto-tone="gray"] .post-content, [data-doto-tone="gray"] .doc-content, [data-doto-tone="gray"] .document-content-body { background-color: #fff !important; } [data-doto-tone="gray"] .journal-column-header, [data-doto-tone="gray"] .vl-preview-table thead th, [data-doto-tone="gray"] .gantt-header, [data-doto-tone="gray"] .gantt-header .gantt-name-col, [data-doto-tone="gray"] .att-matrix-table .partner-matrix-summary-col, [data-doto-tone="gray"] .att-matrix-table .leave-matrix-summary-col, [data-doto-tone="gray"] .partner-matrix-totals, [data-doto-tone="gray"] .rp-matrix-totals, [data-doto-tone="gray"] .withholding-preview .wh-report-table .wh-subtotal td { background-color: #f8f9fa !important; } }