/* ===================================================================
   불규칙 수입 대학생을 위한 지출 관리 서비스 - 메인 화면 스타일
   색깔과 크기만 담당합니다. 무엇이 있는지는 index.html, 숫자는 app.js
   =================================================================== */

/* :root = 문서 전체. 자주 쓰는 색을 이름으로 미리 정해 두면
   나중에 색을 바꿀 때 이 부분만 고치면 됩니다 */
:root {
  --bg:        #f4f5f7;   /* 배경 */
  --card:      #ffffff;   /* 카드 흰색 */
  --text:      #1c1d21;   /* 기본 글자 */
  --muted:     #8a8f98;   /* 흐린 글자 (설명용) */
  --line:      #e6e8ec;   /* 구분선 */
  --point:     #2f6bff;   /* 강조 파랑 */
  --safe:      #2eb872;   /* 여유 있음 (초록) */
  --warn:      #f2a93b;   /* 주의 (주황) */
  --danger:    #ef4a4a;   /* 빠듯함 (빨강) */
}

/* * = 모든 요소. 브라우저마다 다른 기본 여백을 없애 출발점을 맞춥니다 */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard", "Apple SD Gothic Neo", "맑은 고딕",
               "Malgun Gothic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 휴대폰 화면 크기를 기준으로 만들고, PC에서는 가운데 정렬합니다 */
.phone {
  max-width: 420px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  padding-bottom: 72px;   /* 하단 탭바에 내용이 가리지 않도록 */
}

/* ---------------- 상단 : 잔액 / D-day ---------------- */
.topbar {
  display: flex;                    /* 두 덩어리를 가로로 나란히 */
  justify-content: space-between;   /* 왼쪽 끝과 오른쪽 끝으로 밀기 */
  align-items: flex-start;
  padding: 20px 20px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar-item        { display: flex; flex-direction: column; gap: 3px; }
.topbar-item--right { align-items: flex-end; }
.topbar-label { font-size: 12px; color: var(--muted); }
.topbar-value { font-size: 19px; font-weight: 700; }
.topbar-sub   { font-size: 12px; color: var(--muted); }

/* ---------------- 중앙 : 오늘의 안전 금액 ---------------- */
/* 이 화면에서 가장 크게 보여야 하는 단 하나의 숫자입니다 */
.today {
  background: var(--card);
  margin: 14px 16px;
  padding: 30px 20px 26px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.today-label  { font-size: 13px; color: var(--muted); }
.today-amount {
  font-size: 46px;         /* 다른 글자보다 훨씬 크게 */
  font-weight: 800;
  color: var(--point);
  letter-spacing: -1.5px;
  margin: 8px 0 6px;
}
.today-hint { font-size: 13px; color: var(--muted); }
/* 계산 과정 한 줄 (4차시) - 손 검산과 비교하는 용도라 작게 */
.today-formula { font-size: 11px; color: var(--muted); margin-top: 10px; }

/* ---------------- 공통 카드 블록 ---------------- */
.block {
  background: var(--card);
  margin: 14px 16px;
  padding: 18px 18px 20px;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.block-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; }

/* ---------------- 카테고리별 남은 예산 막대 ---------------- */
.category-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }

.category-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}
.category-name { font-weight: 600; }
.category-left { color: var(--muted); font-size: 12px; }

/* 막대의 회색 바탕(전체 예산) */
.bar {
  height: 9px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;    /* 안쪽 막대가 둥근 모서리를 넘지 않게 */
}
/* 실제로 채워지는 부분(쓴 금액). 너비 %는 app.js가 정합니다 */
.bar-fill { height: 100%; border-radius: 99px; }

/* 소진율에 따라 색이 달라집니다 - "빠듯한 항목은 색으로 구분" */
.bar-fill--safe   { background: var(--safe); }
.bar-fill--warn   { background: var(--warn); }
.bar-fill--danger { background: var(--danger); }

/* ---------------- 빠른 입력 버튼 ---------------- */
.quick-list { display: flex; gap: 8px; }
.quick-btn {
  flex: 1;                       /* 세 버튼이 가로를 똑같이 나눠 가짐 */
  padding: 12px 6px;
  background: #f2f4f8;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.quick-btn-name  { font-size: 13px; font-weight: 600; }
.quick-btn-price { font-size: 12px; color: var(--muted); }

.note { margin-top: 12px; font-size: 11px; color: var(--muted); }

/* ---------------- 하단 탭바 ---------------- */
.tabbar {
  position: fixed;      /* 스크롤해도 화면 아래에 붙어 있음 */
  bottom: 0;
  width: 100%;
  max-width: 420px;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1;
  padding: 14px 0 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.tab--active { color: var(--point); font-weight: 700; }
.tab--todo   { opacity: 0.45; }
/* em = 아직 안 만든 화면임을 표시하는 작은 꼬리표 */
.tab--todo em {
  display: block;
  font-style: normal;
  font-size: 10px;
  margin-top: 2px;
}

/* ===================================================================
   지출 입력 화면 (3차시에 추가)
   =================================================================== */

/* 탭바가 링크(<a>)일 때 밑줄과 기본 파란색 없애기 */
.tab { text-decoration: none; color: var(--muted); }

/* ---------------- 화면 제목 ---------------- */
.pagebar {
  padding: 20px 20px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.pagebar-title { font-size: 19px; font-weight: 700; }
.pagebar-sub   { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* 블록 제목 옆의 작은 요약 (예: 3건 · 18,000원) */
.block-title { display: flex; justify-content: space-between; align-items: baseline; }
.block-count { font-size: 12px; font-weight: 500; color: var(--muted); }

/* ---------------- 입력 폼 ---------------- */
.field { margin-bottom: 14px; }
.field-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
}
.field-hint { font-size: 11px; }

/* 입력칸 4종(숫자·선택·날짜·글자)을 같은 모양으로 맞춥니다 */
.field-input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #fbfcfd;
  color: var(--text);
}
/* 칸을 클릭했을 때 테두리를 강조색으로 */
.field-input:focus {
  outline: none;
  border-color: var(--point);
  background: #fff;
}

.form-error {
  font-size: 12px;
  color: var(--danger);
  margin: -4px 0 10px;
}

.save-btn {
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  background: var(--point);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.save-btn:active { opacity: 0.85; }

/* ---------------- 기록된 목록 ---------------- */
.record-list { list-style: none; }

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.record-item:last-child { border-bottom: none; }

.record-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.record-category { font-size: 14px; font-weight: 600; }
.record-memo {
  font-size: 12px;
  color: var(--muted);
  /* 메모가 길면 줄바꿈 대신 … 으로 줄입니다 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-date   { font-size: 11px; color: var(--muted); }
.record-amount { font-size: 15px; font-weight: 700; white-space: nowrap; }

.record-empty {
  padding: 18px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* 기록 한 줄을 지우는 버튼 (3차시) */
.record-delete {
  flex-shrink: 0;             /* 금액이 길어져도 버튼이 찌그러지지 않게 */
  margin-left: 4px;
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
}
.record-delete:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ===================================================================
   통계 화면 (5차시)
   =================================================================== */

/* 0원 예상일은 금액보다 글자가 길어서 조금 작게 */
.today-amount--sm { font-size: 34px; }

.chart-wrap { width: 100%; }

/* SVG 는 viewBox 안에서 계산하고, 실제 크기는 여기서 정합니다 */
.chart { width: 100%; height: auto; display: block; overflow: visible; }

.chart .grid   { stroke: var(--line); stroke-width: 1; }
.chart .axis   { fill: var(--muted); font-size: 9px; }
.chart .line   { fill: none; stroke: var(--point); stroke-width: 2.5;
                 stroke-linejoin: round; stroke-linecap: round; }
.chart .area   { fill: var(--point); opacity: 0.10; }

/* 0원이 되는 날 / 다음 입금일 표시선 (stroke-dasharray = 점선) */
.chart .mark          { stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .mark--zero    { stroke: var(--danger); }
.chart .mark--income  { stroke: var(--safe); }
.chart .dot--zero     { fill: var(--danger); }

.chart-empty {
  padding: 26px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------------- 범례 ---------------- */
.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 5px; }
/* display 를 지정하면 브라우저 기본 [hidden] 규칙을 덮어써서
   hidden 을 걸어도 계속 보입니다. 그래서 여기서 다시 숨겨 줍니다. */
.legend li[hidden] { display: none; }
.legend-dot { width: 9px; height: 9px; border-radius: 99px; display: inline-block; }
.legend-dot--line   { background: var(--point); }
.legend-dot--zero   { background: var(--danger); }
.legend-dot--income { background: var(--safe); }

/* ---------------- 최근 7일 막대 ---------------- */
.wbar-list {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 150px;
}
.wbar {
  flex: 1;                       /* 7개가 가로를 똑같이 나눠 가짐 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.wbar-value { font-size: 10px; color: var(--muted); height: 12px; }
/* track = 회색 배경(하루 최대치), fill = 실제 쓴 만큼 */
.wbar-track {
  flex: 1;
  width: 100%;
  background: #f2f4f8;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;         /* 막대가 아래에서 위로 자라게 */
  overflow: hidden;
}
.wbar-fill {
  width: 100%;
  background: var(--point);
  border-radius: 6px;
  min-height: 2px;
}
.wbar-day { font-size: 11px; color: var(--muted); }

/* ===================================================================
   로그인 / 사용자 띠 (6차시 · Supabase)
   =================================================================== */

/* 화면 맨 위의 "누구로 로그인했는지 + 로그아웃" 띠 */
.user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #eef2fb;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  min-height: 36px;
}
.user-bar-email {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bar-logout {
  flex-shrink: 0;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.user-bar-logout:hover { border-color: var(--point); color: var(--point); }

/* ---------------- 로그인 화면 ---------------- */
.login-wrap { padding-top: 40px; }
.login-head { padding: 0 20px 6px; text-align: center; }
.login-title { font-size: 21px; font-weight: 800; line-height: 1.45; }
.login-sub   { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* 회원가입 버튼 (저장 버튼보다 덜 강조) */
.sub-btn {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  background: transparent;
  color: var(--point);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}
.sub-btn:hover { border-color: var(--point); }

/* 성공·진행 안내 (오류는 빨강, 이건 파랑) */
.form-ok {
  font-size: 12px;
  color: var(--point);
  margin: -4px 0 10px;
}

/* 저장 중에는 버튼을 눌러도 반응하지 않게 */
.save-btn:disabled, .quick-btn:disabled { opacity: 0.5; cursor: default; }

/* 오늘 이미 쓴 돈 (중앙 카드 맨 아래) */
.today-spent {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--muted);
}

/* 기준을 넘겼을 때는 숫자를 빨갛게. 문구가 아니라 색과 숫자로만 알립니다 */
.today-amount--over { color: var(--danger); }

/* 입력칸 두 개를 한 줄에 나란히 (무슨 돈 / 얼마) */
.field-row { display: flex; gap: 10px; }
.field-col { flex: 1; min-width: 0; }

/* 처음 설정 화면의 미리보기 */
.setup-preview {
  margin: 4px 0 14px;
  padding: 14px;
  background: #f4f7ff;
  border: 1px solid #dde6ff;
  border-radius: 12px;
  text-align: center;
}
.setup-preview-label   { font-size: 11px; color: var(--muted); }
.setup-preview-amount  { font-size: 26px; font-weight: 800; color: var(--point); margin: 4px 0 2px; }
.setup-preview-formula { font-size: 11px; color: var(--muted); }

/* 지출 입력 화면 맨 위의 '오늘 한도' 띠 */
.limit-strip {
  margin: 14px 16px 0;
  padding: 12px 14px;
  background: #eef4ff;
  border: 1px solid #dbe6ff;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--point);
  text-align: center;
  line-height: 1.5;
}
/* 기준을 넘기면 색만 바뀝니다 (문구로 혼내지 않음) */
.limit-strip--over {
  background: #fff1f1;
  border-color: #ffd8d8;
  color: var(--danger);
}

/* ===================================================================
   고정지출 목록 · 알림 (개선판)
   =================================================================== */

/* 잔액 밑의 설명 한 줄 */
.balance-note {
  margin-top: -4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* 고정지출 추가 줄 : 이름 / 금액 / 결제일 / 버튼 */
.fixed-form {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.fixed-form .field-input { padding: 9px 10px; font-size: 13px; }
.fixed-name   { flex: 2.2; min-width: 0; }
.fixed-amount { flex: 2;   min-width: 0; }
.fixed-day    { flex: 1.3; min-width: 0; }
.fixed-add {
  flex-shrink: 0;
  padding: 9px 12px;
  background: var(--point);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.fixed-add:active { opacity: 0.85; }

/* 기록했을 때 아래에서 떴다 사라지는 알림 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  max-width: 340px;
  padding: 11px 18px;
  background: rgba(28, 29, 33, 0.92);
  color: #fff;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
/* display 를 지정했으므로 [hidden] 을 다시 살려 줍니다 */
.toast[hidden] { display: none; }