/* ============================================================
   깨알도구
   부가세 계산기 전용 CSS

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

   여기에는 부가세 계산기에만 필요한 스타일만 둔다.
   ============================================================ */

/* ============================================================
   CALCULATOR

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

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

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

   공급가액 기준 / 합계금액 기준
   ============================================================ */

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

  margin-bottom: 22px;
}

.mode-button {
  min-height: 52px;
}

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

.quick-rates {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;
}

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

  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,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

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

  color: var(--text);

  transform: translateY(-1px);
}

.quick-rates button.active {
  border-color: var(--brand);

  background: var(--brand);

  color: #ffffff;
}

/* ============================================================
   EXAMPLES

   부가세 계산기는 예시가 2개이므로
   데스크톱에서는 2열 사용
   ============================================================ */

.vat-example-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

@media (max-width: 520px) {
  .vat-example-grid {
    grid-template-columns: 1fr;
  }
}