@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

/* ======================================================
   SYADOW UI — Shared Design System
   Brand:
     Midnight Blue: #0B132B
     Gunmetal:      #2C2F33 → #3A506B
     Rose Gold:     #D4A373 → #E4B48E
   ====================================================== */

:root{
  --ui-font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Noto Sans KR", "Segoe UI", Roboto, Arial, sans-serif;

  --midnight:#0B132B;
  --gun1:#2C2F33;
  --gun2:#3A506B;
  --rose1:#D4A373;
  --rose2:#E4B48E;

  --bg0:#070D1F;
  --text:#EAF0FA;
  --muted:#93A6BD;
  --line: rgba(255,255,255,.10);

  --card: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  --inputBg: linear-gradient(180deg, rgba(44,47,51,.40), rgba(44,47,51,.18));

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow2: 0 10px 26px rgba(0,0,0,.35);

  --r12:12px;
  --r16:16px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  font-family: var(--ui-font-stack);
  background:
    radial-gradient(900px 520px at 20% 12%, rgba(58,80,107,.35), transparent 60%),
    radial-gradient(800px 520px at 85% 18%, rgba(212,163,115,.14), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(58,80,107,.25), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--midnight));
  color: var(--text);
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

.sy-muted{ color: var(--muted); }

/* Inputs */
input, select, textarea, button{ font-family: inherit; }

input, select, textarea{
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: var(--inputBg);
  color: var(--text);
  outline: none;
  transition: .16s ease;
  width: 100%;
}

input::placeholder, textarea::placeholder{ color: rgba(147,166,189,.55); }

input:focus, select:focus, textarea:focus{
  border-color: rgba(212,163,115,.60);
  box-shadow: 0 0 0 3px rgba(212,163,115,.18);
}

/* Buttons */
.sy-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  transition: .16s ease;
  text-decoration: none;
}

.sy-btn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
}

.sy-btn:active{ transform: scale(0.98); }

.sy-btn--primary{
  border: none;
  background: linear-gradient(135deg, var(--rose1), var(--rose2));
  color: #141414;
  box-shadow: 0 14px 30px rgba(212,163,115,.22);
  font-weight: 900;
}

.sy-btn--primary:hover{
  background: linear-gradient(135deg, var(--rose1), var(--rose2));
  color: #141414;
  filter: brightness(1.04);
}

.sy-btn--lg{ padding: 14px 22px; font-size: 14px; }

/* Cards */
.sy-card{
  border-radius: var(--r16);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
}

.sy-card__inner{ padding: 18px; }

.sy-brand{
  font-family: 'Orbitron', var(--ui-font-stack);
  font-weight: 900;
  letter-spacing: 4px;
}