/* ============================================================
   깨알도구
   퍼센트 계산기 전용 CSS

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

   여기에는 퍼센트 계산기에만 필요한 스타일만 둔다.
   ============================================================ */

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

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

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

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

   퍼센트 계산기는 5개 계산방식을 사용한다.
   데스크톱은 3열, 모바일은 2열.
   ============================================================ */

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

  margin-bottom: 21px;
}

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

.quick-rates {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;
}

.quick-rates[hidden] {
  display: none;
}

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

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

  color: var(--text);

  transform: translateY(-1px);
}

/* ============================================================
   EMPTY RESULT ICON

   일반 도구는 emoji를 사용하지만
   퍼센트 계산기는 % 문자를 아이콘으로 사용한다.
   ============================================================ */

.percent-empty-icon {
  color: var(--brand);

  font-size: 34px;

  font-weight: 900;
}

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

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