/* ============================================================
   깨알도구
   1g·100g 가격 계산기 전용 CSS

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

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

.gram-price-calculator {
  align-items: stretch;
}

/* ============================================================
   WEIGHT INPUT
   ============================================================ */

.weight-input-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    82px;

  gap: 7px;
}

.weight-unit-select {
  width: 100%;
  height: var(--tool-input-height);

  padding: 0 10px;

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

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

  background: #ffffff;

  color: var(--text);

  outline: none;

  font: inherit;

  font-size: var(--tool-input-font-size);

  font-weight: 700;

  cursor: pointer;

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

.weight-unit-select:focus {
  border-color: var(--accent);

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

/* ============================================================
   QUICK EXAMPLE
   ============================================================ */

.quick-example-box {
  margin-top: 4px;

  padding: 10px 11px;

  border-radius: 9px;

  background: var(--surface-soft);
}

.quick-example-box span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.quick-example-box strong {
  display: block;

  margin-top: 2px;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}

.quick-example-box small {
  display: block;

  margin-top: 2px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   PRIMARY PRICE
   ============================================================ */

.primary-price-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  margin-top: 8px;
}

.primary-price-card {
  min-width: 0;

  padding: 14px 11px;

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

  border-radius: 12px;

  background: #ffffff;

  text-align: center;
}

.primary-price-card span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.primary-price-card strong {
  display: block;

  margin-top: 4px;

  color: var(--brand);

  font-size: 20px;

  font-weight: 900;

  line-height: 1.2;

  overflow-wrap: anywhere;
}

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

.gram-result-grid {
  margin-top: 12px;
}

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

@media (max-width: 520px) {
  .weight-input-row {
    grid-template-columns:
      minmax(0, 1fr)
      72px;
  }

  .primary-price-card {
    padding: 12px 7px;
  }

  .primary-price-card strong {
    font-size: 17px;
  }
}