/* 발전해 브랜드 (2026-11-09, Framer 「발전해 · 브랜드 세트」 기준)
   심볼: 꼭짓점이 위인 육각형 + 정중앙 원(지름 = 심볼 높이 1/3). 심볼·글자 간격 H/5. 글자 Pretendard 700.
   로고에는 상태 색(초록·노랑·빨강)을 섞지 않는다. 글자색을 따라가므로 다크모드에서도 보인다.
   빼려면 index·about·guide 에서 brand.css 한 줄만 지우면 예전 글자 로고. */
.brand::before, header.top b::before {
  content: ""; flex: none; display: inline-block; vertical-align: -0.14em;
  width: 0.95em; height: 1.1em; margin-right: 0.22em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'%3E%3Cpath fill-rule='evenodd' d='M43.3 0 86.6 25v50L43.3 100 0 75V25Z M43.3 33.33a16.67 16.67 0 1 0 0 33.34a16.67 16.67 0 1 0 0-33.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'%3E%3Cpath fill-rule='evenodd' d='M43.3 0 86.6 25v50L43.3 100 0 75V25Z M43.3 33.33a16.67 16.67 0 1 0 0 33.34a16.67 16.67 0 1 0 0-33.34Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.brand { font-weight: 700; letter-spacing: -0.02em; }
header.top b { display: inline-flex; align-items: center; font-weight: 700; letter-spacing: -0.02em; }
/* v4 는 .brand 가 flex + space-between 이라 심볼과 글자가 벌어지지 않게 고정 */
body.v4 .brand { justify-content: flex-start; }
body.v4 .brand .aboutLink { margin-left: auto; }

/* 2026-11-09 위계 정리: 육각형은 브랜드(로고) 전용. 지도의 변전소는 마름모로 바꿔 로고와 겹치지 않게 함.
   지도 위계 = 변전소(마름모, 송전 여유에 따라 검정→회색, 여유 없음은 속 빈 마름모) → 배전선로(선) → 물건(검은 이름표 핀).
   크기 칸(sz)은 그대로 두고 45° 돌린 정사각형을 줄여서 대각선이 원래 크기와 비슷하게 맞춤. */
body.v4 .subHex { clip-path: none; border-radius: 2px; transform: rotate(45deg) scale(.74); }
body.v4 .subHex::before { clip-path: none; border-radius: 1px; width: 52%; height: 52%; }
body.v4 .subMk:hover .subHex { transform: rotate(45deg) scale(.84); }
/* 작은 마름모(송전 없음·자료 없음, 10~12px)는 줄이면 안 보여서 덜 줄임 */
body.v4 .subHex.f0, body.v4 .subHex.na { transform: rotate(45deg) scale(.9); }
/* 11-10 글꼴 통일: v3 의 고정폭 글꼴(--mono)이 v4 지도 핀 이름표(공매 760kW 등)에 남아 있던 것을 Pretendard 로. 숫자 폭은 tabular-nums 로 맞춤 */
body.v4 { --mono: var(--font); }
body.v4 .obPin span { font-variant-numeric: tabular-nums; }
/* 11-10 휴대폰: 시트가 접혀 있으면(v4Peek) 로고가 든 칸이 숨으므로, 끌어올림 손잡이 아래에 로고 한 줄 */
@media (max-width: 820px) {
  body.v4m.v4Peek .grab::after {
    content: "발전해"; display: block; padding: 10px 20px 0 calc(20px + 1.17em); text-align: left;
    font: 700 15px/1.1 var(--font); letter-spacing: -0.02em; color: #111111;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86.6 100'%3E%3Cpath fill='%23111111' fill-rule='evenodd' d='M43.3 0 86.6 25v50L43.3 100 0 75V25Z M43.3 33.33a16.67 16.67 0 1 0 0 33.34a16.67 16.67 0 1 0 0-33.34Z'/%3E%3C/svg%3E") 20px calc(10px + 0.01em) / 0.95em 1.1em no-repeat;
  }
}
/* 11-10 휴대폰 판정 상태(v4Det): 좁은 시트라 로고 줄은 숨기고 결론을 위로. 로고는 찾기 화면에서만 */
@media (max-width: 820px) { body.v4m.v4Det .brand { display: none !important; } }