/*
 * InfraGrid 컨트롤 플레인 — dark-command 디자인 시스템.
 * brand-dna.json design_tokens 와 1:1 매핑. Control(관제탑) 축.
 * anti-pattern 회피: playful / consumer-cute / flashy / marketing-hype 금지.
 */

:root {
  /* colors */
  --bg-base: #0B1220;
  --bg-surface: #111A2B;
  --bg-elevated: #16223A;
  --border: #243049;
  --brand-primary: #3B5BDB;
  --brand-primary-hover: #4C6EF5;
  --brand-accent: #7048E8;
  --text-primary: #E7ECF5;
  --text-secondary: #9AA7BF;
  --text-muted: #5E6B85;
  --signal-online: #10B981;
  --signal-idle: #F59E0B;
  --signal-offline: #EF4444;
  --signal-busy: #3B5BDB;

  /* typography */
  --font-sans: Inter, "Pretendard", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* spacing / radius / elevation */
  --space: 8px;
  --card-pad: 1rem;
  --section-gap: 1.5rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --elev-card: 0 1px 2px rgba(0,0,0,0.4);
  --elev-up: 0 4px 16px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary-hover); text-decoration: none; }
a:hover { color: var(--text-primary); }

code, .mono { font-family: var(--font-mono); }

/* ── 헤더 (관제탑 상단 바) ── */
.ig-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.ig-header .ig-logo {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.ig-header .ig-logo .ig-grid { color: var(--brand-primary-hover); }
.ig-header .ig-spacer { flex: 1; }
.ig-header .ig-org { color: var(--text-secondary); font-size: 0.8125rem; }

/* ── 레이아웃 컨테이너 ── */
.ig-main { max-width: 960px; margin: 0 auto; padding: var(--section-gap) 1.25rem 4rem; }
.ig-center { max-width: 420px; margin: 0 auto; padding: 4rem 1.25rem; }

/* ── 카드 ── */
.ig-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  box-shadow: var(--elev-card);
}
.ig-card + .ig-card { margin-top: var(--section-gap); }

/* ── 타이포 ── */
h1, .ig-h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h2, .ig-h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.75rem; }
.ig-sub { color: var(--text-secondary); margin: 0 0 1.25rem; }
.ig-muted { color: var(--text-muted); font-size: 0.75rem; }

/* ── 폼 ── */
.ig-field { display: block; margin-bottom: 0.875rem; }
.ig-label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.375rem; }
.ig-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.ig-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(59,91,219,0.25); }
.ig-input::placeholder { color: var(--text-muted); }

/* ── 버튼 ── */
.ig-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ig-btn-primary { background: var(--brand-primary); color: #fff; }
.ig-btn-primary:hover { background: var(--brand-primary-hover); color: #fff; }
.ig-btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.ig-btn-ghost:hover { color: var(--text-primary); border-color: var(--text-muted); }
.ig-btn-block { width: 100%; }

/* ── 신호등 ── */
.ig-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.ig-dot-online { background: var(--signal-online); box-shadow: 0 0 6px rgba(16,185,129,0.6); }
.ig-dot-offline { background: var(--signal-offline); }
.ig-dot-idle { background: var(--signal-idle); }

/* ── 선택 카드 (운영 PC 선택 [A]/[B]) ── */
.ig-choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-pad); }
@media (max-width: 640px) { .ig-choices { grid-template-columns: 1fr; } }
.ig-choice {
  display: block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ig-choice:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.ig-choice .ig-choice-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.ig-choice .ig-choice-title { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.ig-choice .ig-choice-desc { color: var(--text-secondary); font-size: 0.8125rem; }

/* ── 설치 명령 블록 ── */
.ig-cmd {
  display: block;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--signal-online);
  overflow-x: auto;
  white-space: pre;
}

/* ── 노드/디바이스 목록 ── */
.ig-list { list-style: none; margin: 0; padding: 0; }
.ig-list li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0; border-bottom: 1px solid var(--border);
}
.ig-list li:last-child { border-bottom: none; }
.ig-list .ig-host { font-family: var(--font-mono); color: var(--text-primary); }
.ig-list .ig-meta { color: var(--text-secondary); font-size: 0.75rem; }

/* ── flash 메시지 ── */
.ig-flash { padding: 0.625rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.8125rem; }
.ig-flash-notice { background: rgba(16,185,129,0.12); border: 1px solid var(--signal-online); color: var(--text-primary); }
.ig-flash-alert { background: rgba(239,68,68,0.12); border: 1px solid var(--signal-offline); color: var(--text-primary); }

/* ── empty state ── */
.ig-empty { text-align: center; color: var(--text-secondary); padding: 2rem 1rem; }