/* =========================
   TOGETHER SUMMARY
========================= */

body {
  margin: 0;
  background-color: #f5f5f5;
  overflow: hidden;
}

.together-summary-screen {
  position: relative;

  height: 100dvh;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  background-color: #ffffff;

  overflow: hidden;
}


/* =========================
   상단 헤더
========================= */

.together-summary-header {
  flex-shrink: 0;

  height: 58px;

  display: grid;
  grid-template-columns: 60px 1fr 60px;

  align-items: center;

  padding: 0 12px;

  box-sizing: border-box;

  background-color: #ffffff;

  border-bottom: 1px solid #eeeeee;
}


/* =========================
   뒤로가기
========================= */

.back-button {
  width: 34px;
  height: 34px;

  display: flex;

  justify-content: flex-start;
  align-items: center;

  padding: 0;

  border: none;

  background: none;

  cursor: pointer;
}

.back-button img {
  width: 21px;
  height: 21px;

  display: block;

  object-fit: contain;
}


/* =========================
   헤더 제목
========================= */

.together-summary-header h1 {
  margin: 0;

  text-align: center;

  font-size: 15px;
  font-weight: 600;

  color: #222222;
}

.header-spacer {
  width: 60px;
}


/* =========================
   스크롤 영역
========================= */

.summary-scroll-area {
  flex: 1;

  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 0 16px 24px;

  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

.summary-scroll-area::-webkit-scrollbar {
  display: none;
}


/* =========================
   방 이름
========================= */

.room-title-section {
  padding: 24px 0 18px;
}

.room-title-section h2 {
  margin: 0;

  font-size: 20px;
  font-weight: 700;

  color: #222222;
}


/* =========================
   전체 결제 요약
========================= */

.total-summary-section {
  padding: 20px 18px;

  box-sizing: border-box;

  border: 1px solid #dddddd;

  border-radius: 10px;

  background-color: #ffffff;
}


/* 총 결제 금액 라벨 */

.summary-label {
  margin: 0 0 12px;

  font-size: 13px;
  font-weight: 600;

  color: #222222;
}


/* 총 금액 */

.total-amount {
  margin: 0;

  text-align: right;

  font-size: 27px;
  font-weight: 700;

  line-height: 1.25;

  color: #111111;
}


/* 구분선 */

.summary-divider {
  width: 100%;
  height: 1px;

  margin: 22px 0 16px;

  background-color: #eeeeee;
}


/* 결제 내역 수 */

.payment-count-row {
  display: flex;

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

  font-size: 13px;

  color: #222222;
}

.payment-count-row span {
  font-weight: 500;
}

.payment-count-row strong {
  font-size: 13px;
  font-weight: 600;

  color: #222222;
}


/* =========================
   결제자별 영역
========================= */

.payer-summary-section {
  margin-top: 26px;
}

.payer-summary-section > h2 {
  margin: 0 0 12px;

  font-size: 16px;
  font-weight: 700;

  color: #222222;
}


/* =========================
   결제자 카드 목록
========================= */

.payer-summary-list {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


/* =========================
   결제자 카드
========================= */

.payer-summary-card {
  padding: 16px;

  box-sizing: border-box;

  border: 1px solid #dddddd;

  border-radius: 10px;

  background-color: #ffffff;
}


/* =========================
   결제자 카드 상단
========================= */

.payer-summary-header {
  display: flex;

  align-items: center;

  margin-bottom: 15px;
}


/* 결제자 색상 동그라미 */

.payer-color-dot {
  width: 18px;
  height: 18px;

  flex-shrink: 0;

  border-radius: 50%;

  margin-right: 9px;
}


/* 결제자 이름 */

.payer-name {
  flex: 1;

  min-width: 0;

  font-size: 14px;
  font-weight: 600;

  color: #222222;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* 결제자 총 결제 금액 */

.payer-total-amount {
  flex-shrink: 0;

  margin-left: 12px;

  font-size: 14px;
  font-weight: 700;

  color: #222222;

  white-space: nowrap;
}


/* =========================
   결제자가 결제한 항목들
========================= */

.payer-item-list {
  display: flex;

  flex-direction: column;

  gap: 0;
}


/* 항목 한 줄 */

.payer-item-row {
  min-height: 38px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  box-sizing: border-box;

  border-top: 1px solid #eeeeee;
}


/* 첫 항목 선 제거 */

.payer-item-row:first-child {
  border-top: none;
}


/* 항목 이름 */

.payer-item-name {
  flex: 1;

  min-width: 0;

  font-size: 12px;
  font-weight: 400;

  color: #555555;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* 항목 금액 */

.payer-item-amount {
  flex-shrink: 0;

  font-size: 12px;
  font-weight: 500;

  color: #444444;

  white-space: nowrap;
}


/* =========================
   데이터 없을 때
========================= */

.summary-empty {
  padding: 30px 10px;

  text-align: center;

  font-size: 13px;

  color: #999999;
}


/* =========================
   하단 버튼 영역
========================= */

.summary-bottom-area {
  flex-shrink: 0;

  padding: 10px 16px 20px;

  box-sizing: border-box;

  background-color: #ffffff;
}


/* =========================
   정산 결과 보기
========================= */

.result-button {
  width: 100%;
  height: 46px;

  border: none;

  border-radius: 7px;

  background-color: #52aead;

  color: #ffffff;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  box-sizing: border-box;
}

.result-button:disabled {
  opacity: 0.55;

  cursor: default;
}