/* ============================================================
Osolar Insight — 로고 테마 (issue #103)
원칙: 글자·서체·자간·굵기(.bw-logo .l/.b, .mk 크기)는 건드리지 않는다.
밝은/어두운 배경 대응은 "색(theme) 차이"만으로 처리한다.
사용법:
1) 화면 에 한 줄:
2) 어두운 배경 위에 로고를 둘 때, 그 영역(또는 )에
data-theme="dark" 또는 class="on-dark" 를 부여한다.
기존 화면은 모두 밝은 배경이라, 링크만 걸면 표시는 그대로(무변경)다.
============================================================ */
/* --- 밝은 배경(기본) ----------------------------------------
워드마크는 본문 텍스트색을 따른다(현행과 동일).
심볼 타일 .mk 는 자기 파란 배경을 들고 다녀 배경 무관하게 산다
(파란타일 대비 흰배경 4.79:1 / 검정 4.39:1). */
/* 워드마크 텍스트 — .bw-logo 락업 + 상단바/사이드바 plain-strong 텍스트(색만; 굵기/서체 불변) */
.bw-logo,
.brand > .bw-body1-strong, .brand > .bw-body2-strong,
.sb-logo > .bw-body1-strong, .sb-logo > .bw-body2-strong{
color: var(--logo-fg, var(--bw-text-primary, #1D212F));
}
.brand .mk,
.sb-logo .mk{
background: var(--logo-mk-bg, var(--bw-blue-400, #1A66FF));
color: var(--logo-mk-fg, #fff);
}
/* --- 어두운 배경(theme 차이만) --------------------------------
워드마크 색만 흰색으로 반전. 서체/굵기/자간은 그대로. */
[data-theme="dark"],
.on-dark{
--logo-fg: #fff;
--logo-mk-bg: var(--bw-blue-400, #1A66FF); /* 타일은 파랑 유지 */
--logo-mk-fg: #fff;
}
/* 아주 어두운 네이비(#111524 등)에서 파란 타일 경계가 묻히지 않도록
미세한 안쪽 흰 링만 덧댄다(색만 추가, 크기/모양 불변). */
[data-theme="dark"] .brand .mk,
[data-theme="dark"] .sb-logo .mk,
.on-dark .brand .mk,
.on-dark .sb-logo .mk,
.brand.on-dark .mk,
.sb-logo.on-dark .mk{
box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}
/* ============================================================
통합 로고 컴포넌트 (구조+색 자기완결) — .osolar-brand
기존 .brand/.mk/.bw-logo/.logo 와 충돌하지 않는 네임스페이스.
다른 토큰 체계(--b400 등)를 쓰는 화면에서도 하드코드 폴백으로 동작한다.
다크 상단바 화면은 요소에 class="on-dark"(또는 조상에 data-theme="dark") 부여.
마크업:
O
Osolar Insight
============================================================ */
.osolar-brand{
display:inline-flex; align-items:center; gap:10px;
text-decoration:none; line-height:1;
color: var(--logo-fg, var(--bw-text-primary, #1D212F));
}
.osolar-brand .osolar-mk{
width:28px; height:28px; border-radius:8px; flex-shrink:0;
display:grid; place-items:center; font-weight:800; font-size:14px;
background: var(--logo-mk-bg, var(--bw-blue-400, #1A66FF));
color: var(--logo-mk-fg, #fff);
}
.osolar-brand .osolar-wm{ font-size:15px; letter-spacing:-.02em; }
.osolar-brand .osolar-wm .l{ font-weight:300; }
.osolar-brand .osolar-wm .b{ font-weight:800; }
/* 다크 상단바: 파란 타일 경계용 미세 링 (자기요소/조상 트리거 모두 지원) */
[data-theme="dark"] .osolar-brand .osolar-mk,
.on-dark .osolar-brand .osolar-mk,
.osolar-brand.on-dark .osolar-mk,
.osolar-brand[data-theme="dark"] .osolar-mk{
box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}