/* =========================================================
   TOGETHER RESULT
========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  background-color: #f5f5f5;
  overflow: hidden;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================================
   SCREEN
========================================================= */

.together-result-screen {
  position: relative;

  width: 100%;
  height: 100dvh;
  min-height: 0;

  display: flex;
  flex-direction: column;

  background-color: #ffffff;

  overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.result-header {
  position: relative;

  width: 100%;
  height: 58px;

  flex: 0 0 58px;

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

  padding: 0 16px;

  background-color: #ffffff;

  border-bottom: 1px solid #eeeeee;

  z-index: 50;
}

.result-header h1 {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  max-width: 180px;

  margin: 0;

  color: #222222;

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

  line-height: 1;

  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events: none;
}


/* =========================================================
   BACK
========================================================= */

.header-back-button {
  position: relative;

  width: 32px;
  height: 36px;

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

  flex-shrink: 0;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

  z-index: 2;
}

.header-back-button img {
  display: block;

  width: 21px;
  height: 21px;

  object-fit: contain;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.header-right {
  position: relative;

  min-width: 32px;
  height: 100%;

  margin-left: auto;

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

  gap: 8px;

  z-index: 60;
}

.detail-share-button {
  padding: 0;

  border: none;

  background: transparent;

  color: #52aead;

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

  white-space: nowrap;

  cursor: pointer;
}

.more-button {
  width: 30px;
  height: 36px;

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

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;
}

.more-button img {
  display: block;

  width: 20px;
  height: 20px;

  object-fit: contain;
}


/* =========================================================
   MORE MENU
========================================================= */

.more-menu {
  position: absolute;

  top: 48px;
  right: 0;

  width: 165px;

  padding: 6px;

  background-color: #ffffff;

  border: 1px solid #e5e5e5;
  border-radius: 10px;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

  z-index: 200;
}

.more-menu-item {
  width: 100%;
  height: 42px;

  display: flex;
  align-items: center;

  padding: 0 12px;

  border: none;
  border-radius: 6px;

  background-color: #ffffff;

  color: #222222;

  font-family: inherit;

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

  text-align: left;

  cursor: pointer;
}

.more-menu-item:hover {
  background-color: #f6f6f6;
}

.more-menu-item.delete {
  color: #e85d5d;
}


/* =========================================================
   MAIN RESULT
========================================================= */

.result-list-view {
  flex: 1 1 auto;
  min-height: 0;

  padding: 18px 16px 125px;

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

  background-color: #ffffff;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  scrollbar-width: none;
}

.result-list-view::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   PROGRESS
========================================================= */

.settlement-progress-section {
  width: 100%;

  margin-bottom: 18px;

  padding: 16px;

  background-color: #ffffff;

  border: 1px solid #dddddd;
  border-radius: 10px;
}

.progress-title-row {
  width: 100%;

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

  margin-bottom: 12px;
}

.progress-title-row h2 {
  margin: 0;

  color: #222222;

  font-size: 13px;
  font-weight: 700;
}

#progressPercent {
  color: #52aead;

  font-size: 13px;
  font-weight: 700;
}

.progress-bar {
  width: 100%;
  height: 7px;

  overflow: hidden;

  background-color: #eeeeee;

  border-radius: 999px;
}

.progress-bar-fill {
  width: 0%;
  height: 100%;

  background-color: #52aead;

  border-radius: inherit;

  transition: width 0.25s ease;
}

.progress-description {
  margin: 9px 0 0;

  color: #999999;

  font-size: 11px;
}


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

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

  display: flex;
  flex-direction: column;

  gap: 12px;
}

.participant-result-card {
  width: 100%;
  min-height: 72px;

  display: flex;
  align-items: center;

  padding: 14px 16px;

  background-color: #ffffff;

  border: 1px solid #dddddd;
  border-radius: 10px;

  font-family: inherit;

  text-align: left;

  cursor: pointer;
}

.participant-result-card:hover {
  background-color: #fafafa;
}

.participant-profile {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  border: none;
  border-radius: 50%;
}

.participant-name {
  min-width: 0;

  margin-left: 11px;

  color: #222222;

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

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-card-right {
  margin-left: auto;
  padding-left: 12px;

  display: flex;
  align-items: center;

  gap: 7px;

  flex-shrink: 0;
}

.participant-status {
  color: #999999;

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

  white-space: nowrap;
}

.participant-status.complete {
  color: #52aead;
}

.participant-arrow {
  color: #aaaaaa;

  font-size: 17px;

  line-height: 1;
}


/* =========================================================
   EMPTY
========================================================= */

.result-empty-state {
  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.empty-title {
  margin: 0 0 8px;

  color: #333333;

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

.empty-description {
  margin: 0;

  color: #999999;

  font-size: 12px;
}


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

.person-detail-view {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;

  background-color: #ffffff;

  overflow: hidden;
}


/* =========================================================
   DETAIL SCROLL AREA
========================================================= */

.person-detail-content {
  flex: 1 1 auto;
  min-height: 0;

  padding: 18px 16px;

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

  background-color: #ffffff;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  scrollbar-width: none;
}

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


/* =========================================================
   TRANSFER LIST
========================================================= */

.transfer-list {
  width: 100%;

  display: flex;
  flex-direction: column;

  gap: 14px;
}

.transfer-card {
  width: 100%;

  padding: 18px 16px;

  background-color: #ffffff;

  border: 1px solid #dddddd;
  border-radius: 10px;
}

.transfer-card.complete {
  background-color: #fafafa;
}

.transfer-recipient {
  margin: 0 0 18px;

  color: #222222;

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

.transfer-amount {
  margin: 0 0 18px;

  color: #111111;

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

  line-height: 1.2;

  text-align: right;
}


/* =========================================================
   ACCOUNT
========================================================= */

.account-info {
  width: 100%;

  padding: 11px 12px;

  background-color: #ffffff;

  border: 1px solid #e1e1e1;
  border-radius: 8px;
}

.account-owner {
  margin: 0 0 5px;

  color: #444444;

  font-size: 10px;
  font-weight: 600;
}

.account-number-row {
  width: 100%;

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

  gap: 10px;
}

.account-number {
  min-width: 0;

  color: #555555;

  font-size: 11px;

  word-break: break-all;
}

.no-account-message {
  margin: 0;

  color: #999999;

  font-size: 11px;
}

.copy-account-button {
  flex-shrink: 0;

  padding: 0;

  border: none;

  background: transparent;

  color: #52aead;

  font-family: inherit;

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

  cursor: pointer;
}


/* =========================================================
   COMPLETE LABEL
========================================================= */

.transfer-complete-label {
  margin-top: 12px;

  color: #52aead;

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

  text-align: right;
}


/* =========================================================
   NO TRANSFER
========================================================= */

.no-transfer-state {
  min-height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.no-transfer-title {
  margin: 0 0 8px;

  color: #333333;

  font-size: 16px;
  font-weight: 600;
}

.no-transfer-description {
  margin: 0;

  color: #999999;

  font-size: 12px;
}


/* =========================================================
   DETAIL BOTTOM

   중요:
   person-detail-view가 flex column이므로
   fixed/absolute 필요 없음.
   항상 화면 하단에 남고
   위 content만 스크롤됨.
========================================================= */

.detail-bottom-area {
  width: 100%;

  flex: 0 0 auto;

  padding: 10px 16px 20px;

  background-color: #ffffff;

  z-index: 20;
}

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

  border: none;
  border-radius: 7px;

  background-color: #52aead;

  color: #ffffff;

  font-family: inherit;

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

  cursor: pointer;
}

.transfer-complete-button:disabled {
  background-color: #cccccc;

  color: #ffffff;

  cursor: default;
}


/* =========================================================
   MAIN BOTTOM
========================================================= */

.result-bottom-area {
  position: fixed;

  left: 50%;
  bottom: 14px;

  width: calc(100% - 32px);
  max-width: 358px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  background-color: #ffffff;

  transform: translateX(-50%);

  z-index: 100;
}

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

  border: 1px solid #52aead;
  border-radius: 7px;

  background-color: #ffffff;

  color: #52aead;

  font-family: inherit;

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

  cursor: pointer;
}

.home-button {
  align-self: center;

  width: auto;
  height: auto;

  margin-top: 2px;

  padding: 4px 12px;

  border: none;

  background: none;

  color: #aaaaaa;

  font-family: inherit;

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

  cursor: pointer;
}


/* =========================================================
   DELETE
========================================================= */

.delete-room-overlay {
  position: fixed;

  inset: 0;

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

  padding: 20px;

  background-color: rgba(0, 0, 0, 0.42);

  z-index: 1000;
}

.delete-room-modal {
  width: 100%;
  max-width: 320px;

  padding: 22px 18px 16px;

  background-color: #ffffff;

  border-radius: 12px;
}

.delete-room-modal h2 {
  margin: 0 0 10px;

  color: #222222;

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

.delete-room-modal p {
  margin: 0 0 22px;

  color: #777777;

  font-size: 12px;

  line-height: 1.5;
}

.delete-room-actions {
  display: flex;

  gap: 8px;
}

.delete-room-actions button {
  flex: 1;

  height: 42px;

  border-radius: 7px;

  font-family: inherit;

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

  cursor: pointer;
}

.delete-cancel-button {
  border: 1px solid #dddddd;

  background-color: #ffffff;

  color: #444444;
}

.delete-confirm-button {
  border: none;

  background-color: #e85d5d;

  color: #ffffff;
}


/* =========================================================
   HIDDEN
========================================================= */

[hidden] {
  display: none !important;
}

/* =========================================================
   송금 카드 선택
========================================================= */

/* 아직 완료되지 않아 선택 가능한 카드 */
.transfer-card.selectable {
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* 선택된 송금 카드 */
.transfer-card.selected {
  border: 1.5px solid #52aead;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px rgba(82, 174, 173, 0.08);
}

/* 완료된 카드는 선택 커서 제거 */
.transfer-card.complete {
  cursor: default;
}

/* 송금완료 버튼 - 선택 전 */
#transferCompleteButton:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 송금완료 버튼 - 송금 카드 선택 후 */
#transferCompleteButton:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}