/* * WayMCMS.Console — 마스터 관리 "운영 콘솔" 테마 * Tabler(Bootstrap 5) 위에 연한 파랑(azure) 액센트로 테넌트 관리자와 시각 구분. * * 라이트/다크 전환은 로 Tabler 네이티브 테마에 맡긴다. * (본문·카드·표면 색은 여기서 고정하지 않는다 — 고정하면 다크가 깨진다.) * 사이드바는 서버 관리자와 동일하게 항상 다크(aside data-bs-theme="dark"). * 여기서는 ①연파랑 액센트 ②브랜드/상단바 ③사이드바 활성강조 ④배지 대비만 손본다. */ :root { /* 운영 정체성: 연한 파랑 액센트 — 테마 무관 (Tabler 팔레트 $azure) 밝은 색이라 그 위 글자는 흰색이 아니라 진한색이어야 읽힌다(아래 --tblr-primary-fg). */ --tblr-primary: #4299e1; --tblr-primary-rgb: 66, 153, 225; --tblr-primary-fg: #10243a; --ops-accent: #4299e1; /* 액센트를 "면"이 아니라 "글자·테두리"로 쓸 때의 색. 배경이 밝으면 진하게, 어두우면 밝게 — 방향이 반대라 테마별로 갈린다. (라이트에서 연파랑 원색을 글자로 쓰면 흰 배경 대비 3:1 로 흐리다.) */ --ops-accent-on-surface: #1a77cc; /* 흰 배경 대비 4.6:1 */ --ops-accent-solid: #1a77cc; /* 흰 글자를 얹는 면(버튼·배지) — 테마 무관 */ } [data-bs-theme="dark"] { --ops-accent-on-surface: #74c0fc; /* 다크 표면 대비 ~7.8:1 */ } /* 브랜드 영역 (항상-다크 사이드바 위 → 밝은 글자) */ .ops-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .02em; color: #f8fafc; text-decoration: none; } .ops-brand .ops-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .4rem; /* 글리프는 흰색. 연파랑 원색 위 흰색은 대비가 얕아(≈3:1) 그라디언트를 조금 더 진한 파랑 구간으로 잡아 아이콘이 또렷하게 보이도록 한다. */ background: linear-gradient(135deg, #3b8fd4, #1864ab); color: #fff; font-size: 1rem; } /* 상단바 — 계정/로그아웃/테마토글. 표면·경계선은 Tabler 변수로 테마 추종 */ .ops-topbar { background-color: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); font-size: .8125rem; padding: .3rem 0; } .ops-topbar .nav-link { color: var(--tblr-secondary); } .ops-topbar .nav-link:hover { color: var(--tblr-body-color); } /* 사이드바 메뉴 하단 여백 — 브라우저 링크-호버 상태표시줄(좌하단)이 맨 아래 메뉴 항목을 가리지 않도록 공간을 둔다. */ .navbar-vertical .navbar-nav { padding-bottom: 3rem; } /* 사이드바 활성 항목 강조 (다크 사이드바 → 밝은 글자 + 연파랑 강조) */ .navbar-vertical .nav-link.active { color: #fff; font-weight: 600; background-color: rgba(66, 153, 225, .18); box-shadow: inset 3px 0 0 var(--ops-accent); } .navbar-vertical .nav-link .nav-link-icon { color: var(--ops-accent); } /* 메뉴 그룹(드롭다운) — 사이드바에서는 펼쳐진 목록으로 그려진다. 그룹 자체는 왼쪽 3px 띠로 묶어 보이고(li.active), 그 안의 현재 항목만 배경으로 강조한다. 띠를 항목에도 또 넣으면 같은 자리에 두 번 겹치므로 여기서는 배경만 쓴다. */ .navbar-vertical .dropdown-item .nav-link-icon { color: var(--ops-accent); width: 1.25rem; margin-right: .5rem; text-align: center; } .navbar-vertical .dropdown-item.active, .navbar-vertical .dropdown-item:active { color: #fff; font-weight: 600; background-color: rgba(66, 153, 225, .18); } /* 그룹 머리(토글)는 링크가 아니라 여닫이라서, 하위가 열려 있어도 항목만큼 튀지 않게 둔다 */ .navbar-vertical .nav-item.active > .nav-link.dropdown-toggle { color: #fff; font-weight: 600; } /* 표는 카드 배경을 그대로 쓰도록(테마 추종) */ .table { --tblr-table-bg: transparent; } /* 대시보드 카드 hover 강조 */ a .card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } a:hover .card { border-color: var(--ops-accent); box-shadow: 0 .25rem .75rem rgba(66, 153, 225, .20); transform: translateY(-2px); } /* 버튼 primary — 흰 글자. 액센트 원색(#4299e1)은 밝아서 흰 글자가 3:1 밖에 안 나온다(본문 기준 4.5:1 미달). 그래서 "버튼 표면만" 한 단계 진한 파랑으로 내려 흰 글자가 4.6:1 이 되게 한다. ★ --tblr-btn-bg 를 덮으면 hover/active 는 var(--tblr-primary-darken)(= 액센트 원색 기반의 더 밝은 색)으로 남아 대비가 도로 무너진다. hover/active/disabled 까지 함께 지정해야 하는 이유. */ .btn-primary { --tblr-btn-color: #fff; --tblr-btn-hover-color: #fff; --tblr-btn-active-color: #fff; --tblr-btn-disabled-color: #fff; --tblr-btn-bg: var(--ops-accent-solid); --tblr-btn-hover-bg: #1668b5; --tblr-btn-active-bg: #145a9e; --tblr-btn-disabled-bg: var(--ops-accent-solid); font-weight: 600; } /* outline primary — 글자·테두리가 표면 위에 놓이므로 테마별 액센트를 쓴다. hover 는 면이 차오르는 형태라 그때부터는 솔리드 규칙(진한 파랑 + 흰 글자). */ .btn-outline-primary { --tblr-btn-color: var(--ops-accent-on-surface); --tblr-btn-border-color: var(--ops-accent-on-surface); --tblr-btn-hover-color: #fff; --tblr-btn-hover-bg: var(--ops-accent-solid); --tblr-btn-hover-border-color: var(--ops-accent-solid); --tblr-btn-active-color: #fff; --tblr-btn-active-bg: #145a9e; --tblr-btn-active-border-color: #145a9e; --tblr-btn-disabled-color: var(--ops-accent-on-surface); --tblr-btn-disabled-border-color: var(--ops-accent-on-surface); } /* Tabler v1.4의 .badge 기본 글자색이 회색(--tblr-secondary)이라, 솔리드 컬러 배지에서 글자가 거의 안 보인다(예: bg-blue 파랑·bg-red 빨강 위 회색 ≈1.6:1). 솔리드 배지 글자색을 배경 밝기에 맞춰 강제한다. (bg-*-lt 라이트 변형은 자체 대비가 좋아 안 건드림 — CSS 토큰상 .bg-red 는 .bg-red-lt 를 매치하지 않음. 뷰에서 text-dark/text-white 를 직접 준 곳은 그 !important 유틸이 우선.) */ .badge.bg-blue, .badge.bg-azure, .badge.bg-indigo, .badge.bg-purple, .badge.bg-pink, .badge.bg-red, .badge.bg-green, .badge.bg-teal, .badge.bg-cyan, .badge.bg-success, .badge.bg-danger, .badge.bg-secondary, .badge.bg-dark { color: #fff; } .badge.bg-lime { color: #1a1d21; } /* 주황은 예외 — 검은 글자가 산술로는 4.7:1 로 통과하지만, 채도 높은 주황 위에서는 실제로 읽히지 않는다(2026-09-02 현장 지적: /Build/Detail 의 「준비」 배지). 라임은 훨씬 밝아 검은 글자가 자연스럽지만 주황은 그 중간이라 양쪽 다 애매하다. → bg-primary 와 같은 방법으로 표면을 한 단계 내리고 흰 글자로 바꾼다(흰 글자 5.0:1). ★ 붉은 쪽(#c2410c)이 아니라 호박색 쪽으로 내린다 — 붉게 내리면 옆의 bg-danger(#d63939)와 헷갈린다. ★ .bg-orange 유틸의 background-color 는 !important 라 직접 못 덮는다. 그 유틸이 참조하는 변수를 배지 안에서만 재정의해 우회한다(rgb 판본·color-mix 판본 둘 다). */ .badge.bg-orange { --tblr-orange: #b45309; --tblr-orange-rgb: 180, 83, 9; color: #fff; } /* 노랑(yellow·warning) 배지도 주황과 같이 맞춘다(2026-09-02). 노랑+검정은 6.8:1 로 수치는 낮지 않지만, 바로 옆 주황 배지가 호박색+흰 글자가 되면서 같은 '주의' 계열인데 글자색이 반대가 되어 화면이 두 벌로 보인다. 계열을 하나로 통일한다. ★ 뷰에서 붙이던 `text-dark` 는 함께 걷어냈다 — 그 유틸은 !important 라 글자색을 여기서 못 이긴다. 새로 배지를 쓸 때 bg-yellow/bg-warning 에 text-dark 를 다시 붙이지 말 것. ★ `:not(.text-dark)` 로 잠근 이유: CSS 는 정적 파일이라 즉시 바뀌지만 뷰는 어셈블리에 컴파일돼 들어간다. 둘이 어긋나는 동안(배포 순서·로컬 미재시작) text-dark 가 남은 배지는 배경만 진해지고 글자는 검은색이라 2.2:1 로 더 안 보이게 된다. 이 가드가 있으면 그 구간에는 예전 노랑(6.8:1) 그대로 남아 있다가, 뷰가 따라온 뒤에 호박색으로 바뀐다. ★ 라임(bg-lime)은 초록 계열이라 검은 글자를 유지한다(흰 글자면 2.6:1). */ .badge.bg-yellow:not(.text-dark), .badge.bg-warning:not(.text-dark) { --tblr-yellow: #b45309; --tblr-yellow-rgb: 180, 83, 9; --tblr-warning: #b45309; --tblr-warning-rgb: 180, 83, 9; color: #fff; } /* 노랑(warning) 버튼은 배지보다 더 나쁘다 — 양쪽 변형이 다 안 읽힌다(2026-09-02 현장 지적: /Support/Detail 의 「보류」 버튼). · .btn-warning : Tabler 가 글자를 --tblr-warning-fg(=거의 흰색)로 준다 → 노랑 위 흰 글자 2.0:1 · .btn-outline-warning: 글자가 노랑 원색 그대로 → 흰 카드 위 2.2:1 배지에서 주황을 호박색으로 내린 것과 같은 방법으로, 버튼 안에서만 색을 내리고 흰 글자로 맞춘다. (채움 5.0:1 / 외곽선 글자 5.0:1. 호버로 채워질 때도 흰 글자가 유지된다.) ★ .text-warning · .alert-warning · 진행바 등 다른 warning 은 건드리지 않는다 — 버튼만 좁게 잡는다. */ .btn-warning, .btn-outline-warning { --tblr-warning: #b45309; --tblr-warning-rgb: 180, 83, 9; --tblr-warning-fg: #fff; --tblr-warning-darken: #92400e; } /* 다크에서는 반대가 된다 — 어두운 표면 위의 진한 호박색 글자는 3.5:1 로 묻힌다. 외곽선 버튼의 '쉬는 상태' 글자색만 다시 밝게 올린다. ★ 채움색(--tblr-warning)은 그대로 두어야 호버로 채워졌을 때 흰 글자가 5.0:1 을 유지한다. */ [data-bs-theme="dark"] .btn-outline-warning { --tblr-btn-color: #f0a83a; } /* bg-primary 배지도 흰 글자로 통일. 액센트 원색은 밝아 흰 글자가 3:1 뿐이므로 btn-primary 와 같은 진한 파랑으로 표면을 내린다. ★ .bg-primary 유틸의 background-color 는 !important 라 직접 못 덮는다. 대신 그 유틸이 참조하는 변수를 배지 안에서만 재정의해 우회한다 (Tabler 는 --tblr-primary-rgb 판본과 color-mix 판본 둘 다 쓰므로 둘 다 지정). */ .badge.bg-primary { --tblr-primary: #1a77cc; --tblr-primary-rgb: 26, 119, 204; color: #fff; } /* .text-primary 는 액센트 원색을 글자로 쓴다 — 라이트에서 3:1 로 흐리고, 다크에서는 반대로 너무 어둡다. 표면 대비를 맞춘 토큰으로 돌린다. (유틸이 !important 라 여기도 !important 가 필요하다.) */ .text-primary { color: var(--ops-accent-on-surface) !important; } /* 상단바 역할 배지(superadmin 등)가 baseline 정렬 때문에 글자보다 아래로 처지는 것 보정 */ .ops-topbar .badge { vertical-align: middle; } /* ── .alert 안의 글자가 세로로 찌그러지는 것 ────────────────────────────── Tabler v1.4의 `.alert` 는 `display:flex; flex-direction:row; gap:1rem` 이다. 아이콘 칸 + 본문 칸을 나란히 두는 구조(.alert-icon / .alert-heading / .alert-description)를 전제한 것인데, 우리 뷰는 대부분 `
` 안에 그냥 문장을 쓴다. 그러면 `` · `` · 그 뒤 텍스트가 **각각 별개의 flex 아이템**이 되어 좁은 칸으로 쪼개진다 — 짧은 제목일수록 심해서 「드리프트 3건」이 「드리프 / 트 3 / 건」 세 줄로 접힌다 (2026-09-12 현장 지적: /SchemaMigration 의 드리프트 안내). ★ 뷰를 고치는 게 아니라 여기서 한 줄로 되돌린다 — 같은 모양의 alert 가 콘솔에 54곳이고, 새로 쓸 때마다 또 걸린다. 사람이 매번 기억해야 하는 규칙은 반드시 새어 나간다. ★ 안전한 이유: 콘솔은 `.alert-icon` · `.alert-heading` · `.alert-description` · `.alert-dismissible` · `.alert-important` 를 **한 곳도 쓰지 않는다**(2026-09-12 전수 확인). flex 행 배치에 의존하는 곳이 없다. 닫기 버튼은 `position:absolute` 라 display 와 무관하다. ★ 아이콘 칸 구조가 필요하면 `.alert` 안에 `d-flex` 를 명시적으로 쓸 것 — 기본값에 기대지 말고. */ .alert { display: block; } /* ── 다크 테마 가독성 보정 ────────────────────────────────────────────── Tabler v1.4는 다크에서 --tblr-body-color / --tblr-secondary-color 는 밝게 재정의하지만 `.text-muted` 가 참조하는 --tblr-muted 는 재정의하지 않아 라이트용 중간회색이 그대로 남아 대비가 부족하다(≈3.6:1). 뷰에 흩어진 .text-muted 를 일일이 고치는 대신 여기서 테마 인식 색으로 매핑한다. */ [data-bs-theme="dark"] { /* --tblr-muted 자체를 밝은 회색으로 올려, 변수를 직접 쓰는 곳도 함께 개선 */ --tblr-muted: #9aa4b2; } [data-bs-theme="dark"] .text-muted { color: var(--tblr-secondary-color) !important; /* rgba(229,231,235,.75) — 다크 배경 대비 ~7:1 */ } /* 상단바 테마 토글 버튼: 라이트/다크 모두에서 또렷하게 */ .ops-topbar [data-master-theme-toggle] { color: var(--tblr-secondary); cursor: pointer; } .ops-topbar [data-master-theme-toggle]:hover { color: var(--ops-accent); }