/* ============================================================
   깨알도구
   중앙값 계산기 전용 CSS

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

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

.median-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;
}

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

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

  padding: 7px 9px;

  border-radius: 8px;

  background: #fffaf0;

  color: #8a7549;

  font-size: 12px;

  line-height: 1.5;
}

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

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

/* ============================================================
   SORTED VALUES
   ============================================================ */

.sorted-title {
  margin-top: 17px;

  margin-bottom: 6px;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}

.sorted-values {
  max-height: 120px;

  overflow-y: auto;

  padding: 10px 11px;

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

  border-radius: 10px;

  background: #ffffff;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 600;

  line-height: 1.65;

  overflow-wrap: anywhere;
}