/* 가계 — 따뜻한 무채색. 경고색(빨강) 없음. 숫자만 조용히 보여준다. */
:root {
  --bg: #14110f;
  --surface: #1e1a17;
  --line: #2f2823;
  --txt: #f2ece5;
  --dim: #8d817a;
  --accent: #d9a45b;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* display 를 명시한 요소가 hidden 을 무시하는 것 방지 */

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-user-select: none; user-select: none;
}

.screen {
  min-height: 100dvh;
  max-width: 460px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);
  display: flex;
  flex-direction: column;
}

/* ── 이번 달 총 지출 (주인공) ── */
.month { text-align: center; padding: 6px 0 2px; }
.month-label { font-size: 12.5px; color: var(--dim); letter-spacing: .04em; }
.month-total {
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}

/* ── 입력 중인 금액 ── */
.draft {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 96px;
}
.draft-amount {
  font-size: 52px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  transition: color .15s;
}
.draft-amount.on { color: var(--txt); }

/* ── 키패드 ── */
.pad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.key {
  height: 62px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--txt);
  font-size: 22px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .1s, transform .1s;
}
.key:active { background: #2a2320; transform: scale(.96); }
.key-back { color: var(--dim); font-size: 19px; }

/* ── 카테고리 (옵션) ──
   고르지 않은 상태가 기본이자 정상이다. 그래서 평소엔 눈에 띄지 않게 두고,
   고른 것만 밝아진다. "골라야 할 것 같은" 압박을 주지 않는 게 핵심. */
.cats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; justify-content: center;
}
.cat {
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.cat:active { background: var(--surface); }
.cat.on {
  color: var(--accent); border-color: var(--accent);
  background: rgba(217, 164, 91, .1);
}

/* ── 기록 버튼 ── */
.save {
  margin-top: 12px; height: 56px; border-radius: 14px; border: none;
  background: var(--accent); color: #241a0c;
  font-size: 16px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity .15s, transform .1s;
}
.save:disabled { opacity: .28; cursor: default; }
.save:not(:disabled):active { transform: scale(.98); }

/* ── 오늘 기록 ── */
.today { margin-top: 16px; min-height: 40px; }
.today-head { font-size: 11.5px; color: var(--dim); margin-bottom: 7px; letter-spacing: .04em; }
.today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.today-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line);
  animation: pop .22s ease-out;
}
.today-item .amt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.today-item .memo { flex: 1; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-item .del {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  border: none; background: transparent; color: var(--dim);
  font-size: 15px; cursor: pointer; font-family: inherit;
}
.today-item .del:active { background: #2a2320; }
.today-item.going { opacity: 0; transform: translateX(14px); transition: opacity .18s, transform .18s; }

@keyframes pop { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ── 잠금 화면 ── */
.lock-screen { justify-content: center; }
.lock { display: flex; flex-direction: column; gap: 12px; }
.lock-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.lock-input {
  height: 56px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); color: var(--txt);
  font-size: 20px; text-align: center; font-family: inherit; letter-spacing: .3em;
}
.lock-input:focus { outline: none; border-color: var(--accent); }
.lock-msg { text-align: center; font-size: 12.5px; color: var(--dim); }