/* Cypher Radar Web — Global Styles */
:root {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #1c2128;
  --border:    #30363d;
  --text:      #e6edf3;
  --text-muted:#8b949e;
  --accent:    #00e5ff;
  --red:       #f44336;
  --green:     #4caf50;
  --orange:    #ff9800;
  --purple:    #7b1fa2;

  /* 신호 색상 (V17 그대로) */
  --detect:     #EBEBEA;
  --squeeze:    #B2DFDB;
  --bulge:      #FFE0B2;
  --surge:      #FFCDD2;
  --breach_in:  #CE93D8;
  --breach_out: #E0E0E0;
  --r_bulge:    #C5CAE9;
  --r_squeeze:  #D7CCC8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', -apple-system, sans-serif;
  font-size: 13px;
  overflow: hidden;
  height: 100vh;
}

/* ── 헤더 ─────────────────────────────────────────────────────────── */
#header {
  background: #111;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 42px;
  gap: 8px;
  flex-shrink: 0;
}
#header .logo {
  color: var(--accent);
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
}
#header .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  transition: background 0.3s;
}
#header .status-dot.on { background: var(--green); }
#header .clock {
  font-family: 'Courier New', monospace;
  color: #00FF00;
  font-size: 14px;
  font-weight: bold;
}
#header .spacer { flex: 1; }
#header button {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
}
.btn-api-start  { background: #1565C0; color: white; }
.btn-api-stop   { background: #b71c1c; color: white; }
.btn-logout     { background: #333; color: #aaa; }
#user-info      { color: var(--text-muted); font-size: 12px; }

/* ── 탭 바 ──────────────────────────────────────────────────────────── */
#tab-bar {
  background: #1a1a2e;
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}
#tab-bar::-webkit-scrollbar { height: 3px; }
#tab-bar::-webkit-scrollbar-thumb { background: #444; }
.tab-btn {
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: #8b949e;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.tab-btn:hover { color: var(--text); background: #ffffff0a; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 메인 콘텐츠 ─────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.tab-content {
  display: none;
  flex: 1;
  overflow: hidden;
}
.tab-content.active { display: flex; flex-direction: column; }

/* ── 레이더 탭 ───────────────────────────────────────────────────────── */
#radar-content {
  background: #1a1a2e;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.radar-sub-bar {
  background: #111;
  display: flex;
  gap: 4px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.radar-sub-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 4px;
  background: #263238;
  color: white;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
}
.radar-sub-btn.active { background: #00695C; }
.radar-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
  align-content: start;
}

/* ── 게임 카드 ───────────────────────────────────────────────────────── */
.game-card {
  border-radius: 8px;
  border: 1.5px solid #333;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.game-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
.card-header {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: bold;
}
.card-team { font-size: 14px; font-weight: bold; flex: 1; }
.card-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
  color: #000;
}
.card-body {
  background: #fff;
  padding: 10px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.card-p { font-size: 22px; font-weight: bold; color: #1a1a2e; }
.card-stats { font-size: 11px; color: #555; line-height: 1.6; }
.card-si-bar {
  height: 4px;
  background: #eee;
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.card-si-fill {
  height: 100%;
  background: #f44336;
  border-radius: 2px;
  transition: width 0.4s;
}
.card-chart { flex: 1; height: 50px; }

/* 신호별 카드 색상 */
.sig-detect     .card-header { background: #EBEBEA; color: #444; }
.sig-squeeze    .card-header { background: #B2DFDB; color: #004D40; }
.sig-bulge      .card-header { background: #FFE0B2; color: #BF360C; }
.sig-surge      .card-header { background: #FFCDD2; color: #C62828; }
.sig-breach_in  .card-header { background: #CE93D8; color: #4527A0; }
.sig-breach_out .card-header { background: #E0E0E0; color: #424242; }
.sig-r_bulge    .card-header { background: #C5CAE9; color: #1A237E; }
.sig-r_squeeze  .card-header { background: #D7CCC8; color: #3E2723; }

/* ── 게임 테이블 (일반 탭) ────────────────────────────────────────────── */
.game-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 8px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th {
  position: sticky;
  top: 0;
  background: #1c2128;
  color: var(--text-muted);
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td {
  padding: 7px 10px;
  border-bottom: 1px solid #21262d;
  vertical-align: middle;
}
tr:hover td { background: #ffffff07; }
.bet-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: bold;
}
.bet-마핸  { background: #1565C0; color: white; }
.bet-정배  { background: #1B5E20; color: white; }
.bet-역배  { background: #B71C1C; color: white; }
.bet-플핸  { background: #E65100; color: white; }
.bet-무승부 { background: #6A1B9A; color: white; }
.bet-언더  { background: #00695C; color: white; }
.bet-오버  { background: #BF360C; color: white; }

.sig-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: bold;
}
.result-win  { color: var(--green); font-weight: bold; }
.result-loss { color: var(--red); }

/* ── 로그 박스 ───────────────────────────────────────────────────────── */
#log-box {
  background: #0d1117;
  border-top: 1px solid var(--border);
  height: 70px;
  overflow-y: auto;
  padding: 6px 10px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #58a6ff;
  flex-shrink: 0;
}

/* ── 입력 탭 ─────────────────────────────────────────────────────────── */
.input-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 8px;
  overflow: hidden;
}
textarea {
  flex: 1;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 10px;
  resize: none;
  outline: none;
}
textarea:focus { border-color: var(--accent); }
.input-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.input-controls select, .input-controls input {
  background: #161b22;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12px;
  outline: none;
}
.btn-primary {
  padding: 7px 20px;
  background: #1565C0;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}
.btn-primary:hover { background: #1976D2; }
.btn-danger {
  padding: 7px 12px;
  background: #b71c1c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

/* ── 모달 ─────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  width: 600px;
  max-width: 95vw;
  max-height: 80vh;
  overflow-y: auto;
}
.modal h3 { margin-bottom: 16px; color: var(--accent); }
.modal-close {
  float: right;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

/* ── 토스트 알림 ──────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1c2128;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 13px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s;
  pointer-events: none;
}
#toast.show {
  opacity: 1;
  transform: translateY(0);
}
#toast.sig-surge    { border-color: #f44336; color: #f44336; }
#toast.sig-bulge    { border-color: #E65100; color: #E65100; }
#toast.sig-squeeze  { border-color: #00838F; color: #00838F; }
#toast.sig-breach_in { border-color: #7B1FA2; color: #CE93D8; }

/* ── 스크롤바 ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── 반응형 ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .radar-grid { grid-template-columns: 1fr; }
  .modal { width: 95vw; }
}
</style>
#header { position: relative; z-index: 200; }

#header{position:relative;z-index:200}