:root {
  --bg-color: #010a13;
  --card-bg: rgba(9, 20, 28, 0.9);
  --primary-gold: #c8aa6e;
  --primary-blue: #005a82;
  --secondary-blue: #0397d6;
  --primary-red: #820000;
  --secondary-red: #d60303;
  --text-main: #f0e6d2;
  --text-muted: #a09b8c;
  --border-color: #1e2328;
  --blue-glow: 0 0 15px rgba(3, 151, 214, 0.4);
  --red-glow: 0 0 15px rgba(214, 3, 3, 0.4);
}

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

body {
  font-family: 'Noto Sans KR', sans-serif;
  background-color: var(--bg-color);
  background-image: radial-gradient(circle at center, #0a1428 0%, #010a13 100%);
  color: var(--text-main);
  min-height: 100vh;
}

#app { max-width: 1400px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 2rem; }

header { text-align: center; border-bottom: 2px solid var(--primary-gold); padding-bottom: 1.5rem; }

.logo { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--primary-gold); }

/* 검색 바 스타일 */
#live-search-container {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

#live-search-container input {
  background: #1e2328;
  border: 1px solid var(--primary-gold);
  color: var(--text-main);
  padding: 0.8rem;
  border-radius: 4px;
  width: 250px;
}

#live-search-btn {
  background: var(--primary-gold);
  color: #010a13;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

#search-status { margin-top: 0.5rem; font-size: 0.9rem; color: var(--secondary-blue); }

.teams-container { display: flex; align-items: center; gap: 1rem; }
.team-section { flex: 1; background: rgba(0, 0, 0, 0.3); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); }
.team-title { font-family: 'Orbitron', sans-serif; text-align: center; margin-bottom: 1.5rem; font-size: 1.8rem; }
.blue-text { color: var(--secondary-blue); text-shadow: var(--blue-glow); }
.red-text { color: var(--secondary-red); text-shadow: var(--red-glow); }
.vs-divider { font-family: 'Orbitron', sans-serif; font-size: 2rem; color: var(--primary-gold); opacity: 0.8; }
.role-selector-container { display: flex; flex-direction: column; gap: 1rem; }

role-selector {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.8rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.2s ease;
}

.role-icon { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; }
role-selector label { width: 80px; font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }

.search-container { position: relative; flex-grow: 1; }
.search-container input { width: 100%; background: #1e2328; color: #f0e6d2; border: 1px solid #3c3c41; padding: 0.6rem; border-radius: 4px; }
.search-results { 
  position: absolute; top: 100%; left: 0; right: 0; background: #1e2328; 
  border: 1px solid #c8aa6e; z-index: 100; max-height: 200px; overflow-y: auto; 
}
.result-item { padding: 0.6rem; cursor: pointer; border-bottom: 1px solid #333; }
.result-item:hover { background: #005a82; }
.hidden { display: none; }

#generate-plan-btn { display: block; margin: 1rem auto; padding: 1rem 4rem; font-family: 'Orbitron', sans-serif; background: var(--primary-gold); border: none; cursor: pointer; }
#generate-plan-btn:disabled { opacity: 0.5; }

.analysis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.full-width { grid-column: 1 / -1; }
.analysis-card, .victory-plan-card, .counter-strategy-card { background: var(--card-bg); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); }
h3 { color: var(--primary-gold); margin-bottom: 1rem; font-family: 'Orbitron', sans-serif; border-bottom: 1px solid #333; padding-bottom: 0.5rem; }

.comp-bars { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.comp-bar-container { flex: 1; height: 10px; background: #111; border-radius: 5px; overflow: hidden; display: flex; }
.bar-blue { height: 100%; background: var(--secondary-blue); }
.bar-red { height: 100%; background: var(--secondary-red); }

footer { text-align: center; color: var(--text-muted); padding: 2rem; border-top: 1px solid var(--border-color); }

@media (max-width: 1024px) {
  .teams-container { flex-direction: column; }
  .analysis-grid { grid-template-columns: 1fr; }
}