/* 결제 직전 예약 내용 확인 모달 — views/reservation/include/modal/paymentConfirmModal.jsp
   내용을 둥근 사각 배경 하나로 묶는다. 항목 사이에 선을 두지 않고 여백으로만 나눈다. */
.modal.payment-confirm {
  .modal-popup {
    width: 100%;
    max-width: 520px;
  }

  .popup-content {
    padding: var(--padding);

    /* flex column에서 자식이 눌리면 스크롤이 안 생기고 아래가 잘린다. */
    > * {
      flex-shrink: 0;
    }
  }

  h1 {
    font-size: 1.5em;
  }
  h2 {
    margin: 6px 0 20px;
  }

  .confirm-card {
    background-color: var(--gray-pale);
    border-radius: 12px;
    padding: 20px;
  }

  .card-item {
    margin-bottom: 18px;

    h3 {
      font-size: 1.05em;
      font-weight: bold;
      line-height: 1.4;
      word-break: keep-all;
    }
    p {
      margin-top: 4px;
      color: var(--gray-mid);
      font-size: 0.93em;
    }
  }

  dl {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;

    & + dl {
      margin-top: 10px;
    }
    dt {
      color: var(--gray-mid);
      font-size: 0.9em;
      font-weight: bold;
      white-space: nowrap;
    }
    dd {
      text-align: right;
      word-break: keep-all;
    }
    /* 예약 조회 키라서 눈에 먼저 들어와야 한다(아래 안내 문구와 짝). */
    &.reserver dd {
      font-size: 1.25em;
      font-weight: bold;
    }

    &.total {
      margin-top: 18px;
      dt {
        color: var(--gray-dark);
        font-size: 1em;
      }
      dd {
        font-size: 1.3em;
        font-weight: bold;
        color: var(--main);
      }
    }
  }

  .confirm-notice {
    margin-top: 14px;
    color: var(--gray-mid);
    font-size: 0.88em;
    line-height: 1.5;
    word-break: keep-all;
  }
}

@media (max-width: 812px) {
  .modal.payment-confirm .popup-content {
    padding: 20px;
  }
}