/* ============================================
   1. 기본 설정 (Reset & 폰트)
   ============================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #F7F8FA; /* 연한 그레이 캔버스 */
  color: #222630; /* 기본 글자색: 진회색 */
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 16px; /* 모바일에서 읽기 편한 기본 크기 */
  line-height: 1.5;
  padding: 20px 16px;
}

/* 
  모바일(대략 폰 화면 폭)에서는 여백을 살짝 줄이고,
  자잘한 보조 텍스트들도 최소 13px는 유지되게 키워요.
  -> 작은 글씨가 안 보인다는 문제의 핵심 대응
*/
@media (max-width: 480px) {
  body {
    padding: 16px 12px;
  }

  .chore-amount,
  .compare-month,
  .compare-amount,
  .history-row,
  .donut-label small {
    font-size: 13px !important;
  }

  .chore-name {
    font-size: 16px;
  }

  h2 {
    font-size: 18px;
  }
}

/* ============================================
   2. header & nav (탭 메뉴)
   ============================================ */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

h1 {
  font-size: 22px;
  font-weight: 700;
  color: #222630;
}

nav {
  display: flex;
  gap: 8px;
}

/* 탭 버튼: 참고 화면처럼 알약(pill) 모양 */
nav button {
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 999px; /* 999px -> 완전히 둥근 알약 모양 */
  padding: 10px 18px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #9AA0AC;
  cursor: pointer;
  transition: all 0.15s ease;
}

nav button:hover {
  border-color: #4C7EFF;
  color: #4C7EFF;
}

/* 지금 선택된 탭 -> 진하게 채워진 블루 */
nav button.active {
  background: #4C7EFF;
  border-color: #4C7EFF;
  color: #FFFFFF;
}

/* ============================================
   3. main & section
   ============================================ */

main {
  max-width: 480px; /* 참고 화면처럼 모바일 폭에 가깝게 */
  margin: 0 auto;
}

h2 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #222630;
}

#kid-view h2 {
  text-align: center; /* "오늘, ~월 ~일" 제목만 가운데 정렬 */
}

/* ============================================
   4. 집안일 카드 (깔끔한 리스트 로우 스타일)
   ============================================ */

.chore-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 14px; /* 참고 화면 카드처럼 큼직하게 라운드 */
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(34, 38, 48, 0.04); /* 아주 은은한 그림자 */
}

.chore-name {
  font-weight: 600;
  font-size: 15px;
  color: #222630;
}

.chore-amount {
  color: #9AA0AC; /* 금액은 보조색으로, 튀지 않게 */
  font-weight: 600;
  font-size: 14px;
  margin-left: 12px;
  margin-right: auto;
  padding-left: 12px;
}

/* 완료 체크 버튼: 참고 화면의 파란 체크 원처럼 */
.chore-check {
  background: #FFFFFF;
  border: 2px solid #D7DCE5; /* 아직 안 눌렀을 때: 연회색 테두리 */
  color: #9AA0AC;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chore-check:hover {
  border-color: #4C7EFF;
  background: #4C7EFF;
  color: #FFFFFF;
}

/* ============================================
   5. 오늘 합계 문구
   ============================================ */

#kid-view p {
  text-align: right;
  font-size: 14px;
  color: #9AA0AC;
  margin-top: 8px;
}

#today-total {
  color: #222630;
  font-size: 18px;
  font-weight: 700;
}

/* ============================================
   6. footer (총액 요약 바)
   ============================================ */

footer {
  max-width: 480px;
  margin: 32px auto 0;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  color: #9AA0AC;
  text-align: center;
  padding: 18px;
  border-radius: 14px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(34, 38, 48, 0.04);
}

#month-total {
  color: #4C7EFF;
  font-size: 20px;
  font-weight: 700;
}

/* ============================================
   7. 도넛 프로그레스 (이번 달 목표 대비)
   ============================================ */

.donut-wrap {
  position: relative;      /* 안쪽 라벨(%)을 절대위치로 겹치기 위한 기준점 */
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
}

.donut {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* 12시 방향에서 시작하도록 회전 */
}

.donut-bg {
  fill: none;
  stroke: #ECEDF1; /* 배경 트랙 색 */
  stroke-width: 10;
}

.donut-progress {
  fill: none;
  stroke: #4C7EFF; /* 진행률 색 */
  stroke-width: 10;
  stroke-linecap: round;      /* 끝을 둥글게, 참고 화면처럼 */
  stroke-dasharray: 327;      /* 반지름 52의 원둘레(2*π*52 ≈ 327) */
  stroke-dashoffset: 327;     /* 시작은 0% -> 전체 숨김 */
  transition: stroke-dashoffset 0.4s ease; /* 값 바뀔 때 부드럽게 채워짐 */
}

.donut-label {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left 모두 0 -> wrap 전체를 꽉 채움 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-label span {
  font-size: 24px;
  font-weight: 700;
  color: #222630;
}

.donut-label small {
  font-size: 11px;
  color: #9AA0AC;
  margin-top: 2px;
}

/* ============================================
   8. 체크 버튼 상태 (대기중 / 승인완료)
   ============================================ */

/* 대기중: 노란빛 상태 표시 */
.chore-check.pending {
  border-color: #F0AC4D;
  background: #F0AC4D;
  color: #FFFFFF;
}

/* 승인완료: 파란색으로 꽉 채움, 더 이상 누를 필요 없음을 표현 */
.chore-check.approved {
  border-color: #4C7EFF;
  background: #4C7EFF;
  color: #FFFFFF;
  cursor: default;
}

/* ============================================
   9. 부모 화면 - 승인 대기 카드
   ============================================ */

.pending-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(34, 38, 48, 0.04);
}

.approve-btn {
  background: #4C7EFF;
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.empty-msg {
  color: #9AA0AC;
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
}

/* ============================================
   10. 항목 관리 화면
   ============================================ */

.manage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.manage-row .edit-name {
  flex: 1; /* 남는 공간을 이름 입력칸이 다 차지 */
}

.manage-row .edit-amount {
  width: 90px;
}

.manage-row input {
  border: 1px solid #ECEDF1;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: #222630;
}

.manage-row input:focus {
  outline: none;
  border-color: #4C7EFF; /* 입력 중인 칸을 파란 테두리로 표시 */
}

.delete-btn {
  background: #FFF1F1;
  color: #E0554F;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* 새 항목 추가 폼 */
.add-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.add-form input {
  border: 1px solid #ECEDF1;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
}

.add-form input:focus {
  outline: none;
  border-color: #4C7EFF;
}

#new-chore-name {
  flex: 1;
}

#new-chore-amount {
  width: 100px;
}

.add-form button {
  background: #222630;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================
   11. 목표 금액 설정 줄
   ============================================ */

.goal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
}

.goal-row label {
  font-size: 14px;
  font-weight: 600;
  color: #222630;
}

.goal-row input {
  width: 100px;
  border: 1px solid #ECEDF1;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  text-align: right;
}

.goal-row input:focus {
  outline: none;
  border-color: #4C7EFF;
}

/* ============================================
   12. 날짜 이동 UI
   ============================================ */

.date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.date-nav button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ECEDF1;
  background: #FFFFFF;
  color: #222630;
  font-size: 16px;
  cursor: pointer;
}

.date-nav button:hover {
  border-color: #4C7EFF;
  color: #4C7EFF;
}

.date-nav input[type="date"] {
  border: 1px solid #ECEDF1;
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  color: #9AA0AC;
}

/* ============================================
   13. 이 달 기록 목록
   ============================================ */

.history-title {
  margin-top: 28px;
}

/* 아코디언 헤더 버튼: 제목 + 화살표 */
.history-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  border-top: 1px solid #ECEDF1;
  padding: 16px 4px;
  margin-top: 12px;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #222630;
  cursor: pointer;
}

.toggle-arrow {
  display: inline-block;
  color: #9AA0AC;
  transition: transform 0.2s ease; /* 회전할 때 부드럽게 */
}

/* 펼쳐진 상태(.open)일 땐 화살표를 180도 뒤집어서 위를 향하게 */
.history-toggle.open .toggle-arrow {
  transform: rotate(180deg);
}

#history-list {
  margin-top: 8px;
}

.history-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 8px;
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  color: #9AA0AC;
  cursor: pointer;
  transition: all 0.15s ease;
}

.history-row:hover {
  border-color: #4C7EFF;
}

/* 지금 보고 있는 날짜는 강조 표시 */
.history-row.active {
  border-color: #4C7EFF;
  background: #EEF3FF;
  color: #222630;
  font-weight: 600;
}

/* ============================================
   14. 아이 화면 상단 행 (날짜이동 + 비교버튼)
   ============================================ */

.kid-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

/* 날짜이동 UI가 가운데 정렬되던 걸, 상단 행 안에서는 왼쪽 여백을 채워 균형 맞춤 */
.kid-top-row .date-nav {
  flex: 1;
  margin-bottom: 0;
  justify-content: center;
}

.compare-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #ECEDF1;
  background: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0; /* 날짜이동 UI가 늘어나도 이 버튼 크기는 그대로 유지 */
}

.compare-btn:hover {
  border-color: #4C7EFF;
}

/* ============================================
   15. 월별 비교 화면
   ============================================ */

.compare-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.compare-header button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ECEDF1;
  background: #FFFFFF;
  font-size: 16px;
  cursor: pointer;
}

.compare-header h2 {
  margin-bottom: 0;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #ECEDF1;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

/* 지금 보고 있는 달은 강조 */
.compare-row.current {
  border-color: #4C7EFF;
  background: #EEF3FF;
}

.compare-month {
  width: 68px;
  font-size: 13px;
  font-weight: 600;
  color: #9AA0AC;
  flex-shrink: 0;
}

.compare-row.current .compare-month {
  color: #4C7EFF;
}

.compare-bar-track {
  flex: 1;
  height: 10px;
  background: #ECEDF1;
  border-radius: 999px;
  overflow: hidden; /* 안쪽 fill이 track의 둥근 모서리 밖으로 튀어나오지 않게 */
}

.compare-bar-fill {
  height: 100%;
  background: #4C7EFF;
  border-radius: 999px;
}

.compare-amount {
  width: 84px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #222630;
  flex-shrink: 0;
}

/* ============================================
   16. 비밀번호 모달
   ============================================ */

.modal-overlay {
  position: fixed;   /* 스크롤해도 화면에 고정 */
  inset: 0;           /* top/right/bottom/left 전부 0 -> 화면 전체를 덮음 */
  background: rgba(34, 38, 48, 0.45); /* 반투명 어두운 배경 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;       /* 다른 요소들보다 항상 위에 오도록 */
}

/* 
  중요: 위에서 display: flex를 줬기 때문에, 
  브라우저 기본 hidden 속성(원래는 자동으로 display: none 처리)이 
  이 규칙에 밀려서 무시되고 있었어요. 그래서 페이지를 열자마자 
  모달이 항상 보이는 버그가 생겼던 거예요.
  hidden이 붙어있을 땐 무조건 안 보이도록 아래 규칙으로 확실히 덮어써요.
*/
.modal-overlay[hidden] {
  display: none;
}

.modal-box {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  width: 260px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(34, 38, 48, 0.15);
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #222630;
  margin-bottom: 14px;
}

#password-input {
  width: 100%;
  border: 1px solid #ECEDF1;
  border-radius: 10px;
  padding: 12px;
  font-size: 20px;
  text-align: center;
  letter-spacing: 4px; /* 숫자 사이 간격을 넓혀서 비밀번호 입력칸 느낌 */
}

#password-input:focus {
  outline: none;
  border-color: #4C7EFF;
}

.error-msg {
  color: #E0554F;
  font-size: 12px;
  margin-top: 8px;
}

.modal-buttons {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.modal-buttons button {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.modal-cancel {
  background: #F1F2F5;
  color: #9AA0AC;
}

.modal-confirm {
  background: #4C7EFF;
  color: #FFFFFF;
}

/* ============================================
   17. 기타 항목 카드 (이름/금액 직접 입력)
   ============================================ */

.custom-card {
  gap: 8px;
}

.custom-name-input,
.custom-amount-input {
  border: 1px solid #ECEDF1;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  color: #222630;
}

.custom-name-input {
  flex: 1; /* 이름 입력칸이 남는 공간을 다 차지 */
  min-width: 0; /* flex 안에서 input이 너무 넓어지는 걸 방지 */
}

.custom-amount-input {
  width: 80px;
  flex-shrink: 0;
}

.custom-name-input:focus,
.custom-amount-input:focus {
  outline: none;
  border-color: #4C7EFF;
}

/* 체크되고 나면(대기중/완료) 입력칸이 잠기는데, 잠긴 상태를 흐릿하게 표시 */
.custom-name-input:disabled,
.custom-amount-input:disabled {
  background: #F7F8FA;
  color: #9AA0AC;
}