/* ============================================================ brand-stella.css — 스텔라 브랜드 오버라이드 (셸 chrome) 규칙(계획 5항): · 모든 최상위 셀렉터는 html[data-brand="stella"] 로 시작한다. · !important 금지 — 속성 선택자가 이미 specificity 를 이긴다. · views.css 는 건드리지 않는다. 화면 차이는 stella-views.css 로. 값은 전부 라이브 실측이다 → _refs/stella-shell-spec.md 측정: www.stella-erp.com (2026-08-21, viewport 1800x1050) ============================================================ */ html[data-brand="stella"] { /* ---- 치수 (라이브 실측) ---- GNB 50px / LNB 230px. --sidebar-w 를 바꾸면 views.css 가 calc() 로 쓰는 19곳과 .app.is-collapsed 12곳이 자동으로 따라온다(그래서 views.css 를 안 고쳐도 된다). */ --header-h: 50px; --sidebar-w: 230px; /* ---- GNB : 진회색 바 + 흰 글자 ---- */ --gnb-bg: #444; --gnb-border: transparent; /* 라이브는 하단선이 없다 */ --gnb-fg: #fff; --gnb-fg-2: #fff; --gnb-fg-active: #fff; --gnb-active-border: transparent; /* 활성 표시는 밑줄이 아니라 배경 틴트(아래 규칙) */ --gnb-item-hover-bg: rgba(255,255,255,.12); /* 라이브 실측은 gap 8px/padding 10px(항목 폭 68/81px 일치)이지만, 데모는 대메뉴가 한 줄에 다 안 들어가 가로 스크롤이 생겨 지저분해 보인다는 지적(2026-09-10)으로 조금 좁혔다 — 라이브 그대로면 스크롤이 더 심해진다(데모 전용 타협, 실측값 아님). */ --gnb-gap: 6px; --gnb-item-pad-x: 8px; --gnb-utils-gap: 12px; --gnb-util-size: 18px; --gnb-pad-l: 16px; /* ---- LNB : 밝은 배경 + 어두운 글자 ---- 파로스는 네이비 위 흰 글자라 컨트롤이 전부 '반투명 흰색' 전제였다. 스텔라는 명암이 뒤집히므로 같은 토큰을 어두운 값으로 덮는다. */ --sb-bg: #f8f9ff; --sb-logo-bg: #444; /* 로고 자리도 상단 바와 같은 진회색으로 이어진다 */ --sb-fg: #222; --sb-fg-2: #555; --sb-fg-dim: #9aa3b8; --sb-fg-dim-2: #9aa3b8; --sb-fg-muted: #b0b6c6; --sb-company-fg: var(--c-brand); /* 라이브 실측 #003879 — 파로스와 같은 브랜드 네이비 */ --sb-group-fg: #444; --sb-border: #e4e4e4; --sb-item-hover: rgba(34,60,91,.06); --sb-item-active-bg: rgba(34,60,91,.13); --sb-item-active-fg: var(--c-primary); --sb-ctl-border: #d5d9ec; --sb-ctl-border-hover: #b9c0dd; --sb-ctl-bg: #fff; --sb-ctl-bg-weak: #fff; --sb-ctl-bg-hover: #eef1fb; --sb-ctl-bg-hover-2: #eef1fb; --sb-ctl-bg-hover-3: #e7ebf8; --sb-ctl-ico: #6b7796; --sb-ctl-ico-dim: #9aa3b8; --sb-action-bg: var(--c-primary); --sb-action-bg-hover: #2a5be0; --sb-action-fg: #fff; --sb-tag-fg: #6b7796; --sb-tag-bg: rgba(34,60,91,.08); --sb-tag2-fg: #9aa3b8; --sb-tag2-bg: rgba(34,60,91,.04); --sb-tag2-border: #e4e4e4; /* ---- 브랜드 핑크 3단 ---- #DB546B = stella-erp.co.kr 라이브 실측(CTA·강조 텍스트에 반복 사용, rgb(219,84,107)). 이 값은 큰 글자(제목 32px bold·배지 20px bold)와 장식(테두리·포커스링·아이콘·hover 배경)에만 쓴다 — 작은 글자에 쓰면 대비가 WCAG AA(4.5:1) 아래로 떨어진다(2026-09-07 리뷰 실측: 흰 배경 3.82 / #2d2d2d 3.60 / 컬럼헤더 #646464 1.55 · #444 2.55 · #2C2C2C 3.65). 그래서 작은 글자용 두 가지를 따로 둔다 — 값은 색조(hue 350°)를 유지한 채 명도만 옮겼다. --stella-pink-ink : 밝은 배경 위 (흰 배경 4.7:1) --stella-pink-lite : 어두운·중간 회색 배경 위 (가장 밝은 컬럼헤더 #646464 에서도 4.7:1) */ --stella-pink: #DB546B; --stella-pink-ink: #CE3E56; --stella-pink-lite: #FFDDE3; } /* ---- 토큰으로 표현이 안 되는 구조·타이포 차이 ---- */ /* GNB 활성 항목: 파로스는 하단 2px 밑줄, 스텔라는 배경 틴트 */ html[data-brand="stella"] .gnb__item { font-weight: var(--fw-medium); } /* 라이브 500 */ html[data-brand="stella"] .gnb__item.is-active { background: rgba(255,255,255,.14); } /* 중메뉴 그룹 — 라이브 800 (파로스는 semibold 600) */ html[data-brand="stella"] .tree__group { font-weight: 800; } /* 로고: 라이브는 LNB 폭 전체를 진회색으로 덮고 로고를 좌측 정렬한다(136x23) */ html[data-brand="stella"] .sidebar__logoimg { height: 23px; } /* 사이드바 컨트롤은 밝은 배경 위라 포커스 링을 흰색으로 두면 안 보인다 */ html[data-brand="stella"] .sidebar__guide:focus-visible { outline-color: var(--c-primary); } /* 스텔라 유틸 아이콘은 라이브 원본이 stroke 기반이다(파로스는 fill 기반). base.css 의 .icon{fill:currentColor} 를 그대로 두면 실루엣이 통째로 칠해진다. */ html[data-brand="stella"] .header__util > .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 튜토리얼 메인 상단 헤더바 — 네이비 대신 인앱 GNB 계열 진회색으로 통일. 단 인앱 GNB(--gnb-bg #444)보다 한 단계 더 진하게(#2d2d2d) — 인앱 쪽 값은 유지, 이 헤더에만 적용되는 별도 값이라 var(--gnb-bg)를 참조하지 않고 직접 지정한다. */ html[data-brand="stella"] .gh-top { background: #2d2d2d; } /* "튜토리얼" 글씨 — 파로스 기본 하늘색(#93B4F5) 대신 스텔라 핑크로(2026-09-07 사용자 확정). 14px bold 작은 글자라 어두운 헤더(#2d2d2d) 위에서는 브랜드값이 3.60:1 밖에 안 된다 → 밝은 쪽 핑크로(2026-09-07 리뷰). */ html[data-brand="stella"] .gh-top__name { color: var(--stella-pink-lite); } /* ============================================================ 튜토리얼 홈 상단 소개 밴드 — 스텔라 공식 메인 디자인 파로스는 밝은 파랑 그라디언트에 좌측 카피 + 우측 일러스트다. 스텔라 공식 메인(stella-erp.co.kr)은 어두운 남색~보라 그라디언트에 가운데 정렬 카피 + 우상단 별빛이다. 마크업은 그대로 두고 배치만 바꾼다 (카피는 P.brand.cfg.hero 가 공급 — js/30-view-login.js 는 조건문 없음). ============================================================ */ /* 높이(min-height 180)·좌측 정렬·폰트 레벨은 파로스 공용 규칙(css/views.css)을 그대로 쓴다 — 여기엔 "스텔라에서 달라지는 것"만 남긴다. 값이 같은 오버라이드를 남겨 두면 스텔라가 자체 타입 스케일을 가진 것처럼 보여, 나중에 공용 값을 바꿔도 안 먹는 것처럼 읽힌다(2026-09-07 리뷰 지적으로 min-height·padding-top·font-size·display 등 정리). */ html[data-brand="stella"] .gh-band { background: /* 가장자리 톤 글로우 */ radial-gradient(120% 90% at 82% 18%, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 46%), radial-gradient(70% 60% at 8% 92%, rgba(150,150,150,.16) 0%, rgba(150,150,150,0) 60%), /* 바탕 그라디언트 */ linear-gradient(135deg, #0A0A0A 0%, #1C1C1C 46%, #262626 100%); } /* 밤하늘 별 — CSS 배경 대신 애니메이션으로 교체(2026-09-07, "캔버스 애니메이션을 배너 bg로" 재요청). 별 반짝임·유성 로직은 js/30b-view-login-stella.js 가 그린다. 여기 .gh-band 의 정적 그라디언트는 JS 비활성 시 폴백으로 남겨 둔다. */ html[data-brand="stella"] .gh-band__sky { position: absolute; inset: 0; display: block; pointer-events: none; } /* 우상단 4갈래 스파클(렌즈플레어)은 2026-09-07 사용자 확정으로 제거 — 캔버스 별만 남긴다 ("이 큰 오브젝트는 지워줘"). 대신 오른쪽 영역 별 밀도를 늘렸다(js/30b-view-login-stella.js buildStars 의 우측 추가 배치). */ /* .gh-band--full = 일러스트 없이 카피가 폭 전체를 쓰는 배치(파로스는 좌측 카피 + 우측 일러스트인 --split 기본형). 정렬(좌측)·높이·폰트사이즈 레벨은 파로스와 같게 두기로 사용자 확정(2026-09-04)했으므로 여기서 다시 선언하지 않는다 — 아래 세 줄이 스텔라에서 실제로 달라지는 전부다: ① 일러스트 자리를 비우지 않고 ② 아래 패딩을 주고 ③ 어두운 배경에 맞는 글자색. (예전 이름 .gh-band--center 는 가운데 정렬을 뜻하는 줄 알게 만들어 2026-09-07 리뷰에서 --full 로 바꿨다 — 이 배치는 가운데 정렬이 아니다.) */ html[data-brand="stella"] .gh-band--full .gh-band__inner { padding-bottom: 38px; } html[data-brand="stella"] .gh-band--full .gh-band__txt { max-width: none; position: relative; z-index: 1; /* z-index: 캔버스 별 위로 */ } html[data-brand="stella"] .gh-band--full .gh-band__eyebrow { color: rgba(255,255,255,.92); } /* 포인트 컬러 — 파로스 노랑(--gh-band-hi) 대신 스텔라 브랜드 핑크로 오버라이드. #DB546B = stella-erp.co.kr 라이브 실측(CTA 버튼·강조 텍스트에 반복 사용되는 값, getComputedStyle 로 rgb(219,84,107) 확인) — 2026-09-04 사용자 확정("촌스럽다"는 노랑 대신). 강조가 걸리는 곳이 제목 32px bold·배지 20px bold 뿐이라 WCAG 의 '큰 글자' 기준 (3:1)을 쓰며, 밴드 배경 #262626 위에서 3.96:1 로 통과한다. */ html[data-brand="stella"] .gh-band--full .gh-band__title b, html[data-brand="stella"] .gh-band--full .gh-band__eyebrow b { color: var(--stella-pink); } html[data-brand="stella"] .gh-band--full .gh-band__sub { color: rgba(255,255,255,.80); } /* 업무 여정·업무별 메뉴 공용 바탕색(.gh-host 스코프 토큰) — 파로스 기본값(--t-bg #F4F6FA, --t-fill #EDF0F6, --t-line #D8DEEA, --t-hover #F3F7FE)이 전부 은은한 블루 틴트라 블랙&핑크 톤과 안 맞는다는 지적(2026-09-07) → 무채색 연한 그레이로 교체. .gh-host 안에서만 쓰는 별칭이라 여기서 덮어써도 tokens.css 원본(--t-*)은 그대로다. */ html[data-brand="stella"] .gh-host { /* 완전 중성(R=G=B)이면 옆의 블랙&핑크 톤 때문에 오히려 살짝 누렇게 보인다는 지적 (2026-09-07 재요청) → B 채널만 1~2 살짝 올려 미세하게 식힌다(원래 블루 틴트로 되돌아가지 않을 정도로만). */ --gh-bg: #F4F4F6; --gh-fill: #ECECEE; --gh-line: #CBCBCD; --gh-border: #DBDBDD; --gh-hover: #EFEFF1; } /* ============================================================ 업무 여정 보드(.gh-board) — 블루 톤 → 블랙 & 핑크 (2026-09-04 사용자 확정) 구조색(컬럼 헤더 배경의 5단계 진행감)은 무채색 그레이 그라데이션으로, 포인트(단계 사이 화살표 점·카운트 숫자·카드 번호·아이콘·포커스 링)는 전부 히어로와 같은 브랜드 핑크(#DB546B) 하나로 통일한다. ============================================================ */ html[data-brand="stella"] .gh-col--a1 { --col: var(--stella-pink); --colbg: #646464; } html[data-brand="stella"] .gh-col--a2 { --col: var(--stella-pink); --colbg: #444444; } html[data-brand="stella"] .gh-col--a3 { --col: var(--stella-pink); --colbg: #2C2C2C; } html[data-brand="stella"] .gh-col--a4 { --col: var(--stella-pink); --colbg: #181818; } html[data-brand="stella"] .gh-col--a5 { --col: var(--stella-pink); --colbg: #0E0E0E; } /* 1~4단계를 더 어둡게(2026-09-04, 재요청) — 이제 1단계도 진남색(--gh-navy) 글자로는 대비가 안 나올 만큼 어두워져 5단계 전부 흰 글자로 통일한다. 카운트 숫자(13px bold)는 핑크를 유지하되 밝은 쪽 --stella-pink-lite 로 — 브랜드 #DB546B 를 그대로 쓰면 1·2단계 헤더(#646464/#444)에서 1.55:1·2.55:1 이라 사실상 안 읽힌다(2026-09-07 리뷰 실측). "화살표는 핑크 두고"(단계 사이 점)는 그대로 유지. */ html[data-brand="stella"] .gh-col__no, html[data-brand="stella"] .gh-col__title { color: #fff; } html[data-brand="stella"] .gh-col__cnt { color: var(--stella-pink-lite); } /* 카드 번호(15px bold)는 흰 카드 위 — 밝은 배경용 진한 핑크로(브랜드값은 3.82:1) */ html[data-brand="stella"] .gh-bcard__no { color: var(--stella-pink-ink); } /* 시계 아이콘은 번호(핑크)가 아니라 옆 "약 N분" 글자와 같은 톤으로(2026-09-07 재요청 — "아이콘 글자색이랑 맞춰줘"). 부가정보(소요시간)는 무채색으로 눌러 번호만 강조되게. */ html[data-brand="stella"] .gh-bcard__ic { color: var(--gh-sub); } html[data-brand="stella"] .gh-bcard:focus-visible, html[data-brand="stella"] .gh-bcard__copy:focus-visible { outline-color: var(--stella-pink); } html[data-brand="stella"] .gh-bcard__copy:hover { background: #FBEEF0; color: var(--stella-pink-ink); } html[data-brand="stella"] .gh-search__input:focus { border-color: var(--stella-pink); } /* ============================================================ 하단 특장점 배너(.gh-banner) — 파란 그라디언트 → 블랙 컨셉(2026-09-07 사용자 확정). 히어로 밴드와 같은 어두운 톤으로 통일. 배지(가입무료 등) 텍스트색도 배너 배경에 맞춰 함께 바꾼다(원래 배너색 #234F9F 그대로 두면 흰 칩 위에서 붕 뜬다). ============================================================ */ html[data-brand="stella"] .gh-banner__inner { background: linear-gradient(135deg, #0A0A0A 0%, #262626 100%); } /* 아이콘은 스텔라 핑크로. 배지("국내최초"/"Beta")는 흰 칩+핑크 글자가 아니라 핑크 칩+흰 글자로(2026-09-07 재요청 — "배경이 핑크, 글자가 흰색"). */ html[data-brand="stella"] .gh-feat__icsvg { fill: var(--stella-pink); color: var(--stella-pink); } /* 배지 칩은 10px bold 흰 글자 — 브랜드 핑크 바탕이면 3.82:1 이라 --stella-pink-ink 로 눌러 4.7:1 을 만든다(2026-09-07 리뷰의 대비 지적을 같은 성격의 나머지 자리에도 적용). */ html[data-brand="stella"] .gh-feat__badge { background: var(--stella-pink-ink); color: #fff; } /* 하단 [바로가기] 아이콘 — 파랑 대신 스텔라 핑크(2026-09-07 사용자 확정). 라벨(네이비)·화살표(회색)는 그대로 두고 아이콘만, hover 시 라벨·화살표도 같은 핑크로. */ html[data-brand="stella"] .gh-qitem__svg { fill: var(--stella-pink); } /* 라벨은 글자라 밝은 배경용 핑크, 화살표(아이콘)는 장식이라 브랜드 핑크 그대로 */ html[data-brand="stella"] .gh-qitem:hover .gh-qitem__label { color: var(--stella-pink-ink); } html[data-brand="stella"] .gh-qitem:hover .gh-qitem__arr { color: var(--stella-pink); fill: var(--stella-pink); } /* ============================================================ 업무별 메뉴 탭(.gh-mtabs/.gh-mfilter/.gh-mgroup/.gh-mcard) — 블루 톤 → 핑크 (2026-09-07 사용자 확정). 카드의 [가이드]/[화면만] 상태 태그는 --gh-tag-blue-fg 같은 공유 토큰을 그대로 쓰므로 건드리지 않는다("이 태그들은 그대로") — .gh-mcard__grp 는 같은 토큰을 참조하다 따라 바뀌는 걸 막으려고 리터럴 값으로 직접 덮어쓴다. ============================================================ */ /* 글자(탭 라벨 15px·필터 13px·묶음 개수)는 밝은 배경용 --stella-pink-ink, 밑줄 바는 장식이라 브랜드 핑크 그대로 — 나란히 놓아도 같은 색으로 읽힌다. */ html[data-brand="stella"] .gh-mtab.is-on { color: var(--stella-pink-ink); } html[data-brand="stella"] .gh-mtab.is-on::after { background: var(--stella-pink); } html[data-brand="stella"] .gh-mfilter__btn.is-on { color: var(--stella-pink-ink); } html[data-brand="stella"] .gh-mgroup__n { color: var(--stella-pink-ink); } /* 카드 그룹 라벨("조직관리" 등)은 핑크 대신 진한 검정으로(2026-09-07 재요청 — 카드 위에 여러 개가 반복되니 핑크가 너무 튀어 보인다는 피드백). */ html[data-brand="stella"] .gh-mcard__grp { color: #1A1A1A; } html[data-brand="stella"] .gh-mcard:hover { border-color: var(--stella-pink); } html[data-brand="stella"] .gh-mcard:focus-visible { outline-color: var(--stella-pink); } html[data-brand="stella"] .gh-msearch__input:focus { border-color: var(--stella-pink); } /* 사이드바 상단 모듈 액션 버튼([결재 작성] 등) — 라이브 실측(_refs/stella-live-shell.json, 사이드바 버튼 computed style): margin 12px 16px, 폭 198px(=230 − 16×2), 높이 32, 라운드 6. 즉 "사이드바 가장자리에서 16px" 이 라이브 규칙이다. 부모 .sidebar__body 가 이미 var(--sp-3)=12px 패딩을 주므로 나머지(16px − var(--sp-3))만 마진으로 보태고 폭도 그만큼 빼서, 패딩 토큰이 바뀌어도 16px 이 유지되게 한다(