/* =========================
   HOME
========================= */

body {
  margin: 0;

  background-color: #f5f5f5;
}

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

.home-screen {
  position: relative;

  width: 100%;
  max-width: 390px;

  height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;

  background-color: #ffffff;
}

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

.home-header {
  flex-shrink: 0;
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #222222;
  box-sizing: border-box;
  background-color: #ffffff;

  position: relative;
  z-index: 10;
  overflow: visible;
}

/* =========================
   상단 아이콘
========================= */

.header-icons {
  display: flex;

  align-items: center;

  gap: 10px;
}

.icon-button {
  width: 34px;

  height: 34px;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 0;

  border: none;

  background: none;

  cursor: pointer;
}

.icon-button img {
  width: 25px;

  height: 25px;

  display: block;

  object-fit: contain;
}

/* =========================
   메인 내용
========================= */

.home-content {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  padding: 14px 16px 0;

  overflow: hidden;

  box-sizing: border-box;
}

/* =========================
   정산 시작 카드
========================= */

.start-card {
  flex-shrink: 0;

  padding: 16px;

  margin-bottom: 14px;

  border: 1px solid #52aead;

  border-radius: 10px;

  box-sizing: border-box;

  background-color: #ffffff;
}

.start-card h2 {
  margin: 0;

  font-size: 18px;

  font-weight: 700;
}

.start-card p {
  margin: 7px 0 20px;

  font-size: 12px;

  color: #444444;
}

/* =========================
   정산 시작 버튼
========================= */

.start-button {
  width: fit-content;

  margin-left: auto;

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 8px 14px;

  border-radius: 20px;

  background-color: #52aead;

  color: #ffffff;

  text-decoration: none;

  font-size: 13px;

  font-weight: 600;
}

.plus-small {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #52aead;
  font-size: 14px;
  font-weight: 700;
  
  /* 세로/가로 정중앙 정렬 핵심 */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  box-sizing: border-box;
  padding-bottom: 1px; /* 폰트 baseline 때문에 살짝 위로 뜨는 현상 보정 */
}

/* =========================
   진행 중인 정산
========================= */

.settlement-section {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;
}

.section-title {
  flex-shrink: 0;

  margin: 0 0 8px;

  font-size: 14px;

  font-weight: 700;
}

/* =========================
   정산방 목록
========================= */

#settlementList {
  flex: 1;

  min-height: 0;

  overflow-y: auto;

  overflow-x: hidden;

  padding-bottom: 10px;

  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}

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

/* =========================
   정산방 카드
========================= */

.settlement-card {
  width: 100%;

  padding: 14px 16px;

  margin-bottom: 10px;

  border: 1px solid #dddddd;

  border-radius: 10px;

  box-sizing: border-box;

  background-color: #ffffff;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

.settlement-card:active {
  background-color: #fafafa;

  transform: scale(0.995);
}

/* =========================
   카드 제목
========================= */

.settlement-title {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;

  font-size: 13px;
}

.settlement-room-name {
  color: #222222;

  font-weight: 500;
}

.settlement-progress-count {
  color: #555555;

  font-size: 12px;
}

/* =========================
   진행도 바
========================= */

.progress-bar {
  width: 100%;

  height: 35px;

  overflow: hidden;

  border: 1px solid #999999;

  border-radius: 9px;

  box-sizing: border-box;

  background-color: #ffffff;
}

.progress-fill {
  min-width: 0;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #52aead;

  color: #ffffff;

  font-size: 12px;

  font-weight: 600;

  transition: width 0.25s ease;
}

/* 진행도 0%일 때 */

.progress-fill.zero {
  color: #777777;

  background-color: transparent;
}

/* =========================
   하단 메뉴
========================= */
.bottom-nav {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 72px;
  display: flex;
  justify-content: space-between; /* 양 끝 균등 분할 */
  align-items: center;
  padding: 0 10px;               /* 화면 가장자리 여백 */
  box-sizing: border-box;
  background-color: #ffffff;
  z-index: 30;
}

.nav-center-space {
  flex: 1;                       /* 가운데 빈 공간도 1비율 */
  height: 72px;
  pointer-events: none;          /* 터치 방해 금지 */
}

/* =========================
   하단 메뉴 아이템
========================= */
.nav-item {
  flex: 1;                       /* 정산방, 마이페이지를 정확히 같은 1비율로 설정 */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: #222222;
  font-size: 11px;
  text-decoration: none;
}

/* =========================
   가운데 +
========================= */
.main-add-button {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  width: 54px;
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  padding-bottom: 3px; /* '+' 기호의 시각적 수직 중심 보정 */
  border: none;
  border-radius: 50%;
  background-color: #52aead;
  color: #ffffff;
  font-size: 34px;      /* 38px에서 살짝 줄여 여백 확보 */
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  z-index: 70;
  box-sizing: border-box;
}

/* =========================
   어두운 오버레이
========================= */

.settlement-overlay {
  display: none;

  position: absolute;

  inset: 0;

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

  z-index: 40;
}

.settlement-overlay.active {
  display: block;
}

/* =========================
   선택 메뉴
========================= */

.settlement-menu {
  position: absolute;

  left: 50%;

  bottom: 62px;

  transform: translateX(-50%);

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding-bottom: 70px;

  box-sizing: border-box;

  background: none;

  z-index: 50;
}

.settlement-menu a,
.settlement-menu button {
  position: relative;

  z-index: 53;

  padding: 0 12px;

  border: none;

  background: none;

  color: #ffffff;

  font-size: 13px;

  font-weight: 600;

  text-decoration: none;

  white-space: nowrap;

  cursor: pointer;
}

.menu-divider {
  position: relative;

  z-index: 53;

  width: 1px;

  height: 24px;

  background-color: rgba(255, 255, 255, 0.9);
}

/* =========================
   그라데이션 삼각형
========================= */

.settlement-menu::after {
  content: "";

  position: absolute;

  left: 50%;

  top: 18px;

  transform: translateX(-50%);

  width: 230px;

  height: 125px;

  background: linear-gradient(
    to bottom,
    rgba(82, 174, 173, 0),
    rgba(82, 174, 173, 0.18) 25%,
    rgba(82, 174, 173, 0.48) 65%,
    rgba(82, 174, 173, 0.75) 100%
  );

  clip-path: polygon(0 0, 100% 0, 50% 100%);

  z-index: 51;

  pointer-events: none;
}

/* =========================
   홈 더보기
========================= */

/* 버튼을 감싸는 영역 */
.home-more-wrapper {
  position: static;

  width: 34px;
  height: 34px;

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


/* =========================
   더보기 메뉴
========================= */

#homeMoreMenu {
  position: absolute;

  /* home-header 기준 */
  top: 70px;
  right: 16px;

  width: 180px;

  padding: 6px;

  box-sizing: border-box;

  background-color: #ffffff;

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

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

  z-index: 9999;
}


/* =========================
   숨김
========================= */

#homeMoreMenu[hidden] {
  display: none !important;
}


/* =========================
   메뉴 항목
========================= */

#homeMoreMenu .home-more-item {
  width: 100%;
  height: 42px;

  display: flex;
  align-items: center;

  padding: 0 12px;

  box-sizing: border-box;

  background-color: #ffffff;

  color: #222222 !important;

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

  text-decoration: none !important;

  border-radius: 6px;
}


/* =========================
   hover
========================= */

#homeMoreMenu .home-more-item:hover {
  background-color: #f5f5f5;
}