/* ============================================================
   깨알도구
   N빵 계산기 전용 CSS

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

   여기에는 N빵 계산기에만 필요한 스타일만 둔다.
   ============================================================ */

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

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

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

/* ============================================================
   PEOPLE INPUT

   - / 인원수 / + 구조
   ============================================================ */

.people-input-row {
  display: grid;

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

  gap: 7px;
}

/* ============================================================
   PEOPLE COUNT INPUT

   일반 입력창 디자인은 tool-common.css 사용
   가운데 정렬만 N빵 전용
   ============================================================ */

.people-input-wrap input {
  padding: 0 43px 0 12px;

  text-align: center;
}

/* ============================================================
   COUNT BUTTON
   ============================================================ */

.count-button {
  height: var(--tool-input-height);

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

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

  background: var(--surface-soft);

  color: var(--text);

  font-size: 22px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.count-button:hover {
  background: #ebe9e2;

  transform: translateY(-1px);
}

/* ============================================================
   PEOPLE PRESETS
   ============================================================ */

.people-presets {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  margin-top: 8px;
}

.people-presets 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;
}

.people-presets button:hover {
  background: var(--surface-soft);

  color: var(--text);

  transform: translateY(-1px);
}

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

   나머지 1원을 누가 더 내는지 설명하는
   N빵 계산기 전용 결과 박스
   ============================================================ */

.result-detail {
  margin-top: 16px;

  padding: 12px 13px;

  border-radius: 11px;

  background: var(--surface-soft);

  color: var(--text);

  font-size: 12px;

  line-height: 1.7;
}

.result-detail strong {
  font-weight: 800;
}

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

.result-check {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-top: 14px;

  padding-top: 13px;

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

  color: var(--text-soft);

  font-size: 12px;
}

.result-check strong {
  flex: 0 0 auto;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;
}