/* AI 태권도 챌린지 — 공통 스타일 */
:root {
  --navy: #0b1530;
  --navy2: #12214a;
  --navy3: #1a2d5e;
  --blue: #2f6bff;
  --sky: #4cc3ff;
  --red: #e5484d;
  --gold: #f5c542;
  --green: #3ddc84;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #dbe2ee;
  --bg: #f4f7fc;
  --card: #ffffff;
  --radius: 16px;
  --font: 'Pretendard', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

/* TV 화면용 어두운 테마 */
body.tv {
  background: radial-gradient(1200px 700px at 20% -10%, #1d3a8a 0%, transparent 60%), linear-gradient(160deg, var(--navy) 0%, #070e22 100%);
  color: #eef3ff;
  overflow: hidden;
  height: 100vh;
}
body.tv .muted { color: #9fb0d8; }

.stripe { height: 8px; display: flex; }
.stripe i { flex: 1; }
.stripe i:nth-child(1) { background: var(--sky); }
.stripe i:nth-child(2) { background: var(--blue); }
.stripe i:nth-child(3) { background: var(--red); }

.brand { font-weight: 800; letter-spacing: 0.02em; }
.brand b { color: var(--sky); }

.btn {
  border: 0; border-radius: 14px; padding: 14px 22px; font-weight: 700;
  background: var(--blue); color: #fff; transition: transform 0.08s ease, filter 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.ghost { background: transparent; color: inherit; border: 2px solid currentColor; }
.btn.light { background: #e8eefc; color: var(--navy); }
.btn.red { background: var(--red); }
.btn.small { padding: 8px 12px; border-radius: 10px; font-size: 14px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.title-badge { display: inline-block; padding: 10px 26px; border-radius: 999px; font-weight: 900; letter-spacing: 0.06em; color: var(--navy); }

.lang-toggle { display: inline-flex; border-radius: 999px; overflow: hidden; border: 2px solid currentColor; }
.lang-toggle button { border: 0; background: transparent; color: inherit; padding: 6px 14px; font-weight: 800; }
.lang-toggle button.on { background: currentColor; }
.lang-toggle button.on span { filter: invert(1); }

.fi { border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.92); color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600; z-index: 1000;
}

.conn-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; }
.conn-dot.on { background: var(--green); }

@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes floatUp { 0% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, -80px); opacity: 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px) rotate(-3deg); } 75% { transform: translateX(8px) rotate(3deg); } }