/* 디자인 공간(2026-11-03) — ① 공용 값(--sp-*)을 지붕 공용 값(eq.css)과 첫 쪽 · 도구 값(.hm)에 잇는다(위 막대 이퀄라이저 단추는 11-03 사용자 «우상단 언어 옆에 이퀄 아이콘도 다빼»로 뺌 · 값은 기본값 고정)
   ② 방 사이 이동: 쪽을 옮겨도 위 막대는 그대로, 방(본문)만 바뀐다(문서 사이 view transition · 덜 움직이기면 끔) */
:root { --sp-r: 20px; --sp-acc: #1f6feb; --sp-bg: #ffffff; --eq-radius: var(--sp-r); --eq-accent: var(--sp-acc); --eq-bg: var(--sp-bg); }
.hm { --acc: var(--sp-acc); --r: var(--sp-r); }
body { background: var(--sp-bg); }

/* 방 사이 이동 */
@view-transition { navigation: auto; }
.hub-side { view-transition-name: sp-bar; }
.hub-main { view-transition-name: sp-room; }
::view-transition-old(sp-room) { animation: sp-out 200ms cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(sp-room) { animation: sp-in 360ms cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sp-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes sp-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}