/* ===================== 두 화면의 무게 ===================== /agent 와 /manager 는 같은 파일을 쓰기 때문에, 메뉴만 갈라놓으면 "내가 지금 어느 쪽에 있는지"가 한눈에 안 옵니다. 뒤로가기를 몇 번 누르다 보면 방금 본 화면이 설계사 쪽이었는지 매니저 쪽이었는지 헷갈립니다. 그래서 색을 새로 들이지 않고 **무게**로 나눕니다. 매니저 잉크색 헤더. 익명 안내 띠까지 이어져 위쪽이 통째로 어둡습니다. 이직은 숨어서 알아보는 일입니다. 무거운 화면이 그 정서에 맞습니다. 설계사 흰 헤더에 또렷한 가로선. 자료를 펼쳐놓고 보는 자리라 밝아야 하고, 선이 그어진 서류 같은 인상이 공시이율·보험료 표와 맞습니다. ⚠️ 색을 하나 더 들이지 않은 것은 의도입니다. 이 사이트는 "색이 튀는 곳은 누르는 자리 한 군데뿐"이라는 규칙으로 만들어져 있습니다(css/style.css 머리말). 설계사에게 청록, 매니저에게 주황 식으로 나누면 그 규칙이 깨지고, 공고 목록의 보험사 태그 색(삼성 파랑·메리츠 빨강·현대해상 주황)과도 엉킵니다. 주황은 양쪽 모두에서 버튼에만 남습니다 — 그게 브랜드입니다. ⚠️ 이 파일은 css/style.css **뒤에** 실려야 덮어씁니다. ⚠️ 기준값은 의 data-site-mode 입니다. js/mode.js가 에서 미리 적어두기 때문에 화면이 그려지기 전에 정해집니다. 이걸 body나 늦게 적으면 매니저 화면에서 흰 헤더가 한 번 번쩍인 뒤 어두워집니다. */ /* ===================== 매니저 — 무겁게 ===================== */ html[data-site-mode="manager"] .site-header { background: var(--navy); border-bottom-color: transparent; box-shadow: none; } html[data-site-mode="manager"] .logo { color: #fff; } /* 어두운 바탕에서는 --blue-accent(#c2410c)가 가라앉아 강조로 안 읽힙니다. 익명 안내 띠의 강조와 같은 밝은 주황을 씁니다. */ html[data-site-mode="manager"] .logo span, html[data-site-mode="manager"] .logo-knock, html[data-site-mode="manager"] .catchphrase i { color: #fb923c; } html[data-site-mode="manager"] .catchphrase { background: rgba(255, 255, 255, 0.10); color: #cbd5e1; } /* 헤더가 어두워졌으므로 테두리 버튼(공고 등록하기·관리자)도 뒤집습니다. 그냥 두면 잉크 위에 잉크색 글씨라 글자가 사라집니다. */ html[data-site-mode="manager"] .site-header .btn-outline { border-color: rgba(255, 255, 255, 0.45); color: #fff; background: transparent; } html[data-site-mode="manager"] .site-header .btn-outline:hover { background: #fff; color: var(--navy); border-color: #fff; } /* 모바일에서 펼쳐지는 버튼 줄도 헤더 안에 있습니다. */ html[data-site-mode="manager"] .header-actions-mobile { background: var(--navy); border-top-color: rgba(255, 255, 255, 0.14); } html[data-site-mode="manager"] .mobile-menu-btn { color: #fff; } /* ===================== 설계사 — 밝게 ===================== */ /* 헤더의 그림자를 걷어내고 선 하나로 정리합니다. 그림자는 "떠 있는 막대", 선은 "그어진 자리"로 읽힙니다. 자료를 보는 화면에는 뒤쪽이 맞습니다. */ html[data-site-mode="agent"] .site-header { box-shadow: none; border-bottom: 1px solid var(--border-color); } /* 메뉴 아래에 굵은 선을 하나 긋습니다. 이 선이 이 화면의 성격을 정합니다 — 표와 숫자가 이어지는 서류의 머리선입니다. 매니저 화면에는 넣지 않습니다. 거기는 위쪽이 이미 어두운 덩어리라 선까지 그으면 답답해집니다. */ html[data-site-mode="agent"] .site-nav { border-bottom: 2px solid var(--navy); } /* 바탕도 한 단계 올립니다(#f5f7fa → 흰색). 표가 많은 화면이라 바탕이 밝을수록 숫자가 또렷합니다. 표 안의 줄무늬·테두리는 style.css가 따로 칠하므로 여기서 흰색으로 둬도 칸이 뭉개지지 않습니다. */ html[data-site-mode="agent"] body { background: #fff; }