:root {
color-scheme: light;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-600: #475569;
  --gray-700: #334155;
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --accent-soft: #eef2ff;
  --radius-md: 12px;
  --radius-lg: 16px;

  --fadeColor :#e0f2fe;
  --fadeDarkenColor :#aedfff;
  --mainColor :#3cb1e5;
  --darkenColor :#1589c1;
  --greenColor :#00e5a7;
  --redColor :#ff553e;
  --bgColor :#f1f1f1;
  --bgDarken :#ff553e;
  --bgDarkest :#808c91;
  --fadeGray :#cccccc;
  --basicGray :#888888;
  --fontColor :#222222;
  --font-family:'Pretendard', 'Noto Sans KR', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-family);
      background: #eee;
      color: #222;
      padding-bottom: 60px;
}

ul, ol, dl, li {list-style:none;margin:0;padding:0;}

table {width: 100%;border-collapse: collapse;font-size: 0.95rem;min-width: 500px;}
th,td {padding: 10px 8px;border-bottom: 1px solid #e2e8f0;text-align: left;vertical-align: top;}
th {color: #475569;}

a {text-decoration:none;transition:all 0.2s ease;}

.bx-shadow {box-shadow:0 0 15px rgba(0,0,0,.1);}
.bx-radius {border-radius:12px;}
.muted { color: #888; }
button, .btn {border: none;border-radius: 12px;padding: 8px 12px;cursor: pointer;font-weight: 700;transition: filter 140ms ease, transform 140ms ease;}
.btn.primary { background: var(--mainColor); color: #fff; }
.btn.secondary { background: var(--fadeColor); border: 1px solid var(--fadeDarkenColor); color: #222; }
.btn.ghost { background: #fff; border: 1px solid #cbd5e1; color: #0f172a; }
.btn:active { transform: translateY(1px); }
.alert { margin-top: 12px; padding: 12px 14px; border-radius: 12px; display: none; }
.alert.error { background: #fee2e2; color:crimson; border: 1px solid #fecdd3; }
.alert.success { background: #ecfeff; color:var(--greenColor); border: 1px solid #a5f3fc; }
.alert.info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.invalid { border-color: #fca5a5 !important; box-shadow: 0 0 0 2px rgba(248,113,113,0.15); }
.hint { color: #64748b; font-size: 0.9rem; margin-top: 4px; }
.ws-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: #475569; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #cbd5e1; }
.dot.live { background: var(--greenColor); }
.dot.error { background: var(--redColor); }
.btn.white,.btns.white {background-color:#fff;color:#444;border:1px solid #ccc;}
.btn.main {background-color:var(--mainColor);color:#fff;border:1px solid var(--mainColor);}
.btn.white.refresh {padding-right:35px;background:#fff url(../../imgs/refresh.png) no-repeat 90% center/18px;}
.btn.white.loading {padding-right:35px;background:#fff url(../../imgs/load.png) no-repeat 90% center/18px;}
.btns.white {height:32px;padding:0 12px;font-size:14px;}
.hidden {display:none!important;}
.btn-group {display:flex;gap:7px;}


    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: #eef2ff;
      color: #1e3a8a;
      font-weight: 700;
      font-size: 0.95rem;
      border: none;
    }
    .pill-light {
      background: rgba(255,255,255,0.12);
      color: #fff;
      border-color: rgba(255,255,255,0.35);
    }