/* ==========================================================================
   mvexpense — global styles
   Design language: a ledger, not a fintech dashboard.
     · Palette grounded in Korean banknotes — 만원권 green as the accent,
       seal red for "went up / over".
     · IBM Plex Sans KR for text, IBM Plex Mono for every ₩ figure, so amounts
       line up in columns the way they do on a statement.
   Mobile-first. Desktop is a deliberate second layout, not a stretched phone.
   ========================================================================== */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;
  --paper:#F1F4EF;
  --surface:#FBFCFA;
  --surface-2:#E9EDE6;
  --ink:#10161A;
  --ink-2:#465049;
  --ink-3:#77817A;
  --line:#D9E0D8;
  --line-2:#C3CDC1;
  --accent:#1A6B4A;
  --accent-ink:#FFFFFF;
  --accent-2:#DCEAE1;
  --alarm:#A8382A;
  --alarm-2:#F5E1DD;
  --s1:#2a78d6;
  --s2:#eb6834;
  --grid:#E4EAE2;
  --focus:#1A6B4A;
  --shadow:0 1px 2px rgba(16,22,26,.06), 0 8px 24px -12px rgba(16,22,26,.18);

  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --sans:"IBM Plex Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;

  --r:3px;                 /* the app's one radius — a ledger has square rules */
  --tap:44px;              /* minimum touch target */
  --page:clamp(16px,4vw,24px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#101410;
    --surface:#1A1F1B;
    --surface-2:#232922;
    --ink:#EDF2EA;
    --ink-2:#A9B5A9;
    --ink-3:#7D877E;
    --line:#2B322B;
    --line-2:#3A423A;
    --accent:#5FB489;
    --accent-ink:#0B1410;
    --accent-2:#1E2E26;
    --alarm:#E4796A;
    --alarm-2:#33201D;
    --s1:#3987e5;
    --s2:#d95926;
    --grid:#242B24;
    --focus:#5FB489;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#101410;
  --surface:#1A1F1B;
  --surface-2:#232922;
  --ink:#EDF2EA;
  --ink-2:#A9B5A9;
  --ink-3:#7D877E;
  --line:#2B322B;
  --line-2:#3A423A;
  --accent:#5FB489;
  --accent-ink:#0B1410;
  --accent-2:#1E2E26;
  --alarm:#E4796A;
  --alarm-2:#33201D;
  --s1:#3987e5;
  --s2:#d95926;
  --grid:#242B24;
  --focus:#5FB489;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* ── base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

/* [hidden] has to win. The browser's own rule is a bare attribute selector, so
   any class that sets `display` beats it — and this app sets display:flex on
   .stack, .hero, .msg and half a dozen others. Elements were being marked
   hidden in JavaScript and staying on screen. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;          /* 16px minimum: anything less and iOS zooms on focus */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Safe areas, so a PWA on a notched phone does not tuck content under the
     status bar or the home indicator. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
  min-height:100dvh;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(24px,6vw,32px); line-height:1.15}
h2{font-size:20px}
h3{font-size:17px}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Every ₩ figure wears this. tabular-nums is what makes a column of amounts
   line up on the digit rather than drifting. */
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* ── layout ──────────────────────────────────────────────────────────────── */
.mv-shell{max-width:520px; margin:0 auto; padding:0 var(--page)}
.mv-shell--wide{max-width:1180px}
.stack{display:flex; flex-direction:column; gap:16px}
.stack--tight{gap:10px}

/* ── forms ───────────────────────────────────────────────────────────────── */
.field{display:flex; flex-direction:column; gap:6px}
.field > label{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
}
.field .hint{font-size:12.5px; color:var(--ink-3)}
.input{
  font:inherit; font-size:16px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r);
  padding:12px 13px; width:100%; min-height:var(--tap);
  transition:border-color .12s, box-shadow .12s;
}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-2)}
.input[aria-invalid="true"]{border-color:var(--alarm)}

.check{
  display:flex; align-items:flex-start; gap:10px;
  min-height:var(--tap); padding:4px 0; cursor:pointer;
}
.check input{
  width:20px; height:20px; margin:2px 0 0; flex:0 0 auto;
  accent-color:var(--accent); cursor:pointer;
}
.check .t{font-size:14px; line-height:1.45}
.check .t small{display:block; color:var(--ink-3); font-size:12.5px}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:15px;
  min-height:var(--tap); padding:12px 18px;
  border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; text-decoration:none;
  transition:background-color .12s, border-color .12s, opacity .12s;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--accent); color:var(--accent-ink)}
.btn--primary:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--block{width:100%}
.btn[disabled],.btn[aria-busy="true"]{opacity:.6; cursor:default; pointer-events:none}

/* ── messages ────────────────────────────────────────────────────────────── */
/* Always rendered, toggled with [hidden] — a message container that only
   exists once there is a message cannot be announced by a screen reader,
   because the live region has to be in the DOM before the text arrives. */
.msg{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; border-radius:var(--r); font-size:14px; line-height:1.5;
  border-left:3px solid transparent;
}
.msg--error{background:var(--alarm-2); color:var(--alarm); border-left-color:var(--alarm)}
.msg--ok{background:var(--accent-2); color:var(--accent); border-left-color:var(--accent)}
.msg[hidden]{display:none}

/* ── cards ───────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px;
}

/* Shared role/status chip. Lives here because both the home list and the
   household screen use it. */
.pill{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  padding:3px 9px; border-radius:2px;
  background:var(--accent-2); color:var(--accent); white-space:nowrap;
}

/* ── utility ─────────────────────────────────────────────────────────────── */
.muted{color:var(--ink-2)}
.small{font-size:13px}
.center{text-align:center}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}