/* ============================================================
   깨알도구
   더치페이 계산기 전용 CSS

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

   여기에는 더치페이 계산기에만 필요한 스타일만 둔다.
   ============================================================ */

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

   더치페이는 메뉴/참여자 입력량이 많으므로
   일반 도구보다 약간 넓게 사용한다.
   ============================================================ */

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

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

   입력영역이 조금 더 넓다.
   ============================================================ */

.dutch-calculator {
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr);
}

/* ============================================================
   INPUT SECTION
   ============================================================ */

.input-section + .input-section {
  margin-top: 24px;

  padding-top: 20px;

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

/* ============================================================
   ADD BUTTON
   ============================================================ */

.small-add-button {
  flex: 0 0 auto;

  min-height: 32px;

  padding: 0 10px;

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

  border-radius: 9px;

  background: var(--surface-soft);

  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

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

.small-add-button:hover:not(:disabled) {
  background: #ebe9e2;
}

.small-add-button:disabled {
  opacity: 0.4;

  cursor: not-allowed;
}

/* ============================================================
   PARTICIPANTS
   ============================================================ */

.participant-list {
  display: flex;

  flex-direction: column;

  gap: 6px;
}

.participant-row {
  display: grid;

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

  align-items: center;

  gap: 6px;
}

.participant-number {
  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;

  text-align: center;
}

.participant-name {
  width: 100%;

  height: 40px;

  padding: 0 11px;

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

  border-radius: 10px;

  background: #ffffff;

  color: var(--text);

  outline: none;

  font-size: 12px;

  font-weight: 700;

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

.participant-name:focus {
  border-color: var(--accent);

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

/* ============================================================
   REMOVE BUTTON
   ============================================================ */

.participant-remove,
.menu-remove {
  padding: 0;

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

  background: var(--surface-soft);

  color: var(--text-soft);

  cursor: pointer;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.participant-remove {
  width: 32px;
  height: 32px;

  border-radius: 9px;

  font-size: 17px;
}

.participant-remove:hover:not(:disabled),
.menu-remove:hover:not(:disabled) {
  background: #f6ece8;

  color: #a24b3b;
}

.participant-remove:disabled,
.menu-remove:disabled {
  opacity: 0.3;

  cursor: not-allowed;
}

/* ============================================================
   MENU LIST
   ============================================================ */

.menu-list {
  display: flex;

  flex-direction: column;

  gap: 9px;
}

.menu-card {
  padding: 11px;

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

  border-radius: 12px;

  background: #ffffff;
}

/* ============================================================
   MENU INPUT ROW
   ============================================================ */

.menu-input-row {
  display: grid;

  grid-template-columns:
    20px
    minmax(75px, 1fr)
    minmax(105px, 0.85fr)
    30px;

  align-items: center;

  gap: 5px;
}

.menu-number {
  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;

  text-align: center;
}

.menu-name,
.menu-amount {
  width: 100%;

  height: 38px;

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

  border-radius: 9px;

  background: #ffffff;

  color: var(--text);

  outline: none;

  font-size: 12px;

  font-weight: 700;

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

.menu-name {
  padding: 0 9px;
}

.menu-money-wrap {
  position: relative;
}

.menu-amount {
  padding: 0 29px 0 8px;

  text-align: right;
}

.menu-money-wrap > span {
  position: absolute;

  right: 9px;

  top: 50%;

  transform: translateY(-50%);

  color: var(--text-soft);

  font-size: 12px;

  pointer-events: none;
}

.menu-name:focus,
.menu-amount:focus {
  border-color: var(--accent);

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

.menu-remove {
  width: 30px;
  height: 30px;

  border-radius: 8px;

  font-size: 16px;
}

/* ============================================================
   MENU EATERS
   ============================================================ */

.menu-eaters {
  margin-top: 9px;
}

.menu-eaters-label {
  margin-bottom: 5px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.eater-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 5px;
}

.eater-chip {
  min-height: 27px;

  padding: 0 9px;

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

  border-radius: 999px;

  background: var(--surface);

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.eater-chip:hover {
  background: var(--surface-soft);

  color: var(--text);
}

.eater-chip.active {
  border-color: var(--brand);

  background: var(--brand);

  color: #ffffff;
}

.eater-chip.eater-all {
  font-weight: 800;
}

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

.result-summary {
  display: grid;

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

  gap: 7px;

  margin-bottom: 12px;
}

.result-summary > div {
  min-width: 0;

  padding: 11px 12px;

  background: var(--surface-soft);

  border-radius: 10px;
}

.result-summary span {
  display: block;

  margin-bottom: 2px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 700;
}

.result-summary strong {
  display: block;

  color: var(--brand);

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.7px;

  overflow-wrap: anywhere;
}

/* ============================================================
   PERSON RESULT LIST

   tool-common.css의 공용 .result-list와 분리한다.
   ============================================================ */

.dutch-result-list {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.result-person {
  padding: 11px 12px;

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

  border-radius: 11px;

  background: #ffffff;
}

.result-person-head {
  display: flex;

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

  gap: 10px;
}

.result-person-name {
  min-width: 0;

  overflow: hidden;

  font-size: 12px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.result-person-total {
  flex: 0 0 auto;

  color: var(--brand);

  font-size: 14px;

  font-weight: 900;

  white-space: nowrap;
}

/* ============================================================
   PERSON DETAIL
   ============================================================ */

.result-person-detail {
  margin-top: 7px;

  padding-top: 7px;

  border-top: 1px dashed var(--line);
}

.result-menu-line {
  display: flex;

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

  gap: 10px;

  padding: 2px 0;

  color: var(--text-soft);

  font-size: 12px;
}

.result-menu-line span {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.result-menu-line strong {
  flex: 0 0 auto;

  color: var(--text);

  font-size: 12px;

  font-weight: 700;

  white-space: nowrap;
}

.result-no-menu {
  color: #aaaaaa;

  font-size: 12px;
}

/* ============================================================
   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 {
  color: var(--text);

  font-size: 12px;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 760px) {
  .dutch-calculator {
    grid-template-columns: 1fr;
  }
}

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

@media (max-width: 520px) {
  .menu-card {
    padding: 9px;
  }

  .menu-input-row {
    grid-template-columns:
      17px
      minmax(65px, 1fr)
      minmax(95px, 0.9fr)
      28px;

    gap: 4px;
  }

  .menu-name,
  .menu-amount {
    height: 37px;

    font-size: 12px;
  }

  .menu-remove {
    width: 28px;
    height: 28px;
  }

  .eater-chip {
    min-height: 26px;

    padding: 0 8px;
  }
}