/* 지붕 위 막대 · 글자 규칙 — hub.css 뒤에 싣는다(모든 쪽)
   2026-11-02 사용자 «버비랩 ui 가 좀 구식인데 … 바꿔주고» → 고른 안 B: 옆 목록(메뉴 넷에 232px 한 줄)을 걷고 위 막대 하나
   글자 규칙은 49 제안 3절(굵기 흉내 끔 · 한글 낱말 단위 줄바꿈 · 제목 고르게 · 문단 외톨이 낱말 막기) */
.ap-shell.hub-shell { display: block; }
.hub-shell .hub-side { position: sticky; top: 0; z-index: 30; height: auto; overflow: visible; display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 12px 72px 12px clamp(16px, 4vw, 48px); border: 0; background: color-mix(in srgb, var(--eq-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.hub-shell .hub-side .ap-brand { margin: 0 12px 0 0; font-size: 20px; flex: none; }
.hub-shell .hub-side nav { flex-direction: row; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.hub-shell .hub-side .ap-group, .hub-shell .hub-side .hub-soon, .hub-shell .hub-side-foot, .hub-shell .hub-side .ap-mi .hub-ext { display: none; }
.hub-shell .hub-side .ap-mi { padding: 6px 12px; border-radius: 999px; font-size: 14px; line-height: 1.3; color: var(--eq-muted); white-space: nowrap; }
.hub-shell .hub-side .ap-mi svg { display: none; }
.hub-shell .hub-side .ap-mi:hover { color: var(--eq-text); background: color-mix(in srgb, var(--eq-text) 6%, transparent); }
.hub-shell .hub-side .ap-mi.on, .hub-shell .hub-side .ap-mi.on:hover { background: #fff; color: var(--eq-text); font-weight: 700; }
.hub-shell .hub-side .hub-lang { display: inline-flex; flex: none; margin-left: auto; padding: 6px 10px; font-size: 14px; color: var(--eq-muted); text-decoration: none; }
.hub-shell .hub-side .hub-lang:hover { color: var(--eq-text); }
.hub-donate { top: 8px; }
.hub-head { padding-right: 0; }
.hub-main { padding-top: 24px; }
@media (max-width: 760px) {
  .hub-shell .hub-side { padding: 8px 56px 8px 12px; gap: 4px; }
  .hub-shell .hub-side .ap-brand { font-size: 16px; margin-right: 4px; }
  .hub-shell .hub-side nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }   /* 넘치면 옆으로 밀고 끝은 흐리게(가림막) */
  .hub-shell .hub-side .ap-mi { padding: 6px 10px; }
  .hub-shell .hub-side .hub-lang { padding: 6px 4px; }
}

/* 글자 규칙(모든 쪽) */
body { font-synthesis: none; font-kerning: normal; text-rendering: optimizeLegibility; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -0.02em; }
p, li { text-wrap: pretty; }
.pl-footer p { max-width: none; }   /* 지붕 문단 폭(45ch)에서 바닥 줄이 꺾이지 않게 */
.pl-footer .fl { white-space: nowrap; margin-left: 12px; }   /* 바닥 링크 셋은 한 덩어리로만 줄을 바꾼다(«문의» 혼자 떨어짐 · 줄 끝 «·» 매달림 막기) */

/* 보이지 않는 제목(화면 읽기 · 검색용) — 11-03 사용자 «쓸데없는건 다 없애»: 위 막대가 이미 쪽 이름을 보이므로 쪽 제목은 숨긴다 */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 로고 — 표지 + «burbie lab»(11-03 «홈탭 옆에 burbie lab은 써줘야할 듯 내 로고가 될건데 디자인도 좀해서»). 올리면 표지가 한 번 기운다 · 폰 폭에선 표지만 */
.hub-shell .hub-side .bl-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--eq-text); text-decoration: none; line-height: 1; }
.bl-mark { width: 28px; height: 28px; flex: none; transition: transform 280ms cubic-bezier(.2, .7, .2, 1); }
.bl-word { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.bl-word .bl-lab { margin-left: 3px; font-weight: 500; color: var(--eq-muted, #5d636e); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .bl-logo:hover .bl-mark { transform: rotate(-14deg) scale(1.06); } }
.bl-logo:focus-visible { outline: 2px solid var(--eq-accent); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 520px) { .bl-word { display: none; } .bl-mark { width: 26px; height: 26px; } }

/* 로고 E «이름 배지»(11-03 사용자 고름 — «좀더 직관적인 로고») — 넓은 폭은 글자만(«burbie» + 파란 알약 «lab»), 폰 폭(520 이하)은 표지만 */
.bl-pill .bl-mark { display: none; }
.bl-pill .bl-word .bl-lab { display: inline-block; margin-left: 5px; padding: 2px 9px 3px; border-radius: 999px; background: #1f6feb; color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0; vertical-align: 2px; transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .bl-pill:hover .bl-lab { transform: translateY(-2px); } }
@media (max-width: 520px) { .bl-pill .bl-mark { display: block; } }