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


/* =========================
   hidden 공통 처리

   중요:
   JS에서 mainInputView.hidden = true;
   itemDetailView.hidden = false;
   식으로 화면을 전환하기 때문에

   display:flex보다 hidden이
   반드시 우선되어야 함.
========================= */

[hidden] {
  display: none !important;
}


/* =========================
   전체 화면
========================= */

.quick-main-screen {
  position: relative;

  height: 100dvh;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  background-color: white;

  overflow: hidden;
}


/* =========================
   메인 입력 화면
========================= */

.main-input-view {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;

  background-color: white;

  overflow: hidden;
}


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

.quick-main-header {
  flex-shrink: 0;

  height: 58px;

  display: grid;

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

  align-items: center;

  padding: 0 12px;

  border-bottom: 1px solid #eeeeee;

  box-sizing: border-box;

  background-color: white;
}


.quick-main-header h1 {
  margin: 0;

  text-align: center;

  font-size: 15px;

  font-weight: 600;
}


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

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


/* =========================
   수정하기
========================= */

.edit-room-button {
  justify-self: end;

  padding: 0;

  border: none;

  background: none;

  color: #52aead;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;
}


/* =========================
   입력 카드
========================= */

.item-input-card {
  flex-shrink: 0;

  margin: 16px;

  padding: 16px;

  border: 1px solid #dddddd;

  border-radius: 10px;

  box-sizing: border-box;
}


/* =========================
   일반 입력
========================= */

.input-field {
  margin-bottom: 16px;
}


.input-field label {
  display: block;

  margin-bottom: 8px;

  font-size: 13px;

  font-weight: 600;
}


.input-field > input {
  width: 100%;

  padding: 7px 0;

  border: none;

  border-bottom: 1px solid #999999;

  outline: none;

  font-size: 13px;

  box-sizing: border-box;
}


.input-field input::placeholder {
  color: #bbbbbb;
}


/* =========================
   금액
========================= */

.amount-row {
  display: flex;

  align-items: center;

  gap: 8px;
}


.input-field:has(.amount-row) {
  margin-bottom: 10px;
}


/* =========================
   통화 선택
========================= */

.currency-select {
  width: 55px;

  height: 35px;

  border: 1px solid #dddddd;

  border-radius: 6px;

  background-color: white;

  font-size: 14px;

  outline: none;

  cursor: pointer;
}


/* =========================
   금액 입력
========================= */

.amount-input-box {
  flex: 1;

  display: flex;

  align-items: center;

  border-bottom: 1px solid #999999;
}


.currency-symbol {
  margin-right: 5px;

  font-size: 14px;

  font-weight: 600;

  color: #333333;
}


.amount-input-box input {
  width: 100%;

  padding: 7px 0;

  border: none;

  outline: none;

  font-size: 13px;
}


/* =========================
   환율
========================= */

.exchange-rate {
  min-height: 0;

  margin: 5px 0 0 63px;

  color: #999999;

  font-size: 10px;
}


.exchange-rate:empty {
  display: none;
}


/* =========================
   결제자 / 참여 인원
========================= */

.participant-select-section {
  margin-top: 14px;
}


.payer-select-section {
  margin-top: 2px;
}


.participant-select-section h2 {
  margin: 0 0 10px;

  font-size: 13px;

  font-weight: 600;
}


/* =========================
   참여자 버튼 영역
========================= */

.participant-buttons {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


/* =========================
   참여자 버튼
========================= */

.participant-select-button {
  min-width: 52px;

  padding: 7px 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 5px;

  border: 1px solid #dddddd;

  border-radius: 8px;

  background-color: white;

  cursor: pointer;

  transition: 0.15s;
}


/* =========================
   참여자 색상
========================= */

.participant-dot {
  width: 18px;
  height: 18px;

  border-radius: 50%;
}


.participant-select-button span:last-child {
  font-size: 9px;
}


/* =========================
   선택된 사람
========================= */

.participant-select-button.selected {
  border-color: #52aead;

  background-color: rgba(82, 174, 173, 0.08);
}


/* =========================
   항목 추가 버튼
========================= */

.add-item-button {
  margin: 18px 0 0 auto;

  display: flex;

  align-items: center;

  gap: 5px;

  padding: 8px 14px;

  border: none;

  border-radius: 20px;

  background-color: #52aead;

  color: white;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;
}


#addItemIcon {
  font-size: 16px;

  line-height: 1;
}


#addItemButtonText {
  font-size: 12px;

  line-height: 1;
}


/* =========================
   정산 항목 영역
========================= */

.settlement-items-section {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  padding: 0 24px;

  box-sizing: border-box;

  overflow: hidden;
}


.settlement-items-section > h2 {
  flex-shrink: 0;

  margin: 0 0 4px;

  font-size: 16px;

  font-weight: 700;
}


/* =========================
   정산 내용 스크롤
========================= */

#settlementItems {
  flex: 1;

  min-height: 0;

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

  padding-bottom: 8px;

  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}


#settlementItems::-webkit-scrollbar {
  display: none;
}


/* =========================
   항목 한 줄
========================= */

.settlement-item {
  position: relative;

  overflow: hidden;

  border-bottom: 1px solid #eeeeee;
}


/* =========================
   수정 / 삭제 영역
========================= */

.item-actions {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;

  display: flex;

  z-index: 1;
}


.item-action-button {
  width: 64px;

  border: none;

  color: white;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;
}


.edit-item-button {
  background-color: #52aead;
}


.delete-item-button {
  background-color: #e86d6d;
}


/* =========================
   실제 항목 내용
========================= */

.settlement-item-content {
  position: relative;

  z-index: 2;

  min-height: 58px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-right: 12px;

  box-sizing: border-box;

  background-color: white;

  transition: transform 0.2s ease;

  touch-action: pan-y;

  cursor: pointer;
}


/* =========================
   항목 이름
========================= */

.item-name {
  flex: 1;

  min-width: 0;

  font-size: 14px;

  font-weight: 500;

  color: #222222;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================
   오른쪽 금액 + 참여자
========================= */

.item-right {
  flex-shrink: 0;

  display: flex;
  flex-direction: column;

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

  gap: 6px;

  margin-left: 12px;
}


/* 금액은 무조건 위쪽 한 줄 */

.item-amount {
  width: auto;

  text-align: right;

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

  white-space: nowrap;
}


/* 참여자 동그라미는 아래에서 자동 줄바꿈 */

.item-participants {
  max-width: 130px;

  display: flex;
  flex-wrap: wrap;

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

  gap: 4px;
}


.item-participant-dot {
  width: 14px;
  height: 14px;

  flex: 0 0 14px;

  border-radius: 50%;
}

/* =========================
   하단 정산 버튼
========================= */

.settle-button {
  flex-shrink: 0;

  position: static;

  width: calc(100% - 32px);

  height: 46px;

  margin: 10px 16px 20px;

  border: none;

  border-radius: 7px;

  background-color: #52aead;

  color: white;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  box-sizing: border-box;
}


/* =========================================================
   항목 상세 화면
========================================================= */

.item-detail-view {
  width: 100%;
  height: 100%;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  background-color: #ffffff;

  overflow: hidden;
}


/* =========================
   상세 헤더
========================= */

.item-detail-header {
  flex-shrink: 0;

  height: 58px;

  display: grid;

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

  align-items: center;

  padding: 0 12px;

  border-bottom: 1px solid #eeeeee;

  box-sizing: border-box;

  background-color: #ffffff;
}


.item-detail-header h1 {
  margin: 0;

  text-align: center;

  font-size: 15px;

  font-weight: 600;

  color: #111111;
}


/* =========================
   상세 뒤로가기
========================= */

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

  display: flex;

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

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;
}


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

  display: block;

  object-fit: contain;
}


.detail-header-spacer {
  width: 60px;
}


/* =========================
   상세 내용
========================= */

.item-detail-content {
  flex: 1;

  min-height: 0;

  padding: 0 16px 30px;

  box-sizing: border-box;

  overflow-y: auto;

  background-color: #ffffff;

  scrollbar-width: none;
}


.item-detail-content::-webkit-scrollbar {
  display: none;
}


/* =========================
   항목 제목 / 총 금액
========================= */

.detail-title-section {
  padding: 34px 0 28px;

  text-align: center;
}


.detail-item-name {
  margin: 0 0 8px;

  font-size: 24px;

  line-height: 1.25;

  font-weight: 700;

  color: #111111;
}


.detail-original-total {
  display: block;

  font-size: 21px;

  line-height: 1.3;

  font-weight: 700;

  color: #222222;
}


/* =========================
   환율 안내
========================= */

.detail-exchange-info {
  margin: 8px 0 0;

  font-size: 10px;

  line-height: 1.4;

  font-weight: 400;

  color: #aaaaaa;
}


.detail-converted-total {
  margin: 5px 0 0;

  font-size: 11px;

  color: #999999;
}


/* =========================
   공통 상세 카드
========================= */

.detail-info-card {
  width: 100%;

  margin: 0 0 16px;

  padding: 18px 16px;

  border: 1px solid #dddddd;

  border-radius: 10px;

  box-sizing: border-box;

  background-color: #ffffff;
}


.detail-info-card h3 {
  margin: 0;

  font-size: 14px;

  line-height: 1.3;

  font-weight: 700;

  color: #222222;
}


/* =========================================================
   결제자
========================================================= */

.detail-payer-card {
  min-height: 112px;
}


.detail-payer-row {
  min-height: 54px;

  display: flex;

  align-items: center;

  width: 100%;

  margin-top: 12px;

  box-sizing: border-box;
}


/* =========================
   사람 색상 동그라미
========================= */

.detail-person-dot {
  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  display: block;

  border-radius: 50%;
}


/* =========================
   결제자 이름
========================= */

.detail-person-name {
  flex: 1;

  min-width: 0;

  margin-left: 12px;

  font-size: 13px;

  line-height: 1.4;

  font-weight: 500;

  color: #222222;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================
   오른쪽 결제 표시
========================= */

.detail-payer-label {
  flex-shrink: 0;

  margin-left: 12px;

  font-size: 12px;

  line-height: 1.4;

  font-weight: 400;

  color: #999999;

  white-space: nowrap;
}


/* =========================================================
   참여자
========================================================= */

.detail-participant-card {
  padding-bottom: 12px;
}


/* =========================
   참여자 카드 제목
========================= */

.detail-card-heading {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;
}


.detail-participant-count {
  flex-shrink: 0;

  font-size: 12px;

  font-weight: 400;

  color: #777777;
}


/* =========================
   참여자 목록
========================= */

.detail-participant-list {
  width: 100%;

  display: flex;

  flex-direction: column;
}


/* =========================
   참여자 한 줄
========================= */

.detail-participant-row {
  width: 100%;

  min-height: 54px;

  display: flex;

  align-items: center;

  box-sizing: border-box;

  border-bottom: 1px solid #eeeeee;
}


.detail-participant-row:last-child {
  border-bottom: none;
}


/* =========================
   참여자 이름
========================= */

.detail-participant-name {
  flex: 1;

  min-width: 0;

  margin-left: 12px;

  font-size: 13px;

  line-height: 1.4;

  font-weight: 500;

  color: #222222;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================
   참여자 금액 영역
========================= */

.detail-participant-money {
  flex-shrink: 0;

  min-width: 88px;

  margin-left: 12px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

  text-align: right;
}


/* 환산된 기준 통화 금액 */

.detail-participant-amount {
  display: block;

  font-size: 13px;

  line-height: 1.35;

  font-weight: 600;

  color: #222222;

  white-space: nowrap;
}


/* =========================
   외화 원본 금액
========================= */

.detail-participant-original {
  display: block;

  margin-top: 2px;

  font-size: 10px;

  line-height: 1.3;

  font-weight: 400;

  color: #aaaaaa;

  white-space: nowrap;
}


/* =========================
   작은 화면 대응
========================= */

@media (max-width: 360px) {

  .item-input-card {
    margin-left: 12px;
    margin-right: 12px;
  }

  .settlement-items-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .item-right {
    margin-left: 8px;
  }

  .item-amount {
    font-size: 13px;
  }

  .item-participants {
    max-width: 110px;
  }

  .item-detail-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .detail-participant-money {
    min-width: 78px;
  }
}