/* button.css */

button, .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
	font-family: 'Noto Sans KR', sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: #000;
  text-align: center;
  padding: 0;
  border: 0;
  background: none;
  transition: all .5s;
  cursor: pointer;
}

/* 사이즈 */
.btn__sm {
  font-size: var(--font-size-s);
  max-width: 88px;
  width: 100%;
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
}

.btn__s {
  font-size: var(--font-size-s);
  padding: 8px 10px !important;
  border-radius: var(--border-radius-sm);
}

.btn__smd {
  font-size: var(--font-size-md);
  min-width: 85px;
  padding: 5px 10px;
  border-radius: var(--border-radius-sm);
}

.btn__md {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  max-width: 100px;
  width: 100%;
  padding: 8px 0;
  border-radius: var(--border-radius-full);
}

.btn__lg {
  font-size: var(--font-size-lg);
  min-width: 180px;
  /* width: 100%; */
  padding: 10px 30px;
  border-radius: var(--border-radius-full);
}

.btn__full {
  max-width: 100%;
  width: 100%;
  font-weight: var(--font-weight-semibold);
  color: #000;
  padding: 16px 0;
  border-radius: var(--border-radius-md);
}

.btn__radius__full {
  border-radius: var(--border-radius-full);
}

/* 컬러별 - Filled */
.btn__primary {
  color: var(--color-white);
  background: var(--primary-300);
}

.btn__secondary {
  color: var(--color-white);
  background: #595B68;
}

.btn__danger {
  color: var(--color-white);
  background: var(--error-red);
}

.btn__green {
  color: var(--color-white);
  background: #1D97B2;
}

/* 컬러별 - Outline */
.btn__border__primary {
  color: var(--primary-300);
  border: 1px solid var(--primary-300);
  border-radius: var(--border-radius-sm);
  background: var(--color-white);
}

.btn__border__black {
  border: 1px solid #6D6D6D;
}

.btn__border__gray {
  border: 1px solid #E8E8E8;
}

.btn__border__danger {
  color: var(--error-red);
  border: 1px solid var(--error-red);
  background: var(--color-white);
}

button.print {
  padding-right: 40px !important;
  background: url('../../../images/react/icon/ico_print.svg') right 15px center no-repeat;
}

@media (max-width: 1024px) {
  .btn__sm {
    /* max-width: 70px; */
  }

  .btn__smd {
    font-size: var(--font-size-s);
  }

  .btn__md {
    font-size: var(--font-size-s);
  }

  .btn__lg {
    font-size: var(--font-size-md);
  }
}

@media (max-width: 765px) {
  .btn__s {
    padding: 10px 20px !important;
  }

  .btn__lg {
    min-width: 120px;
  }

  .btn__full {
    font-size: var(--font-size-base);
    padding: 10px 0;
  }

  button.print {
    display: none;
  }
}