/* 불불 공통 틀 — 허브와 모든 사이트가 같이 쓰는 색·글꼴·상단 바.
   다른 사이트에서: <link rel="stylesheet" href="https://bulbul2dao.dev/kit/kit.css"> + <script src="https://bulbul2dao.dev/kit/bar.js" defer></script>
   색은 여기서만 정한다. 사이트 안에서 새 색을 만들기 전에 이 토큰을 먼저 쓴다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --bb-bg: #f6f5f1;
  --bb-surface: #ffffff;
  --bb-sunken: #eeece6;
  --bb-ink: #17160f;
  --bb-ink-2: #4f4d47;
  --bb-ink-3: #7c7a72;
  --bb-line: #e2dfd6;
  --bb-accent: #b8400e;
  --bb-accent-ink: #ffffff;
  --bb-accent-soft: #f6e4d9;
  --bb-good: #1d7a4c;
  --bb-warn: #a86400;
  --bb-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --bb-mono: ui-monospace, "SF Mono", Consolas, "D2Coding", monospace;
  --bb-radius: 14px;
  --bb-radius-sm: 8px;
  --bb-shadow: 0 1px 2px rgb(23 22 15 / .06), 0 4px 16px rgb(23 22 15 / .05);
  --bb-shadow-hover: 0 2px 4px rgb(23 22 15 / .08), 0 12px 32px rgb(23 22 15 / .10);
  --bb-bar-h: 52px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bb-bg: #121110; --bb-surface: #1b1a17; --bb-sunken: #24221e;
    --bb-ink: #eeece5; --bb-ink-2: #b9b6ac; --bb-ink-3: #8e8b82; --bb-line: #2f2c27;
    --bb-accent: #f08a50; --bb-accent-ink: #1a0d05; --bb-accent-soft: #3a2418;
    --bb-good: #5cc28f; --bb-warn: #e0a54a;
    --bb-shadow: 0 1px 2px rgb(0 0 0 / .3); --bb-shadow-hover: 0 8px 28px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bb-bg: #121110; --bb-surface: #1b1a17; --bb-sunken: #24221e;
  --bb-ink: #eeece5; --bb-ink-2: #b9b6ac; --bb-ink-3: #8e8b82; --bb-line: #2f2c27;
  --bb-accent: #f08a50; --bb-accent-ink: #1a0d05; --bb-accent-soft: #3a2418;
  --bb-good: #5cc28f; --bb-warn: #e0a54a;
  --bb-shadow: 0 1px 2px rgb(0 0 0 / .3); --bb-shadow-hover: 0 8px 28px rgb(0 0 0 / .45);
  color-scheme: dark;
}

/* 상단 바 — bar.js 가 다른 사이트 맨 위에 꽂는다. 허브는 자기 머리띠에 같은 클래스를 쓴다. */
.bb-bar {
  position: sticky; top: 0; z-index: 9999;
  height: var(--bb-bar-h); padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--bb-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--bb-line);
  font: 500 14px/1 var(--bb-font); color: var(--bb-ink);
}
.bb-bar a { color: inherit; text-decoration: none; }
.bb-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; letter-spacing: -.01em; font-size: 15px; }
.bb-mark svg { width: 22px; height: 22px; flex: none; }
.bb-bar .bb-here { color: var(--bb-ink-3); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bb-bar .bb-sp { flex: 1; }
.bb-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border: 1px solid var(--bb-line); border-radius: 999px; background: var(--bb-surface);
  font: 600 13.5px/1 var(--bb-font); color: var(--bb-ink); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background-color .15s;
}
.bb-btn:hover { border-color: var(--bb-ink-3); }
.bb-btn.primary { background: var(--bb-ink); color: var(--bb-bg); border-color: var(--bb-ink); }
.bb-btn.primary:hover { opacity: .88; }
.bb-btn:focus-visible, .bb-bar a:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; }

/* 페이지 기본 — <body class="bb"> 로 쓴다. 허브의 하위 페이지(코인·지도)가 같이 쓴다. */
body.bb { margin: 0; background: var(--bb-bg); color: var(--bb-ink); font: 400 15px/1.6 var(--bb-font); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
body.bb *, body.bb *::before, body.bb *::after { box-sizing: border-box; }
body.bb [hidden] { display: none !important; }
.bb-wrap { max-width: 1180px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left)); }
.bb-title { margin: 0; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; }
.bb-lead { margin: 10px 0 0; color: var(--bb-ink-2); max-width: 40em; }
.bb-card { background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-radius); box-shadow: var(--bb-shadow); }
.bb-num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bb-muted { color: var(--bb-ink-3); }
.bb-up { color: var(--bb-good); } .bb-down { color: #c2410c; }
:root[data-theme="dark"] .bb-down { color: #f08a50; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bb-down { color: #f08a50; } }
.bb-skel { background: linear-gradient(90deg, var(--bb-sunken), var(--bb-line), var(--bb-sunken)); background-size: 200% 100%; animation: bb-sh 1.2s linear infinite; border-radius: 6px; color: transparent !important; }
@keyframes bb-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bb-skel { animation: none; } }