/* ============================================================
   깨알도구
   평균 계산기 전용 CSS

   공통:
   ../../css/tool-common.css
   ============================================================ */

/* ============================================================
   PAGE
   ============================================================ */

.tool-page {
  --tool-page-max-width: 920px;
}

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

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

/* ============================================================
   NUMBER INPUT
   ============================================================ */

.number-input {
  display: block;

  width: 100%;
  min-height: 190px;

  padding: 12px 13px;

  resize: vertical;

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

  border-radius: var(--tool-input-radius);

  background: #ffffff;

  color: var(--text);

  outline: none;

  font: inherit;

  font-size: 14px;

  font-weight: 600;

  line-height: 1.6;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.number-input:focus {
  border-color: var(--accent);

  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.1);
}

.number-input::placeholder {
  color: #aaa9a2;

  font-weight: 500;
}

/* ============================================================
   INPUT WARNING
   ============================================================ */

.input-warning {
  margin-top: 7px;

  padding: 7px 9px;

  border-radius: 8px;

  background: #fffaf0;

  color: #8a7549;

  font-size: 12px;

  line-height: 1.5;
}

/* ============================================================
   RESULT
   ============================================================ */

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