/* ══════════════════════════════════════════════════════ MHSS overrides — 역할 메뉴 게이팅 · 테마전환 · 셸 보정 (agmap 5-overrides 143KB 중 골격에 필요한 규칙만 발췌·재작성) ══════════════════════════════════════════════════════ */ /* ── 역할별 메뉴 게이팅 (theme.js 가 를 CSS 보다 먼저 주입) ── MHSS 4역할 — 모두 동일한 사이드바 셸을 공유, 메뉴만 역할별로 게이팅 data-admin-only → ADMIN 만 data-manager-only → ADMIN + MANAGER (관리자는 담당자 메뉴 상위집합) data-surveyor-only → SURVEYOR + USER (조사원/일반 — 현장조사 메뉴) */ [data-admin-only], [data-manager-only], [data-surveyor-only] { display: none; } html[data-role="ADMIN"] [data-admin-only], html[data-role="ADMIN"] [data-manager-only], html[data-role="MANAGER"] [data-manager-only], html[data-role="SURVEYOR"] [data-surveyor-only], html[data-role="USER"] [data-surveyor-only] { display: block; } /* ── 테마 전환 순간 transition 차단 (깜빡임 방지) ── data-theme 전환 시 배경·글자·테두리를 애니메이션하는 규칙들이 제각각 물드는 것을 막는다. theme.js 가 전환 한 프레임만 html.theme-switching 을 부여. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } /* ── 헤더 역할 칩 색상 (agmap 은 전부 blue 하드코딩 → MHSS 는 역할별 색) ── ADMIN=purple, MANAGER=cyan, SURVEYOR=blue */ .role-chip[data-role="ADMIN"] { background: var(--pu2); color: var(--purple); } .role-chip[data-role="MANAGER"] { background: var(--cy2); color: var(--cyan); } .role-chip[data-role="SURVEYOR"] { background: var(--bl2); color: var(--blue); } /* ── 브랜드색 적용 (agmap 은 green 을 브랜드+상태 겸용 → MHSS 는 --brand 로 분리) ── 다크=카퍼, 라이트=그린. green 은 상태(완료) 전용으로 남긴다. */ .nav.on { background: var(--brand2); color: var(--brand); } .btn:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--bd2)); } .btn-p { background: var(--brand2); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--brand); } .btn-p:hover { background: color-mix(in srgb, var(--brand) 25%, transparent); } /* 사이드바 로고 아이콘 — 브랜드 그라데이션 */ .sb-logo-ic { background: linear-gradient(135deg, var(--brand), #0e9384); box-shadow: 0 0 12px rgba(45,212,191,0.28); } [data-theme="light"] .sb-logo-ic { background: linear-gradient(135deg, var(--brand), #0f5f28); box-shadow: none; } /* ── shimmer 스켈레톤 모드 분기 (라이트에서 흰줄 방지) ── */ .skel-line::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); } [data-theme="light"] .skel-line::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent); }