/* ============================================================
   깨알도구
   할인율 계산기 전용 CSS

   공통 디자인:
   ../../css/tool-common.css

   여기에는 할인율 계산기에만 필요한 스타일만 둔다.
   ============================================================ */

/* ============================================================
   CALCULATOR
   좌/우 패널 높이를 맞춘다.
   ============================================================ */

.discount-calculator {
  align-items: stretch;
}

/* ============================================================
   MODE

   할인율 계산기는
   최종 가격 / 할인율 / 원가
   3개의 계산방식을 사용한다.
   ============================================================ */

.mode-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin-bottom: 22px;
}

/* ============================================================
   QUICK RATE

   할인율 계산기 전용 빠른 선택 버튼
   ============================================================ */

.quick-rates {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;
}

.quick-rates button {
  padding: 5px 9px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: transparent;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.quick-rates button:hover {
  background: var(--surface-soft);

  color: var(--text);

  transform: translateY(-1px);
}

/* ============================================================
   MOBILE

   3개 모드 버튼은 모바일에서도 한 줄 유지
   ============================================================ */

@media (max-width: 520px) {
  .mode-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}