/* RainyLab — 브랜드 마크 + 앱 전환 상단 바 (공용, 단일 출처)
   모든 페이지에 같은 모양으로 올라간다. 앱 사이를 오가는 유일한 경로이므로
   광고 바(하단)와 역할이 겹치지 않게 이쪽에만 링크를 둔다.
   brand-tokens.css 를 먼저 읽어야 한다.

   읽는 곳
     - 허브·404·개인정보·계절 해설 : <link> 로 직접
     - 지구의 계절 (Vite)          : src/main.jsx 에서 import (번들에 포함)
   지구의 계절만 position 을 fixed 로 덮어쓴다 — 스크롤이 없어 sticky 가 듣지 않는다. */

/* ── 브랜드 마크 ──────────────────────────────── */
.rl-mark {
  /* a 태그라 색을 명시하지 않으면 브라우저 기본 링크색(#0000EE)으로 떨어진다.
     허브는 brand.css 의 `a{color:inherit}` 덕에 가려졌지만 앱들은 그 파일을 읽지 않는다. */
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: 17px;
}
.rl-mark svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.rl-mark .rl-mark-b {
  color: var(--rl-accent);
}

/* ── 상단 바 ─────────────────────────────────── */
.rl-topbar {
  /* 세 사이트의 body 값(글꼴 스택·line-height·글자색)이 서로 달라서, 상속에 맡기면
     같은 CSS로도 크기와 색이 미묘하게 어긋난다. 상단 바가 쓰는 값은 여기서 못 박는다. */
  font-family: var(--rl-sans);
  line-height: 1.6;
  color: var(--rl-ink);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--rl-topbar-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--rl-line);
  background: rgba(8, 10, 16, 0.9);
  backdrop-filter: blur(12px);
}
.rl-topbar .rl-mark {
  flex: 0 0 auto;
  padding-right: 14px;
  border-right: 1px solid var(--rl-line);
}
.rl-topbar nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rl-topbar nav::-webkit-scrollbar {
  display: none;
}
.rl-topbar nav a {
  font-size: 13px;
  white-space: nowrap;
  color: var(--rl-dim);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.rl-topbar nav a:hover {
  color: var(--rl-ink);
  border-color: var(--rl-line);
  background: var(--rl-panel);
}
.rl-topbar nav a[aria-current='page'] {
  color: var(--rl-ink);
  border-color: var(--rl-line);
  background: var(--rl-panel-2);
}

/* 좁은 화면 — 링크 세 개가 잘리지 않게 줄인다 */
@media (max-width: 720px) {
  .rl-topbar {
    padding: 0 12px;
    gap: 10px;
  }
  .rl-topbar .rl-mark {
    font-size: 15px;
    padding-right: 10px;
  }
  .rl-topbar nav a {
    padding: 5px 9px;
    font-size: 12.5px;
  }
}