/* 재사용 가능한 UI 컴포넌트 */
/* ===========================================================
   BUTTON
=========================================================== */

.btn {}
.btn-primary {}
.btn-secondary {}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: .8rem 2.4rem;
  border-radius: .5rem;
  transition: background-color .3s, color .3s, border-color .3s;
  background: hsl(var(--color-accent));
  margin:0; font-size:var(--text-15); font-weight:500;
  line-height: var(--lh-body);
}
@media (min-width:1024px){
  .btn{padding:1.2rem 3.2rem;}
}

.btn:hover{opacity:1;}
/* .btn p {margin:0; font-size:var(--text-15); font-weight:500;} */
.btn span{line-height:1;}

/* Primary */
.btn-primary{
  background:hsl(var(--color-accent));
  color:hsl(var(--color-accent-foreground));
}
.btn-primary:hover{
  background:hsl(var(--color-primary));
  color:hsl(var(--color-white));
}

/* Secondary */
.btn-secondary{
  background:hsl(var(--color-primary));
  color:hsl(var(--color-white));
}

/* Outline */
.btn-outline{
  border:1px solid hsl(var(--color-border));
  background:transparent;
}

/* Radius */
.btn-pill{
  border-radius:9999px;
}

.btn-group{
    display:flex;
    gap:var(--space-12);
}