/* ========================================
   Buttons
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
}

/* ---------- Btn Large (ex. sleep-fit) ---------- */
.btn-large {
  gap: 1.125rem;
  /* 18px */
  padding: 0.75rem 2.25rem;
  /* 12px 36px */
  border-radius: 3.125rem;
  /* 50px */
  background-color: var(--color-brand-point);
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: 1.5rem;
  /* 24px */
  letter-spacing: 0.1em;
  /* 10% */
  color: var(--color-white);
}

.btn-large__arrow {
  flex-shrink: 0;
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  background-color: currentColor;
  -webkit-mask: url('../../images/common/icons/test-arrow.svg') center / contain no-repeat;
  mask: url('../../images/common/icons/test-arrow.svg') center / contain no-repeat;
}

.btn-large:hover,
.btn-large:active {
  background-color: var(--color-brand-light-1);
  color: var(--color-brand-dark);
}

/* ---------- Btn Medium (ex. cta) ---------- */
.btn-medium {
  gap: 0.5rem;
  padding: 0.75rem 2.25rem;
  /* 12px 36px */
  border-radius: 6.25rem;
  /* 100px */
  background-color: var(--color-brand-light-1);
  font-family: var(--font-suit);
  font-weight: 600;
  font-size: 1.875rem;
  /* 30px */
  line-height: 130%;
  color: var(--color-brand-dark);
}

.btn-medium__arrow {
  flex-shrink: 0;
  line-height: 1;
}

.btn-medium:hover,
.btn-medium:active {
  opacity: 0.8;
}

/* ---------- Btn Small (ex. test-before / test-next) ---------- */
.btn-small {
  padding: 0.75rem 2.25rem;
  /* 12px 36px */
  border-radius: 1.25rem;
  /* 20px */
  border: 0.0625rem solid var(--color-brand-dark);
  background-color: var(--color-white);
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.25rem;
  /* 20px */
  color: var(--color-brand-dark);
}

.btn-small:hover,
.btn-small:active {
  background-color: var(--color-brand-light-1);
  color: var(--color-brand-dark);
}

.btn-small-next {
  padding: 0.75rem 2.25rem;
  /* 12px 36px */
  border-radius: 1.25rem;
  /* 20px */
  border: 0.0625rem solid var(--color-brand-dark);
  background-color: var(--color-brand-dark);
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.25rem;
  /* 20px */
  color: var(--color-white);
  /* 디자인 기준: dark 배경 위 흰색 텍스트 */
}

.btn-small-next:hover,
.btn-small-next:active {
  background-color: var(--color-brand-light-1);
  color: var(--color-brand-dark);
}

.btn-small-next:disabled,
.btn-small-next[disabled] {
  border-color: var(--color-grey-300);
  background-color: var(--color-grey-300);
  color: var(--color-grey-600);
  cursor: not-allowed;
}

.btn-small-next:disabled:hover,
.btn-small-next:disabled:active,
.btn-small-next[disabled]:hover,
.btn-small-next[disabled]:active {
  border-color: var(--color-grey-300);
  background-color: var(--color-grey-300);
  color: var(--color-grey-600);
}

/* ---------- Tab btn ---------- */
.btn-tab-group {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  /* 12px */
}

.btn-tab {
  padding: 0.5rem 0.875rem; /* 8px 14px */
  border-radius: 2.5rem; /* 40px */
  border: 0.0625rem solid var(--color-brand-dark); /* 1px */
  background-color: transparent;
  font-family: var(--font-paperlogy);
  font-weight: 500;
  font-size: 1.125rem;
  /* 18px */
  color: var(--color-brand-dark);
}

/* Hover — grey-100 */
.btn-tab:hover,
.btn-tab.is-hover {
  background-color: var(--color-grey-100);
  border-color: var(--color-brand-dark);
  color: var(--color-brand-dark);
}

/* Click / selected — brand/dark */
.btn-tab:active,
.btn-tab.is-active {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-white);
}

/* 선택된 탭은 hover 시에도 click 상태 유지 */
.btn-tab.is-active:hover {
  background-color: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: var(--color-white);
}

.btn-tab--suit {
  font-family: var(--font-suit);
}

.btn-tab-ctg {
  flex-direction: column;
  gap: 0.25rem;
  /* 4px */
  padding: 1.25rem 3.75rem;
  /* 20px 60px */
  border-radius: 6.25rem;
  /* 100px */
  border: 0.0625rem solid transparent;
  /* layout shift 방지 */
  background-color: #f9f9f9;
  font-family: var(--font-paperlogy);
  font-weight: 400;
  font-size: 1.25rem;
  /* 20px */
  color: var(--color-text-dark);
  white-space: normal;
}

.btn-tab-ctg__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  /* 200px */
  height: 7.125rem;
  /* 114px */
  background-color: var(--color-grey-100);
  color: var(--color-grey-400);
}

.btn-tab-ctg__media svg {
  width: 2.5rem;
  /* 40px */
  height: 2.5rem;
}

.btn-tab-ctg:hover,
.btn-tab-ctg:active {
  border-color: var(--color-brand-dark);
  background-color: #f9f9f9;
  color: var(--color-text-dark);
}

/* ---------- Tablet: 768–1023px ---------- */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .btn-large {
    gap: 0.5rem;
    padding: 0.625rem; /* 10px */
    font-size: 0.875rem; /* 14px */
  }

  .btn-large__arrow {
    width: 0.75rem; /* 12px */
    height: 0.75rem;
  }

  .btn-medium {
    padding: 0.75rem 2.25rem; /* 12px 36px */
    font-weight: var(--fw-suit-bold); /* Suit Bold */
    font-size: 1.5rem; /* 24px */
  }

  .btn-small,
  .btn-small-next {
    padding: 0.625rem 3.125rem; /* 10px 50px */
    font-size: 1.125rem; /* 18px */
  }

  .btn-tab {
    padding: 0.5rem 1.25rem; /* 8px 20px */
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
  }

  .btn-tab-ctg {
    width: 9.375rem; /* 150px */
    height: 5.3125rem; /* 85px */
    gap: 0.125rem;
    padding: 0.625rem 2.75rem; /* 10px 44px */
    font-family: var(--font-suit);
    font-size: 1.125rem; /* Body03 18px */
  }

  .btn-tab-ctg__media {
    width: 100%;
    height: 2.5rem; /* 40px */
  }

  .btn-tab-ctg__media svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* ---------- Mobile: 320–767px ---------- */
@media (max-width: 47.9375rem) {
  .btn-large {
    gap: 0.5rem;
    padding: 0.625rem; /* 10px */
    font-size: 0.875rem; /* 14px */
  }

  .btn-large__arrow {
    width: 0.75rem; /* 12px */
    height: 0.75rem;
  }

  .btn-medium {
    padding: 0.75rem 2.25rem; /* 12px 36px */
    font-weight: var(--fw-suit-bold); /* Suit Bold */
    font-size: 1rem; /* 16px */
  }

  .btn-small,
  .btn-small-next {
    padding: 0.3125rem 1.875rem; /* 5px 30px */
    border-width: 0.8px;
    font-size: 1rem; /* 16px */
  }

  .btn-tab {
    padding: 0.5rem 1.25rem; /* 8px 20px */
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
  }

  .btn-tab-ctg {
    width: 9.375rem; /* 150px */
    height: 4.875rem; /* 78px */
    gap: 0.125rem;
    padding: 0.625rem 0.9375rem; /* 10px 15px */
    font-family: var(--font-suit);
    font-size: 0.875rem; /* Body04 14px */
    line-height: 1;
  }

  .btn-tab-ctg__media {
    width: 100%;
    height: 2.25rem; /* 36px */
  }

  .btn-tab-ctg__media svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}