/* 칠판카메라 공통 디자인 토큰 */
:root {
  --bg: #0a0b0e;
  --surface: #14161b;
  --surface-2: #1c1f26;
  --surface-3: #252932;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f3f5f8;
  --muted: #a1a8b3;
  --faint: #6b7280;
  --accent: #3ddc97;
  --accent-2: #22b37a;
  --accent-ink: #04251a;
  --live: #ff4d57;
  --warn: #f5b83d;
  --glass: rgba(18, 20, 25, .72);
  --glass-line: rgba(255, 255, 255, .12);
  --shadow: 0 12px 40px rgba(0, 0, 0, .45);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; letter-spacing: -.01em; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.glass { background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: var(--shadow); }

.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pill .sub { color: var(--muted); font-weight: 500; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.dot.ok { background: var(--accent); box-shadow: 0 0 0 4px rgba(61, 220, 151, .18); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--live); }
.dot.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.logo { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2)); color: var(--accent-ink); flex: none; }
.logo .ico { width: 21px; height: 21px; stroke-width: 2.1; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.02em; }