:root {
  --bs-primary: #6366f1;
  --bs-primary-rgb: 99, 102, 241;
  --bs-body-bg: #fafafa;
  --bs-body-color: #18181b;
  --bs-secondary-color: #71717a;
  --bs-border-color: #e4e4e7;
  --bs-border-radius: .75rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--bs-primary);
  --bs-primary-bg-subtle: #eef2ff;
  --bs-primary-border-subtle: #c7d2fe;
  --bs-primary-text-emphasis: #4338ca;
}
.app-nav {
  position: sticky; top: 0; z-index: 1020;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
}
.host-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07) !important; transform: translateY(-1px); }
.host-card { transition: box-shadow .15s, transform .15s; }
[data-period-toggle] button.active {
  background: var(--bs-primary); border-color: var(--bs-primary); color: #fff;
}
.graph-img { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-sm); width: 100%; height: auto; display: block; }
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/NotoSansJP-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/NotoSansJP-Bold.ttf') format('truetype');
}
body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Segoe UI", Meiryo, sans-serif;
}
.host-card .card-spark { width: 100%; height: 36px; display: block; margin: 6px 0; }
.host-card .metrics { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--bs-secondary-color); }
.host-card .metrics b { color: var(--bs-body-color); font-weight: 600; }
/* 사이드바(offcanvas) 기본폭은 400px 고정이라 375px 이하 모바일 화면에서 넘침 —
   좁은 화면에서는 뷰포트 폭의 85%로 축소 */
@media (max-width: 400px) {
  .offcanvas { --bs-offcanvas-width: 85vw; }
}